functional checkboxes

This commit is contained in:
Matt Walsh 2020-09-18 14:59:58 -05:00
parent 4eeae7b9ef
commit e45e3d5a62
4 changed files with 32 additions and 12 deletions

View file

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

View file

@ -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() {

View file

@ -271,4 +271,5 @@ jsgif
} }
#enabledDisplays label { #enabledDisplays label {
display: block; display: block;
max-width: 300px;
} }

View file

@ -1 +1 @@
module.exports = '3.0.1'; module.exports = '3.1.0';