eric/WeatherStar4000
1
0
Fork 0
mirror of https://github.com/netbymatt/ws4kp.git synced 2026-04-18 17:49:31 -07:00
Code Issues Packages Projects Releases Wiki Activity

more html

Browse Source
This commit is contained in:
Matt Walsh
2022-07-29 16:12:42 -05:00
parent 8ffb0e744e
commit f26fce1e58
22 changed files with 1305 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
server/scripts/modules/hourly.js
View File

@@ -1,22 +1,17 @@
// hourly forecast list
/* globals WeatherDisplay, utils, STATUS, UNITS, draw, navigation, icons, luxon */
/* globals WeatherDisplay, utils, STATUS, UNITS, navigation, icons, luxon */
// eslint-disable-next-line no-unused-vars
class Hourly extends WeatherDisplay {
constructor(navId, elemId, defaultActive) {
// special height and width for scrolling
super(navId, elemId, 'Hourly Forecast', defaultActive);
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround6_1.png');
// height of one hour in the forecast
this.hourHeight = 72;
super(navId, elemId, 'Hourly Forecast', defaultActive, true);
// set up the timing
this.timing.baseDelay = 20;
// 24 hours = 6 pages
const pages = 4; // first page is already displayed, last page doesn't happen
const timingStep = this.hourHeight * 4;
const timingStep = 75 * 4;
this.timing.delay = [150 + timingStep];
// add additional pages
for (let i = 0; i < pages; i += 1) this.timing.delay.push(timingStep);
@@ -114,52 +109,25 @@ class Hourly extends WeatherDisplay {
}
async drawLongCanvas() {
// create the "long" canvas if necessary
if (!this.longCanvas) {
this.longCanvas = document.createElement('canvas');
this.longCanvas.width = 640;
this.longCanvas.height = 24 * this.hourHeight;
this.longContext = this.longCanvas.getContext('2d');
this.longCanvasGifs = [];
}
// stop all gifs
this.longCanvasGifs.forEach((gif) => gif.pause());
// delete the gifs
this.longCanvasGifs.length = 0;
// clean up existing gifs
this.gifs.forEach((gif) => gif.pause());
// delete the gifs
this.gifs.length = 0;
this.longContext.clearRect(0, 0, this.longCanvas.width, this.longCanvas.height);
// draw the "long" canvas with all cities
draw.box(this.longContext, 'rgb(35, 50, 112)', 0, 0, 640, 24 * this.hourHeight);
for (let i = 0; i <= 4; i += 1) {
const y = i * 346;
draw.horizontalGradient(this.longContext, 0, y, 640, y + 346, '#102080', '#001040');
}
// get the list element and populate
const list = this.elem.querySelector('.hourly-lines');
list.innerHTML = '';
const startingHour = luxon.DateTime.local();
await Promise.all(this.data.map(async (data, index) => {
// calculate base y value
const y = 50 + this.hourHeight * index;
const lines = this.data.map((data, index) => {
const line = this.templates['hourly-row'].cloneNode(true);
// hour
const hour = startingHour.plus({ hours: index });
const formattedHour = hour.toLocaleString({ weekday: 'short', hour: 'numeric' });
draw.text(this.longContext, 'Star4000 Large Compressed', '24pt', '#FFFF00', 80, y, formattedHour, 2);
line.querySelector('.hour').innerHTML = formattedHour;
// temperatures, convert to strings with no decimal
const temperature = Math.round(data.temperature).toString().padStart(3);
const feelsLike = Math.round(data.apparentTemperature).toString().padStart(3);
draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', 390, y, temperature, 2, 'center');
line.querySelector('.temp').innerHTML = temperature;
// only plot apparent temperature if there is a difference
if (temperature !== feelsLike) draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', 470, y, feelsLike, 2, 'center');
if (temperature !== feelsLike) line.querySelector('.like').innerHTML = feelsLike;
// wind
let wind = 'Calm';
@@ -167,44 +135,25 @@ class Hourly extends WeatherDisplay {
const windSpeed = Math.round(data.windSpeed).toString();
wind = data.windDirection + (Array(6 - data.windDirection.length - windSpeed.length).join(' ')) + windSpeed;
}
draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', 580, y, wind, 2, 'center');
line.querySelector('.wind').innerHTML = wind;
this.longCanvasGifs.push(await utils.image.superGifAsync({
src: data.icon,
auto_play: true,
canvas: this.longCanvas,
x: 290,
y: y - 35,
max_width: 47,
}));
}));
// image
line.querySelector('.icon img').src = data.icon;
return line;
});
list.append(...lines);
}
async drawCanvas() {
// there are technically 2 canvases: the standard canvas and the extra-long canvas that contains the complete
// list of cities. The second canvas is copied into the standard canvas to create the scroll
drawCanvas() {
super.drawCanvas();
// draw the standard context
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.titleText(this.context, 'Hourly Forecast');
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFF00', 390, 105, 'TEMP', 2, 'center');
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFF00', 470, 105, 'LIKE', 2, 'center');
draw.text(this.context, 'Star4000 Small', '24pt', '#FFFF00', 580, 105, 'WIND', 2, 'center');
// copy the scrolled portion of the canvas for the initial run before the scrolling starts
this.context.drawImage(this.longCanvas, 0, 0, 640, 289, 0, 110, 640, 289);
this.finishDraw();
}
async showCanvas() {
// special to travel forecast to draw the remainder of the canvas
await this.drawCanvas();
showCanvas() {
// special to hourly to draw the remainder of the canvas
this.drawCanvas();
super.showCanvas();
}
@@ -215,17 +164,14 @@ class Hourly extends WeatherDisplay {
// base count change callback
baseCountChange(count) {
// get a fresh canvas
const longCanvas = this.getLongCanvas();
// calculate scroll offset and don't go past end
let offsetY = Math.min(longCanvas.height - 289, (count - 150));
let offsetY = Math.min(this.elem.querySelector('.hourly-lines').getBoundingClientRect().height - 289, (count - 150));
// don't let offset go negative
if (offsetY < 0) offsetY = 0;
// copy the scrolled portion of the canvas
this.context.drawImage(longCanvas, 0, offsetY, 640, 289, 0, 110, 640, 289);
this.elem.querySelector('.main').scrollTo(0, offsetY);
}
static getTravelCitiesDayName(cities) {
@@ -241,9 +187,4 @@ class Hourly extends WeatherDisplay {
return dayName;
}, '');
}
// necessary to get the lastest long canvas when scrolling
getLongCanvas() {
return this.longCanvas;
}
}