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 concat = require('gulp-concat');

View file

@ -8,7 +8,7 @@ class LocalForecast extends WeatherDisplay {
super(navId,elemId);
// set timings
this.timing.baseDelay= 3000;
this.timing.baseDelay= 5000;
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png');

View file

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

View file

@ -1,5 +1,5 @@
// current weather conditions display
/* globals WeatherDisplay, utils, STATUS, icons, UNITS, draw, navigation */
/* globals WeatherDisplay, utils, STATUS, draw */
// eslint-disable-next-line no-unused-vars
class Radar extends WeatherDisplay {
@ -8,6 +8,9 @@ class Radar extends WeatherDisplay {
// set max images
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)
this.backgroundImage = utils.image.load('images/BackGround4_1.png');
@ -140,15 +143,42 @@ class Radar extends WeatherDisplay {
return canvas;
}));
// set max length
// set max length
this.timing.totalScreens = radarCanvases.length;
console.log(radarCanvases);
// store the images
this.data = radarCanvases;
this.drawCanvas();
}
drawCanvas() {
async 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.setStatus(STATUS.loaded);

View file

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

View file

@ -104,15 +104,11 @@ class WeatherDisplay {
// visibility tests
// if (_ScrollText !== '') OkToDrawCustomScrollText = true;
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 === 'regionalForecast1')OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast0') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast1') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast2') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalObservations') OkToDrawNoaaImage = false;
if (this.elemId === 'localRadar') {
if (this.elemId === 'radar') {
OkToDrawCurrentConditions = false;
OkToDrawCurrentDateTime = false;
OkToDrawNoaaImage = false;
@ -278,7 +274,7 @@ class WeatherDisplay {
// scan the array for a matching number and calculate new screen index from the number
const timingMatch = this.timing.fullDelay.indexOf(this.navBaseCount);
// 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
this.navNext();
}