sbrl-github/Air-Quality-Web
1
0
Fork 0
mirror of https://github.com/ConnectedHumber/Air-Quality-Web synced 2024-12-21 10:25:00 +00:00
Code Issues Releases Wiki Activity

Display the gauge at the right hand size again :D

Browse source
This commit is contained in:
Starbeamrainbowlabs 2021-01-30 21:27:39 +00:00
parent 79064955a5
commit 5b724a9766
Signed by: sbrl
GPG key ID: 1BE5172E637709C2
4 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
client_src/js/Guage.mjs → client_src/js/Gauge.mjs
View file

@ -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;

2
client_src/js/Gradients.mjs
View file

@ -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"
}

4
client_src/js/Overlay/VoronoiManager.mjs
View file

@ -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"));
}
// ------------------------------------------------------------------------

7
client_src/js/UI.mjs
View file

@ -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();
}