regional forecast/observations in html
This commit is contained in:
Matt Walsh
parent
88a17587b3
commit
d34b0ca224
|
|
@ -100,7 +100,7 @@ const navigation = (() => {
|
||||||
new LatestObservations(1, 'latest-observations'),
|
new LatestObservations(1, 'latest-observations'),
|
||||||
new Hourly(2, 'hourly'),
|
new Hourly(2, 'hourly'),
|
||||||
new TravelForecast(3, 'travelForecast', false), // not active by default
|
new TravelForecast(3, 'travelForecast', false), // not active by default
|
||||||
new RegionalForecast(4, 'regionalForecast'),
|
new RegionalForecast(4, 'regional-forecast'),
|
||||||
new LocalForecast(5, 'local-forecast'),
|
new LocalForecast(5, 'local-forecast'),
|
||||||
new ExtendedForecast(6, 'extendedForecast'),
|
new ExtendedForecast(6, 'extendedForecast'),
|
||||||
almanac,
|
almanac,
|
||||||
|
|
|
||||||
|
|
@ -359,7 +359,34 @@ class RegionalForecast extends WeatherDisplay {
|
||||||
}
|
}
|
||||||
|
|
||||||
// draw the map
|
// 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);
|
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) => {
|
await Promise.all(data.map(async (city) => {
|
||||||
const period = city[this.screenIndex];
|
const period = city[this.screenIndex];
|
||||||
// draw the icon if possible
|
// draw the icon if possible
|
||||||
|
|
|
||||||
|
|
@ -334,4 +334,47 @@
|
||||||
.weather-display .latest-observations.main .observation-lines .observation-row .wind {
|
.weather-display .latest-observations.main .observation-lines .observation-row .wind {
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
text-align: right;
|
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 */
|
}/*# sourceMappingURL=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"}
|
{"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"}
|
||||||
51
server/styles/scss/_regional-forecast.scss
Normal file
51
server/styles/scss/_regional-forecast.scss
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,4 +2,5 @@
|
||||||
@use '_hourly';
|
@use '_hourly';
|
||||||
@use '_current-weather';
|
@use '_current-weather';
|
||||||
@use '_local-forecast';
|
@use '_local-forecast';
|
||||||
@use '_latest-observations';
|
@use '_latest-observations';
|
||||||
|
@use '_regional-forecast';
|
||||||
|
|
@ -102,6 +102,9 @@
|
||||||
<div id="latest-observations-html" class="weather-display">
|
<div id="latest-observations-html" class="weather-display">
|
||||||
<%- include('partials/latest-observations.ejs') %>
|
<%- include('partials/latest-observations.ejs') %>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="regional-forecast-html" class="weather-display show">
|
||||||
|
<%- include('partials/regional-forecast.ejs') %>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="divTwcBottom">
|
<div id="divTwcBottom">
|
||||||
<div id="divTwcBottomLeft">
|
<div id="divTwcBottomLeft">
|
||||||
|
|
|
||||||
14
views/partials/regional-forecast.ejs
Normal file
14
views/partials/regional-forecast.ejs
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<%- include('header.ejs', {titleDual:{ top: 'Regional' , bottom: 'Observations' }, hasTime: true }) %>
|
||||||
|
<div class="main has-scroll regional-forecast">
|
||||||
|
<div class="map"><img src="images/Basemap2.png" /></div>
|
||||||
|
<div class="location-container">
|
||||||
|
<div class="location template">
|
||||||
|
<div class="icon">
|
||||||
|
<img src="" />
|
||||||
|
</div>
|
||||||
|
<div class="city"></div>
|
||||||
|
<div class="temp"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<%- include('scroll.ejs') %>
|
||||||
Loading…
Reference in a new issue