radar images displayed
This commit is contained in:
parent
a87ec12b0a
commit
3ce5e0139f
2
dist/index.html
vendored
2
dist/index.html
vendored
File diff suppressed because one or more lines are too long
2
dist/resources/ws.min.js
vendored
2
dist/resources/ws.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/twc3.html
vendored
2
dist/twc3.html
vendored
|
@ -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>
|
|
@ -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');
|
||||||
|
|
|
@ -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');
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue