Browse Source

Re-add the guage at the side

pull/35/head
Starbeamrainbowlabs 3 years ago
parent
commit
b9d60c7e32
Signed by: sbrl
GPG Key ID: 1BE5172E637709C2
  1. 2
      client_src/js/Guage.mjs
  2. 3
      client_src/js/MapManager.mjs
  3. 104
      client_src/js/Overlay/OverlaySpecs.mjs
  4. 25
      client_src/js/Overlay/VoronoiManager.mjs
  5. 15
      client_src/js/Overlay/VoronoiOverlay.mjs
  6. 26
      package-lock.json
  7. 1
      package.json
  8. 4
      rollup.config.js

2
client_src/js/Guage.mjs

@ -13,7 +13,7 @@ class Guage { @@ -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;
}

3
client_src/js/MapManager.mjs

@ -66,8 +66,9 @@ class MapManager { @@ -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() {

104
client_src/js/Overlay/OverlaySpecs.mjs

@ -0,0 +1,104 @@ @@ -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
};

25
client_src/js/Overlay/VoronoiManager.mjs

@ -3,13 +3,23 @@ @@ -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 { @@ -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;

15
client_src/js/Overlay/VoronoiOverlay.mjs

@ -16,6 +16,14 @@ class VoronoiOverlay { @@ -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 { @@ -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 { @@ -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

26
package-lock.json generated

@ -3717,6 +3717,32 @@ @@ -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",

1
package.json

@ -42,6 +42,7 @@ @@ -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",

4
rollup.config.js

@ -7,6 +7,7 @@ import commonjs from 'rollup-plugin-commonjs'; @@ -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 = [ @@ -35,6 +36,9 @@ let plugins = [
extensions: ['.mjs', '.js', '.jsx', '.json'], // Default: [ '.mjs', '.js', '.json', '.node' ]
}),
json({
}),
replace({
exclude: 'node_modules/**',

Loading…
Cancel
Save