progress display

2026-04-17 00:59:29 -07:00 · 2020-09-08 14:39:17 -05:00
parent 3825397c78
commit 560d3a8cb2
16 changed files with 131 additions and 327 deletions
--- a/server/scripts/modules/progress.js
+++ b/server/scripts/modules/progress.js
@@ -0,0 +1,98 @@
+// regional forecast and observations
+
+/* globals WeatherDisplay, utils, STATUS, draw */
+
+// eslint-disable-next-line no-unused-vars
+class Progress extends WeatherDisplay {
+	constructor(navId,elemId) {
+		super(navId, elemId);
+
+		// pre-load background image (returns promise)
+		this.backgroundImage = utils.image.load('images/BackGround1_1.png');
+
+		// disable any navigation timing
+		this.timing = false;
+
+		this.version = document.getElementById('version').innerHTML;
+	}
+
+	async drawCanvas(displays, loadedCount) {
+		super.drawCanvas();
+		// set up an event listener
+		if (!this.eventListener) {
+			this.eventListener = true;
+			this.canvas.addEventListener('click', (e) => this.canvasClick(e), false);
+		}
+
+		// get the background image
+		const backgroundImage = await this.backgroundImage;
+
+		// only draw the background once
+		if (!this.backgroundDrawn) {
+			this.context.drawImage(backgroundImage, 0, 0, 640, 480, 0, 0, 640, 480);
+			draw.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
+			draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
+			draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
+			draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
+			draw.titleText(this.context, 'WeatherStar', '4000+ ' + this.version);
+		}
+
+		this.finishDraw();
+		// if no displays provided just draw the backgrounds (above)
+		if (!displays) return;
+		displays.forEach((display, idx) => {
+			const y = 120 + idx*29;
+			const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
+			draw.text(this.context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
+
+
+			let statusText;
+			let statusColor;
+			switch (display.status) {
+			case STATUS.loading:
+				statusText = 'Loading';
+				statusColor = '#ffff00';
+				break;
+			case STATUS.loaded:
+				statusText = 'Press Here';
+				statusColor = '#00ff00';
+				this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25);
+				break;
+			case STATUS.failed:
+				statusText = 'Failed';
+				statusColor = '#ff0000';
+				break;
+			case STATUS.noData:
+				statusText = 'No Data';
+				statusColor = '#C0C0C0';
+				draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
+				break;
+			default:
+			}
+			// Erase any dots that spill into the status text.
+			this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
+			draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
+
+		});
+
+
+		// calculate loaded percent
+		const loadedPercent = (loadedCount/displays.length);
+
+		if (loadedPercent < 1.0) {
+			// Draw a box for the progress.
+			draw.box(this.context, '#000000', 51, 428, 534, 22);
+			draw.box(this.context, '#ffffff', 53, 430, 530, 18);
+			// update the progress gif
+			draw.box(this.context, '#1d7fff', 55, 432, 526*loadedPercent, 14);
+		} else {
+			// restore the background
+			this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22);
+		}
+
+	}
+
+	canvasClick(e) {
+		console.log(e);
+	}
+}