diff --git a/server/scripts/modules/navigation.js b/server/scripts/modules/navigation.js index 1658fae..95da7ba 100644 --- a/server/scripts/modules/navigation.js +++ b/server/scripts/modules/navigation.js @@ -100,7 +100,7 @@ const navigation = (() => { new LatestObservations(1, 'latest-observations'), new Hourly(2, 'hourly'), new TravelForecast(3, 'travelForecast', false), // not active by default - new RegionalForecast(4, 'regionalForecast'), + new RegionalForecast(4, 'regional-forecast'), new LocalForecast(5, 'local-forecast'), new ExtendedForecast(6, 'extendedForecast'), almanac, diff --git a/server/scripts/modules/regionalforecast.js b/server/scripts/modules/regionalforecast.js index f29697a..23c1dda 100644 --- a/server/scripts/modules/regionalforecast.js +++ b/server/scripts/modules/regionalforecast.js @@ -359,7 +359,34 @@ class RegionalForecast extends WeatherDisplay { } // draw the map + const scale = 640 / (offsetXY.x * 2); + const map = this.elem.querySelector('.map'); + map.style.zoom = scale; + map.style.top = `-${sourceXY.y}px`; + map.style.left = `-${sourceXY.x}px`; this.context.drawImage(await this.baseMap, sourceXY.x, sourceXY.y, (offsetXY.x * 2), (offsetXY.y * 2), 0, mapYOff, 640, 312); + + const cities = data.map((city) => { + const fill = {}; + const period = city[this.screenIndex]; + + fill.icon = { type: 'img', src: icons.getWeatherRegionalIconFromIconLink(period.icon, !period.daytime) }; + fill.city = period.name; + let { temperature } = period; + if (navigation.units() === UNITS.metric) temperature = Math.round(utils.units.fahrenheitToCelsius(temperature)); + fill.temp = temperature; + + const elem = this.fillTemplate('location', fill); + elem.style.left = `${period.x}px`; + elem.style.top = `${period.y}px`; + + return elem; + }); + + const locationContainer = this.elem.querySelector('.location-container'); + locationContainer.innerHTML = ''; + locationContainer.append(...cities); + await Promise.all(data.map(async (city) => { const period = city[this.screenIndex]; // draw the icon if possible diff --git a/server/styles/compiled.css b/server/styles/compiled.css index e82959d..84d1555 100644 --- a/server/styles/compiled.css +++ b/server/styles/compiled.css @@ -334,4 +334,47 @@ .weather-display .latest-observations.main .observation-lines .observation-row .wind { white-space: pre; text-align: right; +} + +#regional-forecast-html.weather-display { + background-image: url("../images/BackGround5_1.png"); +} + +.weather-display .main.regional-forecast { + position: relative; +} +.weather-display .main.regional-forecast .map { + position: absolute; +} +.weather-display .main.regional-forecast .location { + position: absolute; + width: 140px; + margin-left: -40px; + margin-top: -30px; +} +.weather-display .main.regional-forecast .location > div { + position: absolute; + /* 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 .main.regional-forecast .location .icon { + top: 22px; + left: 42px; +} +.weather-display .main.regional-forecast .location .icon img { + max-width: 42px; +} +.weather-display .main.regional-forecast .location .temp { + font-family: "Star4000 Large Compressed"; + font-size: 28px; + color: yellow; + top: 22px; + text-align: right; + width: 40px; +} +.weather-display .main.regional-forecast .location .city { + font-family: Star4000; + font-size: 20px; }/*# 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 b1b14e6..0e23f37 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"],"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"],"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;EGzGA,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EHuGA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,gBAAA;ACdF;ADgBE;EACC,uBAAA;EACA,eAAA;EACA,iBAAA;ACdH;;AGpGC;EACC,kBAAA;AHuGF;AGrGE;EACC,gCFJa;EEKb,YAAA;EACA,kBAAA;EACA,WAAA;AHuGH;AGpGE;EACC,wBAAA;EAAA,gBAAA;EACA,QAAA;EACA,UAAA;AHsGH;AGpGG;EACC,qBAAA;EACA,6BAAA;EACA,eAAA;EACA,aFpBiB;EEqBjB,kBAAA;EACA,UAAA;EACA,UAAA;EDvBH,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AF6HF;AGtGG;EACC,WAAA;AHwGJ;AGrGG;EACC,WAAA;AHuGJ;AGpGG;EACC,WAAA;AHsGJ;AGlGE;EACC,iBAAA;EACA,iBAAA;EAEA,qGAAA;AHmGH;AG7FG;EACC,6BAAA;EACA,eAAA;EACA,YAAA;EACA,aFzDU;ECGb,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;ECoDE,kBAAA;AHkGJ;AGhGI;EACC,kBAAA;EACA,gBAAA;EACA,QAAA;AHkGL;AG/FI;EACC,UAAA;AHiGL;AG9FI;EACC,WAAA;EACA,WAAA;EACA,kBAAA;EACA,UAAA;AHgGL;AG7FI;EACC,WAAA;AH+FL;AG5FI;EACC,WAAA;AH8FL;AG3FI;EACC,WAAA;EACA,YAAA;EACA,iBAAA;AH6FL;;AIhLE;EACC,YAAA;EACA,YAAA;EACA,qBAAA;EACA,gBAAA;EACA,kBAAA;EFRF,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AF2LF;AInLG;EACC,gCAAA;EACA,eAAA;AJqLJ;AIjLG;EACC,UAAA;EACA,6BAAA;EACA,eAAA;EACA,iBAAA;AJmLJ;AIjLI;EACC,mBAAA;AJmLL;AIjLK;;EAEC,qBAAA;AJmLN;AIhLK;EACC,iBAAA;AJkLN;AI/KK;EACC,YAAA;EACA,kBAAA;AJiLN;AIzKE;EACC,kBAAA;AJ2KH;AIxKE;EACC,6BAAA;EACA,eAAA;AJ0KH;AIrKE;EACC,aAAA;AJuKH;AIrKG;EACC,gBAAA;AJuKJ;AInKE;EACC,mBAAA;AJqKH;AInKG;EACC,UAAA;EACA,qBAAA;EACA,WAAA;AJqKJ;AIlKG;EACC,gBAAA;AJoKJ;AIjKG;EACC,iBAAA;AJmKJ;AI/JE;EACC,gBAAA;AJiKH;AI9JE;EACC,aH3FW;EG4FX,mBAAA;AJgKH;;AKxPC;EACC,kBAAA;EACA,SAAA;EACA,gBAAA;EACA,sBAAA;EACA,aAAA;EACA,gBAAA;AL2PF;AKxPC;EACC,kBAAA;AL0PF;AKvPC;EACC,uBAAA;EACA,eAAA;EACA,yBAAA;EHjBD,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EGeA,iBAAA;EACA,iBAAA;AL4PF;;AM9QC;EACC,kBAAA;ANiRF;AM/QE;EACC,YAAA;EACA,kBAAA;EACA,WAAA;ANiRH;AM9QE;EACC,QAAA;ANgRH;AM9QG;EACC,qBAAA;EACA,6BAAA;EACA,eAAA;EACA,kBAAA;EACA,UAAA;EJnBH,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AFmSF;AMhRG;EAEC,aAAA;ANiRJ;AM/QI;EACC,qBAAA;ANiRL;AM5QE;EACC,WAAA;AN8QH;AM3QE;EACC,WAAA;AN6QH;AM1QE;EACC,WAAA;AN4QH;AMzQE;EACC,iBAAA;EACA,iBAAA;AN2QH;AMzQG;EACC,uBAAA;EACA,eAAA;EJnDH,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;EIiDE,kBAAA;EACA,YAAA;AN8QJ;AM5QI;EACC,kBAAA;EACA,QAAA;AN8QL;AM3QI;EACC,gBAAA;EACA,iBAAA;AN6QL;;AO5UA;EACC,oDAAA;AP+UD;;AO5UA;EAGC,kBAAA;AP6UD;AO3UC;EACC,kBAAA;AP6UF;AO1UC;EACC,kBAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;AP4UF;AO1UE;EACC,kBAAA;ELpBF,mEAAA;EACA,oCAAA;EACA,8BAAA;EACA,0LACC;AFgWF;AO5UE;EACC,SAAA;EACA,UAAA;AP8UH;AO5UG;EACC,eAAA;AP8UJ;AO1UE;EACC,wCAAA;EACA,eAAA;EACA,aNvCW;EMwCX,SAAA;EACA,iBAAA;EACA,WAAA;AP4UH;AOzUE;EACC,qBAAA;EACA,eAAA;AP2UH","file":"compiled.css"} \ No newline at end of file diff --git a/server/styles/scss/_regional-forecast.scss b/server/styles/scss/_regional-forecast.scss new file mode 100644 index 0000000..64e333a --- /dev/null +++ b/server/styles/scss/_regional-forecast.scss @@ -0,0 +1,51 @@ +@use 'colors'as c; +@use 'utils'as u; + +#regional-forecast-html.weather-display { + background-image: url('../images/BackGround5_1.png'); +} + +.weather-display .main.regional-forecast { + + + position: relative; + + .map { + position: absolute; + } + + .location { + position: absolute; + width: 140px; + margin-left: -40px; + margin-top: -30px; + + >div { + position: absolute; + @include u.text-shadow(); + } + + .icon { + top: 22px; + left: 42px; + + img { + max-width: 42px; + } + } + + .temp { + font-family: 'Star4000 Large Compressed'; + font-size: 28px; + color: c.$title-color; + top: 22px; + text-align: right; + width: 40px; + } + + .city { + font-family: Star4000; + font-size: 20px; + } + } +} \ No newline at end of file diff --git a/server/styles/scss/compiled.scss b/server/styles/scss/compiled.scss index 3478af8..3558d85 100644 --- a/server/styles/scss/compiled.scss +++ b/server/styles/scss/compiled.scss @@ -2,4 +2,5 @@ @use '_hourly'; @use '_current-weather'; @use '_local-forecast'; -@use '_latest-observations'; \ No newline at end of file +@use '_latest-observations'; +@use '_regional-forecast'; \ No newline at end of file diff --git a/views/index.ejs b/views/index.ejs index 93611a3..6c9d8d6 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -102,6 +102,9 @@
<%- include('partials/latest-observations.ejs') %>
+
+ <%- include('partials/regional-forecast.ejs') %> +
diff --git a/views/partials/regional-forecast.ejs b/views/partials/regional-forecast.ejs new file mode 100644 index 0000000..ac27df0 --- /dev/null +++ b/views/partials/regional-forecast.ejs @@ -0,0 +1,14 @@ +<%- include('header.ejs', {titleDual:{ top: 'Regional' , bottom: 'Observations' }, hasTime: true }) %> +
+
+
+
+
+ +
+
+
+
+
+
+ <%- include('scroll.ejs') %> \ No newline at end of file