functional checkboxes
This commit is contained in:
parent
4eeae7b9ef
commit
e45e3d5a62
|
@ -79,10 +79,16 @@ class TravelForecast extends WeatherDisplay {
|
||||||
this.longCanvas.width = 640;
|
this.longCanvas.width = 640;
|
||||||
this.longCanvas.height = 1728;
|
this.longCanvas.height = 1728;
|
||||||
this.longContext = this.longCanvas.getContext('2d');
|
this.longContext = this.longCanvas.getContext('2d');
|
||||||
|
this.longCanvasGifs = [];
|
||||||
}
|
}
|
||||||
// set up variables
|
// set up variables
|
||||||
const cities = this.data;
|
const cities = this.data;
|
||||||
|
|
||||||
|
// 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);
|
this.longContext.clearRect(0,0,this.longCanvas.width,this.longCanvas.height);
|
||||||
|
|
||||||
// draw the "long" canvas with all cities
|
// draw the "long" canvas with all cities
|
||||||
|
@ -120,7 +126,7 @@ class TravelForecast extends WeatherDisplay {
|
||||||
const xHigh = (560 - (highString.length * 20));
|
const xHigh = (560 - (highString.length * 20));
|
||||||
draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', xHigh, y, highString, 2);
|
draw.text(this.longContext, 'Star4000 Large', '24pt', '#FFFF00', xHigh, y, highString, 2);
|
||||||
|
|
||||||
this.gifs.push(await utils.image.superGifAsync({
|
this.longCanvasGifs.push(await utils.image.superGifAsync({
|
||||||
src: city.icon,
|
src: city.icon,
|
||||||
loop_delay: 100,
|
loop_delay: 100,
|
||||||
auto_play: true,
|
auto_play: true,
|
||||||
|
|
|
@ -30,18 +30,20 @@ class WeatherDisplay {
|
||||||
this.navBaseCount = 0;
|
this.navBaseCount = 0;
|
||||||
this.screenIndex = -1; // special starting condition
|
this.screenIndex = -1; // special starting condition
|
||||||
|
|
||||||
if (elemId !== 'progress') this.addCheckbox(elemId, defaultEnabled);
|
// create the canvas, also stores this.elemId
|
||||||
|
this.createCanvas(elemId);
|
||||||
|
|
||||||
|
if (elemId !== 'progress') this.addCheckbox(defaultEnabled);
|
||||||
if (this.enabled) {
|
if (this.enabled) {
|
||||||
this.setStatus(STATUS.loading);
|
this.setStatus(STATUS.loading);
|
||||||
} else {
|
} else {
|
||||||
this.setStatus(STATUS.disabled);
|
this.setStatus(STATUS.disabled);
|
||||||
}
|
}
|
||||||
this.createCanvas(elemId);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
addCheckbox(elemId, defaultEnabled = true) {
|
addCheckbox(defaultEnabled = true) {
|
||||||
// get the saved status of the checkbox
|
// get the saved status of the checkbox
|
||||||
let savedStatus = window.localStorage.getItem(`${elemId}Enabled`);
|
let savedStatus = window.localStorage.getItem(`${this.elemId}Enabled`);
|
||||||
if (savedStatus === null) savedStatus = defaultEnabled;
|
if (savedStatus === null) savedStatus = defaultEnabled;
|
||||||
if (savedStatus === 'true' || savedStatus === true) {
|
if (savedStatus === 'true' || savedStatus === true) {
|
||||||
this.enabled = true;
|
this.enabled = true;
|
||||||
|
@ -49,18 +51,26 @@ class WeatherDisplay {
|
||||||
this.enabled = false;
|
this.enabled = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// refresh (or initially store the state of the checkbox)
|
||||||
|
window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
|
||||||
|
|
||||||
// create a checkbox in the selected displays area
|
// create a checkbox in the selected displays area
|
||||||
const checkbox = `<label for="${elemId}Enabled">
|
const checkbox = document.createElement('template');
|
||||||
<input type="checkbox" value="true" id="${elemId}Enabled" name="${elemId}Enabled"${this.enabled?' checked':''}/>
|
checkbox.innerHTML = `<label for="${this.elemId}Enabled">
|
||||||
|
<input type="checkbox" value="true" id="${this.elemId}Enabled" name="${this.elemId}Enabled"${this.enabled?' checked':''}/>
|
||||||
${this.name}</label>`;
|
${this.name}</label>`;
|
||||||
|
checkbox.content.firstChild.addEventListener('change', (e) => this.checkboxChange(e));
|
||||||
const availableDisplays = document.getElementById('enabledDisplays');
|
const availableDisplays = document.getElementById('enabledDisplays');
|
||||||
availableDisplays.innerHTML += checkbox;
|
availableDisplays.appendChild(checkbox.content.firstChild);
|
||||||
const checkboxElem = document.getElementById(`${elemId}Enabled`);
|
|
||||||
checkboxElem.addEventListener('click', this.checkboxChange);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
checkboxChange(e) {
|
checkboxChange(e) {
|
||||||
console.log(e);
|
// update the state
|
||||||
|
this.enabled = e.target.checked;
|
||||||
|
// store the value for the next load
|
||||||
|
window.localStorage.setItem(`${this.elemId}Enabled`, this.enabled);
|
||||||
|
// calling get data will update the status and actually get the data if we're set to enabled
|
||||||
|
this.getData();
|
||||||
}
|
}
|
||||||
|
|
||||||
// set data status and send update to navigation module
|
// set data status and send update to navigation module
|
||||||
|
@ -114,6 +124,9 @@ class WeatherDisplay {
|
||||||
// refresh the canvas
|
// refresh the canvas
|
||||||
this.canvas = document.getElementById(this.elemId+'Canvas');
|
this.canvas = document.getElementById(this.elemId+'Canvas');
|
||||||
this.context = this.canvas.getContext('2d');
|
this.context = this.canvas.getContext('2d');
|
||||||
|
|
||||||
|
// clean up the first-run flag in screen index
|
||||||
|
if (this.screenIndex < 0) this.screenIndex = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
finishDraw() {
|
finishDraw() {
|
||||||
|
|
|
@ -271,4 +271,5 @@ jsgif
|
||||||
}
|
}
|
||||||
#enabledDisplays label {
|
#enabledDisplays label {
|
||||||
display: block;
|
display: block;
|
||||||
|
max-width: 300px;
|
||||||
}
|
}
|
|
@ -1 +1 @@
|
||||||
module.exports = '3.0.1';
|
module.exports = '3.1.0';
|
Loading…
Reference in a new issue