From 57858b562d9c2309827d3d86ac9dd530a3468b7a Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Mon, 7 Sep 2020 22:48:10 -0500 Subject: [PATCH] basic progress indication --- server/scripts/modules/localforecast.js | 2 +- server/scripts/modules/navigation.js | 65 ++++++++++++++++--- server/scripts/modules/weatherdisplay.js | 5 +- server/scripts/twc3.js | 82 ------------------------ 4 files changed, 61 insertions(+), 93 deletions(-) diff --git a/server/scripts/modules/localforecast.js b/server/scripts/modules/localforecast.js index 9665956..184263d 100644 --- a/server/scripts/modules/localforecast.js +++ b/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; diff --git a/server/scripts/modules/navigation.js b/server/scripts/modules/navigation.js index dac80a2..8d016a8 100644 --- a/server/scripts/modules/navigation.js +++ b/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, diff --git a/server/scripts/modules/weatherdisplay.js b/server/scripts/modules/weatherdisplay.js index b51dc64..2498953 100644 --- a/server/scripts/modules/weatherdisplay.js +++ b/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 diff --git a/server/scripts/twc3.js b/server/scripts/twc3.js index 154df24..9162536 100644 --- a/server/scripts/twc3.js +++ b/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;