radar images displayed

This commit is contained in:
Matt Walsh 2020-09-05 20:01:13 -05:00
parent a87ec12b0a
commit 3ce5e0139f
9 changed files with 46 additions and 20 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="stylesheet" type="text/css" href="resources/ws.min.css?_=2.1.0"><script type="text/javascript" src="resources/ws.min.js?_=2.1.0"></script></head><body><!-- This will force the browser to download the font before the canvas is rendered. --><div class="fontPreload" id="Star4000">123 This is a test</div><div class="fontPreload" id="Star4000Extended">123 This is a test</div><div class="fontPreload" id="Star4000LargeCompressedNumbers">123 This is a test</div><div class="fontPreload" id="Star4000LargeCompressed">123 This is a test</div><div class="fontPreload" id="Star4000Large">123 This is a test</div><div class="fontPreload" id="Star4000Small">123 This is a test</div><div class="fontPreload" id="Star4Radar">123 This is a test</div><div id="container"><canvas id="progressCanvas" width="640" height="480"></canvas></div></body></html> <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=2.2.0"><script type="text/javascript" src="resources/ws.min.js?_=2.2.0"></script></head><body><!-- This will force the browser to download the font before the canvas is rendered. --><div class="fontPreload" id="Star4000">123 This is a test</div><div class="fontPreload" id="Star4000Extended">123 This is a test</div><div class="fontPreload" id="Star4000LargeCompressedNumbers">123 This is a test</div><div class="fontPreload" id="Star4000LargeCompressed">123 This is a test</div><div class="fontPreload" id="Star4000Large">123 This is a test</div><div class="fontPreload" id="Star4000Small">123 This is a test</div><div class="fontPreload" id="Star4Radar">123 This is a test</div><div id="container"><canvas id="progressCanvas" width="640" height="480"></canvas></div></body></html>

View file

@ -1,4 +1,4 @@
const version = '2.1.0'; const version = '2.2.0';
const gulp = require('gulp'); const gulp = require('gulp');
const concat = require('gulp-concat'); const concat = require('gulp-concat');

View file

