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

canvas reference cleanup

Browse Source
This commit is contained in:
Matt Walsh
2022-11-21 21:50:22 -06:00
parent 73bec2d23d
commit 58e11474a9
20 changed files with 26 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,7 @@
// eslint-disable-next-line no-unused-vars
class Almanac extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId, 'Almanac', true, true);
super(navId, elemId, 'Almanac', true);
// pre-load background images (returns promises)
this.backgroundImage0 = utils.image.load('images/BackGround3_1.png');

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

@@ -4,7 +4,7 @@
// eslint-disable-next-line no-unused-vars
class CurrentWeather extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId, 'Current Conditions', true, true);
super(navId, elemId, 'Current Conditions', true);
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
}
@@ -134,36 +134,6 @@ class CurrentWeather extends WeatherDisplay {
fill.visibility = data.Visibility + data.VisibilityUnit;
fill.pressure = `${data.Pressure} ${data.PressureDirection}`;
// switch (data.PressureDirection) {
// case 'R':
// // Shadow
// draw.triangle(this.context, '#000000', 552, 302, 542, 312, 562, 312);
// draw.box(this.context, '#000000', 549, 312, 6, 15);
// // Border
// draw.triangle(this.context, '#000000', 550, 300, 540, 310, 560, 310);
// draw.box(this.context, '#000000', 547, 310, 6, 15);
// // Fill
// draw.triangle(this.context, '#FFFF00', 550, 301, 541, 309, 559, 309);
// draw.box(this.context, '#FFFF00', 548, 309, 4, 15);
// break;
// case 'F':
// // Shadow
// draw.triangle(this.context, '#000000', 552, 327, 542, 317, 562, 317);
// draw.box(this.context, '#000000', 549, 302, 6, 15);
// // Border
// draw.triangle(this.context, '#000000', 550, 325, 540, 315, 560, 315);
// draw.box(this.context, '#000000', 547, 300, 6, 15);
// // Fill
// draw.triangle(this.context, '#FFFF00', 550, 324, 541, 314, 559, 314);
// draw.box(this.context, '#FFFF00', 548, 301, 4, 15);
// break;
// default:
// }
if (data.observations.heatIndex.value && data.HeatIndex !== data.Temperature) {
fill['heat-index-label'] = 'Heat Index:';
fill['heat-index'] = data.HeatIndex + String.fromCharCode(176);

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

@@ -6,7 +6,7 @@
// eslint-disable-next-line no-unused-vars
class ExtendedForecast extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId, 'Extended Forecast', true, true);
super(navId, elemId, 'Extended Forecast', true);
// set timings
this.timing.totalScreens = 2;

2
server/scripts/modules/hourly.js
View File

@@ -5,7 +5,7 @@
class Hourly extends WeatherDisplay {
constructor(navId, elemId, defaultActive) {
// special height and width for scrolling
super(navId, elemId, 'Hourly Forecast', defaultActive, true);
super(navId, elemId, 'Hourly Forecast', defaultActive);
// set up the timing
this.timing.baseDelay = 20;

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

@@ -4,7 +4,7 @@
// eslint-disable-next-line no-unused-vars
class LatestObservations extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId, 'Latest Observations', true, true);
super(navId, elemId, 'Latest Observations', true);
// constants
this.MaximumRegionalStations = 7;

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) {
super(navId, elemId, 'Local Forecast', true, true);
super(navId, elemId, 'Local Forecast', true);
// set timings
this.timing.baseDelay = 5000;

9
server/scripts/modules/progress.js
View File

@@ -5,7 +5,7 @@
// eslint-disable-next-line no-unused-vars
class Progress extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId, '', false, true);
super(navId, elemId, '', false);
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
@@ -97,12 +97,7 @@ class Progress extends WeatherDisplay {
const display = navigation.getDisplay(index);
if (display && display.status === STATUS.loaded) {
display.showCanvas(navigation.msg.command.firstFrame);
if (this.canvas) {
this.canvas.style.display = 'none';
}
if (this.isHtml) {
this.elem.classList.remove('show');
}
this.elem.classList.remove('show');
}
}
}

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

