eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-17 00:59:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

progress display

Browse Source
This commit is contained in:
Matt Walsh
2020-09-08 14:39:17 -05:00
parent 3825397c78
commit 560d3a8cb2
16 changed files with 131 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
server/scripts/modules/almanac.js
View File

@@ -4,7 +4,7 @@
// eslint-disable-next-line no-unused-vars
class Almanac extends WeatherDisplay {
constructor(navId,elemId,weatherParameters) {
constructor(navId,elemId) {
super(navId,elemId,'Almanac');
// pre-load background image (returns promise)
@@ -19,9 +19,6 @@ class Almanac extends WeatherDisplay {
];
this.backgroundImage = utils.image.load('images/BackGround3_1.png');
// get the data
this.getData(weatherParameters);
}
getData(weatherParameters) {

5
server/scripts/modules/currentweather.js
View File

@@ -3,13 +3,10 @@
// eslint-disable-next-line no-unused-vars
class CurrentWeather extends WeatherDisplay {
constructor(navId,elemId,weatherParameters) {
constructor(navId,elemId) {
super(navId,elemId,'Current Conditions');
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
// get the data
this.getData(weatherParameters);
}
async getData(weatherParameters) {

6
server/scripts/modules/extendedforecast.js
View File

@@ -5,7 +5,7 @@
// eslint-disable-next-line no-unused-vars
class ExtendedForecast extends WeatherDisplay {
constructor(navId,elemId,weatherParameters) {
constructor(navId,elemId) {
super(navId,elemId,'Extended Forecast');
// set timings
@@ -13,10 +13,6 @@ class ExtendedForecast extends WeatherDisplay {
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround2_1.png');
// get the data
this.getData(weatherParameters);
}
async getData(weatherParameters) {

4
server/scripts/modules/latestobservations.js
View File

@@ -3,15 +3,13 @@
// eslint-disable-next-line no-unused-vars
class LatestObservations extends WeatherDisplay {
constructor(navId,elemId, weatherParameters) {
constructor(navId,elemId) {
super(navId,elemId,'Latest Observations');
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
// constants
this.MaximumRegionalStations = 7;
// get the data
this.getData(weatherParameters);
}
async getData(weatherParameters) {

5
server/scripts/modules/localforecast.js
View File

@@ -4,7 +4,7 @@
// eslint-disable-next-line no-unused-vars
class LocalForecast extends WeatherDisplay {
constructor(navId,elemId,weatherParameters) {
constructor(navId,elemId) {
super(navId,elemId, 'Local Forecast');
// set timings
@@ -12,9 +12,6 @@ class LocalForecast extends WeatherDisplay {
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
// get the data
this.getData(weatherParameters);
}
async getData(weatherParameters) {

66
server/scripts/modules/navigation.js
View File

@@ -1,7 +1,7 @@
'use strict';
// navigation handles progress, next/previous and initial load messages from the parent frame
/* globals utils, _StationInfo, STATUS, draw */
/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar */
/* globals utils, _StationInfo, STATUS */
/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar, Progress */
document.addEventListener('DOMContentLoaded', () => {
navigation.init();
@@ -18,7 +18,7 @@ const navigation = (() => {
let initialLoadDone = false;
let currentUnits = UNITS.english;
let playing = false;
let backgroundImage;
let progress;
const init = async () => {
// set up message receive and dispatch accordingly
@@ -47,8 +47,6 @@ const navigation = (() => {
console.error(`Unknown event ${data.type}`);
}
}, false);
backgroundImage = await utils.image.load('images/BackGround1_1.png');
drawProgressCanvas();
};
const postMessage = (type, message = {}) => {
@@ -109,15 +107,19 @@ const navigation = (() => {
new Almanac(6, 'almanac', weatherParameters),
new Radar(7, 'radar', weatherParameters),
];
} else {
// or just call for new data if the canvases already exist
displays.forEach(display => display.getData(weatherParameters));
}
// call for new data on each display
displays.forEach(display => display.getData(weatherParameters));
// GetMonthPrecipitation(this.weatherParameters);
// GetAirQuality3(this.weatherParameters);
// ShowDopplerMap(this.weatherParameters);
// GetWeatherHazards3(this.weatherParameters);
// draw the progress canvas
progress = new Progress(-1,'progress');
progress.drawCanvas();
progress.showCanvas();
};
// receive a status update from a module {id, value}
@@ -127,10 +129,10 @@ const navigation = (() => {
// test for loaded status
if (value.status !== STATUS.loaded) return;
drawProgressCanvas();
progress.drawCanvas(displays, countLoadedCanvases());
// send loaded messaged to parent
if (countLoadedCanvases < displays.length) return;
if (countLoadedCanvases() < displays.length) return;
postMessage('loaded');
// store the display number
};
@@ -238,50 +240,6 @@ 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,

98
server/scripts/modules/progress.js Normal file
View File

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

5
server/scripts/modules/radar.js
View File

@@ -3,7 +3,7 @@
// eslint-disable-next-line no-unused-vars
class Radar extends WeatherDisplay {
constructor(navId,elemId,weatherParameters) {
constructor(navId,elemId) {
super(navId,elemId,'Local Radar');
// set max images
@@ -14,9 +14,6 @@ class Radar extends WeatherDisplay {
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround4_1.png');
// get the data
this.getData(weatherParameters);
}
async getData(weatherParameters) {

6
server/scripts/modules/regionalforecast.js
View File

@@ -5,7 +5,7 @@
// eslint-disable-next-line no-unused-vars
class RegionalForecast extends WeatherDisplay {
constructor(navId,elemId, weatherParameters) {
constructor(navId,elemId) {
super(navId,elemId,'Regional Forecast');
// pre-load background image (returns promise)
@@ -13,12 +13,8 @@ class RegionalForecast extends WeatherDisplay {
// timings
this.timing.totalScreens = 3;
// get the data and update the promise
this.getData(weatherParameters);
}
// get the data from the globally shared object
async getData(weatherParameters) {
super.getData();
// pre-load the base map (returns promise)

5
server/scripts/modules/travelforecast.js
View File

@@ -3,7 +3,7 @@
// eslint-disable-next-line no-unused-vars
class TravelForecast extends WeatherDisplay {
constructor(navId, elemId, weatherParameters) {
constructor(navId, elemId) {
// special height and width for scrolling
super(navId, elemId, 'Travel Forecast');
// pre-load background image (returns promise)
@@ -26,9 +26,6 @@ class TravelForecast extends WeatherDisplay {
if (extra !== 0) this.timing.delay.push(Math.round(this.extra*this.cityHeight));
// add the final 3 second delay
this.timing.delay.push(150);
// get the data
this.getData(weatherParameters);
}
async getData() {

6
server/scripts/modules/weatherdisplay.js
View File

@@ -90,8 +90,6 @@ class WeatherDisplay {
// refresh the canvas
this.canvas = document.getElementById(this.elemId+'Canvas');
this.context = this.canvas.getContext('2d');
// clear the canvas
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
finishDraw() {
@@ -136,7 +134,6 @@ class WeatherDisplay {
// if (OkToDrawCustomScrollText) DrawCustomScrollText(WeatherParameters, context);
}
// TODO: update clock automatically
drawCurrentDateTime(bottom) {
// only draw if canvas is active to conserve battery
if (!this.isActive()) return;
@@ -226,6 +223,9 @@ class WeatherDisplay {
// show the canvas
this.canvas.style.display = 'block';
// stop if timing has been disabled
if (!this.timing) return;
// reset timing
this.startNavCount(navigation.isPlaying());