mirror of
https://github.com/ConnectedHumber/Air-Quality-Web
synced 2024-12-22 10:25:01 +00:00
Display the gauge at the right hand size again :D
This commit is contained in:
parent
79064955a5
commit
5b724a9766
4 changed files with 33 additions and 6 deletions
|
@ -3,8 +3,9 @@
|
||||||
import { set_hidpi_canvas, pixel_ratio } from './Helpers/Canvas.mjs';
|
import { set_hidpi_canvas, pixel_ratio } from './Helpers/Canvas.mjs';
|
||||||
import { RenderGradient } from './Helpers/GradientHelpers.mjs';
|
import { RenderGradient } from './Helpers/GradientHelpers.mjs';
|
||||||
|
|
||||||
|
import gradients from './Gradients.mjs';
|
||||||
|
|
||||||
class Guage {
|
class Gauge {
|
||||||
constructor(in_canvas) {
|
constructor(in_canvas) {
|
||||||
this.canvas = in_canvas;
|
this.canvas = in_canvas;
|
||||||
|
|
||||||
|
@ -13,9 +14,30 @@ class Guage {
|
||||||
this.context = this.canvas.getContext("2d");
|
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 }) {
|
set_spec({ gradient: spec, max }) {
|
||||||
this.spec = spec;
|
this.spec = spec;
|
||||||
this.max = max;
|
this.max = max;
|
||||||
|
|
||||||
|
this.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -89,4 +111,4 @@ class Guage {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Guage;
|
export default Gauge;
|
|
@ -61,7 +61,7 @@ var PM10 = {
|
||||||
var humidity = {
|
var humidity = {
|
||||||
max: 100,
|
max: 100,
|
||||||
gradient: {
|
gradient: {
|
||||||
"0": "hsla(176, 77%, 40%, 0)",
|
"0": "hsla(52, 36%, 61%, 0.5)",
|
||||||
"50": "hsl(176, 77%, 40%)",
|
"50": "hsl(176, 77%, 40%)",
|
||||||
"100": "blue"
|
"100": "blue"
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@ import Config from '../Config.mjs';
|
||||||
import VoronoiOverlay from './VoronoiOverlay.mjs';
|
import VoronoiOverlay from './VoronoiOverlay.mjs';
|
||||||
import VoronoiCell from './VoronoiCell.mjs';
|
import VoronoiCell from './VoronoiCell.mjs';
|
||||||
|
|
||||||
import Guage from '../Guage.mjs';
|
import Gauge from '../Gauge.mjs';
|
||||||
import Specs from './OverlaySpecs.mjs';
|
import Specs from './OverlaySpecs.mjs';
|
||||||
|
|
||||||
import Vector2 from '../Helpers/Vector2.mjs';
|
import Vector2 from '../Helpers/Vector2.mjs';
|
||||||
|
@ -37,7 +37,7 @@ class VoronoiManager {
|
||||||
}
|
}
|
||||||
|
|
||||||
setup_guage() {
|
setup_guage() {
|
||||||
this.guage = new Guage(document.getElementById("canvas-guage"));
|
this.guage = new Gauge(document.getElementById("canvas-guage"));
|
||||||
}
|
}
|
||||||
|
|
||||||
// ------------------------------------------------------------------------
|
// ------------------------------------------------------------------------
|
||||||
|
|
|
@ -5,6 +5,7 @@ import NanoModal from 'nanomodal';
|
||||||
|
|
||||||
import Config from './Config.mjs';
|
import Config from './Config.mjs';
|
||||||
import GetFromUrl from './Helpers/GetFromUrl.mjs';
|
import GetFromUrl from './Helpers/GetFromUrl.mjs';
|
||||||
|
import Gauge from './Gauge.mjs';
|
||||||
|
|
||||||
// import Tour from './Tour.mjs';
|
// import Tour from './Tour.mjs';
|
||||||
|
|
||||||
|
@ -40,6 +41,9 @@ class UI {
|
||||||
this.map_manager = in_map_manager;
|
this.map_manager = in_map_manager;
|
||||||
|
|
||||||
this.ui_panel = new SmartSettings("Settings");
|
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.ui_panel.watch((event) => console.log(event));
|
||||||
|
|
||||||
this.tour_enabled = false;
|
this.tour_enabled = false;
|
||||||
|
@ -64,6 +68,7 @@ class UI {
|
||||||
|
|
||||||
document.querySelector("main").classList.add("working-visual");
|
document.querySelector("main").classList.add("working-visual");
|
||||||
await this.map_manager.device_markers.update_markers(new_type);
|
await this.map_manager.device_markers.update_markers(new_type);
|
||||||
|
this.gauge.set_reading_type(new_type);
|
||||||
document.querySelector("main").classList.remove("working-visual");
|
document.querySelector("main").classList.remove("working-visual");
|
||||||
}).bind(this)
|
}).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();
|
if(this.tour_enabled) await this.tour.run_once();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue