Uni/WME
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement checkboxes

Browse source
This commit is contained in:
hodasemi 2019-01-19 11:53:48 +01:00
parent f5f52a776d
commit fcb0d50dfa
3 changed files with 55 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
aufgabe5/public/assets/css/style.css
View file

@ -1,9 +0,0 @@
#canvas-wrap {
position:relative
}
#overlay {
position:absolute;
top:20px;
left:30px;
}

75
aufgabe5/public/assets/js/webgl.js
View file

@ -41,16 +41,16 @@ var light;
function setup_flags() {
flags = [
{ id: "birth_rate_per_1000", name: "Birth Rate / 100", enabled: true, color: 0xff0000 },
{ id: "cell_phones_per_100", name: "Cell Phones / 100", enabled: false, color: 0x0ff000 },
{ id: "children_per_woman", name: "Children / Woman", enabled: false, color: 0x00ff00 },
{ id: "electricity_consumption_per_capita", name: "Electricity Consumption / Capita", enabled: false, color: 0x000ff0 },
{ id: "gdp_per_capita", name: "GDP / Capita", enabled: false, color: 0x0000ff },
{ id: "gdp_per_capita_growth", name: "GDP / Capita Growth", enabled: false, color: 0xf0000f },
{ id: "inflation_annual", name: "Inflation Annual", enabled: false, color: 0xf000f0 },
{ id: "internet_user_per_100", name: "Internet User / 100", enabled: false, color: 0x00f00f },
{ id: "life_expectancy", name: "Life Expectancy", enabled: false, color: 0xf00f00 },
{ id: "military_expenditure_percent_of_gdp", name: "Military Expenditure % of GDP", enabled: false, color: 0x0f00f0 },
{ id: "birth_rate_per_1000", name: "Birth Rate / 100", enabled: true, color: 0xff0000, scale: 0.1 },
{ id: "cell_phones_per_100", name: "Cell Phones / 100", enabled: false, color: 0xFFAA00, scale: 0.05 },
{ id: "children_per_woman", name: "Children / Woman", enabled: false, color: 0xAAFF00, scale: 1.0 },
{ id: "electricity_consumption_per_capita", name: "Electricity Consumption / Capita", enabled: false, color: 0x005AFF, scale: 0.00004 },
{ id: "gdp_per_capita", name: "GDP / Capita", enabled: false, color: 0xFFFF00, scale: 0.0001 },
{ id: "gdp_per_capita_growth", name: "GDP / Capita Growth", enabled: false, color: 0xE700FF, scale: 0.5 },
{ id: "inflation_annual", name: "Inflation Annual", enabled: false, color: 0x00F9FF, scale: 0.2 },
{ id: "internet_user_per_100", name: "Internet User / 100", enabled: false, color: 0xFF009A, scale: 0.05 },
{ id: "life_expectancy", name: "Life Expectancy", enabled: false, color: 0x00FF10, scale: 0.05 },
{ id: "military_expenditure_percent_of_gdp", name: "Military Expenditure % of GDP", enabled: false, color: 0x0027FF, scale: 1.0 },
];
}
@ -62,6 +62,8 @@ function setup_checkboxes() {
checkboxes += "<tr><td>";
checkboxes += "<input type=\"checkbox\"";
checkboxes += " id=\"" + flag.id + "\"";
checkboxes += " onclick=\"checkbox_clicked('" + flag.id + "')\"";
if (flag.enabled) {
checkboxes += " checked";
@ -73,7 +75,7 @@ function setup_checkboxes() {
checkboxes += "\n";
}
checkboxes = "</table>";
checkboxes += "</table>";
let overlay = document.getElementById("overlay");
@ -82,18 +84,42 @@ function setup_checkboxes() {
}
}
function checkbox_clicked(id) {
let checkbox = document.getElementById(id);
if (checkbox == null) {
return;
}
for (let i = 0; i < flags.length; i++) {
let flag = flags[i];
if (flag.id == id) {
flag.enabled = checkbox.checked;
break;
}
}
update();
}
function set_window_extents() {
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
canvas.width = WIDTH;
canvas.height = HEIGHT;
renderer.setSize(WIDTH, HEIGHT);
camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
camera.up = new THREE.Vector3(0, 0, 1);
}
function setup() {
mappa = new Mappa('MapboxGL', key);
myMap = mappa.tileMap(options);
canvas = document.getElementById("mapa");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
WIDTH = window.innerWidth;
HEIGHT = window.innerHeight;
camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 0.1, 1000);
camera.up = new THREE.Vector3(0, 0, 1);
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ alpha: true, canvas: canvas });
@ -106,12 +132,12 @@ function setup() {
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 1000;
renderer.setSize(WIDTH, HEIGHT);
document.body.appendChild(renderer.domElement);
myMap.overlay(canvas);
myMap.onChange(update);
set_window_extents();
setup_flags();
setup_checkboxes();
@ -133,7 +159,7 @@ function setup_objects() {
if (flag.enabled) {
let value = tableData_global[i][flag.id];
let height = value / 20.0;
let height = value * flag.scale;
let geometry = new THREE.BoxGeometry(1, 1, height);
let material = new THREE.MeshBasicMaterial({ color: flag.color });
let cube = new THREE.Mesh(geometry, material);
@ -164,7 +190,7 @@ function draw() { }
function update() {
setup_objects();
let pos = myMap.pixelToLatLng(window.innerWidth / 2, window.innerHeight / 2);
let pos = myMap.pixelToLatLng(WIDTH / 2, HEIGHT / 2);
let zoom = myMap.zoom();
let view;
@ -181,3 +207,8 @@ function update() {
renderer.render(scene, camera);
}
function on_resize() {
set_window_extents();
update();
}

8
aufgabe5/public/index.html
View file

@ -13,10 +13,6 @@
rel='stylesheet' type='text/css'>
<link href="assets/css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="assets/css/style.css" type="text/css" rel="stylesheet">
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-dsv.v1.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
<script src="assets/js/mappa.js" type="text/javascript"></script>
<script src="assets/js/three.js" type="text/javascript"></script>
<script src="assets/js/p5.min.js" type="text/javascript"></script>
@ -25,9 +21,9 @@
<body>
<div id="overlay"></div>
<div id="canvas-wrap">
<canvas id="mapa" width="800" height="600"></canvas>
<div id="overlay"></div>
<canvas id="mapa"></canvas>
</div>
<script type="text/javascript" src="assets/js/webgl.js"></script>