Air-Quality-Web/test/script.js

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