lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

basic progress indication

Browse source
This commit is contained in:
Matt Walsh 2020-09-07 22:48:10 -05:00
parent 4b7e314d56
commit 57858b562d
4 changed files with 61 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
server/scripts/modules/localforecast.js
View file

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

65
server/scripts/modules/navigation.js
View file

@ -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,

5
server/scripts/modules/weatherdisplay.js
View file

@ -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

82
server/scripts/twc3.js
View file

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