add hourly forecast

This commit is contained in:
Matt Walsh 2020-10-20 16:37:11 -05:00
parent 85148ea5fa
commit c4e8ef6a14
11 changed files with 70 additions and 18 deletions

2
dist/index.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"><title>WeatherStar 4000+</title><meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!"><meta name="keywords" content="WeatherStar 4000+"><meta name="author" content="Matt Walsh"><meta name="application-name" content="WeatherStar 4000+"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><link rel="manifest" href="manifest.json"><link rel="icon" href="images/Logo192.png"><link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=3.6.3"><script type="text/javascript" src="resources/data.min.js?_=3.6.3"></script><script type="text/javascript" src="resources/ws.min.js?_=3.6.3"></script></head><body><div id="divQuery"><form id="frmGetLatLng"><input id="txtAddress" type="text" value="" placeholder="Zip or City, State"><button id="btnGetGps" type="button" title="Get GPS Location"><img id="imgGetGps" src="images/nav/ic_gps_fixed_black_18dp_1x.png"></button> <input id="btnGetLatLng" type="submit" value="GO"> <input id="btnClearQuery" type="reset" value="Reset"></form><div id="divLat"></div><div id="divLng"></div></div><br><img id="imgPause1x" src="images/nav/ic_pause_white_24dp_1x.png"> <img id="imgPause2x" src="images/nav/ic_pause_white_24dp_2x.png"><div id="version" style="display:none">3.6.3</div><div id="divTwc"><div id="container"><div id="loading" width="640" height="480"><div><div class="title">WeatherStar 4000+</div><div class="instructions">Enter your location above to continue</div></div></div></div><div id="divTwcBottom"><div id="divTwcBottomLeft"><img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu"> <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous"> <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next"> <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play"></div><div id="divTwcBottomMiddle"><img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh"></div><div id="divTwcBottomRight"><img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen"></div></div></div><br><div class="info"><a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a></div><div class="heading">Selected displays</div><div id="enabledDisplays"></div><div id="divInfo">Location: <span id="spanCity"></span> <span id="spanState"></span><br>Station Id: <span id="spanStationId"></span><br>Radar Id: <span id="spanRadarId"></span><br>Zone Id: <span id="spanZoneId"></span><br></div><div id="divRefresh">Last Update: <span id="spanLastRefresh">(None)</span><br><input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox"><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label></div><div id="divUnits">Units: <input id="radEnglish" name="radUnits" type="radio" value="ENGLISH"><label for="radEnglish">English</label> <input id="radMetric" name="radUnits" type="radio" value="METRIC"><label for="radMetric">Metric</label></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"><title>WeatherStar 4000+</title><meta name="description" content="Web based WeatherStar 4000 simulator that reports current and forecast weather conditions plus a few extras!"><meta name="keywords" content="WeatherStar 4000+"><meta name="author" content="Matt Walsh"><meta name="application-name" content="WeatherStar 4000+"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><link rel="manifest" href="manifest.json"><link rel="icon" href="images/Logo192.png"><link rel="stylesheet" type="text/css" href="resources/ws.min.css?_=3.7.0"><script type="text/javascript" src="resources/data.min.js?_=3.7.0"></script><script type="text/javascript" src="resources/ws.min.js?_=3.7.0"></script></head><body><div id="divQuery"><form id="frmGetLatLng"><input id="txtAddress" type="text" value="" placeholder="Zip or City, State"><button id="btnGetGps" type="button" title="Get GPS Location"><img id="imgGetGps" src="images/nav/ic_gps_fixed_black_18dp_1x.png"></button> <input id="btnGetLatLng" type="submit" value="GO"> <input id="btnClearQuery" type="reset" value="Reset"></form><div id="divLat"></div><div id="divLng"></div></div><br><img id="imgPause1x" src="images/nav/ic_pause_white_24dp_1x.png"> <img id="imgPause2x" src="images/nav/ic_pause_white_24dp_2x.png"><div id="version" style="display:none">3.7.0</div><div id="divTwc"><div id="container"><div id="loading" width="640" height="480"><div><div class="title">WeatherStar 4000+</div><div class="instructions">Enter your location above to continue</div></div></div></div><div id="divTwcBottom"><div id="divTwcBottomLeft"><img id="NavigateMenu" class="navButton" src="images/nav/ic_menu_white_24dp_1x.png" title="Menu"> <img id="NavigatePrevious" class="navButton" src="images/nav/ic_skip_previous_white_24dp_1x.png" title="Previous"> <img id="NavigateNext" class="navButton" src="images/nav/ic_skip_next_white_24dp_1x.png" title="Next"> <img id="NavigatePlay" class="navButton" src="images/nav/ic_play_arrow_white_24dp_1x.png" title="Play"></div><div id="divTwcBottomMiddle"><img id="NavigateRefresh" class="navButton" src="images/nav/ic_refresh_white_24dp_1x.png" title="Refresh"></div><div id="divTwcBottomRight"><img id="ToggleFullScreen" class="navButton" src="images/nav/ic_fullscreen_exit_white_24dp_1x.png" title="Exit Fullscreen"></div></div></div><br><div class="info"><a href="https://github.com/netbymatt/ws4kp#weatherstar-4000">More information</a></div><div class="heading">Selected displays</div><div id="enabledDisplays"></div><div id="divInfo">Location: <span id="spanCity"></span> <span id="spanState"></span><br>Station Id: <span id="spanStationId"></span><br>Radar Id: <span id="spanRadarId"></span><br>Zone Id: <span id="spanZoneId"></span><br></div><div id="divRefresh">Last Update: <span id="spanLastRefresh">(None)</span><br><input id="chkAutoRefresh" name="chkAutoRefresh" type="checkbox"><label id="lblRefreshCountDown" for="chkAutoRefresh">Auto Refresh: <span id="spanRefreshCountDown">--:--</span></label></div><div id="divUnits">Units: <input id="radEnglish" name="radUnits" type="radio" value="ENGLISH"><label for="radEnglish">English</label> <input id="radMetric" name="radUnits" type="radio" value="METRIC"><label for="radMetric">Metric</label></div></body></html>

