Re-add the guage at the side

client_src/js/Guage.mjs

@@ -13,7 +13,7 @@ class Guage {
 		this.context = this.canvas.getContext("2d");
 	}
 	
-	set_spec(spec, max) {
+	set_spec({ gradient: spec, max }) {
 		this.spec = spec;
 		this.max = max;
 	}

client_src/js/MapManager.mjs

@@ -66,8 +66,9 @@ class MapManager {
 		this.ui.setup().then(() => console.log("[map] Settings initialised."));
 	}
 	
-	setup_overlay() {
+	async setup_overlay() {
 		this.overlay = new VoronoiManager(this.device_data, this.map);
+		await this.overlay.set_data(new Date(), "PM25");
 	}
 	
 	setup_time_dimension() {

client_src/js/Overlay/OverlaySpecs.mjs

@@ -0,0 +1,104 @@
+"use strict";
+
+
+var PM25 = {
+	/*
+	 * Range	Midpoint	Name		Colour
+	 * 0 - 11	5.5			Low 1		#9CFF9C
+	 * 12 - 23	17.5		Low 2		#31FF00
+	 * 24 - 35	29.5		Low 3		#31CF00
+	 * 36 - 41	38.5		Moderate 1	#FFFF00
+	 * 42 - 47	44.5		Moderate 2	#FFCF00
+	 * 48 - 53	50.5		Moderate 3	#FF9A00
+	 * 54 - 58	56			High 1		#FF6464
+	 * 59 - 64	61.5		High 2		#FF0000
+	 * 65 - 70	67.5		High 3		#990000
+	 * 71+		n/a			Very high	#CE30FF
+	 */
+	max: 75,
+	gradient: {
+		"0": "#9CFF9C", "5.5": "#9CFF9C", // Low 1
+		"17.5": "#31FF00", // Low 2
+		"29.5": "#31CF00", // Low 3
+		"38.5": "#FFFF00", // Moderate 1
+		"44.5": "#FFCF00", // Moderate 2
+		"50.5": "#FF9A00", // Moderate 3
+		"56": "#FF6464", // High 1
+		"61.5": "#FF0000", // High 2
+		"67.5": "#990000", // High 3
+		"72.5": "#CE30FF", "75": "#CE30FF", // Very high
+	}
+};
+var PM10 = {
+	/*
+	 * Range	Midpoint	Name		Colour
+	 * 0-16		8			Low 1		#9CFF9C
+	 * 17-33	25			Low 2		#31FF00
+	 * 34-50	42			Low 3		#31CF00
+	 * 51-58	54.5		Moderate 1	#FFFF00
+	 * 59-66	62.5		Moderate 2	#FFCF00
+	 * 67-75	71			Moderate 3	#FF9A00
+	 * 76-83	79.5		High 1		#FF6464
+	 * 84-91	87.5		High 2		#FF0000
+	 * 92-100	96			High 3		#990000
+	 * 101		105.5		Very High	#CE30FF
+	 */
+	max: 110,
+	gradient: {
+		"0": "#9CFF9C", "8": "#9CFF9C", // Low 1
+		"25": "#31FF00", // Low 2
+		"42": "#31CF00", // Low 3
+		"54.5": "#FFFF00", // Moderate 1
+		"62.5": "#FFCF00", // Moderate 2
+		"71": "#FF9A00", // Moderate 3
+		"79.5": "#FF6464", // High 1
+		"87.5": "#FF0000", // High 2
+		"96": "#990000", // High 3
+		"105.5": "#CE30FF", "110": "#CE30FF", // Very high
+	}
+};
+var humidity = {
+	max: 100,
+	gradient: {
+		"0": "hsla(176, 77%, 40%, 0)",
+		"50": "hsl(176, 77%, 40%)",
+		"100": "blue"
+	}
+};
+var temperature = {
+	max: 40,
+	gradient: {
+		"0": "blue",
+		"5": "cyan",
+		"15": "green",
+		"20": "yellow",
+		"30": "orange",
+		"40": "red"
+	}
+};
+var pressure = {
+	max: 1100,
+	gradient: {
+		"870": "purple",
+		"916": "red",
+		"962": "orange",
+		"1008": "yellow",
+		"1054": "green",
+		"1100": "#BFED91"
+	}
+};
+
+var specs = {
+	PM10, PM25,
+	humidity,
+	temperature,
+	pressure
+};
+
+export default specs;
+export {
+	PM10, PM25,
+	humidity,
+	temperature,
+	pressure
+};

client_src/js/Overlay/VoronoiManager.mjs

@@ -3,13 +3,23 @@
 import VoronoiOverlay from './VoronoiOverlay.mjs';
 import VoronoiCell from './VoronoiCell.mjs';
 
+import Guage from '../Guage.mjs';
+import Specs from './OverlaySpecs.mjs';
+
 import Vector2 from '../Helpers/Vector2.mjs';
+import GetFromUrl from '../Helpers/GetFromUrl.mjs';
 
 class VoronoiManager {
 	get layer() { return this.overlay.layer; }
 	
 	constructor(in_device_data, map) {
 		this.device_data = in_device_data;
+		
+		this.setup_overlay(map);
+		this.setup_guage();
+	}
+	
+	setup_overlay(map) {
 		this.overlay = new VoronoiOverlay();
 		this.overlay.addCells(...this.device_data.devices
 			.filter((device) => typeof device.latitude == "number" &&
@@ -19,6 +29,21 @@ class VoronoiManager {
 			));
 		this.overlay.add_to(map);
 	}
+	
+	setup_guage() {
+		this.guage = new Guage(document.getElementById("canvas-guage"));
+	}
+	
+	async set_data(datetime, reading_type) {
+		this.guage.set_spec(Specs[reading_type]);
+		this.guage.render();
+		
+		let result = JSON.parse(await GetFromUrl(
+			`${Config.api_root}?action=fetch-data&datetime=${encodeURIComponent(datetime.toISOString())}&reading_type=${encodeURIComponent(reading_type)}`
+		));
+		
+		console.log(result);
+	}
 }
 
 export default VoronoiManager;

client_src/js/Overlay/VoronoiOverlay.mjs

@@ -16,6 +16,14 @@ class VoronoiOverlay {
 		this.cells = [];
 	}
 	
+	/**
+	 * Sets the list of cells in the voronoi overlay.
+	 * @param {VoronoiCell[]} cells The cells to add, as an array.
+	 */
+	setCells(cells) {
+		this.cells.length = 0;
+		this.addCells(...cells);
+	}
 	/**
 	 * Adds a cell to the voronoi overlay.
 	 * @param {VoronoiCell} cells The cell to add. May be specified as many times as requires to add cells in bulk.
@@ -67,9 +75,6 @@ class VoronoiOverlay {
 			bounding_box.Right, bounding_box.Bottom
 		]);
 		
-		console.log(voronoi);
-		
-		// TODO: Map the generated polygons back onto this.cells
 		let i = 0;
 		for(let polygon of voronoi.cellPolygons()) {
 			let our_cell = this.cells[i];
@@ -78,10 +83,6 @@ class VoronoiOverlay {
 			i++;
 		}
 		
-		console.log(this.cells);
-		
-		// TODO: Investigate GeoJSON. Maybe it could help us avoid the complexity of an SVGOverlay? It looks like we might be able to apply a custom colour to a GeoJSON polygon too: https://leafletjs.com/reference-1.5.0.html#geojson
-		
 		let geojson = [];
 		
 		// TODO: Render the SVG here

package-lock.json

@@ -3717,6 +3717,32 @@
         }
       }
     },
+    "rollup-plugin-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-4.0.0.tgz",
+      "integrity": "sha512-hgb8N7Cgfw5SZAkb3jf0QXii6QX/FOkiIq2M7BAQIEydjHvTyxXHQiIzZaTFgx1GK0cRCHOCBHIyEkkLdWKxow==",
+      "dev": true,
+      "requires": {
+        "rollup-pluginutils": "^2.5.0"
+      },
+      "dependencies": {
+        "estree-walker": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.6.1.tgz",
+          "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
+          "dev": true
+        },
+        "rollup-pluginutils": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.1.tgz",
+          "integrity": "sha512-J5oAoysWar6GuZo0s+3bZ6sVZAC0pfqKz68De7ZgDi5z63jOVZn1uJL/+z1jeKHNbGII8kAyHF5q8LnxSX5lQg==",
+          "dev": true,
+          "requires": {
+            "estree-walker": "^0.6.1"
+          }
+        }
+      }
+    },
     "rollup-plugin-node-resolve": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.0.1.tgz",

package.json

@@ -42,6 +42,7 @@
 		"postcss-import": "^12.0.1",
 		"rollup": "^1.14.6",
 		"rollup-plugin-commonjs": "^10.0.0",
+		"rollup-plugin-json": "^4.0.0",
 		"rollup-plugin-node-resolve": "^5.0.1",
 		"rollup-plugin-postcss": "^2.0.3",
 		"rollup-plugin-replace": "^2.2.0",

rollup.config.js

@@ -7,6 +7,7 @@ import commonjs from 'rollup-plugin-commonjs';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from "rollup-plugin-terser";
 import replace from 'rollup-plugin-replace';
+import json from 'rollup-plugin-json';
 
 import postcss_import from 'postcss-import';
 import postcss_copy from 'postcss-copy';
@@ -35,6 +36,9 @@ let plugins = [
 		extensions: ['.mjs', '.js', '.jsx', '.json'], // Default: [ '.mjs', '.js', '.json', '.node' ]
 	}),
 	
+	json({
+		
+	}),
 	
 	replace({
 		exclude: 'node_modules/**',