@@ -4,7 +4,7 @@
// eslint-disable-next-line no-unused-vars
class Radar extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId, 'Local Radar', true, true);
super(navId, elemId, 'Local Radar', true);
// set max images
this.dopplerRadarImageMax = 6;

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

@@ -6,7 +6,7 @@
// eslint-disable-next-line no-unused-vars
class RegionalForecast extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId, 'Regional Forecast', true, true);
super(navId, elemId, 'Regional Forecast', true);
// timings
this.timing.totalScreens = 3;
@@ -102,7 +102,7 @@ class RegionalForecast extends WeatherDisplay {
RegionalForecast.buildForecast(forecast.properties.periods[2], city, cityXY),
];
} catch (e) {
console.log(`No regional forecast data for '${city.name}'`);
console.log(`No regional forecast data for '${city.name ?? city.city}'`);
console.log(e);
return false;
}
@@ -149,11 +149,12 @@ class RegionalForecast extends WeatherDisplay {
// get the observation data
const observation = await utils.fetch.json(`${station}/observations/latest`);
// preload the image
if (!observation.properties.icon) return false;
utils.image.preload(icons.getWeatherRegionalIconFromIconLink(observation.properties.icon, !observation.properties.daytime));
// return the observation
return observation.properties;
} catch (e) {
console.log(`Unable to get regional observations for ${city.Name}`);
console.log(`Unable to get regional observations for ${city.Name ?? city.city}`);
console.error(e.status, e.responseJSON);
return false;
}

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

