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)
+		drawProgressCanvas();
-		initialLoadDone = true;
+
-		setTimeout(() => {
-			hideAllCanvases();
-			displays[value.id].showCanvas();
-		}, 1);
 		// 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

server/scripts/twc3.js

@@ -1109,34 +1109,9 @@ Number.prototype.pad = function(size) {
 
 
 const Progress = function (e) {
-	const WeatherParameters = e.WeatherParameters;
 
-	this.CurrentConditions = LoadStatuses.Loading;
-	this.WordedForecast = LoadStatuses.Loading;
-	this.FourDayForecast = LoadStatuses.Loading;
-	this.TravelForecast = LoadStatuses.Loading;
-	this.NearbyConditions = LoadStatuses.Loading;
-	this.CurrentRegionalMap = LoadStatuses.Loading;
-	this.TomorrowsRegionalMap = LoadStatuses.Loading;
-	this.Almanac = LoadStatuses.Loading;
-	this.DopplerRadar = LoadStatuses.Loading;
-	this.Hazards = LoadStatuses.Loading;
-
-	this.Loaded = false;
-
-	const _self = this;
-
-	const canvas = canvasProgress[0];
-	const context = canvas.getContext('2d');
-	let gifProgress;
 
 	const _ProgressInterval = window.setInterval(() => {
-		if (!_self.Loaded) return;
-		if (!gifProgress) return;
-
-		const ProgressPercent = _self.GetTotalPercentage();
-		divProgress.html(ProgressPercent.toString());
-
 		gifProgress.get_canvas().width = (ProgressPercent / 100) * 530 + 1;
 
 		if (ProgressPercent > 0) {
@@ -1145,8 +1120,6 @@ const Progress = function (e) {
 		}
 
 		_DisplayLoadingDetails();
-		AssignPlayMsOffsets(true);
-
 		if (ProgressPercent >= 100) {
 			gifProgress.pause();
 			window.clearInterval(_ProgressInterval);
@@ -1160,46 +1133,11 @@ const Progress = function (e) {
 		DrawHorizontalGradientSingle(context, 0, 90, 52, 399, _SideColor1, _SideColor2);
 		DrawHorizontalGradientSingle(context, 584, 90, 640, 399, _SideColor1, _SideColor2);
 
-		let OffsetY = 120;
 		const __DrawText = (caption, status) => {
 			let StatusText;
 			let StatusColor;
 
-			const Dots = Array(120 - Math.floor(caption.length * 2.5)).join('.');
-			DrawText(context, 'Star4000 Extended', '19pt', '#ffffff', 70, OffsetY, caption + Dots, 2);
 
-			// Erase any dots that spill into the status text.
-			context.drawImage(BackGroundImage, 475, OffsetY - 20, 165, 30, 475, OffsetY - 20, 165, 30);
-			DrawHorizontalGradientSingle(context, 584, 90, 640, 399, _SideColor1, _SideColor2);
-
-			switch (status) {
-			case LoadStatuses.Loading:
-				StatusText = 'Loading';
-				StatusColor = '#ffff00';
-				break;
-			case LoadStatuses.Loaded:
-				//StatusText = "Loaded";
-				StatusText = 'Press Here';
-				StatusColor = '#00ff00';
-
-				if (caption === 'Hazardous Weather') {
-					StatusColor = '#ff0000';
-				}
-
-				context.drawImage(BackGroundImage, 440, OffsetY - 20, 75, 25, 440, OffsetY - 20, 75, 25);
-				break;
-			case LoadStatuses.Failed:
-				StatusText = 'Failed';
-				StatusColor = '#ff0000';
-				break;
-			case LoadStatuses.NoData:
-				StatusText = 'No Data';
-				StatusColor = '#C0C0C0';
-				DrawBox(context, 'rgb(33, 40, 90)', 475, OffsetY - 15, 75, 15);
-				break;
-			default:
-			}
-			DrawText(context, 'Star4000 Extended', '19pt', StatusColor, 565, OffsetY, StatusText, 2, 'end');
 
 			OffsetY += 29;
 		};
@@ -1217,26 +1155,6 @@ const Progress = function (e) {
 
 	};
 
-	this.GetTotalPercentage = function() {
-		let Percentage = 0;
-		let IncreaseAmount = 10;
-
-		if (this.CurrentConditions !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.WordedForecast !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.FourDayForecast !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.TravelForecast !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.NearbyConditions !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.CurrentRegionalMap !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.TomorrowsRegionalMap !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.Almanac !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.DopplerRadar !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-		if (this.Hazards !== LoadStatuses.Loading) Percentage += IncreaseAmount;
-
-		return Percentage;
-	};
-
-	let BackGroundImage;
-
 	this.DrawProgress = async () => {
 		const DontLoadGifs = _DontLoadGifs;