File diff suppressed because one or more lines are too long

View file

@ -48,6 +48,7 @@ const js_sources = [
'server/scripts/modules/extendedforecast.js', 'server/scripts/modules/extendedforecast.js',
'server/scripts/modules/almanac.js', 'server/scripts/modules/almanac.js',
'server/scripts/modules/radar.js', 'server/scripts/modules/radar.js',
'server/scripts/modules/hourly.js',
'server/scripts/modules/progress.js', 'server/scripts/modules/progress.js',
'server/scripts/modules/navigation.js', 'server/scripts/modules/navigation.js',
]; ];

View file

@ -1 +1,2 @@
[1016/115344.136:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) [1016/115344.136:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
[1020/120229.281:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)

View file

@ -318,4 +318,9 @@ class Almanac extends WeatherDisplay {
this.finishDraw(); this.finishDraw();
} }
// make sun and moon data available outside this class
getSun() {
return this.data;
}
} }

View file

@ -251,8 +251,39 @@ const icons = (() => {
} }
}; };
const getHourlyIcon = (skyCover, visibility, iceAccumulation, probabilityOfPrecipitation, snowfallAmount, windSpeed, isNight = false) => {
// internal function to add path to returned icon
const addPath = (icon) => `images/r/${icon}`;
// first item in list is highest priority, units are metric where applicable
if (iceAccumulation > 0) return addPath('Freezing-Rain-1992.gif');
if (snowfallAmount > 10) {
if (windSpeed > 30) return addPath('Blowing Snow.gif');
return addPath('Heavy-Snow-1994.gif');
}
if (snowfallAmount > 0) return addPath('Light-Snow.gif');
if (probabilityOfPrecipitation > 70) return addPath('Rain-1992.gif');
if (probabilityOfPrecipitation > 50) return addPath('Shower.gif');
if (probabilityOfPrecipitation > 30) {
if (!isNight) return addPath('Scattered-Showers-1994.gif');
return addPath('Scattered-Showers-Night.gif');
}
if (skyCover > 70) return addPath('Cloudy.gif');
if (skyCover > 50) {
if (!isNight) return addPath('Mostly-Cloudy-1994.gif');
return addPath('Partly-Clear-1994.gif');
}
if (skyCover > 30) {
if (!isNight) return addPath('Partly-Cloudy.gif');
return addPath('Mostly-Clear.gif');
}
if (isNight) return addPath('Clear-1992.gif');
return addPath('Sunny.gif');
};
return { return {
getWeatherIconFromIconLink, getWeatherIconFromIconLink,
getWeatherRegionalIconFromIconLink, getWeatherRegionalIconFromIconLink,
getHourlyIcon,
}; };
})(); })();

View file

