basic progress indication

server/scripts/modules/localforecast.js

@@ -5,7 +5,7 @@
 // eslint-disable-next-line no-unused-vars
 class LocalForecast extends WeatherDisplay {
 	constructor(navId,elemId,weatherParameters) {
-		super(navId,elemId);
+		super(navId,elemId, 'Local Forecast');
 
 		// set timings
 		this.timing.baseDelay= 5000;

server/scripts/modules/navigation.js

@@ -1,6 +1,6 @@
 'use strict';
 // navigation handles progress, next/previous and initial load messages from the parent frame
-/* globals utils, _StationInfo, STATUS */
+/* globals utils, _StationInfo, STATUS, draw */
 /* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar */
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -18,8 +18,9 @@ const navigation = (() => {
 	let initialLoadDone = false;
 	let currentUnits = UNITS.english;
 	let playing = false;
+	let backgroundImage;
 
-	const init = () => {
+	const init = async () => {
 		// set up message receive and dispatch accordingly
 		window.addEventListener('message', (event) => {
 		// test for trust
@@ -46,6 +47,8 @@ const navigation = (() => {
 				console.error(`Unknown event ${data.type}`);
 			}
 		}, false);
+		backgroundImage = await utils.image.load('images/BackGround1_1.png');
+		drawProgressCanvas();
 	};
 
 	const postMessage = (type, message = {}) => {
@@ -127,17 +130,19 @@ const navigation = (() => {
 		// test for loaded status
 		if (value.status !== STATUS.loaded) return;
 
-		// display the first canvas loaded on the next scan (allows display constructors to finish loading)
-		initialLoadDone = true;
-		setTimeout(() => {
-			hideAllCanvases();
-			displays[value.id].showCanvas();
-		}, 1);
+		drawProgressCanvas();
+
 		// send loaded messaged to parent
+		if (countLoadedCanvases < displays.length) return;
 		postMessage('loaded');
 		// store the display number
 	};
 
+	const countLoadedCanvases = () => displays.reduce((acc, display) => {
+		if (display.status !== STATUS.loading) return acc+1;
+		return acc;
+	},0);
+
 	const hideAllCanvases = () => {
 		displays.forEach(display => display.hideCanvas());
 	};
@@ -235,6 +240,50 @@ const navigation = (() => {
 		}
 	};
 
+	const drawProgressCanvas = () => {
+		const canvas = document.getElementById('progressCanvas');
+		const context = canvas.getContext('2d');
+
+		context.drawImage(backgroundImage, 0, 100, 640, 300, 0, 100, 640, 300);
+		draw.horizontalGradientSingle(context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
+		draw.horizontalGradientSingle(context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
+
+		displays.forEach((display, idx) => {
+			const y = 120 + idx*29;
+			const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
+			draw.text(context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
+
+			// Erase any dots that spill into the status text.
+			context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
+			draw.horizontalGradientSingle(context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
+
+			let statusText;
+			let statusColor;
+			switch (display.status) {
+			case STATUS.loading:
+				statusText = 'Loading';
+				statusColor = '#ffff00';
+				break;
+			case STATUS.loaded:
+				statusText = 'Press Here';
+				statusColor = '#00ff00';
+				break;
+			case STATUS.failed:
+				statusText = 'Failed';
+				statusColor = '#ff0000';
+				break;
+			case STATUS.noData:
+				statusText = 'No Data';
+				statusColor = '#C0C0C0';
+				draw.box(context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
+				break;
+			default:
+			}
+			draw.text(context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
+
+		});
+	};
+
 	return {
 		init,
 		updateStatus,

server/scripts/modules/weatherdisplay.js

@@ -11,13 +11,14 @@ const STATUS = {
 
 // eslint-disable-next-line no-unused-vars
 class WeatherDisplay {
-	constructor(navId, elemId, canvasWidth, canvasHeight) {
+	constructor(navId, elemId, name) {
 		// navId is used in messaging
 		this.navId = navId;
 		this.elemId = undefined;
 		this.gifs = [];
 		this.data = undefined;
 		this.loadingStatus = STATUS.loading;
+		this.name = name?name:elemId;
 
 		// default navigation timing
 		this.timing = {
@@ -29,7 +30,7 @@ class WeatherDisplay {
 		this.screenIndex = 0;
 
 		this.setStatus(STATUS.loading);
-		this.createCanvas(elemId, canvasWidth, canvasHeight);
+		this.createCanvas(elemId);
 	}
 
 	// set data status and send update to navigation module