Implement checkboxes

aufgabe5/public/assets/css/style.css

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

aufgabe5/public/assets/js/webgl.js

@@ -41,16 +41,16 @@ var light;
 
 function setup_flags() {
     flags = [
-        { id: "birth_rate_per_1000", name: "Birth Rate / 100", enabled: true, color: 0xff0000 },
+        { 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: 0x0ff000 },
+        { 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: 0x00ff00 },
+        { 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: 0x000ff0 },
+        { 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: 0x0000ff },
+        { 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: 0xf0000f },
+        { 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: 0xf000f0 },
+        { 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: 0x00f00f },
+        { 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: 0xf00f00 },
+        { 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: 0x0f00f0 },
+        { 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;
@@ -180,4 +206,9 @@ function update() {
     camera.lookAt(center);
 
     renderer.render(scene, camera);
+}
+
+function on_resize() {
+    set_window_extents();
+    update();
 }

aufgabe5/public/index.html

@@ -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>
+		<canvas id="mapa"></canvas>
-		<div id="overlay"></div>
 	</div>
 
 	<script type="text/javascript" src="assets/js/webgl.js"></script>