canvas reference cleanup
This commit is contained in:
parent
73bec2d23d
commit
58e11474a9
|
@ -5,7 +5,9 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"build:css": "sass ./server/styles/scss/style.scss ./server/styles/compiled.css"
|
"build:css": "sass ./server/styles/scss/style.scss ./server/styles/compiled.css",
|
||||||
|
"lint": "eslint ./server/scripts/**",
|
||||||
|
"lint:fix": "eslint --fix ./server/scripts/**"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
|
|
|
@ -581,4 +581,3 @@ const RegionalCities = [
|
||||||
lon: -110.9698,
|
lon: -110.9698,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -4,9 +4,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
const index = (() => {
|
const index = (() => {
|
||||||
const overrides = {
|
const overrides = {};
|
||||||
// '32899, Orlando, Florida, USA': { x: -80.6774, y: 28.6143 },
|
|
||||||
};
|
|
||||||
const AutoRefreshIntervalMs = 500;
|
const AutoRefreshIntervalMs = 500;
|
||||||
const AutoRefreshTotalIntervalMs = 600000; // 10 min.
|
const AutoRefreshTotalIntervalMs = 600000; // 10 min.
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class Almanac extends WeatherDisplay {
|
class Almanac extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Almanac', true, true);
|
super(navId, elemId, 'Almanac', true);
|
||||||
|
|
||||||
// pre-load background images (returns promises)
|
// pre-load background images (returns promises)
|
||||||
this.backgroundImage0 = utils.image.load('images/BackGround3_1.png');
|
this.backgroundImage0 = utils.image.load('images/BackGround3_1.png');
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class CurrentWeather extends WeatherDisplay {
|
class CurrentWeather extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Current Conditions', true, true);
|
super(navId, elemId, 'Current Conditions', true);
|
||||||
// pre-load background image (returns promise)
|
// pre-load background image (returns promise)
|
||||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||||
}
|
}
|
||||||
|
@ -134,36 +134,6 @@ class CurrentWeather extends WeatherDisplay {
|
||||||
fill.visibility = data.Visibility + data.VisibilityUnit;
|
fill.visibility = data.Visibility + data.VisibilityUnit;
|
||||||
fill.pressure = `${data.Pressure} ${data.PressureDirection}`;
|
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) {
|
if (data.observations.heatIndex.value && data.HeatIndex !== data.Temperature) {
|
||||||
fill['heat-index-label'] = 'Heat Index:';
|
fill['heat-index-label'] = 'Heat Index:';
|
||||||
fill['heat-index'] = data.HeatIndex + String.fromCharCode(176);
|
fill['heat-index'] = data.HeatIndex + String.fromCharCode(176);
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class ExtendedForecast extends WeatherDisplay {
|
class ExtendedForecast extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Extended Forecast', true, true);
|
super(navId, elemId, 'Extended Forecast', true);
|
||||||
|
|
||||||
// set timings
|
// set timings
|
||||||
this.timing.totalScreens = 2;
|
this.timing.totalScreens = 2;
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
class Hourly extends WeatherDisplay {
|
class Hourly extends WeatherDisplay {
|
||||||
constructor(navId, elemId, defaultActive) {
|
constructor(navId, elemId, defaultActive) {
|
||||||
// special height and width for scrolling
|
// special height and width for scrolling
|
||||||
super(navId, elemId, 'Hourly Forecast', defaultActive, true);
|
super(navId, elemId, 'Hourly Forecast', defaultActive);
|
||||||
|
|
||||||
// set up the timing
|
// set up the timing
|
||||||
this.timing.baseDelay = 20;
|
this.timing.baseDelay = 20;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class LatestObservations extends WeatherDisplay {
|
class LatestObservations extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Latest Observations', true, true);
|
super(navId, elemId, 'Latest Observations', true);
|
||||||
|
|
||||||
// constants
|
// constants
|
||||||
this.MaximumRegionalStations = 7;
|
this.MaximumRegionalStations = 7;
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class LocalForecast extends WeatherDisplay {
|
class LocalForecast extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Local Forecast', true, true);
|
super(navId, elemId, 'Local Forecast', true);
|
||||||
|
|
||||||
// set timings
|
// set timings
|
||||||
this.timing.baseDelay = 5000;
|
this.timing.baseDelay = 5000;
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class Progress extends WeatherDisplay {
|
class Progress extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, '', false, true);
|
super(navId, elemId, '', false);
|
||||||
|
|
||||||
// pre-load background image (returns promise)
|
// pre-load background image (returns promise)
|
||||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||||
|
@ -97,12 +97,7 @@ class Progress extends WeatherDisplay {
|
||||||
const display = navigation.getDisplay(index);
|
const display = navigation.getDisplay(index);
|
||||||
if (display && display.status === STATUS.loaded) {
|
if (display && display.status === STATUS.loaded) {
|
||||||
display.showCanvas(navigation.msg.command.firstFrame);
|
display.showCanvas(navigation.msg.command.firstFrame);
|
||||||
if (this.canvas) {
|
this.elem.classList.remove('show');
|
||||||
this.canvas.style.display = 'none';
|
|
||||||
}
|
|
||||||
if (this.isHtml) {
|
|
||||||
this.elem.classList.remove('show');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class Radar extends WeatherDisplay {
|
class Radar extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Local Radar', true, true);
|
super(navId, elemId, 'Local Radar', true);
|
||||||
|
|
||||||
// set max images
|
// set max images
|
||||||
this.dopplerRadarImageMax = 6;
|
this.dopplerRadarImageMax = 6;
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class RegionalForecast extends WeatherDisplay {
|
class RegionalForecast extends WeatherDisplay {
|
||||||
constructor(navId, elemId) {
|
constructor(navId, elemId) {
|
||||||
super(navId, elemId, 'Regional Forecast', true, true);
|
super(navId, elemId, 'Regional Forecast', true);
|
||||||
|
|
||||||
// timings
|
// timings
|
||||||
this.timing.totalScreens = 3;
|
this.timing.totalScreens = 3;
|
||||||
|
@ -102,7 +102,7 @@ class RegionalForecast extends WeatherDisplay {
|
||||||
RegionalForecast.buildForecast(forecast.properties.periods[2], city, cityXY),
|
RegionalForecast.buildForecast(forecast.properties.periods[2], city, cityXY),
|
||||||
];
|
];
|
||||||
} catch (e) {
|
} 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);
|
console.log(e);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
@ -149,11 +149,12 @@ class RegionalForecast extends WeatherDisplay {
|
||||||
// get the observation data
|
// get the observation data
|
||||||
const observation = await utils.fetch.json(`${station}/observations/latest`);
|
const observation = await utils.fetch.json(`${station}/observations/latest`);
|
||||||
// preload the image
|
// preload the image
|
||||||
|
if (!observation.properties.icon) return false;
|
||||||
utils.image.preload(icons.getWeatherRegionalIconFromIconLink(observation.properties.icon, !observation.properties.daytime));
|
utils.image.preload(icons.getWeatherRegionalIconFromIconLink(observation.properties.icon, !observation.properties.daytime));
|
||||||
// return the observation
|
// return the observation
|
||||||
return observation.properties;
|
return observation.properties;
|
||||||
} catch (e) {
|
} 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);
|
console.error(e.status, e.responseJSON);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
class TravelForecast extends WeatherDisplay {
|
class TravelForecast extends WeatherDisplay {
|
||||||
constructor(navId, elemId, defaultActive) {
|
constructor(navId, elemId, defaultActive) {
|
||||||
// special height and width for scrolling
|
// special height and width for scrolling
|
||||||
super(navId, elemId, 'Travel Forecast', defaultActive, true);
|
super(navId, elemId, 'Travel Forecast', defaultActive);
|
||||||
|
|
||||||
// set up the timing
|
// set up the timing
|
||||||
this.timing.baseDelay = 20;
|
this.timing.baseDelay = 20;
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
// radar utilities
|
// radar utilities
|
||||||
|
|
||||||
/* globals SuperGif */
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
const utils = (() => {
|
const utils = (() => {
|
||||||
// ****************************** weather data ********************************
|
// ****************************** 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
|
// 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
|
// 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
|
// a list of cached icons is used to avoid hitting the cache multiple times
|
||||||
|
@ -47,22 +40,6 @@ const utils = (() => {
|
||||||
return true;
|
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 ***********************
|
// *********************************** unit conversions ***********************
|
||||||
|
|
||||||
Math.round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
|
Math.round2 = (value, decimals) => Number(`${Math.round(`${value}e${decimals}`)}e-${decimals}`);
|
||||||
|
@ -218,9 +195,7 @@ const utils = (() => {
|
||||||
},
|
},
|
||||||
image: {
|
image: {
|
||||||
load: loadImg,
|
load: loadImg,
|
||||||
superGifAsync,
|
|
||||||
preload,
|
preload,
|
||||||
drawLocalCanvas,
|
|
||||||
},
|
},
|
||||||
weather: {
|
weather: {
|
||||||
getPoint,
|
getPoint,
|
||||||
|
|
|
@ -12,7 +12,7 @@ const STATUS = {
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
// eslint-disable-next-line no-unused-vars
|
||||||
class WeatherDisplay {
|
class WeatherDisplay {
|
||||||
constructor(navId, elemId, name, defaultEnabled, isHtml) {
|
constructor(navId, elemId, name, defaultEnabled) {
|
||||||
// navId is used in messaging
|
// navId is used in messaging
|
||||||
this.navId = navId;
|
this.navId = navId;
|
||||||
this.elemId = undefined;
|
this.elemId = undefined;
|
||||||
|
@ -21,7 +21,6 @@ class WeatherDisplay {
|
||||||
this.loadingStatus = STATUS.loading;
|
this.loadingStatus = STATUS.loading;
|
||||||
this.name = name ?? elemId;
|
this.name = name ?? elemId;
|
||||||
this.getDataCallbacks = [];
|
this.getDataCallbacks = [];
|
||||||
this.isHtml = isHtml;
|
|
||||||
|
|
||||||
// default navigation timing
|
// default navigation timing
|
||||||
this.timing = {
|
this.timing = {
|
||||||
|
@ -32,8 +31,8 @@ class WeatherDisplay {
|
||||||
this.navBaseCount = 0;
|
this.navBaseCount = 0;
|
||||||
this.screenIndex = -1; // special starting condition
|
this.screenIndex = -1; // special starting condition
|
||||||
|
|
||||||
// create the canvas, also stores this.elemId
|
// store elemId once
|
||||||
this.createCanvas(elemId);
|
this.storeElemId(elemId);
|
||||||
|
|
||||||
if (elemId !== 'progress') this.addCheckbox(defaultEnabled);
|
if (elemId !== 'progress') this.addCheckbox(defaultEnabled);
|
||||||
if (this.enabled) {
|
if (this.enabled) {
|
||||||
|
@ -96,21 +95,10 @@ class WeatherDisplay {
|
||||||
this.loadingStatus = state;
|
this.loadingStatus = state;
|
||||||
}
|
}
|
||||||
|
|
||||||
createCanvas(elemId, width = 640, height = 480) {
|
storeElemId(elemId) {
|
||||||
// only create it once
|
// only create it once
|
||||||
if (this.elemId) return;
|
if (this.elemId) return;
|
||||||
this.elemId = elemId;
|
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
|
// get necessary data for this display
|
||||||
|
@ -143,47 +131,27 @@ class WeatherDisplay {
|
||||||
}
|
}
|
||||||
|
|
||||||
drawCanvas() {
|
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
|
// clean up the first-run flag in screen index
|
||||||
if (this.screenIndex < 0) this.screenIndex = 0;
|
if (this.screenIndex < 0) this.screenIndex = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
finishDraw() {
|
finishDraw() {
|
||||||
let OkToDrawCurrentConditions = true;
|
let OkToDrawCurrentConditions = true;
|
||||||
let OkToDrawNoaaImage = true;
|
|
||||||
let OkToDrawCurrentDateTime = true;
|
let OkToDrawCurrentDateTime = true;
|
||||||
let OkToDrawLogoImage = true;
|
|
||||||
// let OkToDrawCustomScrollText = false;
|
// let OkToDrawCustomScrollText = false;
|
||||||
let bottom;
|
let bottom;
|
||||||
|
|
||||||
// visibility tests
|
// visibility tests
|
||||||
// if (_ScrollText !== '') OkToDrawCustomScrollText = true;
|
// 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') {
|
if (this.elemId === 'progress') {
|
||||||
OkToDrawCurrentConditions = false;
|
OkToDrawCurrentConditions = false;
|
||||||
OkToDrawNoaaImage = false;
|
|
||||||
}
|
}
|
||||||
if (this.elemId === 'radar') {
|
if (this.elemId === 'radar') {
|
||||||
OkToDrawCurrentConditions = false;
|
OkToDrawCurrentConditions = false;
|
||||||
OkToDrawCurrentDateTime = false;
|
OkToDrawCurrentDateTime = false;
|
||||||
OkToDrawNoaaImage = false;
|
|
||||||
// OkToDrawCustomScrollText = false;
|
|
||||||
}
|
}
|
||||||
if (this.elemId === 'hazards') {
|
if (this.elemId === 'hazards') {
|
||||||
OkToDrawNoaaImage = false;
|
|
||||||
bottom = true;
|
bottom = true;
|
||||||
OkToDrawLogoImage = false;
|
|
||||||
}
|
}
|
||||||
// draw functions
|
// draw functions
|
||||||
if (OkToDrawCurrentDateTime) {
|
if (OkToDrawCurrentDateTime) {
|
||||||
|
@ -193,8 +161,6 @@ class WeatherDisplay {
|
||||||
setInterval(() => this.drawCurrentDateTime(bottom), 100);
|
setInterval(() => this.drawCurrentDateTime(bottom), 100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (OkToDrawLogoImage) this.drawLogoImage();
|
|
||||||
if (OkToDrawNoaaImage) this.drawNoaaImage();
|
|
||||||
if (OkToDrawCurrentConditions) {
|
if (OkToDrawCurrentConditions) {
|
||||||
currentWeatherScroll.start();
|
currentWeatherScroll.start();
|
||||||
} else {
|
} else {
|
||||||
|
@ -228,28 +194,6 @@ class WeatherDisplay {
|
||||||
this.lastDate = date;
|
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
|
// show/hide the canvas and start/stop the navigation timer
|
||||||
showCanvas(navCmd) {
|
showCanvas(navCmd) {
|
||||||
// reset timing if enabled
|
// reset timing if enabled
|
||||||
|
@ -259,30 +203,15 @@ class WeatherDisplay {
|
||||||
|
|
||||||
this.startNavCount();
|
this.startNavCount();
|
||||||
|
|
||||||
if (!this.isHtml) {
|
this.elem.classList.add('show');
|
||||||
// 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');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
hideCanvas() {
|
hideCanvas() {
|
||||||
this.resetNavBaseCount();
|
this.resetNavBaseCount();
|
||||||
|
this.elem.classList.remove('show');
|
||||||
if (this.canvas) {
|
|
||||||
this.canvas.style.display = 'none';
|
|
||||||
}
|
|
||||||
if (this.isHtml) {
|
|
||||||
this.elem.classList.remove('show');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
isActive() {
|
isActive() {
|
||||||
if (!this.isHtml) return document.getElementById(`${this.elemId}Canvas`).offsetParent !== null;
|
|
||||||
return this.elem.offsetHeight !== 0;
|
return this.elem.offsetHeight !== 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,288 +0,0 @@
|
||||||
var GetWeatherHazards3 = function (WeatherParameters) {
|
|
||||||
var ZoneId = WeatherParameters.ZoneId;
|
|
||||||
var HazardUrls = [];
|
|
||||||
var HazardCounter = 0;
|
|
||||||
|
|
||||||
WeatherParameters.WeatherHazardConditions =
|
|
||||||
{
|
|
||||||
ZoneId: WeatherParameters.ZoneId,
|
|
||||||
Hazards: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
var Url = 'https://alerts.weather.gov/cap/wwaatmget.php?x=' + ZoneId + '&y=0';
|
|
||||||
|
|
||||||
// Load the xml file using ajax
|
|
||||||
$.ajaxCORS({
|
|
||||||
type: 'GET',
|
|
||||||
url: Url,
|
|
||||||
dataType: 'text',
|
|
||||||
crossDomain: true,
|
|
||||||
cache: false,
|
|
||||||
success: function (text) {
|
|
||||||
// IE doesn't support XML tags with colons.
|
|
||||||
text = text.replaceAll('<cap:', '<cap_');
|
|
||||||
text = text.replaceAll('</cap:', '</cap_');
|
|
||||||
|
|
||||||
var $xml = $(text);
|
|
||||||
//console.log(xml);
|
|
||||||
|
|
||||||
$xml.find('entry').each(function () {
|
|
||||||
var entry = $(this);
|
|
||||||
|
|
||||||
// Skip non-alerts.
|
|
||||||
var cap_msgType = entry.find('cap_msgType');
|
|
||||||
if (cap_msgType.text() !== 'Alert') {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
var link = entry.find('link');
|
|
||||||
var Url = link.attr('href');
|
|
||||||
|
|
||||||
HazardUrls.push(Url);
|
|
||||||
});
|
|
||||||
|
|
||||||
if (HazardUrls.length === 0) {
|
|
||||||
PopulateHazardConditions(WeatherParameters);
|
|
||||||
console.log(WeatherParameters.WeatherHazardConditions);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
$(HazardUrls).each(function () {
|
|
||||||
var Url = this.toString();
|
|
||||||
|
|
||||||
$.ajaxCORS({
|
|
||||||
type: 'GET',
|
|
||||||
url: Url,
|
|
||||||
dataType: 'xml',
|
|
||||||
crossDomain: true,
|
|
||||||
cache: true,
|
|
||||||
success: function (xml) {
|
|
||||||
var $xml = $(xml);
|
|
||||||
console.log(xml);
|
|
||||||
|
|
||||||
var description = $xml.find('description');
|
|
||||||
WeatherParameters.WeatherHazardConditions.Hazards.push(description.text());
|
|
||||||
|
|
||||||
HazardCounter++;
|
|
||||||
if (HazardCounter === HazardUrls.length) {
|
|
||||||
PopulateHazardConditions(WeatherParameters);
|
|
||||||
console.log(WeatherParameters.WeatherHazardConditions);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function () {
|
|
||||||
console.error('GetWeatherHazards3 failed for Url: ' + Url);
|
|
||||||
WeatherParameters.Progress.Hazards = LoadStatuses.Failed;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
error: function (xhr, error, errorThrown) {
|
|
||||||
console.error('GetWeatherHazards3 failed: ' + errorThrown);
|
|
||||||
WeatherParameters.Progress.Hazards = LoadStatuses.Failed;
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var canvasProgress_mousemove = function (e) {
|
|
||||||
canvasProgress.css('cursor', '');
|
|
||||||
|
|
||||||
var RatioX = canvasProgress.width() / 640;
|
|
||||||
var RatioY = canvasProgress.height() / 480;
|
|
||||||
|
|
||||||
if (e.offsetX >= (70 * RatioX) && e.offsetX <= (565 * RatioX)) {
|
|
||||||
//if (e.offsetY >= (105 * RatioY) && e.offsetY <= (350 * RatioY))
|
|
||||||
if (e.offsetY >= (100 * RatioY) && e.offsetY <= (385 * RatioY)) {
|
|
||||||
// Show hand cursor.
|
|
||||||
canvasProgress.css('cursor', 'pointer');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var PopulateHazardConditions = function (WeatherParameters) {
|
|
||||||
if (WeatherParameters === null || (_DontLoadGifs && WeatherParameters.Progress.Hazards !== LoadStatuses.Loaded)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var WeatherHazardConditions = WeatherParameters.WeatherHazardConditions;
|
|
||||||
var ZoneId = WeatherHazardConditions.ZoneId;
|
|
||||||
var Text;
|
|
||||||
var Line;
|
|
||||||
var SkipLine;
|
|
||||||
|
|
||||||
var DontLoadGifs = _DontLoadGifs;
|
|
||||||
|
|
||||||
divHazards.empty();
|
|
||||||
|
|
||||||
$(WeatherHazardConditions.Hazards).each(function () {
|
|
||||||
//Text = this.replaceAll("\n", "<br/>");
|
|
||||||
//divHazards.html(divHazards.html() + "<br/><br/>" + Text);
|
|
||||||
|
|
||||||
Text = this.toString();
|
|
||||||
|
|
||||||
SkipLine = false;
|
|
||||||
|
|
||||||
Text = Text.replaceAll('\n', ' ');
|
|
||||||
//Text = Text.replaceAll("*** ", "");
|
|
||||||
|
|
||||||
//$(Text.split("\n")).each(function ()
|
|
||||||
$(Text.split(' ')).each(function () {
|
|
||||||
Line = this.toString();
|
|
||||||
Line = Line.toUpperCase();
|
|
||||||
|
|
||||||
if (Line.startsWith('&&')) {
|
|
||||||
return false;
|
|
||||||
} else if (Line.startsWith('$$')) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (SkipLine) {
|
|
||||||
if (Line === '') {
|
|
||||||
SkipLine = false;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Line.startsWith(ZoneId)) {
|
|
||||||
SkipLine = true;
|
|
||||||
return true;
|
|
||||||
} else if (Line.indexOf('>') !== -1) {
|
|
||||||
SkipLine = true;
|
|
||||||
return true;
|
|
||||||
} else if (Line.indexOf('LAT...LON ') !== -1) {
|
|
||||||
SkipLine = true;
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
//divHazards.html(divHazards.html() + "<br/>" + Line);
|
|
||||||
if (Line.indexOf('.') === 0 || Line.indexOf('*') === 0) {
|
|
||||||
divHazards.html(divHazards.html() + '<br/><br/>');
|
|
||||||
if (Line.indexOf('.') === 0 && Line.indexOf('...') !== 0) {
|
|
||||||
Line = Line.substr(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
divHazards.html(divHazards.html() + Line + ' ');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
divHazards.html(divHazards.html() + '<br/><br/>');
|
|
||||||
});
|
|
||||||
|
|
||||||
var DrawHazards = function () {
|
|
||||||
// Draw canvas
|
|
||||||
var canvas = canvasHazards[0];
|
|
||||||
var context = canvas.getContext('2d');
|
|
||||||
|
|
||||||
var BackGroundImage = new Image();
|
|
||||||
BackGroundImage.onload = function () {
|
|
||||||
context.drawImage(BackGroundImage, 0, 0);
|
|
||||||
|
|
||||||
if (DontLoadGifs) {
|
|
||||||
UpdateHazards();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (WeatherHazardConditions.Hazards.length > 0) {
|
|
||||||
WeatherParameters.Progress.Hazards = LoadStatuses.Loaded;
|
|
||||||
} else {
|
|
||||||
WeatherParameters.Progress.Hazards = LoadStatuses.NoData;
|
|
||||||
}
|
|
||||||
|
|
||||||
UpdateWeatherCanvas(WeatherParameters, canvasHazards);
|
|
||||||
};
|
|
||||||
BackGroundImage.src = 'images/BackGround7.png';
|
|
||||||
};
|
|
||||||
|
|
||||||
var HazardsText = divHazards.html();
|
|
||||||
|
|
||||||
HazardsText = HazardsText.replaceAll('<br>', '\n');
|
|
||||||
HazardsText = HazardsText.replaceAll('<br/>', '\n');
|
|
||||||
HazardsText = HazardsText.replaceAll('<br />', '\n');
|
|
||||||
HazardsText = HazardsText.replaceAll('<br></br>', '\n');
|
|
||||||
|
|
||||||
WeatherHazardConditions.HazardsText = HazardsText;
|
|
||||||
WeatherHazardConditions.HazardsTextC = ConvertConditionsToMetric(HazardsText);
|
|
||||||
if (_Units === Units.Metric) {
|
|
||||||
HazardsText = WeatherHazardConditions.HazardsTextC;
|
|
||||||
}
|
|
||||||
|
|
||||||
var HazardsWrapped = HazardsText.wordWrap(32);
|
|
||||||
|
|
||||||
var cnvHazardsScroll;
|
|
||||||
|
|
||||||
var ShowHazardsScroll = function () {
|
|
||||||
var cnvHazardsScrollId;
|
|
||||||
var context;
|
|
||||||
|
|
||||||
cnvHazardsScrollId = 'cnvHazardsScroll';
|
|
||||||
|
|
||||||
var HazardsWrappedLines = HazardsWrapped.split('\n');
|
|
||||||
var MaxHazardsWrappedLines = 365;
|
|
||||||
if (_OperatingSystem === OperatingSystems.Andriod) {
|
|
||||||
MaxHazardsWrappedLines = 92;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (HazardsWrappedLines.length > MaxHazardsWrappedLines) {
|
|
||||||
HazardsWrappedLines = HazardsWrappedLines.splice(0, MaxHazardsWrappedLines - 1);
|
|
||||||
}
|
|
||||||
var height = 0 + (HazardsWrappedLines.length * 45);
|
|
||||||
|
|
||||||
if (DontLoadGifs === false) {
|
|
||||||
// Clear the current image.
|
|
||||||
divHazardsScroll.empty();
|
|
||||||
divHazardsScroll.html('<canvas id=\'' + cnvHazardsScrollId + '\' />');
|
|
||||||
cnvHazardsScroll = $('#' + cnvHazardsScrollId);
|
|
||||||
cnvHazardsScroll.attr('width', '640'); // For Chrome.
|
|
||||||
cnvHazardsScroll.attr('height', height); // For Chrome.
|
|
||||||
}
|
|
||||||
cnvHazardsScroll = $('#' + cnvHazardsScrollId);
|
|
||||||
context = cnvHazardsScroll[0].getContext('2d');
|
|
||||||
|
|
||||||
DrawBox(context, 'rgb(112, 35, 35)', 0, 0, 640, height);
|
|
||||||
|
|
||||||
//var y = 0;
|
|
||||||
var y = 45;
|
|
||||||
|
|
||||||
$(HazardsWrappedLines).each(function () {
|
|
||||||
var HazardLine = this.toString();
|
|
||||||
|
|
||||||
DrawText(context, 'Star4000', '24pt', '#FFFFFF', 80, y, HazardLine, 1);
|
|
||||||
|
|
||||||
y += 45;
|
|
||||||
});
|
|
||||||
|
|
||||||
DrawHazards();
|
|
||||||
};
|
|
||||||
ShowHazardsScroll();
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
var UpdateHazards = function (Offset) {
|
|
||||||
var canvas = canvasHazards[0];
|
|
||||||
var context = canvas.getContext('2d');
|
|
||||||
var cnvHazardsScroll = $('#cnvHazardsScroll');
|
|
||||||
|
|
||||||
switch (Offset) {
|
|
||||||
case undefined:
|
|
||||||
break;
|
|
||||||
case 0:
|
|
||||||
_UpdateHazardsY = 0;
|
|
||||||
break;
|
|
||||||
case Infinity:
|
|
||||||
_UpdateHazardsY = cnvHazardsScroll.height();
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
_UpdateHazardsY += (385 * Offset);
|
|
||||||
if (_UpdateHazardsY > cnvHazardsScroll.height()) {
|
|
||||||
_UpdateHazardsY = cnvHazardsScroll.height();
|
|
||||||
} else if (_UpdateHazardsY < 0) {
|
|
||||||
_UpdateHazardsY = 0;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
DrawBox(context, 'rgb(112, 35,35)', 0, 0, 640, 385);
|
|
||||||
context.drawImage(cnvHazardsScroll[0], 0, _UpdateHazardsY, 640, 385, 0, 0, 640, 385);
|
|
||||||
|
|
||||||
|
|
||||||
};
|
|
14
server/scripts/vendor/jquery.touchswipe.min.js
vendored
14
server/scripts/vendor/jquery.touchswipe.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -26,7 +26,6 @@
|
||||||
<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
|
<script type="text/javascript" src="scripts/vendor/jquery.autocomplete.min.js"></script>
|
||||||
<script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
|
<script type="text/javascript" src="scripts/vendor/auto/nosleep.js"></script>
|
||||||
<script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script>
|
<script type="text/javascript" src="scripts/vendor/auto/swiped-events.js"></script>
|
||||||
<script type="text/javascript" src="scripts/vendor/jquery.touchswipe.min.js"></script>
|
|
||||||
<script type="text/javascript" src="scripts/index.js"></script>
|
<script type="text/javascript" src="scripts/index.js"></script>
|
||||||
<script type="text/javascript" src="scripts/data/states.js"></script>
|
<script type="text/javascript" src="scripts/data/states.js"></script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue