sauer/bfa-dryer-design
1
0
Fork 0
mirror of http://10.0.2.1:3031/sauer/bfa-dryer-design.git synced 2026-06-30 11:36:42 +10:00
Code Issues Actions Packages Projects Releases Wiki Activity

Automation: bigger heading, no IDLE/ACTIVE text, red/green toggle

Browse Source
This commit is contained in:
Richard Sauer 2026-04-08 16:35:27 +10:00
parent 6c24388e8f
commit b4033f210d
1 changed files with 5 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
templates/editor.html
View File

@ -52,8 +52,8 @@ body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(
.hmi-card.type-motor,.hmi-card.type-output,.hmi-card.type-burner{background:var(--red)} .hmi-card.type-motor,.hmi-card.type-output,.hmi-card.type-burner{background:var(--red)}
.hmi-card.on.type-motor,.hmi-card.on.type-output{background:var(--green)} .hmi-card.on.type-motor,.hmi-card.on.type-output{background:var(--green)}
.hmi-card.on.type-burner{background:var(--amber)} .hmi-card.on.type-burner{background:var(--amber)}
.hmi-card.type-automation{background:var(--card);border:2px solid var(--blue)} .hmi-card.type-automation{background:var(--red);border:none}
.hmi-card.on.type-automation{background:rgba(45,127,249,0.15);border-color:var(--blue)} .hmi-card.on.type-automation{background:var(--green)}
.hmi-card .card-label{font-size:18px;color:var(--text2);text-align:center} .hmi-card .card-label{font-size:18px;color:var(--text2);text-align:center}
.hmi-card .card-value{font-size:28px;font-weight:700} .hmi-card .card-value{font-size:28px;font-weight:700}
@ -490,20 +490,19 @@ function createCardEl(c) {
el.onclick = () => { if (mode === 'preview') toggleSim(c.id); }; el.onclick = () => { if (mode === 'preview') toggleSim(c.id); };
} else if (c.type === 'automation') { } else if (c.type === 'automation') {
// Automation card — combines outputs, speeds, temp setpoints // Automation card — combines outputs, speeds, temp setpoints
el.innerHTML += `<div class="card-label" onclick="if(mode==='edit'){event.stopPropagation();renameCard('${c.id}')}" style="font-size:16px">${c.label}</div>`; el.innerHTML += `<div class="card-label" onclick="if(mode==='edit'){event.stopPropagation();renameCard('${c.id}')}" style="font-size:24px;font-weight:700">${c.label}</div>`;
const rules = c.rules || []; const rules = c.rules || [];
if (rules.length === 0) { if (rules.length === 0) {
el.innerHTML += `<div class="card-sub" style="text-align:center">No rules configured<br>Click to edit in edit mode</div>`; el.innerHTML += `<div class="card-sub" style="text-align:center">No rules configured<br>Click to edit in edit mode</div>`;
} else { } else {
let rulesHtml = '<div style="width:100%;font-size:11px;color:var(--text2);text-align:left;padding:0 4px;overflow:hidden">'; let rulesHtml = '<div style="width:100%;font-size:12px;color:var(--text2);text-align:left;padding:0 8px;overflow:hidden">';
rules.forEach(r => { rules.forEach(r => {
const icon = r.type === 'temp' ? '🌡' : r.type === 'motor' ? '⚙' : r.type === 'output' ? '⚡' : '●'; const icon = r.type === 'temp' ? '🌡' : r.type === 'motor' ? '⚙' : r.type === 'output' ? '⚡' : '●';
rulesHtml += `<div style="padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${icon} ${r.label || r.target}: ${r.action || ''} ${r.value !== undefined ? r.value : ''}</div>`; rulesHtml += `<div style="padding:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${icon} ${r.label || r.target}: ${r.action || ''} ${r.value !== undefined ? r.value : ''}</div>`;
}); });
rulesHtml += '</div>'; rulesHtml += '</div>';
el.innerHTML += rulesHtml; el.innerHTML += rulesHtml;
} }
el.innerHTML += `<div class="card-value" style="font-size:20px">${s.on ? 'ACTIVE' : 'IDLE'}</div>`;
el.onclick = () => { el.onclick = () => {
if (mode === 'edit') { event.stopPropagation(); editAutomation(c); } if (mode === 'edit') { event.stopPropagation(); editAutomation(c); }
else if (mode === 'preview') toggleSim(c.id); else if (mode === 'preview') toggleSim(c.id);