130 lines
3.6 KiB
JavaScript
130 lines
3.6 KiB
JavaScript
window.spec = {
|
|
"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
|
|
}
|
|
window.max = 75;
|
|
|
|
window.addEventListener("load", (_event) => {
|
|
let canvas = document.getElementById("main");
|
|
|
|
let guage = new Guage(canvas, window.spec, window.max);
|
|
guage.render();
|
|
});
|
|
|
|
window.pixel_ratio = (function () {
|
|
let ctx = document.createElement("canvas").getContext("2d"),
|
|
dpr = window.devicePixelRatio || 1,
|
|
bsr = ctx.webkitBackingStorePixelRatio ||
|
|
ctx.mozBackingStorePixelRatio ||
|
|
ctx.msBackingStorePixelRatio ||
|
|
ctx.oBackingStorePixelRatio ||
|
|
ctx.backingStorePixelRatio || 1;
|
|
|
|
return dpr / bsr;
|
|
})();
|
|
|
|
function set_hidpi_canvas(canvas, width, height) {
|
|
width = width || canvas.width;
|
|
height = height || canvas.height;
|
|
|
|
canvas.width = width * pixel_ratio;
|
|
canvas.height = height * pixel_ratio;
|
|
canvas.style.width = width + "px";
|
|
canvas.style.height = height + "px";
|
|
// canvas.getContext("2d").setTransform(pixel_ratio, 0, 0, pixel_ratio, 0, 0);
|
|
return canvas;
|
|
}
|
|
|
|
class Guage {
|
|
constructor(in_canvas, in_spec, in_max) {
|
|
this.canvas = in_canvas;
|
|
this.spec = in_spec;
|
|
this.max = in_max;
|
|
|
|
set_hidpi_canvas(this.canvas);
|
|
|
|
// TODO: Use Helpers/Canvas.mjs here
|
|
this.pixelRatio = (function () {
|
|
var ctx = document.createElement("canvas").getContext("2d"),
|
|
dpr = window.devicePixelRatio || 1,
|
|
bsr = ctx.webkitBackingStorePixelRatio ||
|
|
ctx.mozBackingStorePixelRatio ||
|
|
ctx.msBackingStorePixelRatio ||
|
|
ctx.oBackingStorePixelRatio ||
|
|
ctx.backingStorePixelRatio || 1;
|
|
|
|
return dpr / bsr;
|
|
})();
|
|
|
|
this.context = this.canvas.getContext("2d");
|
|
}
|
|
|
|
render() {
|
|
let guage_size = {
|
|
x: this.canvas.width * 0.1,
|
|
y: this.canvas.height * 0.05,
|
|
width: this.canvas.width * 0.3,
|
|
height: this.canvas.height * 0.9
|
|
};
|
|
|
|
// ---------------------------------------------
|
|
// Draw the guage
|
|
this.context.save();
|
|
let gradient_spec = RenderGradient(spec, max);
|
|
console.log(gradient_spec);
|
|
|
|
let gradient = this.context.createLinearGradient(
|
|
0, guage_size.y,
|
|
0, guage_size.y + guage_size.height
|
|
);
|
|
for (let point in gradient_spec)
|
|
gradient.addColorStop(parseFloat(point), gradient_spec[point]);
|
|
|
|
this.context.fillStyle = gradient;
|
|
this.context.fillRect(guage_size.x, guage_size.y, guage_size.width, guage_size.height);
|
|
this.context.restore();
|
|
// ---------------------------------------------
|
|
// Draw the numbers
|
|
|
|
this.context.save();
|
|
this.context.font = "12px Ubuntu, sans-serif";
|
|
this.context.textBaseline = "middle";
|
|
this.context.strokeStyle = "rgba(0, 0, 0, 0.5)";
|
|
this.context.lineWidth = 1.5 * window.pixel_ratio;
|
|
|
|
for (let point in spec) {
|
|
let value = parseFloat(point) / max;
|
|
|
|
let draw_x = guage_size.x + guage_size.width + 3;
|
|
let draw_y = guage_size.y + (value * guage_size.height);
|
|
|
|
// this.context.fillStyle = "black";
|
|
console.log(`Writing '${point}' to (${draw_x}, ${draw_y})`);
|
|
this.context.fillText(point, draw_x, draw_y);
|
|
|
|
this.context.beginPath();
|
|
this.context.moveTo(guage_size.x, draw_y);
|
|
this.context.lineTo(draw_x, draw_y);
|
|
this.context.stroke();
|
|
}
|
|
this.context.restore();
|
|
}
|
|
}
|
|
|
|
function RenderGradient(stops, max) {
|
|
let result = {};
|
|
|
|
for (let value in stops)
|
|
result[value / max] = stops[value];
|
|
|
|
return result;
|
|
}
|