lifning/ws4kp
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

regional forecast/observations in html

Browse source
This commit is contained in:
Matt Walsh 2022-08-04 16:30:13 -05:00
parent 88a17587b3
commit d34b0ca224
8 changed files with 142 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
server/scripts/modules/navigation.js
View file

@ -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,

27
server/scripts/modules/regionalforecast.js
View file

@ -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

43
server/styles/compiled.css
View file

@ -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 */

2
server/styles/compiled.css.map
View file

@ -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":"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","file":"compiled.css"}

51
server/styles/scss/_regional-forecast.scss Normal file
View 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;
}
}
}

1
server/styles/scss/compiled.scss
View file

@ -3,3 +3,4 @@
@use '_current-weather';
@use '_local-forecast';
@use '_latest-observations';
@use '_regional-forecast';

3
views/index.ejs
View file

@ -102,6 +102,9 @@
<div id="latest-observations-html" class="weather-display">
<%- include('partials/latest-observations.ejs') %>
</div>
<div id="regional-forecast-html" class="weather-display show">
<%- include('partials/regional-forecast.ejs') %>
</div>
</div>
<div id="divTwcBottom">
<div id="divTwcBottomLeft">

14
views/partials/regional-forecast.ejs Normal file
View 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') %>