@ -1,7 +1,7 @@
'use strict'; 'use strict';
// navigation handles progress, next/previous and initial load messages from the parent frame // navigation handles progress, next/previous and initial load messages from the parent frame
/* globals index, utils, _StationInfo, STATUS */ /* globals index, utils, _StationInfo, STATUS */
/* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar, Progress, currentWeatherScroll */ /* globals CurrentWeather, LatestObservations, TravelForecast, RegionalForecast, LocalForecast, ExtendedForecast, Almanac, Radar, Progress, Hourly */
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
navigation.init(); navigation.init();
@ -19,8 +19,9 @@ const navigation = (() => {
let playing = false; let playing = false;
let progress; let progress;
// current conditions are made available from the display below // current conditions and sunrise/sunset are made available from the display below
let currentWeather; let currentWeather;
let almanac;
const init = async () => { const init = async () => {
// nothing to do // nothing to do
@ -79,6 +80,7 @@ const navigation = (() => {
weatherParameters.state = point.properties.relativeLocation.properties.state; weatherParameters.state = point.properties.relativeLocation.properties.state;
weatherParameters.timeZone = point.properties.relativeLocation.properties.timeZone; weatherParameters.timeZone = point.properties.relativeLocation.properties.timeZone;
weatherParameters.forecast = point.properties.forecast; weatherParameters.forecast = point.properties.forecast;
weatherParameters.forecastGridData = point.properties.forecastGridData;
weatherParameters.stations = stations.features; weatherParameters.stations = stations.features;
// update the main process for display purposes // update the main process for display purposes
@ -94,25 +96,22 @@ const navigation = (() => {
// start loading canvases if necessary // start loading canvases if necessary
if (displays.length === 0) { if (displays.length === 0) {
currentWeather = new CurrentWeather(0,'currentWeather'); currentWeather = new CurrentWeather(0,'currentWeather');
almanac = new Almanac(7, 'almanac');
displays = [ displays = [
currentWeather, currentWeather,
new LatestObservations(1, 'latestObservations'), new LatestObservations(1, 'latestObservations'),
new TravelForecast(2, 'travelForecast', false), // not active by default new Hourly(2, 'hourly'),
new RegionalForecast(3, 'regionalForecast'), new TravelForecast(3, 'travelForecast', false), // not active by default
new LocalForecast(4, 'localForecast'), new RegionalForecast(4, 'regionalForecast'),
new ExtendedForecast(5, 'extendedForecast'), new LocalForecast(5, 'localForecast'),
new Almanac(6, 'almanac'), new ExtendedForecast(6, 'extendedForecast'),
new Radar(7, 'radar'), almanac,
new Radar(8, 'radar'),
]; ];
} }
// call for new data on each display // call for new data on each display
displays.forEach(display => display.getData(weatherParameters)); displays.forEach(display => display.getData(weatherParameters));
// GetMonthPrecipitation(this.weatherParameters);
// GetAirQuality3(this.weatherParameters);
// ShowDopplerMap(this.weatherParameters);
// GetWeatherHazards3(this.weatherParameters);
}; };
// receive a status update from a module {id, value} // receive a status update from a module {id, value}
@ -262,6 +261,12 @@ const navigation = (() => {
return currentWeather.getCurrentWeather(); return currentWeather.getCurrentWeather();
}; };
// get sunrise/sunset
const getSun = () => {
if (!almanac) return false;
return almanac.getSun();
};
return { return {
init, init,
message, message,
@ -272,5 +277,6 @@ const navigation = (() => {
msg, msg,
getDisplay, getDisplay,
getCurrentWeather, getCurrentWeather,
getSun,
}; };
})(); })();

View file

@ -77,6 +77,12 @@ class TravelForecast extends WeatherDisplay {
this.longContext = this.longCanvas.getContext('2d'); this.longContext = this.longCanvas.getContext('2d');
this.longCanvasGifs = []; this.longCanvasGifs = [];
} }
// stop all gifs
this.longCanvasGifs.forEach(gif => gif.pause());
// delete the gifs
this.longCanvasGifs.length = 0;
// set up variables // set up variables
const cities = this.data; const cities = this.data;

View file

@ -152,6 +152,7 @@ class WeatherDisplay {
// if (_ScrollText !== '') OkToDrawCustomScrollText = true; // if (_ScrollText !== '') OkToDrawCustomScrollText = true;
if (this.elemId === 'almanac') OkToDrawNoaaImage = false; if (this.elemId === 'almanac') OkToDrawNoaaImage = false;
if (this.elemId === 'travelForecast') OkToDrawNoaaImage = false; if (this.elemId === 'travelForecast') OkToDrawNoaaImage = false;
if (this.elemId === 'hourly') OkToDrawNoaaImage = false;
if (this.elemId === 'regionalForecast') OkToDrawNoaaImage = false; if (this.elemId === 'regionalForecast') OkToDrawNoaaImage = false;
if (this.elemId === 'progress') { if (this.elemId === 'progress') {
OkToDrawCurrentConditions = false; OkToDrawCurrentConditions = false;

View file

@ -1 +1 @@
module.exports = '3.6.3'; module.exports = '3.7.0';

View file

@ -55,6 +55,7 @@
<script type="text/javascript" src="scripts/modules/extendedforecast.js"></script> <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/almanac.js"></script>
<script type="text/javascript" src="scripts/modules/radar.js"></script> <script type="text/javascript" src="scripts/modules/radar.js"></script>
<script type="text/javascript" src="scripts/modules/hourly.js"></script>
<script type="text/javascript" src="scripts/modules/progress.js"></script> <script type="text/javascript" src="scripts/modules/progress.js"></script>
<script type="text/javascript" src="scripts/modules/navigation.js"></script> <script type="text/javascript" src="scripts/modules/navigation.js"></script>