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

regional forecast font cleanup

Browse Source
This commit is contained in:
Matt Walsh
2022-08-05 14:03:14 -05:00
parent 0cecf8a458
commit 80958226ce
27 changed files with 708 additions and 1051 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
server/scripts/modules/progress.js
View File

@@ -1,11 +1,11 @@
// regional forecast and observations
/* globals WeatherDisplay, utils, STATUS, draw, navigation */
/* globals WeatherDisplay, utils, STATUS, navigation */
// eslint-disable-next-line no-unused-vars
class Progress extends WeatherDisplay {
constructor(navId, elemId) {
super(navId, elemId);
super(navId, elemId, '', false, true);
// pre-load background image (returns promise)
this.backgroundImage = utils.image.load('images/BackGround1_1.png');
@@ -14,103 +14,91 @@ class Progress extends WeatherDisplay {
this.timing = false;
this.version = document.getElementById('version').innerHTML;
// setup event listener
this.elem.querySelector('.container').addEventListener('click', this.lineClick.bind(this));
}
async drawCanvas(displays, loadedCount) {
super.drawCanvas();
// set up an event listener
if (!this.eventListener) {
this.eventListener = true;
this.canvas.addEventListener('click', (e) => this.canvasClick(e), false);
}
// get the background image
const backgroundImage = await this.backgroundImage;
// only draw the background once
if (!this.backgroundDrawn) {
this.context.drawImage(backgroundImage, 0, 0, 640, 480, 0, 0, 640, 480);
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.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, 'WeatherStar', `4000+ ${this.version}`);
}
this.finishDraw();
// if no displays provided just draw the backgrounds (above)
if (!displays) return;
displays.forEach((display, idx) => {
const y = 120 + idx * 29;
const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.');
draw.text(this.context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2);
const lines = displays.map((display, index) => {
const fill = {};
let statusText;
let statusColor;
fill.name = display.name;
let statusClass;
switch (display.status) {
case STATUS.loading:
statusText = 'Loading';
statusColor = '#ffff00';
statusClass = 'loading';
break;
case STATUS.loaded:
statusText = 'Press Here';
statusColor = '#00ff00';
this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25);
statusClass = 'press-here';
break;
case STATUS.failed:
statusText = 'Failed';
statusColor = '#ff0000';
statusClass = 'failed';
break;
case STATUS.noData:
statusText = 'No Data';
statusColor = '#C0C0C0';
draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15);
statusClass = 'no-data';
break;
case STATUS.disabled:
statusText = 'Disabled';
statusColor = '#C0C0C0';
this.context.drawImage(backgroundImage, 470, y - 20, 45, 25, 470, y - 20, 45, 25);
statusClass = 'disabled';
break;
default:
}
// Erase any dots that spill into the status text.
this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30);
draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end');
});
// make the line
const line = this.fillTemplate('item', fill);
// because of timing, this might get called before the template is loaded
if (!line) return false;
// update the status
const links = line.querySelector('.links');
links.classList.remove('loading');
links.classList.add(statusClass);
links.dataset.index = index;
return line;
}).filter((d) => d);
// get the container and update
const container = this.elem.querySelector('.container');
container.innerHTML = '';
container.append(...lines);
this.finishDraw();
// calculate loaded percent
const loadedPercent = (loadedCount / displays.length);
if (loadedPercent < 1.0) {
// Draw a box for the progress.
draw.box(this.context, '#000000', 51, 428, 534, 22);
draw.box(this.context, '#ffffff', 53, 430, 530, 18);
// update the progress gif
draw.box(this.context, '#1d7fff', 55, 432, 526 * loadedPercent, 14);
} else {
// restore the background
this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22);
}
}
canvasClick(e) {
// un-scale
const scale = e.target.getBoundingClientRect().width / e.target.width;
const x = e.offsetX / scale;
const y = e.offsetY / scale;
// eliminate off canvas and outside area clicks
if (!this.isActive()) return;
if (y < 100 || y > 410) return;
if (x < 440 || x > 570) return;
lineClick(e) {
// get index
const indexRaw = e.target?.parentNode?.dataset?.index;
if (indexRaw === undefined) return;
const index = +indexRaw;
// stop playing
navigation.message('navButton');
// use the y value to determine an index
const index = Math.floor((y - 100) / 29);
const display = navigation.getDisplay(index);
if (display && display.status === STATUS.loaded) {
display.showCanvas(navigation.msg.command.firstFrame);
this.hideCanvas();
if (this.canvas) {
this.canvas.style.display = 'none';
}
if (this.isHtml) {
this.elem.classList.remove('show');
}
}
}
}