radar displays timestamp

This commit is contained in:
Matt Walsh 2020-09-08 16:50:53 -05:00
parent 6a2317d283
commit 53a9d5f00b
5 changed files with 23 additions and 6 deletions

2
dist/index.html vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
dist/twc3.html vendored
View file

@ -1 +1 @@
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><link rel="preload" href="fonts/Star4000.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star 4 Radar.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Extended.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Large Compressed.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Large.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Small.woff" as="font" crossorigin="anonymous"><link rel="stylesheet" type="text/css" href="resources/twc3.min.css?_=2.3.1"><script type="text/javascript" src="resources/data.min.js"></script><script type="text/javascript" src="resources/ws.min.js?_=2.3.1"></script></head><body><div id="version" style="display:none">2.3.1</div><div id="container"></div></body></html> <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><link rel="preload" href="fonts/Star4000.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star 4 Radar.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Extended.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Large Compressed.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Large.woff" as="font" crossorigin="anonymous"><link rel="preload" href="fonts/Star4000 Small.woff" as="font" crossorigin="anonymous"><link rel="stylesheet" type="text/css" href="resources/twc3.min.css?_=2.3.2"><script type="text/javascript" src="resources/data.min.js"></script><script type="text/javascript" src="resources/ws.min.js?_=2.3.2"></script></head><body><div id="version" style="display:none">2.3.2</div><div id="container"></div></body></html>

View file

@ -1,5 +1,5 @@
// current weather conditions display // current weather conditions display
/* globals WeatherDisplay, utils, STATUS, draw */ /* globals WeatherDisplay, utils, STATUS, draw, luxon */
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
class Radar extends WeatherDisplay { class Radar extends WeatherDisplay {
@ -25,6 +25,9 @@ class Radar extends WeatherDisplay {
return; return;
} }
// date and time parsing
const {DateTime} = luxon;
// get the base map // get the base map
let src = 'images/4000RadarMap2.jpg'; let src = 'images/4000RadarMap2.jpg';
if (weatherParameters.State === 'HI') src = 'images/HawaiiRadarMap2.png'; if (weatherParameters.State === 'HI') src = 'images/HawaiiRadarMap2.png';
@ -106,6 +109,7 @@ class Radar extends WeatherDisplay {
} }
// Load the most recent doppler radar images. // Load the most recent doppler radar images.
const radarTimes = [];
const radarCanvases = await Promise.all(urls.map(async (url) => { const radarCanvases = await Promise.all(urls.map(async (url) => {
// create destination context // create destination context
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
@ -114,6 +118,17 @@ class Radar extends WeatherDisplay {
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
context.imageSmoothingEnabled = false; context.imageSmoothingEnabled = false;
// store the time
const [, year, month, day, hour, minute] = url.match(/_(\d{4})(\d\d)(\d\d)_(\d\d)(\d\d)_/);
radarTimes.push(DateTime.fromObject({
year,
month,
day,
hour,
minute,
zone: 'UTC',
}).setZone());
// get the image // get the image
const blob = await $.ajaxCORS({ const blob = await $.ajaxCORS({
type: 'GET', type: 'GET',
@ -158,13 +173,14 @@ class Radar extends WeatherDisplay {
this.timing.totalScreens = radarCanvases.length; this.timing.totalScreens = radarCanvases.length;
// store the images // store the images
this.data = radarCanvases; this.data = radarCanvases;
this.times = radarTimes;
this.drawCanvas(); this.drawCanvas();
} }
async drawCanvas() { async drawCanvas() {
super.drawCanvas(); super.drawCanvas();
this.context.drawImage(await this.backgroundImage, 0, 0); this.context.drawImage(await this.backgroundImage, 0, 0);
const {DateTime} = luxon;
// Title // Title
draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 175, 65, 'Local', 2); draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 175, 65, 'Local', 2);
draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 175, 100, 'Radar', 2); draw.text(this.context, 'Arial', 'bold 28pt', '#ffffff', 175, 100, 'Radar', 2);
@ -190,6 +206,7 @@ class Radar extends WeatherDisplay {
draw.text(this.context, 'Arial', 'bold 18pt', '#ffffff', 355, 105, '= Incomplete Data', 2); draw.text(this.context, 'Arial', 'bold 18pt', '#ffffff', 355, 105, '= Incomplete Data', 2);
this.context.drawImage(this.data[this.screenIndex], 0, 0, 640, 367, 0, 113, 640, 367); this.context.drawImage(this.data[this.screenIndex], 0, 0, 640, 367, 0, 113, 640, 367);
draw.text(this.context, 'Star4000 Small', '24pt', '#ffffff', 100, 110, this.times[this.screenIndex].toLocaleString(DateTime.TIME_SIMPLE), 2, 'center');
this.finishDraw(); this.finishDraw();
this.setStatus(STATUS.loaded); this.setStatus(STATUS.loaded);

View file

@ -1 +1 @@
module.exports = '2.3.1'; module.exports = '2.3.2';