progress display
This commit is contained in:
parent
3825397c78
commit
560d3a8cb2
|
@ -1,4 +1,4 @@
|
|||
const version = '2.2.0';
|
||||
const version = require('../version');
|
||||
|
||||
const gulp = require('gulp');
|
||||
const concat = require('gulp-concat');
|
||||
|
@ -43,6 +43,7 @@ const js_sources = [
|
|||
'server/scripts/modules/extendedforecast.js',
|
||||
'server/scripts/modules/almanac.js',
|
||||
'server/scripts/modules/radar.js',
|
||||
'server/scripts/modules/progress.js',
|
||||
'server/scripts/modules/navigation.js',
|
||||
];
|
||||
gulp.task('compress_js', () =>
|
||||
|
@ -79,6 +80,7 @@ gulp.task('compress_html', () =>
|
|||
gulp.src(html_sources)
|
||||
.pipe(ejs({
|
||||
production: version,
|
||||
version,
|
||||
}))
|
||||
.pipe(rename({extname: '.html'}))
|
||||
.pipe(htmlmin({collapseWhitespace: true}))
|
||||
|
|
4
index.js
4
index.js
|
@ -15,15 +15,19 @@ const radarPassThru = require('./cors/radar');
|
|||
app.get('/stations/*', corsPassThru);
|
||||
app.get('/Conus/*', radarPassThru);
|
||||
|
||||
// version
|
||||
const version = require('./version');
|
||||
|
||||
const index = (req, res) => {
|
||||
res.render(path.join(__dirname, 'views/index'), {
|
||||
production: false,
|
||||
version,
|
||||
});
|
||||
};
|
||||
const twc3 = (req, res) => {
|
||||
res.render(path.join(__dirname, 'views/twc3'), {
|
||||
production: false,
|
||||
version,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class Almanac extends WeatherDisplay {
|
||||
constructor(navId,elemId,weatherParameters) {
|
||||
constructor(navId,elemId) {
|
||||
super(navId,elemId,'Almanac');
|
||||
|
||||
// pre-load background image (returns promise)
|
||||
|
@ -19,9 +19,6 @@ class Almanac extends WeatherDisplay {
|
|||
];
|
||||
|
||||
this.backgroundImage = utils.image.load('images/BackGround3_1.png');
|
||||
|
||||
// get the data
|
||||
this.getData(weatherParameters);
|
||||
}
|
||||
|
||||
getData(weatherParameters) {
|
||||
|
|
|
@ -3,13 +3,10 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class CurrentWeather extends WeatherDisplay {
|
||||
constructor(navId,elemId,weatherParameters) {
|
||||
constructor(navId,elemId) {
|
||||
super(navId,elemId,'Current Conditions');
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||
|
||||
// get the data
|
||||
this.getData(weatherParameters);
|
||||
}
|
||||
|
||||
async getData(weatherParameters) {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class ExtendedForecast extends WeatherDisplay {
|
||||
constructor(navId,elemId,weatherParameters) {
|
||||
constructor(navId,elemId) {
|
||||
super(navId,elemId,'Extended Forecast');
|
||||
|
||||
// set timings
|
||||
|
@ -13,10 +13,6 @@ class ExtendedForecast extends WeatherDisplay {
|
|||
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround2_1.png');
|
||||
|
||||
// get the data
|
||||
this.getData(weatherParameters);
|
||||
|
||||
}
|
||||
|
||||
async getData(weatherParameters) {
|
||||
|
|
|
@ -3,15 +3,13 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class LatestObservations extends WeatherDisplay {
|
||||
constructor(navId,elemId, weatherParameters) {
|
||||
constructor(navId,elemId) {
|
||||
super(navId,elemId,'Latest Observations');
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||
|
||||
// constants
|
||||
this.MaximumRegionalStations = 7;
|
||||
// get the data
|
||||
this.getData(weatherParameters);
|
||||
}
|
||||
|
||||
async getData(weatherParameters) {
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class LocalForecast extends WeatherDisplay {
|
||||
constructor(navId,elemId,weatherParameters) {
|
||||
constructor(navId,elemId) {
|
||||
super(navId,elemId, 'Local Forecast');
|
||||
|
||||
// set timings
|
||||
|
@ -12,9 +12,6 @@ class LocalForecast extends WeatherDisplay {
|
|||
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||
|
||||
// get the data
|
||||
this.getData(weatherParameters);
|
||||
}
|
||||
|
||||
async getData(weatherParameters) {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
'use strict';
|
||||
// navigation handles progress, next/previous and initial load messages from the parent frame
|
||||
/* globals utils, _StationInfo, STATUS, draw */
|
||||
/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar */
|
||||
/* globals utils, _StationInfo, STATUS */
|
||||
/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar, Progress */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
navigation.init();
|
||||
|
@ -18,7 +18,7 @@ const navigation = (() => {
|
|||
let initialLoadDone = false;
|
||||
let currentUnits = UNITS.english;
|
||||
let playing = false;
|
||||
let backgroundImage;
|
||||
let progress;
|
||||
|
||||
const init = async () => {
|
||||
// set up message receive and dispatch accordingly
|
||||
|
@ -47,8 +47,6 @@ const navigation = (() => {
|
|||
console.error(`Unknown event ${data.type}`);
|
||||
}
|
||||
}, false);
|
||||
backgroundImage = await utils.image.load('images/BackGround1_1.png');
|
||||
drawProgressCanvas();
|
||||
};
|
||||
|
||||
const postMessage = (type, message = {}) => {
|
||||
|
@ -109,15 +107,19 @@ const navigation = (() => {
|
|||
new Almanac(6, 'almanac', weatherParameters),
|
||||
new Radar(7, 'radar', weatherParameters),
|
||||
];
|
||||
} else {
|
||||
// or just call for new data if the canvases already exist
|
||||
displays.forEach(display => display.getData(weatherParameters));
|
||||
}
|
||||
// call for new data on each display
|
||||
displays.forEach(display => display.getData(weatherParameters));
|
||||
|
||||
// GetMonthPrecipitation(this.weatherParameters);
|
||||
// GetAirQuality3(this.weatherParameters);
|
||||
// ShowDopplerMap(this.weatherParameters);
|
||||
// GetWeatherHazards3(this.weatherParameters);
|
||||
|
||||
// draw the progress canvas
|
||||
progress = new Progress(-1,'progress');
|
||||
progress.drawCanvas();
|
||||
progress.showCanvas();
|
||||
};
|
||||
|
||||
// receive a status update from a module {id, value}
|
||||
|
@ -127,10 +129,10 @@ const navigation = (() => {
|
|||
// test for loaded status
|
||||
if (value.status !== STATUS.loaded) return;
|
||||
|
||||
drawProgressCanvas();
|
||||
progress.drawCanvas(displays, countLoadedCanvases());
|
||||
|
||||
// send loaded messaged to parent
|
||||
if (countLoadedCanvases < displays.length) return;
|
||||
if (countLoadedCanvases() < displays.length) return;
|
||||
postMessage('loaded');
|
||||
// store the display number
|
||||
};
|
||||
|
@ -238,50 +240,6 @@ const navigation = (() => {
|
|||
}
|
||||
};
|
||||
|
||||
const drawProgressCanvas = () => {
|
||||
const canvas = document.getElementById('progressCanvas');
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
context.drawImage(backgroundImage, 0, 100, 640, 300, 0, 100, 640, 300);
|
||||
draw.horizontalGradientSingle(context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
|
||||
draw.horizontalGradientSingle(context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
|
||||
|
||||
displays.forEach((display, idx) => {
|
||||
const y = 120 + idx*29;
|
||||
const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
|
||||
draw.text(context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
|
||||
|
||||
// Erase any dots that spill into the status text.
|
||||
context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
|
||||
draw.horizontalGradientSingle(context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
|
||||
|
||||
let statusText;
|
||||
let statusColor;
|
||||
switch (display.status) {
|
||||
case STATUS.loading:
|
||||
statusText = 'Loading';
|
||||
statusColor = '#ffff00';
|
||||
break;
|
||||
case STATUS.loaded:
|
||||
statusText = 'Press Here';
|
||||
statusColor = '#00ff00';
|
||||
break;
|
||||
case STATUS.failed:
|
||||
statusText = 'Failed';
|
||||
statusColor = '#ff0000';
|
||||
break;
|
||||
case STATUS.noData:
|
||||
statusText = 'No Data';
|
||||
statusColor = '#C0C0C0';
|
||||
draw.box(context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
draw.text(context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
init,
|
||||
updateStatus,
|
||||
|
|
98
server/scripts/modules/progress.js
Normal file
98
server/scripts/modules/progress.js
Normal file
|
@ -0,0 +1,98 @@
|
|||
// regional forecast and observations
|
||||
|
||||
/* globals WeatherDisplay, utils, STATUS, draw */
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class Progress extends WeatherDisplay {
|
||||
constructor(navId,elemId) {
|
||||
super(navId, elemId);
|
||||
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
|
||||
|
||||
// disable any navigation timing
|
||||
this.timing = false;
|
||||
|
||||
this.version = document.getElementById('version').innerHTML;
|
||||
}
|
||||
|
||||
async drawCanvas(displays, loadedCount) {
|
||||
super.drawCanvas();
|
||||
// set up an event listener
|
||||
if (!this.eventListener) {
|
||||
this.eventListener = true;
|
||||
this.canvas.addEventListener('click', (e) => this.canvasClick(e), false);
|
||||
}
|
||||
|
||||
// get the background image
|
||||
const backgroundImage = await this.backgroundImage;
|
||||
|
||||
// only draw the background once
|
||||
if (!this.backgroundDrawn) {
|
||||
this.context.drawImage(backgroundImage, 0, 0, 640, 480, 0, 0, 640, 480);
|
||||
draw.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2);
|
||||
draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2);
|
||||
draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2);
|
||||
draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
|
||||
draw.titleText(this.context, 'WeatherStar', '4000+ ' + this.version);
|
||||
}
|
||||
|
||||
this.finishDraw();
|
||||
// if no displays provided just draw the backgrounds (above)
|
||||
if (!displays) return;
|
||||
displays.forEach((display, idx) => {
|
||||
const y = 120 + idx*29;
|
||||
const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
|
||||
draw.text(this.context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
|
||||
|
||||
|
||||
let statusText;
|
||||
let statusColor;
|
||||
switch (display.status) {
|
||||
case STATUS.loading:
|
||||
statusText = 'Loading';
|
||||
statusColor = '#ffff00';
|
||||
break;
|
||||
case STATUS.loaded:
|
||||
statusText = 'Press Here';
|
||||
statusColor = '#00ff00';
|
||||
this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25);
|
||||
break;
|
||||
case STATUS.failed:
|
||||
statusText = 'Failed';
|
||||
statusColor = '#ff0000';
|
||||
break;
|
||||
case STATUS.noData:
|
||||
statusText = 'No Data';
|
||||
statusColor = '#C0C0C0';
|
||||
draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
|
||||
break;
|
||||
default:
|
||||
}
|
||||
// Erase any dots that spill into the status text.
|
||||
this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
|
||||
draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
|
||||
|
||||
});
|
||||
|
||||
|
||||
// calculate loaded percent
|
||||
const loadedPercent = (loadedCount/displays.length);
|
||||
|
||||
if (loadedPercent < 1.0) {
|
||||
// Draw a box for the progress.
|
||||
draw.box(this.context, '#000000', 51, 428, 534, 22);
|
||||
draw.box(this.context, '#ffffff', 53, 430, 530, 18);
|
||||
// update the progress gif
|
||||
draw.box(this.context, '#1d7fff', 55, 432, 526*loadedPercent, 14);
|
||||
} else {
|
||||
// restore the background
|
||||
this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
canvasClick(e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class Radar extends WeatherDisplay {
|
||||
constructor(navId,elemId,weatherParameters) {
|
||||
constructor(navId,elemId) {
|
||||
super(navId,elemId,'Local Radar');
|
||||
|
||||
// set max images
|
||||
|
@ -14,9 +14,6 @@ class Radar extends WeatherDisplay {
|
|||
|
||||
// pre-load background image (returns promise)
|
||||
this.backgroundImage = utils.image.load('images/BackGround4_1.png');
|
||||
|
||||
// get the data
|
||||
this.getData(weatherParameters);
|
||||
}
|
||||
|
||||
async getData(weatherParameters) {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class RegionalForecast extends WeatherDisplay {
|
||||
constructor(navId,elemId, weatherParameters) {
|
||||
constructor(navId,elemId) {
|
||||
super(navId,elemId,'Regional Forecast');
|
||||
|
||||
// pre-load background image (returns promise)
|
||||
|
@ -13,12 +13,8 @@ class RegionalForecast extends WeatherDisplay {
|
|||
|
||||
// timings
|
||||
this.timing.totalScreens = 3;
|
||||
|
||||
// get the data and update the promise
|
||||
this.getData(weatherParameters);
|
||||
}
|
||||
|
||||
// get the data from the globally shared object
|
||||
async getData(weatherParameters) {
|
||||
super.getData();
|
||||
// pre-load the base map (returns promise)
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
class TravelForecast extends WeatherDisplay {
|
||||
constructor(navId, elemId, weatherParameters) {
|
||||
constructor(navId, elemId) {
|
||||
// special height and width for scrolling
|
||||
super(navId, elemId, 'Travel Forecast');
|
||||
// pre-load background image (returns promise)
|
||||
|
@ -26,9 +26,6 @@ class TravelForecast extends WeatherDisplay {
|
|||
if (extra !== 0) this.timing.delay.push(Math.round(this.extra*this.cityHeight));
|
||||
// add the final 3 second delay
|
||||
this.timing.delay.push(150);
|
||||
|
||||
// get the data
|
||||
this.getData(weatherParameters);
|
||||
}
|
||||
|
||||
async getData() {
|
||||
|
|
|
@ -90,8 +90,6 @@ class WeatherDisplay {
|
|||
// refresh the canvas
|
||||
this.canvas = document.getElementById(this.elemId+'Canvas');
|
||||
this.context = this.canvas.getContext('2d');
|
||||
// clear the canvas
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
|
||||
finishDraw() {
|
||||
|
@ -136,7 +134,6 @@ class WeatherDisplay {
|
|||
// if (OkToDrawCustomScrollText) DrawCustomScrollText(WeatherParameters, context);
|
||||
}
|
||||
|
||||
// TODO: update clock automatically
|
||||
drawCurrentDateTime(bottom) {
|
||||
// only draw if canvas is active to conserve battery
|
||||
if (!this.isActive()) return;
|
||||
|
@ -226,6 +223,9 @@ class WeatherDisplay {
|
|||
// show the canvas
|
||||
this.canvas.style.display = 'block';
|
||||
|
||||
// stop if timing has been disabled
|
||||
if (!this.timing) return;
|
||||
|
||||
// reset timing
|
||||
this.startNavCount(navigation.isPlaying());
|
||||
|
||||
|
|
|
@ -1,36 +1,16 @@
|
|||
/* globals _StationInfo, luxon, _RegionalCities, utils, icons, _TravelCities, SunCalc */
|
||||
const {DateTime} = luxon;
|
||||
const _DayShortNames = { 'Sunday': 'Sun', 'Monday': 'Mon', 'Tuesday': 'Tue', 'Wednesday': 'Wed', 'Thursday': 'Thu', 'Friday': 'Fri', 'Saturday': 'Sat' };
|
||||
const _DayLongNameArray = Object.keys(_DayShortNames);
|
||||
const _DayLongNames = { 'Sun': 'Sunday', 'Mon': 'Monday', 'Tue': 'Tuesday', 'Wed': 'Wednesday', 'Thu': 'Thursday', 'Fri': 'Friday', 'Sat': 'Saturday' };
|
||||
const _MonthLongNames = { 'Jan': 'January', 'Feb': 'February', 'Mar': 'March', 'Apr': 'April', 'May': 'May', 'Jun': 'June', 'Jul': 'July', 'Aug': 'August', 'Sep': 'September', 'Oct': 'October', 'Nov': 'November', 'Dec': 'December' };
|
||||
|
||||
var canvasProgress;
|
||||
var divProgress;
|
||||
|
||||
var divRegionalCurrentMap;
|
||||
var canvasRegionalObservations;
|
||||
|
||||
var divRegionalForecastMap1;
|
||||
var divRegionalForecastMap2;
|
||||
var canvasRegionalForecast1;
|
||||
var canvasRegionalForecast2;
|
||||
|
||||
var divDopplerRadarMap;
|
||||
var canvasLocalRadar;
|
||||
|
||||
var divTemperature;
|
||||
var divStation;
|
||||
var divConditions;
|
||||
var divHumidity;
|
||||
var divIcon;
|
||||
var divDewpoint;
|
||||
var divCeiling;
|
||||
var divVisibility;
|
||||
var divWind;
|
||||
var divPressure;
|
||||
var divGust;
|
||||
var divHeatIndex;
|
||||
var canvasCurrentWeather;
|
||||
|
||||
var canvasExtendedForecast1;
|
||||
|
@ -48,8 +28,6 @@ var canvasOutlook;
|
|||
var canvasMarineForecast;
|
||||
var canvasAirQuality;
|
||||
|
||||
var tblTravelCities;
|
||||
var divTravelCitiesScroll;
|
||||
var canvasTravelForecast;
|
||||
|
||||
var divOutlookTemp;
|
||||
|
@ -57,14 +35,10 @@ var cnvOutlookTemp;
|
|||
var divOutlookPrcp;
|
||||
var cnvOutlookPrcp;
|
||||
|
||||
var tblRegionalObservations;
|
||||
var canvasLatestObservations;
|
||||
|
||||
var _WeatherParameters = null;
|
||||
|
||||
var _DopplerRadarInterval = null;
|
||||
var _DopplerRadarImageIndex = 0;
|
||||
var _DopplerRadarImageMax = 6;
|
||||
|
||||
var LoadStatuses = {
|
||||
Loading: 0,
|
||||
|
@ -73,7 +47,6 @@ var LoadStatuses = {
|
|||
NoData: 3,
|
||||
};
|
||||
|
||||
var _UpdateWeatherCanvasInterval = null;
|
||||
var _UpdateWeatherUpdateMs = 50;
|
||||
var canvasBackGroundDateTime = null;
|
||||
var canvasBackGroundCurrentConditions = null;
|
||||
|
@ -95,7 +68,6 @@ var _UpdateCustomScrollTextMs = 0;
|
|||
|
||||
var _UpdateHazardsY = 0;
|
||||
|
||||
var _UpdateLocalForecastIndex = 0;
|
||||
|
||||
var CanvasTypes = {
|
||||
Progress: 0,
|
||||
|
@ -117,33 +89,10 @@ var CanvasTypes = {
|
|||
Hazards: 16,
|
||||
};
|
||||
var _FirstCanvasType = CanvasTypes.Progress;
|
||||
var _LastCanvasType = CanvasTypes.Hazards;
|
||||
var _CurrentCanvasType = _FirstCanvasType;
|
||||
var _CurrentPosition = 0.0;
|
||||
var _PreviousPosition = 0.0;
|
||||
|
||||
var _IsPlaying = false;
|
||||
var _PlayIntervalId = null;
|
||||
|
||||
var _IsAudioPlaying = false;
|
||||
var _AudioPlayIntervalId = null;
|
||||
var _AudioPlayInterval = 100;
|
||||
var _AudioFadeOutIntervalId = null;
|
||||
var _MusicUrls = [];
|
||||
var _MusicUrlsTemp = [];
|
||||
var audMusic = null;
|
||||
var _AudioContext = null;
|
||||
var _AudioBufferSource = null;
|
||||
var _AudioDuration = 0;
|
||||
var _AudioCurrentTime = 0;
|
||||
var _AudioGain = null;
|
||||
var _AudioRefreshIntervalId = null;
|
||||
|
||||
var _IsNarrationPlaying = false;
|
||||
var _Utterance = false;
|
||||
var _CurrentUtterance = false;
|
||||
var _CurrentUtteranceId = null;
|
||||
var _IsSpeaking = false;
|
||||
|
||||
const OperatingSystems = {
|
||||
Unknown: 0,
|
||||
|
@ -698,80 +647,6 @@ $.fn.scrollIntoView = function () {
|
|||
};
|
||||
|
||||
|
||||
var _PlayInterval = 100;
|
||||
var _PlayMs = 0;
|
||||
var _PlayMsOffsets = {
|
||||
Start: 0,
|
||||
End: 0,
|
||||
Length: 0,
|
||||
CurrentWeather_Start: 0,
|
||||
CurrentWeather_End: 10000,
|
||||
CurrentWeather_Length: 10000,
|
||||
CurrentWeather_Loaded: false,
|
||||
LatestObservations_Start: 0,
|
||||
LatestObservations_End: 0,
|
||||
LatestObservations_Length: 10000,
|
||||
LatestObservations_Loaded: false,
|
||||
TravelForecast_Start: 0,
|
||||
TravelForecast_End: 0,
|
||||
TravelForecast_Length: 60000,
|
||||
TravelForecast_Loaded: false,
|
||||
RegionalForecast1_Start: 0,
|
||||
RegionalForecast1_End: 0,
|
||||
RegionalForecast1_Length: 10000,
|
||||
RegionalForecast1_Loaded: false,
|
||||
RegionalForecast2_Start: 0,
|
||||
RegionalForecast2_End: 0,
|
||||
RegionalForecast2_Length: 10000,
|
||||
RegionalForecast2_Loaded: false,
|
||||
RegionalObservations_Start: 0,
|
||||
RegionalObservations_End: 0,
|
||||
RegionalObservations_Length: 10000,
|
||||
RegionalObservations_Loaded: false,
|
||||
LocalForecast_Start: 0,
|
||||
LocalForecast_End: 0,
|
||||
LocalForecast_Length: 0,
|
||||
LocalForecast_Loaded: false,
|
||||
MarineForecast_Start: 0,
|
||||
MarineForecast_End: 0,
|
||||
MarineForecast_Length: 10000,
|
||||
MarineForecast_Loaded: false,
|
||||
AirQuality_Start: 0,
|
||||
AirQuality_End: 0,
|
||||
AirQuality_Length: 10000,
|
||||
AirQuality_Loaded: false,
|
||||
ExtendedForecast1_Start: 0,
|
||||
ExtendedForecast1_End: 0,
|
||||
ExtendedForecast1_Length: 10000,
|
||||
ExtendedForecast1_Loaded: false,
|
||||
ExtendedForecast2_Start: 0,
|
||||
ExtendedForecast2_End: 0,
|
||||
ExtendedForecast2_Length: 10000,
|
||||
ExtendedForecast2_Loaded: false,
|
||||
Almanac_Start: 0,
|
||||
Almanac_End: 0,
|
||||
Almanac_Length: 10000,
|
||||
Almanac_Loaded: false,
|
||||
AlmanacTides_Start: 0,
|
||||
AlmanacTides_End: 0,
|
||||
AlmanacTides_Length: 10000,
|
||||
AlmanacTides_Loaded: false,
|
||||
Outlook_Start: 0,
|
||||
Outlook_End: 0,
|
||||
Outlook_Length: 10000,
|
||||
Outlook_Loaded: false,
|
||||
LocalRadar_Start: 0,
|
||||
LocalRadar_End: 0,
|
||||
LocalRadar_Length: 15000,
|
||||
LocalRadar_Loaded: false,
|
||||
Hazards_Start: 0,
|
||||
Hazards_End: 0,
|
||||
Hazards_Length: 0,
|
||||
Hazards_Loaded: false,
|
||||
};
|
||||
|
||||
|
||||
|
||||
var canvasProgress_mousemove = function (e) {
|
||||
canvasProgress.css('cursor', '');
|
||||
|
||||
|
@ -884,23 +759,6 @@ var canvasProgress_click = function (e) {
|
|||
};
|
||||
|
||||
|
||||
String.prototype.centerText = function(numberOfSpaces) {
|
||||
var text = this;
|
||||
text = text.trim();
|
||||
if (text.length > numberOfSpaces) {
|
||||
return text;
|
||||
}
|
||||
var l = text.length;
|
||||
var w2 = Math.floor(numberOfSpaces / 2);
|
||||
var l2 = Math.floor(l / 2);
|
||||
var s = new Array(w2 - l2).join(' ');
|
||||
text = s + text + s;
|
||||
if (text.length < numberOfSpaces) {
|
||||
text += new Array(numberOfSpaces - text.length + 1).join(' ');
|
||||
}
|
||||
return text;
|
||||
};
|
||||
|
||||
var PopulateHazardConditions = function (WeatherParameters) {
|
||||
if (WeatherParameters === null || (_DontLoadGifs && WeatherParameters.Progress.Hazards !== LoadStatuses.Loaded)) {
|
||||
return;
|
||||
|
@ -1109,96 +967,6 @@ Number.prototype.pad = function(size) {
|
|||
|
||||
|
||||
const Progress = function (e) {
|
||||
|
||||
|
||||
const _ProgressInterval = window.setInterval(() => {
|
||||
gifProgress.get_canvas().width = (ProgressPercent / 100) * 530 + 1;
|
||||
|
||||
if (ProgressPercent > 0) {
|
||||
gifProgress.setX(53);
|
||||
gifProgress.setY(430);
|
||||
}
|
||||
|
||||
_DisplayLoadingDetails();
|
||||
if (ProgressPercent >= 100) {
|
||||
gifProgress.pause();
|
||||
window.clearInterval(_ProgressInterval);
|
||||
if (typeof _CallBack === 'function') _CallBack({ Status: 'LOADED', LastUpdate: new Date() });
|
||||
}
|
||||
|
||||
}, 250);
|
||||
|
||||
const _DisplayLoadingDetails = () => {
|
||||
context.drawImage(BackGroundImage, 0, 100, 640, 300, 0, 100, 640, 300);
|
||||
DrawHorizontalGradientSingle(context, 0, 90, 52, 399, _SideColor1, _SideColor2);
|
||||
DrawHorizontalGradientSingle(context, 584, 90, 640, 399, _SideColor1, _SideColor2);
|
||||
|
||||
const __DrawText = (caption, status) => {
|
||||
let StatusText;
|
||||
let StatusColor;
|
||||
|
||||
|
||||
|
||||
OffsetY += 29;
|
||||
};
|
||||
|
||||
__DrawText('Current Conditions', WeatherParameters.Progress.CurrentConditions);
|
||||
__DrawText('Latest Observations', WeatherParameters.Progress.NearbyConditions);
|
||||
__DrawText('Travel Forecast', WeatherParameters.Progress.TravelForecast);
|
||||
__DrawText('Regional Forecast', WeatherParameters.Progress.TomorrowsRegionalMap);
|
||||
__DrawText('Regional Observations', WeatherParameters.Progress.CurrentRegionalMap);
|
||||
__DrawText('Local Forecast', WeatherParameters.Progress.WordedForecast);
|
||||
__DrawText('Extended Forecast', WeatherParameters.Progress.FourDayForecast);
|
||||
__DrawText('Almanac', WeatherParameters.Progress.Almanac);
|
||||
__DrawText('Local Radar', WeatherParameters.Progress.DopplerRadar);
|
||||
__DrawText('Hazardous Weather', WeatherParameters.Progress.Hazards);
|
||||
|
||||
};
|
||||
|
||||
this.DrawProgress = async () => {
|
||||
const DontLoadGifs = _DontLoadGifs;
|
||||
|
||||
BackGroundImage = await utils.loadImg('images/BackGround1_1.png');
|
||||
_self.Loaded = false;
|
||||
|
||||
if (!DontLoadGifs || !gifProgress) {
|
||||
// Conditions Icon
|
||||
gifProgress = await utils.SuperGifAsync({
|
||||
src: 'images/Progress1.gif',
|
||||
loop_delay: 100,
|
||||
auto_play: true,
|
||||
canvas: canvas,
|
||||
x: 50,
|
||||
y: 480,
|
||||
});
|
||||
}
|
||||
|
||||
context.drawImage(BackGroundImage, 0, 0);
|
||||
DrawHorizontalGradientSingle(context, 0, 30, 500, 90, _TopColor1, _TopColor2);
|
||||
DrawTriangle(context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90);
|
||||
|
||||
canvasBackGroundDateTime[0].getContext('2d').drawImage(canvas, 410, 30, 175, 60, 0, 0, 175, 60);
|
||||
canvasBackGroundCurrentConditions[0].getContext('2d').drawImage(canvas, 0, 405, 640, 75, 0, 0, 640, 75);
|
||||
|
||||
DrawTitleText(context, 'WeatherStar', '4000+ 2.00');
|
||||
|
||||
// Draw a box for the progress.
|
||||
DrawBox(context, '#000000', 51, 428, 534, 22);
|
||||
DrawBox(context, '#ffffff', 53, 430, 530, 18);
|
||||
|
||||
_DisplayLoadingDetails();
|
||||
|
||||
UpdateWeatherCanvas(WeatherParameters, canvasProgress);
|
||||
|
||||
_self.Loaded = true;
|
||||
|
||||
if (DontLoadGifs === false)e.OnLoad();
|
||||
|
||||
};
|
||||
this.DrawProgress();
|
||||
};
|
||||
|
||||
|
||||
const DrawCustomScrollText = (WeatherParameters, context) => {
|
||||
const font = 'Star4000';
|
||||
const size = '24pt';
|
||||
|
@ -1215,9 +983,6 @@ const DrawCustomScrollText = (WeatherParameters, context) => {
|
|||
context.drawImage(canvasBackGroundCurrentConditions[0], 0, 0, 640, 75, 0, 405, 640, 75);
|
||||
|
||||
const text = _ScrollText;
|
||||
//text = "WELCOME TO THE WEATHER STAR 4000+! IF YOU ARE ENJOYING THIS SITE THEN YOU WILL LOVE THE WEATHER STAR 4000 SIMULATOR!";
|
||||
//text = "Hello World!";
|
||||
//text = "A";
|
||||
|
||||
x = 640 - ((_UpdateCustomScrollTextMs / _UpdateWeatherUpdateMs) * 5);
|
||||
// Wait an extra 5 characters.
|
||||
|
|
1
version.js
Normal file
1
version.js
Normal file
|
@ -0,0 +1 @@
|
|||
module.exports = '2.2.0';
|
|
@ -34,12 +34,13 @@
|
|||
<script type="text/javascript" src="scripts/modules/extendedforecast.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/almanac.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/radar.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/progress.js"></script>
|
||||
<script type="text/javascript" src="scripts/modules/navigation.js"></script>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<div id="version" style="display:none"><%- version %> </div>
|
||||
<div id="container">
|
||||
<canvas id="progressCanvas" width="640" height="480"></canvas>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
|
Loading…
Reference in a new issue