From ebb932ab134a02c035f7d007743125b37b936273 Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Thu, 4 Aug 2022 22:03:59 -0500 Subject: [PATCH] extended forecast as html --- server/scripts/modules/extendedforecast.js | 78 +++++++++------------- server/scripts/modules/navigation.js | 2 +- server/scripts/modules/utilities.js | 7 +- server/styles/compiled.css | 60 +++++++++++++++++ server/styles/compiled.css.map | 2 +- server/styles/scss/_colors.scss | 4 +- server/styles/scss/_extended-forecast.scss | 73 ++++++++++++++++++++ server/styles/scss/compiled.scss | 3 +- views/index.ejs | 3 + views/partials/extended-forecast.ejs | 23 +++++++ 10 files changed, 202 insertions(+), 53 deletions(-) create mode 100644 server/styles/scss/_extended-forecast.scss create mode 100644 views/partials/extended-forecast.ejs diff --git a/server/scripts/modules/extendedforecast.js b/server/scripts/modules/extendedforecast.js index 246d5e1..c64a7eb 100644 --- a/server/scripts/modules/extendedforecast.js +++ b/server/scripts/modules/extendedforecast.js @@ -1,18 +1,15 @@ // display extended forecast graphically // technically uses the same data as the local forecast, we'll let the browser do the caching of that -/* globals WeatherDisplay, utils, STATUS, UNITS, draw, icons, navigation, luxon */ +/* globals WeatherDisplay, utils, STATUS, UNITS, icons, navigation, luxon */ // eslint-disable-next-line no-unused-vars class ExtendedForecast extends WeatherDisplay { constructor(navId, elemId) { - super(navId, elemId, 'Extended Forecast'); + super(navId, elemId, 'Extended Forecast', true, true); // set timings this.timing.totalScreens = 2; - - // pre-load background image (returns promise) - this.backgroundImage = utils.image.load('images/BackGround2_1.png'); } async getData(_weatherParameters) { @@ -85,14 +82,18 @@ class ExtendedForecast extends WeatherDisplay { } static shortenExtendedForecastText(long) { - let short = long; - short = short.replace(/ and /g, ' '); - short = short.replace(/Slight /g, ''); - short = short.replace(/Chance /g, ''); - short = short.replace(/Very /g, ''); - short = short.replace(/Patchy /g, ''); - short = short.replace(/Areas /g, ''); - short = short.replace(/Dense /g, ''); + const regexList = [ + [/ and /ig, ' '], + [/Slight /ig, ''], + [/Chance /ig, ''], + [/Very /ig, ''], + [/Patchy /ig, ''], + [/Areas /ig, ''], + [/Dense /ig, ''], + [/Thunderstorm/g, 'T\'Storm'], + ]; + // run all regexes + const short = regexList.reduce((working, [regex, replace]) => working.replace(regex, replace), long); let conditions = short.split(' '); if (short.indexOf('then') !== -1) { @@ -113,12 +114,12 @@ class ExtendedForecast extends WeatherDisplay { short2 = ''; } } - short = short1; + let result = short1; if (short2 !== '') { - short += ` ${short2}`; + result += ` ${short2}`; } - return [short, short1, short2]; + return result; } async drawCanvas() { @@ -128,45 +129,32 @@ class ExtendedForecast extends WeatherDisplay { // grab the first three or second set of three array elements const forecast = this.data.slice(0 + 3 * this.screenIndex, 3 + this.screenIndex * 3); - const backgroundImage = await this.backgroundImage; + // create each day template + const days = forecast.map((Day) => { + const fill = {}; + fill.date = Day.dayName; - this.context.drawImage(backgroundImage, 0, 0); - 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.horizontalGradientSingle(this.context, 0, 90, 640, 399, draw.sideColor1, draw.sideColor2); - this.context.drawImage(backgroundImage, 38, 100, 174, 297, 38, 100, 174, 297); - this.context.drawImage(backgroundImage, 232, 100, 174, 297, 232, 100, 174, 297); - this.context.drawImage(backgroundImage, 426, 100, 174, 297, 426, 100, 174, 297); - - draw.titleText(this.context, 'Extended', 'Forecast'); - - await Promise.all(forecast.map(async (Day, Index) => { - const offset = Index * 195; - draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 100 + offset, 135, Day.dayName.toUpperCase(), 2); - draw.text(this.context, 'Star4000', '24pt', '#8080FF', 85 + offset, 345, 'Lo', 2, 'center'); - draw.text(this.context, 'Star4000', '24pt', '#FFFF00', 165 + offset, 345, 'Hi', 2, 'center'); let { low } = Day; if (low !== undefined) { if (navigation.units() === UNITS.metric) low = utils.units.fahrenheitToCelsius(low); - draw.text(this.context, 'Star4000 Large', '24pt', '#FFFFFF', 85 + offset, 385, low, 2, 'center'); + fill['value-lo'] = Math.round(low); } let { high } = Day; if (navigation.units() === UNITS.metric) high = utils.units.fahrenheitToCelsius(high); - draw.text(this.context, 'Star4000 Large', '24pt', '#FFFFFF', 165 + offset, 385, high, 2, 'center'); - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120 + offset, 270, Day.text[1], 2, 'center'); - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 120 + offset, 310, Day.text[2], 2, 'center'); + fill['value-hi'] = Math.round(high); + fill.condition = Day.text; // draw the icon - this.gifs.push(await utils.image.superGifAsync({ - src: Day.icon, - auto_play: true, - canvas: this.canvas, - x: 70 + Index * 195, - y: 150, - max_height: 75, - })); - })); + fill.icon = { type: 'img', src: Day.icon }; + // return the filled template + return this.fillTemplate('day', fill); + }); + + // empty and update the container + const dayContainer = this.elem.querySelector('.day-container'); + dayContainer.innerHTML = ''; + dayContainer.append(...days); this.finishDraw(); } } diff --git a/server/scripts/modules/navigation.js b/server/scripts/modules/navigation.js index 95da7ba..a0b6763 100644 --- a/server/scripts/modules/navigation.js +++ b/server/scripts/modules/navigation.js @@ -102,7 +102,7 @@ const navigation = (() => { new TravelForecast(3, 'travelForecast', false), // not active by default new RegionalForecast(4, 'regional-forecast'), new LocalForecast(5, 'local-forecast'), - new ExtendedForecast(6, 'extendedForecast'), + new ExtendedForecast(6, 'extended-forecast'), almanac, new Radar(8, 'radar'), ]; diff --git a/server/scripts/modules/utilities.js b/server/scripts/modules/utilities.js index 1df4af0..493fb69 100644 --- a/server/scripts/modules/utilities.js +++ b/server/scripts/modules/utilities.js @@ -42,9 +42,8 @@ const utils = (() => { const cachedImages = []; const preload = (src) => { if (cachedImages.includes(src)) return false; - const img = new Image(); - img.scr = src; - cachedImages.push(src); + blob(src); + // cachedImages.push(src); return true; }; @@ -177,7 +176,7 @@ const utils = (() => { // build a url, including the rewrite for cors if necessary let corsUrl = _url; if (params.cors === true) corsUrl = rewriteUrl(_url); - const url = new URL(corsUrl); + const url = new URL(corsUrl, `${window.location.origin}/`); // match the security protocol url.protocol = window.location.protocol; // add parameters if necessary diff --git a/server/styles/compiled.css b/server/styles/compiled.css index 7f4309d..73c88c8 100644 --- a/server/styles/compiled.css +++ b/server/styles/compiled.css @@ -378,4 +378,64 @@ .weather-display .main.regional-forecast .location .city { font-family: Star4000; font-size: 20px; +} + +#extended-forecast-html.weather-display { + background-image: url("../images/BackGround2_1.png"); +} + +.weather-display .main.extended-forecast .day-container { + margin-top: 16px; + margin-left: 27px; +} +.weather-display .main.extended-forecast .day { + /* eventually, when chrome supports paint-order for html elements */ + /* -webkit-text-stroke: 2px black; */ + /* paint-order: stroke fill; */ + text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; + padding: 5px; + height: 285px; + width: 155px; + display: inline-block; + margin: 0px 15px; + font-family: "Star4000"; + font-size: 24pt; +} +.weather-display .main.extended-forecast .day .date { + text-transform: uppercase; + text-align: center; + color: yellow; +} +.weather-display .main.extended-forecast .day .condition { + text-align: center; + height: 74px; + margin-top: 10px; +} +.weather-display .main.extended-forecast .day .icon { + text-align: center; + height: 75px; +} +.weather-display .main.extended-forecast .day .icon img { + max-height: 75px; +} +.weather-display .main.extended-forecast .day .temperatures { + width: 100%; + margin-top: 5px; +} +.weather-display .main.extended-forecast .day .temperatures .temperature-block { + display: inline-block; + width: 44%; +} +.weather-display .main.extended-forecast .day .temperatures .temperature-block > div { + text-align: center; +} +.weather-display .main.extended-forecast .day .temperatures .temperature-block .value { + font-family: "Star4000 Large"; + margin-top: 4px; +} +.weather-display .main.extended-forecast .day .temperatures .temperature-block.lo .label { + color: #8080FF; +} +.weather-display .main.extended-forecast .day .temperatures .temperature-block.hi .label { + color: yellow; }/*# sourceMappingURL=compiled.css.map */ \ No newline at end of file diff --git a/server/styles/compiled.css.map b/server/styles/compiled.css.map index 1a173ec..71c80d9 100644 --- a/server/styles/compiled.css.map +++ b/server/styles/compiled.css.map @@ -1 +1 @@ -{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss","scss/_local-forecast.scss","scss/_latest-observations.scss","scss/_regional-forecast.scss"],"names":[],"mappings":"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","file":"compiled.css"} \ No newline at end of file +{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss","scss/_local-forecast.scss","scss/_latest-observations.scss","scss/_regional-forecast.scss","scss/_extended-forecast.scss"],"names":[],"mappings":"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","file":"compiled.css"} \ No newline at end of file diff --git a/server/styles/scss/_colors.scss b/server/styles/scss/_colors.scss index d95538d..8141d23 100644 --- a/server/styles/scss/_colors.scss +++ b/server/styles/scss/_colors.scss @@ -5,4 +5,6 @@ $column-header-text: yellow; $column-header: rgb(32, 0, 87); $gradient-main-background-1: #102080; -$gradient-main-background-2: #001040; \ No newline at end of file +$gradient-main-background-2: #001040; + +$extended-low: #8080FF; \ No newline at end of file diff --git a/server/styles/scss/_extended-forecast.scss b/server/styles/scss/_extended-forecast.scss new file mode 100644 index 0000000..0eff184 --- /dev/null +++ b/server/styles/scss/_extended-forecast.scss @@ -0,0 +1,73 @@ +@use 'colors'as c; +@use 'utils'as u; + +#extended-forecast-html.weather-display { + background-image: url('../images/BackGround2_1.png'); +} + +.weather-display .main.extended-forecast { + .day-container { + margin-top: 16px; + margin-left: 27px; + } + + .day { + @include u.text-shadow(); + padding: 5px; + height: 285px; + width: 155px; + display: inline-block; + margin: 0px 15px; + font-family: 'Star4000'; + font-size: 24pt; + + .date { + text-transform: uppercase; + text-align: center; + color: c.$title-color; + } + + .condition { + text-align: center; + height: 74px; + margin-top: 10px; + } + + .icon { + text-align: center; + height: 75px; + + img { + max-height: 75px; + } + } + + .temperatures { + width: 100%; + margin-top: 5px; + + .temperature-block { + display: inline-block; + width: 44%; + + >div { + text-align: center; + ; + } + + .value { + font-family: 'Star4000 Large'; + margin-top: 4px; + } + + &.lo .label { + color: c.$extended-low; + } + + &.hi .label { + color: c.$title-color; + } + } + } + } +} \ No newline at end of file diff --git a/server/styles/scss/compiled.scss b/server/styles/scss/compiled.scss index 3558d85..3a62219 100644 --- a/server/styles/scss/compiled.scss +++ b/server/styles/scss/compiled.scss @@ -3,4 +3,5 @@ @use '_current-weather'; @use '_local-forecast'; @use '_latest-observations'; -@use '_regional-forecast'; \ No newline at end of file +@use '_regional-forecast'; +@use '_extended-forecast'; \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 8581583..f5974d8 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -105,6 +105,9 @@
<%- include('partials/regional-forecast.ejs') %>
+
+ <%- include('partials/extended-forecast.ejs') %> +
diff --git a/views/partials/extended-forecast.ejs b/views/partials/extended-forecast.ejs new file mode 100644 index 0000000..64025e9 --- /dev/null +++ b/views/partials/extended-forecast.ejs @@ -0,0 +1,23 @@ +<%- include('header.ejs', {titleDual:{ top: 'Extended' , bottom: 'Forecast' }, hasTime: true }) %> +
+
+
+
+
+ +
+
+
+
+
Lo
+
+
+
+
Hi
+
+
+
+
+
+
+ <%- include('scroll.ejs') %> \ No newline at end of file