From efd2cc7808202a25ec243b3df78d5d9b8493d742 Mon Sep 17 00:00:00 2001 From: Matt Walsh Date: Thu, 4 Aug 2022 12:49:04 -0500 Subject: [PATCH] lastest observations in html --- server/scripts/modules/latestobservations.js | 49 ++++----- server/scripts/modules/navigation.js | 2 +- server/scripts/modules/utilities.js | 106 +++---------------- server/styles/compiled.css | 60 +++++++++++ server/styles/compiled.css.map | 2 +- server/styles/scss/_latest-observations.scss | 72 +++++++++++++ server/styles/scss/_weatherdisplay.scss | 3 +- server/styles/scss/compiled.scss | 3 +- views/index.ejs | 3 + views/partials/latest-observations.ejs | 20 ++++ ws4kp.code-workspace | 3 +- 11 files changed, 196 insertions(+), 127 deletions(-) create mode 100644 server/styles/scss/_latest-observations.scss create mode 100644 views/partials/latest-observations.ejs diff --git a/server/scripts/modules/latestobservations.js b/server/scripts/modules/latestobservations.js index b85ebb7..61711d6 100644 --- a/server/scripts/modules/latestobservations.js +++ b/server/scripts/modules/latestobservations.js @@ -1,12 +1,10 @@ // current weather conditions display -/* globals WeatherDisplay, utils, STATUS, UNITS, draw, navigation, StationInfo */ +/* globals WeatherDisplay, utils, STATUS, UNITS, navigation, StationInfo */ // eslint-disable-next-line no-unused-vars class LatestObservations extends WeatherDisplay { constructor(navId, elemId) { - super(navId, elemId, 'Latest Observations'); - // pre-load background image (returns promise) - this.backgroundImage = utils.image.load('images/BackGround1_1.png'); + super(navId, elemId, 'Latest Observations', true, true); // constants this.MaximumRegionalStations = 7; @@ -67,25 +65,15 @@ class LatestObservations extends WeatherDisplay { // sort array by station name const sortedConditions = conditions.sort((a, b) => ((a.Name < b.Name) ? -1 : 1)); - this.context.drawImage(await this.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, 52, 399, draw.sideColor1, draw.sideColor2); - draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2); - - draw.titleText(this.context, 'Latest', 'Observations'); - if (navigation.units() === UNITS.english) { - draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 295, 105, `${String.fromCharCode(176)}F`, 2); + this.elem.querySelector('.column-headers .temp.english').classList.add('show'); + this.elem.querySelector('.column-headers .temp.metric').classList.remove('show'); } else { - draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 295, 105, `${String.fromCharCode(176)}C`, 2); + this.elem.querySelector('.column-headers .temp.english').classList.remove('show'); + this.elem.querySelector('.column-headers .temp.metric').classList.add('show'); } - draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 345, 105, 'WEATHER', 2); - draw.text(this.context, 'Star4000 Small', '24pt', '#FFFFFF', 495, 105, 'WIND', 2); - let y = 140; - - sortedConditions.forEach((condition) => { + const lines = sortedConditions.map((condition) => { let Temperature = condition.temperature.value; let WindSpeed = condition.windSpeed.value; const windDirection = utils.calc.directionToNSEW(condition.windDirection.value); @@ -95,22 +83,25 @@ class LatestObservations extends WeatherDisplay { WindSpeed = utils.units.kphToMph(WindSpeed); } - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 65, y, condition.city.substr(0, 14), 2); - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 345, y, LatestObservations.shortenCurrentConditions(condition.textDescription).substr(0, 9), 2); - + const fill = {}; + fill.location = utils.string.locationCleanup(condition.city).substr(0, 14); + fill.temp = Temperature; + fill.weather = LatestObservations.shortenCurrentConditions(condition.textDescription).substr(0, 9); if (WindSpeed > 0) { - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, windDirection + (Array(6 - windDirection.length - WindSpeed.toString().length).join(' ')) + WindSpeed.toString(), 2); + fill.wind = windDirection + (Array(6 - windDirection.length - WindSpeed.toString().length).join(' ')) + WindSpeed.toString(); } else if (WindSpeed === 'NA') { - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, 'NA', 2); + fill.wind = 'NA'; } else { - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', 495, y, 'Calm', 2); + fill.wind = 'Calm'; } - const x = (325 - (Temperature.toString().length * 15)); - draw.text(this.context, 'Star4000', '24pt', '#FFFFFF', x, y, Temperature, 2); - - y += 40; + return this.fillTemplate('observation-row', fill); }); + + const linesContainer = this.elem.querySelector('.observation-lines'); + linesContainer.innerHTML = ''; + linesContainer.append(...lines); + this.finishDraw(); } diff --git a/server/scripts/modules/navigation.js b/server/scripts/modules/navigation.js index a6a72f4..1658fae 100644 --- a/server/scripts/modules/navigation.js +++ b/server/scripts/modules/navigation.js @@ -97,7 +97,7 @@ const navigation = (() => { almanac = new Almanac(7, 'almanac'); displays = [ currentWeather, - new LatestObservations(1, 'latestObservations'), + new LatestObservations(1, 'latest-observations'), new Hourly(2, 'hourly'), new TravelForecast(3, 'travelForecast', false), // not active by default new RegionalForecast(4, 'regionalForecast'), diff --git a/server/scripts/modules/utilities.js b/server/scripts/modules/utilities.js index 01294c7..1df4af0 100644 --- a/server/scripts/modules/utilities.js +++ b/server/scripts/modules/utilities.js @@ -136,99 +136,21 @@ const utils = (() => { const wrap = (x, m) => ((x % m) + m) % m; // ********************************* strings ********************************************* - const wordWrap = (_str, ...rest) => { - // discuss at: https://locutus.io/php/wordwrap/ - // original by: Jonas Raoni Soares Silva (https://www.jsfromhell.com) - // improved by: Nick Callen - // improved by: Kevin van Zonneveld (https://kvz.io) - // improved by: Sakimori - // revised by: Jonas Raoni Soares Silva (https://www.jsfromhell.com) - // bugfixed by: Michael Grier - // bugfixed by: Feras ALHAEK - // improved by: Rafał Kukawski (https://kukawski.net) - // example 1: wordwrap('Kevin van Zonneveld', 6, '|', true) - // returns 1: 'Kevin|van|Zonnev|eld' - // example 2: wordwrap('The quick brown fox jumped over the lazy dog.', 20, '
\n') - // returns 2: 'The quick brown fox
\njumped over the lazy
\ndog.' - // example 3: wordwrap('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.') - // returns 3: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\ntempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\nveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\ncommodo consequat.' - const intWidth = rest[0] ?? 75; - const strBreak = rest[1] ?? '\n'; - const cut = rest[2] ?? false; + const locationCleanup = (input) => { + // regexes to run + const regexes = [ + // "Chicago / West Chicago", removes before slash + /^[A-Za-z ]+ \/ /, + // "Chicago/Waukegan" removes before slash + /^[A-Za-z ]+\//, + // "Chicago, Chicago O'hare" removes before comma + /^[A-Za-z ]+, /, + ]; - let i; - let j; - let line; - - let str = _str; - str += ''; - - if (intWidth < 1) { - return str; - } - - const reLineBreaks = /\r\n|\n|\r/; - const reBeginningUntilFirstWhitespace = /^\S*/; - const reLastCharsWithOptionalTrailingWhitespace = /\S*(\s)?$/; - - const lines = str.split(reLineBreaks); - const l = lines.length; - let match; - - // for each line of text - // eslint-disable-next-line no-plusplus - for (i = 0; i < l; lines[i++] += line) { - line = lines[i]; - lines[i] = ''; - - while (line.length > intWidth) { - // get slice of length one char above limit - const slice = line.slice(0, intWidth + 1); - - // remove leading whitespace from rest of line to parse - let ltrim = 0; - // remove trailing whitespace from new line content - let rtrim = 0; - - match = slice.match(reLastCharsWithOptionalTrailingWhitespace); - - // if the slice ends with whitespace - if (match[1]) { - // then perfect moment to cut the line - j = intWidth; - ltrim = 1; - } else { - // otherwise cut at previous whitespace - j = slice.length - match[0].length; - - if (j) { - rtrim = 1; - } - - // but if there is no previous whitespace - // and cut is forced - // cut just at the defined limit - if (!j && cut && intWidth) { - j = intWidth; - } - - // if cut wasn't forced - // cut at next possible whitespace after the limit - if (!j) { - const charsUntilNextWhitespace = (line.slice(intWidth).match(reBeginningUntilFirstWhitespace) || [''])[0]; - - j = slice.length + charsUntilNextWhitespace.length; - } - } - - lines[i] += line.slice(0, j - rtrim); - line = line.slice(j + ltrim); - lines[i] += line.length ? strBreak : ''; - } - } - - return lines.join('\n'); + // run all regexes + return regexes.reduce((value, regex) => value.replace(regex, ''), input); }; + // ********************************* cors ******************************************** // rewrite some urls for local server const rewriteUrl = (_url) => { @@ -325,7 +247,7 @@ const utils = (() => { wrap, }, string: { - wordWrap, + locationCleanup, }, cors: { rewriteUrl, diff --git a/server/styles/compiled.css b/server/styles/compiled.css index 7459682..74f8bee 100644 --- a/server/styles/compiled.css +++ b/server/styles/compiled.css @@ -265,4 +265,64 @@ 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; min-height: 280px; line-height: 40px; +} + +.weather-display .latest-observations.main { + overflow-y: hidden; +} +.weather-display .latest-observations.main .column-headers { + height: 20px; + position: absolute; + width: 100%; +} +.weather-display .latest-observations.main .column-headers { + top: 0px; +} +.weather-display .latest-observations.main .column-headers div { + display: inline-block; + font-family: "Star4000 Small"; + font-size: 24pt; + position: absolute; + top: -14px; + /* 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; +} +.weather-display .latest-observations.main .column-headers .temp { + display: none; +} +.weather-display .latest-observations.main .column-headers .temp.show { + display: inline-block; +} +.weather-display .latest-observations.main .temp { + left: 230px; +} +.weather-display .latest-observations.main .weather { + left: 280px; +} +.weather-display .latest-observations.main .wind { + left: 430px; +} +.weather-display .latest-observations.main .observation-lines { + min-height: 338px; + padding-top: 10px; +} +.weather-display .latest-observations.main .observation-lines .observation-row { + font-family: "Star4000"; + font-size: 24pt; + /* 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; + position: relative; + height: 40px; +} +.weather-display .latest-observations.main .observation-lines .observation-row > div { + position: absolute; + top: 8px; +} +.weather-display .latest-observations.main .observation-lines .observation-row .wind { + white-space: pre; + text-align: right; }/*# 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 d113365..66555a6 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"],"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"],"names":[],"mappings":"AAGA;EACC,YAAA;EACA,aAAA;EACA,gBAAA;EACA,kBAAA;EACA,kDAAA;EAEA,oFAAA;EACA,WAAA;ACHD;ADKC;EACC,aAAA;ACHF;ADMC;EACC,aAAA;ACJF;ADOC;EACC,YAAA;EACA,YAAA;EACA,iBAAA;ACLF;ADOE;EACC,aE3BW;ECGb,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EHsBC,uBAAA;EACA,eAAA;EACA,kBAAA;ACFH;ADIG;EACC,WAAA;EACA,SAAA;ACFJ;ADKG;EACC,WAAA;ACHJ;ADKI;EACC,kBAAA;ACHL;ADMI;EACC,SAAA;ACJL;ADOI;EACC,SAAA;ACLL;ADWE;EACC,SAAA;EACA,UAAA;EACA,kBAAA;EACA,WAAA;ACTH;ADYE;EACC,kBAAA;EACA,SAAA;EACA,WAAA;ACVH;ADaE;EACC,SAAA;ACXH;ADcE;EACC,gBAAA;EACA,YE1ES;EF2ET,6BAAA;EACA,eAAA;EG1EF,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EHwEC,WAAA;EACA,YAAA;EACA,iBAAA;EACA,kBAAA;ACTH;ADWG;EACC,iBAAA;ACTJ;ADcC;EACC,kBAAA;ACZF;ADcE;EACC,YAAA;EACA,aAAA;EACA,gBAAA;ACZH;ADeE;EACC,iBAAA;EACA,kBAAA;EACA,yBAAA;ACbH;ADmBC;EACC,YAAA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;ACjBF;;AG3FC;EACC,kBAAA;AH8FF;AG5FE;EACC,gCFJa;EEKb,YAAA;EACA,kBAAA;EACA,WAAA;AH8FH;AG3FE;EACC,wBAAA;EAAA,gBAAA;EACA,QAAA;EACA,UAAA;AH6FH;AG3FG;EACC,qBAAA;EACA,6BAAA;EACA,eAAA;EACA,aFpBiB;EEqBjB,kBAAA;EACA,UAAA;EACA,UAAA;EDvBH,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AFoHF;AG7FG;EACC,WAAA;AH+FJ;AG5FG;EACC,WAAA;AH8FJ;AG3FG;EACC,WAAA;AH6FJ;AGzFE;EACC,iBAAA;EACA,iBAAA;EAEA,qGAAA;AH0FH;AGpFG;EACC,6BAAA;EACA,eAAA;EACA,YAAA;EACA,aFzDU;ECGb,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;ECoDE,kBAAA;AHyFJ;AGvFI;EACC,kBAAA;EACA,gBAAA;EACA,QAAA;AHyFL;AGtFI;EACC,UAAA;AHwFL;AGrFI;EACC,WAAA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;AHuFL;AGpFI;EACC,WAAA;AHsFL;AGnFI;EACC,WAAA;AHqFL;AGlFI;EACC,WAAA;EACA,YAAA;EACA,iBAAA;AHoFL;;AIvKE;EACC,YAAA;EACA,YAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EFRF,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AFkLF;AI1KG;EACC,gCAAA;EACA,eAAA;AJ4KJ;AIxKG;EACC,UAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;AJ0KJ;AIxKI;EACC,mBAAA;AJ0KL;AIxKK;;EAEC,qBAAA;AJ0KN;AIvKK;EACC,iBAAA;AJyKN;AItKK;EACC,YAAA;EACA,kBAAA;AJwKN;AIhKE;EACC,kBAAA;AJkKH;AI/JE;EACC,6BAAA;EACA,eAAA;AJiKH;AI5JE;EACC,aAAA;AJ8JH;AI5JG;EACC,gBAAA;AJ8JJ;AI1JE;EACC,mBAAA;AJ4JH;AI1JG;EACC,UAAA;EACA,qBAAA;EACA,WAAA;AJ4JJ;AIzJG;EACC,gBAAA;AJ2JJ;AIxJG;EACC,iBAAA;AJ0JJ;AItJE;EACC,gBAAA;AJwJH;AIrJE;EACC,aH3FW;EG4FX,mBAAA;AJuJH;;AK/OC;EACC,kBAAA;EACA,SAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,gBAAA;ALkPF;AK/OC;EACC,kBAAA;ALiPF;AK9OC;EACC,uBAAA;EACA,eAAA;EACA,yBAAA;EHjBD,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EGeA,iBAAA;EACA,iBAAA;ALmPF;;AMrQC;EACC,kBAAA;ANwQF;AMtQE;EACC,YAAA;EACA,kBAAA;EACA,WAAA;ANwQH;AMrQE;EACC,QAAA;ANuQH;AMrQG;EACC,qBAAA;EACA,6BAAA;EACA,eAAA;EACA,kBAAA;EACA,UAAA;EJnBH,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AF0RF;AMvQG;EAEC,aAAA;ANwQJ;AMtQI;EACC,qBAAA;ANwQL;AMnQE;EACC,WAAA;ANqQH;AMlQE;EACC,WAAA;ANoQH;AMjQE;EACC,WAAA;ANmQH;AMhQE;EACC,iBAAA;EACA,iBAAA;ANkQH;AMhQG;EACC,uBAAA;EACA,eAAA;EJnDH,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EIiDE,kBAAA;EACA,YAAA;ANqQJ;AMnQI;EACC,kBAAA;EACA,QAAA;ANqQL;AMlQI;EACC,gBAAA;EACA,iBAAA;ANoQL","file":"compiled.css"} \ No newline at end of file diff --git a/server/styles/scss/_latest-observations.scss b/server/styles/scss/_latest-observations.scss new file mode 100644 index 0000000..02240c7 --- /dev/null +++ b/server/styles/scss/_latest-observations.scss @@ -0,0 +1,72 @@ +@use 'colors'as c; +@use 'utils'as u; + +.weather-display .latest-observations { + + &.main { + overflow-y: hidden; + + .column-headers { + height: 20px; + position: absolute; + width: 100%; + } + + .column-headers { + top: 0px; + + div { + display: inline-block; + font-family: 'Star4000 Small'; + font-size: 24pt; + position: absolute; + top: -14px; + @include u.text-shadow(); + } + + .temp { + // hidden initially for english/metric switching + display: none; + + &.show { + display: inline-block; + } + } + } + + .temp { + left: 230px; + } + + .weather { + left: 280px; + } + + .wind { + left: 430px; + } + + .observation-lines { + min-height: 338px; + padding-top: 10px; + + .observation-row { + font-family: 'Star4000'; + font-size: 24pt; + @include u.text-shadow(); + position: relative; + height: 40px; + + >div { + position: absolute; + top: 8px; + } + + .wind { + white-space: pre; + text-align: right; + } + } + } + } +} \ No newline at end of file diff --git a/server/styles/scss/_weatherdisplay.scss b/server/styles/scss/_weatherdisplay.scss index 8734799..d2bce7b 100644 --- a/server/styles/scss/_weatherdisplay.scss +++ b/server/styles/scss/_weatherdisplay.scss @@ -24,8 +24,6 @@ height: 60px; padding-top: 30px; - - .title { color: c.$title-color; @include u.text-shadow(3px, 1.5px); @@ -104,6 +102,7 @@ margin-right: 64px; width: calc(100% - 128px); } + } diff --git a/server/styles/scss/compiled.scss b/server/styles/scss/compiled.scss index 116aa87..3478af8 100644 --- a/server/styles/scss/compiled.scss +++ b/server/styles/scss/compiled.scss @@ -1,4 +1,5 @@ @use '_weatherdisplay'; @use '_hourly'; @use '_current-weather'; -@use '_local-forecast'; \ No newline at end of file +@use '_local-forecast'; +@use '_latest-observations'; \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 0d6b93f..93611a3 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -99,6 +99,9 @@
<%- include('partials/local-forecast.ejs') %>
+
+ <%- include('partials/latest-observations.ejs') %> +
diff --git a/views/partials/latest-observations.ejs b/views/partials/latest-observations.ejs new file mode 100644 index 0000000..dab3910 --- /dev/null +++ b/views/partials/latest-observations.ejs @@ -0,0 +1,20 @@ +<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true }) %> +
+
+
+
°F
+
°C
+
Weather
+
Wind
+
+
+
+
+
+
+
+
+
+
+
+ <%- include('scroll.ejs') %> \ No newline at end of file diff --git a/ws4kp.code-workspace b/ws4kp.code-workspace index d765eb2..eb8fece 100644 --- a/ws4kp.code-workspace +++ b/ws4kp.code-workspace @@ -28,7 +28,8 @@ "T", "T'storm", "uscomp", - "Visib" + "Visib", + "Waukegan" ], "cSpell.ignorePaths": [ "**/package-lock.json",