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

lastest observations in html

Browse source
This commit is contained in:
Matt Walsh 2022-08-04 12:49:04 -05:00
parent 9ce8176b63
commit efd2cc7808
11 changed files with 196 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
server/scripts/modules/latestobservations.js
View file

@ -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();
}

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

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

106
server/scripts/modules/utilities.js
View file

@ -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, '<br />\n')
// returns 2: 'The quick brown fox<br />\njumped over the lazy<br />\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,

60
server/styles/compiled.css
View file

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

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"],"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"],"names":[],"mappings":"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","file":"compiled.css"}

72
server/styles/scss/_latest-observations.scss Normal file
View file

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

3
server/styles/scss/_weatherdisplay.scss
View file

@ -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);
}
}

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

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

3
views/index.ejs
View file

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

20
views/partials/latest-observations.ejs Normal file
View file

@ -0,0 +1,20 @@
<%- include('header.ejs', {titleDual:{ top: 'Latest' , bottom: 'Observations' }, noaaLogo: true }) %>
<div class="main has-scroll latest-observations has-box">
<div class="container">
<div class="column-headers">
<div class="temp english">&deg;F</div>
<div class="temp metric">&deg;C</div>
<div class="weather">Weather</div>
<div class="wind">Wind</div>
</div>
<div class="observation-lines">
<div class="observation-row template">
<div class="location"></div>
<div class="temp"></div>
<div class="weather"></div>
<div class="wind"></div>
</div>
</div>
</div>
</div>
<%- include('scroll.ejs') %>

3
ws4kp.code-workspace
View file

@ -28,7 +28,8 @@
"T",
"T'storm",
"uscomp",
"Visib"
"Visib",
"Waukegan"
],
"cSpell.ignorePaths": [
"**/package-lock.json",