@@ -5,7 +5,7 @@
class TravelForecast extends WeatherDisplay {
constructor(navId, elemId, defaultActive) {
// special height and width for scrolling
super(navId, elemId, 'Travel Forecast', defaultActive, true);
super(navId, elemId, 'Travel Forecast', defaultActive);
// set up the timing
this.timing.baseDelay = 20;

25
server/scripts/modules/utilities.js
View File

@@ -1,6 +1,5 @@
// radar utilities
/* globals SuperGif */
// eslint-disable-next-line no-unused-vars
const utils = (() => {
// ****************************** weather data ********************************
@@ -30,12 +29,6 @@ const utils = (() => {
}
});
// async version of SuperGif
const superGifAsync = (e) => new Promise((resolve) => {
const gif = new SuperGif(e);
gif.load(() => resolve(gif));
});
// preload an image
// the goal is to get it in the browser's cache so it is available more quickly when the browser needs it
// a list of cached icons is used to avoid hitting the cache multiple times
@@ -47,22 +40,6 @@ const utils = (() => {
return true;
};
// draw an image on a local canvas and return the context
const drawLocalCanvas = (img) => {
// create a canvas
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// get the context
const context = canvas.getContext('2d');
context.imageSmoothingEnabled = false;
// draw the image
context.drawImage(img, 0, 0);
return context;
};
// *********************************** unit conversions ***********************
Math.round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
@@ -218,9 +195,7 @@ const utils = (() => {
},
image: {
load: loadImg,
superGifAsync,
preload,
drawLocalCanvas,
},
weather: {
getPoint,

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

@@ -12,7 +12,7 @@ const STATUS = {
// eslint-disable-next-line no-unused-vars
class WeatherDisplay {
constructor(navId, elemId, name, defaultEnabled, isHtml) {
constructor(navId, elemId, name, defaultEnabled) {
// navId is used in messaging
this.navId = navId;
this.elemId = undefined;
@@ -21,7 +21,6 @@ class WeatherDisplay {
this.loadingStatus = STATUS.loading;
this.name = name ?? elemId;
this.getDataCallbacks = [];
this.isHtml = isHtml;
// default navigation timing
this.timing = {
@@ -32,8 +31,8 @@ class WeatherDisplay {
this.navBaseCount = 0;
this.screenIndex = -1; // special starting condition
// create the canvas, also stores this.elemId
this.createCanvas(elemId);
// store elemId once
this.storeElemId(elemId);
if (elemId !== 'progress') this.addCheckbox(defaultEnabled);
if (this.enabled) {
@@ -96,21 +95,10 @@ class WeatherDisplay {
this.loadingStatus = state;
}
createCanvas(elemId, width = 640, height = 480) {
storeElemId(elemId) {
// only create it once
if (this.elemId) return;
this.elemId = elemId;
// no additional work if this is HTML
if (this.isHtml) return;
// create a canvas
const canvas = document.createElement('template');
canvas.innerHTML = `<canvas id='${`${elemId}Canvas`}' width='${width}' height='${height}' style='display: none;' />`;
// add to the page
const container = document.getElementById('container');
container.appendChild(canvas.content.firstChild);
}
// get necessary data for this display
@@ -143,47 +131,27 @@ class WeatherDisplay {
}
drawCanvas() {
if (!this.isHtml) {
// stop all gifs
this.gifs.forEach((gif) => gif.pause());
// delete the gifs
this.gifs.length = 0;
// refresh the canvas
this.canvas = document.getElementById(`${this.elemId}Canvas`);
this.context = this.canvas.getContext('2d');
}
// clean up the first-run flag in screen index
if (this.screenIndex < 0) this.screenIndex = 0;
}
finishDraw() {
let OkToDrawCurrentConditions = true;
let OkToDrawNoaaImage = true;
let OkToDrawCurrentDateTime = true;
let OkToDrawLogoImage = true;
// let OkToDrawCustomScrollText = false;
let bottom;
// visibility tests
// if (_ScrollText !== '') OkToDrawCustomScrollText = true;
if (this.elemId === 'almanac') OkToDrawNoaaImage = false;
if (this.elemId === 'travelForecast') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast') OkToDrawNoaaImage = false;
if (this.elemId === 'progress') {
OkToDrawCurrentConditions = false;
OkToDrawNoaaImage = false;
}
if (this.elemId === 'radar') {
OkToDrawCurrentConditions = false;
OkToDrawCurrentDateTime = false;
OkToDrawNoaaImage = false;
// OkToDrawCustomScrollText = false;
}
if (this.elemId === 'hazards') {
OkToDrawNoaaImage = false;
bottom = true;
OkToDrawLogoImage = false;
}
// draw functions
if (OkToDrawCurrentDateTime) {
@@ -193,8 +161,6 @@ class WeatherDisplay {
setInterval(() => this.drawCurrentDateTime(bottom), 100);
}
}
if (OkToDrawLogoImage) this.drawLogoImage();
if (OkToDrawNoaaImage) this.drawNoaaImage();
if (OkToDrawCurrentConditions) {
currentWeatherScroll.start();
} else {
@@ -228,28 +194,6 @@ class WeatherDisplay {
this.lastDate = date;
}
async drawNoaaImage() {
if (this.isHtml) return;
// load the image and store locally
if (!this.drawNoaaImage.image) {
this.drawNoaaImage.image = utils.image.load('images/noaa5.gif');
}
// wait for the image to load completely
const img = await this.drawNoaaImage.image;
this.context.drawImage(img, 356, 39);
}
async drawLogoImage() {
if (this.isHtml) return;
// load the image and store locally
if (!this.drawLogoImage.image) {
this.drawLogoImage.image = utils.image.load('images/Logo3.png');
}
// wait for the image load completely
const img = await this.drawLogoImage.image;
this.context.drawImage(img, 50, 30, 85, 67);
}
// show/hide the canvas and start/stop the navigation timer
showCanvas(navCmd) {
// reset timing if enabled
@@ -259,30 +203,15 @@ class WeatherDisplay {
this.startNavCount();
if (!this.isHtml) {
// see if the canvas is already showing
if (this.canvas.style.display === 'block') return;
// show the canvas
this.canvas.style.display = 'block';
} else {
this.elem.classList.add('show');
}
this.elem.classList.add('show');
}
hideCanvas() {
this.resetNavBaseCount();
if (this.canvas) {
this.canvas.style.display = 'none';
}
if (this.isHtml) {
this.elem.classList.remove('show');
}
this.elem.classList.remove('show');
}
isActive() {
if (!this.isHtml) return document.getElementById(`${this.elemId}Canvas`).offsetParent !== null;
return this.elem.offsetHeight !== 0;
}