@ -8,7 +8,7 @@ class LocalForecast extends WeatherDisplay {
super(navId,elemId); super(navId,elemId);
// set timings // set timings
this.timing.baseDelay= 3000; this.timing.baseDelay= 5000;
// 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');

View file

@ -106,7 +106,7 @@ const navigation = (() => {
new RegionalForecast(5, 'regionalForecast2', weatherParameters, 2), new RegionalForecast(5, 'regionalForecast2', weatherParameters, 2),
new LocalForecast(6, 'localForecast', weatherParameters), new LocalForecast(6, 'localForecast', weatherParameters),
new ExtendedForecast(7, 'extendedForecast', weatherParameters), new ExtendedForecast(7, 'extendedForecast', weatherParameters),
new Almanac(8, 'alamanac', weatherParameters), new Almanac(8, 'almanac', weatherParameters),
new Radar(8, 'radar', weatherParameters), new Radar(8, 'radar', weatherParameters),
]; ];
} else { } else {

View file

@ -1,5 +1,5 @@
// current weather conditions display // current weather conditions display
/* globals WeatherDisplay, utils, STATUS, icons, UNITS, draw, navigation */ /* globals WeatherDisplay, utils, STATUS, draw */
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
class Radar extends WeatherDisplay { class Radar extends WeatherDisplay {
@ -8,6 +8,9 @@ class Radar extends WeatherDisplay {
// set max images // set max images
this.dopplerRadarImageMax = 6; this.dopplerRadarImageMax = 6;
// update timing
this.timing.baseDelay = 350;
this.timing.delay = [4,1,1,1,1,1,12];
// pre-load background image (returns promise) // pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround4_1.png'); this.backgroundImage = utils.image.load('images/BackGround4_1.png');
@ -142,13 +145,40 @@ class Radar extends WeatherDisplay {
})); }));
// set max length // set max length
this.timing.totalScreens = radarCanvases.length; this.timing.totalScreens = radarCanvases.length;
// store the images
console.log(radarCanvases); this.data = radarCanvases;
this.drawCanvas();
} }
drawCanvas() { async drawCanvas() {
super.drawCanvas(); super.drawCanvas();
this.context.drawImage(await this.backgroundImage, 0, 0);
// Title
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 18pt', '#ffffff', 390, 49, 'PRECIP', 2);
draw.text(this.context, 'Arial', 'bold 18pt', '#ffffff', 298, 73, 'Light', 2);
draw.text(this.context, 'Arial', 'bold 18pt', '#ffffff', 517, 73, 'Heavy', 2);
let x = 362;
const y = 52;
draw.box(this.context, '#000000', x - 2, y - 2, 154, 28);
draw.box(this.context, 'rgb(49, 210, 22)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(28, 138, 18)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(20, 90, 15)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(10, 40, 10)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(196, 179, 70)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(190, 72, 19)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(171, 14, 14)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(115, 31, 4)', x, y, 17, 24); x += 19;
draw.box(this.context, 'rgb(143, 73, 95)', 318, 83, 32, 24);
draw.box(this.context, 'rgb(250, 122, 232)', 320, 85, 28, 20);
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.finishDraw(); this.finishDraw();
this.setStatus(STATUS.loaded); this.setStatus(STATUS.loaded);

View file

@ -25,7 +25,7 @@ class TravelForecast extends WeatherDisplay {
// add the extra (not exactly 4 pages portion) // add the extra (not exactly 4 pages portion)
if (extra !== 0) this.timing.delay.push(Math.round(this.extra*this.cityHeight)); if (extra !== 0) this.timing.delay.push(Math.round(this.extra*this.cityHeight));
// add the final 3 second delay // add the final 3 second delay
this.timing.delay.push(150+timingStep); this.timing.delay.push(150);
// get the data // get the data
this.getData(weatherParameters); this.getData(weatherParameters);

View file

@ -104,15 +104,11 @@ class WeatherDisplay {
// visibility tests // visibility tests
// if (_ScrollText !== '') OkToDrawCustomScrollText = true; // if (_ScrollText !== '') OkToDrawCustomScrollText = true;
if (this.elemId === 'almanac') OkToDrawNoaaImage = false; if (this.elemId === 'almanac') OkToDrawNoaaImage = false;
if (this.elemId === 'almanacTides') OkToDrawNoaaImage = false;
if (this.elemId === 'outlook') OkToDrawNoaaImage = false;
if (this.elemId === 'marineForecast')OkToDrawNoaaImage = false;
if (this.elemId === 'airQuality') OkToDrawNoaaImage = false;
if (this.elemId === 'travelForecast') OkToDrawNoaaImage = false; if (this.elemId === 'travelForecast') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast1')OkToDrawNoaaImage = false; if (this.elemId === 'regionalForecast0') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast1') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast2') OkToDrawNoaaImage = false; if (this.elemId === 'regionalForecast2') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalObservations') OkToDrawNoaaImage = false; if (this.elemId === 'radar') {
if (this.elemId === 'localRadar') {
OkToDrawCurrentConditions = false; OkToDrawCurrentConditions = false;
OkToDrawCurrentDateTime = false; OkToDrawCurrentDateTime = false;
OkToDrawNoaaImage = false; OkToDrawNoaaImage = false;
@ -278,7 +274,7 @@ class WeatherDisplay {
// scan the array for a matching number and calculate new screen index from the number // scan the array for a matching number and calculate new screen index from the number
const timingMatch = this.timing.fullDelay.indexOf(this.navBaseCount); const timingMatch = this.timing.fullDelay.indexOf(this.navBaseCount);
// if not found return // if not found return
if (timingMatch < 0) return; if (timingMatch < 0 && this.navBaseCount <= this.timing.fullDelay[this.timing.totalScreens-1]) return;
// navigate to the next screen // navigate to the next screen
this.navNext(); this.navNext();
} }