Display the gauge at the right hand size again :D

client_src/js/Gauge.mjs

@@ -3,8 +3,9 @@
 import { set_hidpi_canvas, pixel_ratio } from './Helpers/Canvas.mjs';
 import { RenderGradient } from './Helpers/GradientHelpers.mjs';
 
+import gradients from './Gradients.mjs';
 
-class Guage {
+class Gauge {
 	constructor(in_canvas) {
 		this.canvas = in_canvas;
 		
@@ -13,9 +14,30 @@ class Guage {
 		this.context = this.canvas.getContext("2d");
 	}
 	
+	/**
+	 * Sets the reading type to display on this gauge.
+	 * Pulls gradient definitions from Gradients.mjs.
+	 * @param	{string}	new_reading_type	The reading type code to display.
+	 */
+	set_reading_type(new_reading_type) {
+		if(typeof gradients[new_reading_type] == "undefined") {
+			console.warn(`[Gauge] Warning: Unknown reading type ${new_reading_type} (defaulting to "unknown")`);
+			new_reading_type = "unknown";
+		}
+		
+		this.set_spec(gradients[new_reading_type]);
+	}
+	
+	/**
+	 * Sets the gradient spec to display.
+	 * Automatically re-renders the gauge for convenience.
+	 * @param	{Object}	arg	The gradient spec to set display.
+	 */
 	set_spec({ gradient: spec, max }) {
 		this.spec = spec;
 		this.max = max;
+		
+		this.render();
 	}
 	
 	render() {
@@ -89,4 +111,4 @@ class Guage {
 	}
 }
 
-export default Guage;
+export default Gauge;

client_src/js/Gradients.mjs

@@ -61,7 +61,7 @@ var PM10 = {
 var humidity = {
 	max: 100,
 	gradient: {
-		"0": "hsla(176, 77%, 40%, 0)",
+		"0": "hsla(52, 36%, 61%, 0.5)",
 		"50": "hsl(176, 77%, 40%)",
 		"100": "blue"
 	}

client_src/js/Overlay/VoronoiManager.mjs

@@ -7,7 +7,7 @@ import Config from '../Config.mjs';
 import VoronoiOverlay from './VoronoiOverlay.mjs';
 import VoronoiCell from './VoronoiCell.mjs';
 
-import Guage from '../Guage.mjs';
+import Gauge from '../Gauge.mjs';
 import Specs from './OverlaySpecs.mjs';
 
 import Vector2 from '../Helpers/Vector2.mjs';
@@ -37,7 +37,7 @@ class VoronoiManager {
 	}
 	
 	setup_guage() {
-		this.guage = new Guage(document.getElementById("canvas-guage"));
+		this.guage = new Gauge(document.getElementById("canvas-guage"));
 	}
 	
 	// ------------------------------------------------------------------------

client_src/js/UI.mjs

@@ -5,6 +5,7 @@ import NanoModal from 'nanomodal';
 
 import Config from './Config.mjs';
 import GetFromUrl from './Helpers/GetFromUrl.mjs';
+import Gauge from './Gauge.mjs';
 
 // import Tour from './Tour.mjs';
 
@@ -40,6 +41,9 @@ class UI {
 		this.map_manager = in_map_manager;
 		
 		this.ui_panel = new SmartSettings("Settings");
+		this.gauge = new Gauge(document.getElementById("canvas-guage"));
+		this.gauge.set_reading_type(Config.default_reading_type);
+		
 		// this.ui_panel.watch((event) => console.log(event));
 		
 		this.tour_enabled = false;
@@ -64,6 +68,7 @@ class UI {
 					
 					document.querySelector("main").classList.add("working-visual");
 					await this.map_manager.device_markers.update_markers(new_type);
+					this.gauge.set_reading_type(new_type);
 					document.querySelector("main").classList.remove("working-visual");
 				}).bind(this)
 			},
@@ -89,7 +94,7 @@ class UI {
 				})
 			}
 		]);
-		this.ui_panel.setIndex("Reading Type", this.reading_types.findIndex((type) => type.short_descr == "PM25"));
+		this.ui_panel.setIndex("Reading Type", this.reading_types.findIndex((type) => type.short_descr == Config.default_reading_type));
 		
 		if(this.tour_enabled) await this.tour.run_once();
 	}