joe/PlatformIO_Esp32C3_BedCooler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix Threshold and improve program and UI features

Browse Source
This commit is contained in:
Joe Tretter
2026-07-10 20:00:31 -05:00
parent c6213e1752
commit e56543e2fd
6 changed files with 137 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
data/www/components/program-card.js
View File

@@ -7,11 +7,11 @@ class ProgramCard extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<style>
:host{display:block}section{height:100%;box-sizing:border-box}.radioRow{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}.radioRow label{display:inline-flex;gap:5px;align-items:center;margin:0}.radioRow input{width:auto}.row{display:flex;gap:8px;align-items:end}.row label{flex:1}.status{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.badge{display:inline-flex;align-items:center;background:#eef3f6;border-radius:6px;padding:4px 7px;color:#263238;font-size:12px}
:host{display:block}section{height:100%;box-sizing:border-box}.radioRow{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}.radioRow label{display:inline-flex;gap:5px;align-items:center;margin:0}.radioRow input{width:auto}.row{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.row label{flex:1;min-width:120px}.row button{flex:0 0 auto}.status{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.badge{display:inline-flex;align-items:center;background:#eef3f6;border-radius:6px;padding:4px 7px;color:#263238;font-size:12px}
</style>
<section>
<h3>Program</h3>
<div class="row"><label>Target Temperature<input id="target" type="number" min="-40" max="85" step="0.01" value="22.00"></label><button id="save">Set</button></div>
<div class="row"><label>Target Temperature<input id="target" type="number" min="-40" max="85" step="0.01" value="22.00"></label><label>Threshold<input id="threshold" type="number" min="0" max="20" step="0.01" value="0.25"></label><label>MaxRuntime<input id="maxRuntime" type="number" min="1" max="1440" step="1" value="5"></label><button id="save">Set</button></div>
<label>Mode</label>
<div class="radioRow">
<label><input type="radio" name="programMode" value="off"> Off</label>
@@ -46,6 +46,11 @@ class ProgramCard extends HTMLElement {
this.renderPump(JSON.parse(event.data));
} catch (error) {}
});
this.source.addEventListener('program', event => {
try {
this.renderProgramChange(JSON.parse(event.data));
} catch (error) {}
});
}
stopEvents() {
@@ -59,10 +64,13 @@ class ProgramCard extends HTMLElement {
}
renderSettings(json) {
const mode = json.mode || 'off';
const modeInput = this.querySelector('input[name="programMode"][value="' + mode + '"]');
if (modeInput) modeInput.checked = true;
if (json.mode !== undefined) {
const modeInput = this.querySelector('input[name="programMode"][value="' + json.mode + '"]');
if (modeInput) modeInput.checked = true;
}
if (json.targetTemperatureC !== undefined) this.querySelector('#target').value = Number(json.targetTemperatureC).toFixed(2);
if (json.toleranceC !== undefined) this.querySelector('#threshold').value = Number(json.toleranceC).toFixed(2);
if (json.maxRuntimeMinutes !== undefined) this.querySelector('#maxRuntime').value = String(Math.round(Number(json.maxRuntimeMinutes)));
}
renderLiveTemperature(json) {
@@ -81,6 +89,11 @@ class ProgramCard extends HTMLElement {
this.renderPump(json);
}
renderProgramChange(json) {
this.renderSettings(json);
this.renderPump(json);
}
async loadProgram() {
const text = await window.App.req('GET', '/api/program');
this.querySelector('#out').textContent = text;
@@ -92,7 +105,9 @@ class ProgramCard extends HTMLElement {
async saveProgram() {
const target = Number(this.querySelector('#target').value);
const text = await window.App.req('POST', '/api/program', {mode: this.selectedMode(), targetTemperatureC: Number(target.toFixed(2))});
const threshold = Number(this.querySelector('#threshold').value);
const maxRuntime = Number(this.querySelector('#maxRuntime').value);
const text = await window.App.req('POST', '/api/program', {mode: this.selectedMode(), targetTemperatureC: Number(target.toFixed(2)), toleranceC: Number(threshold.toFixed(2)), maxRuntimeMinutes: Math.round(maxRuntime)});
this.querySelector('#out').textContent = text;
try {
const json = JSON.parse(text);