diff --git a/templates/editor.html b/templates/editor.html
index fdac786..49d788e 100644
--- a/templates/editor.html
+++ b/templates/editor.html
@@ -184,6 +184,16 @@ body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(
.auto-btns button{padding:10px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer}
.auto-btns .save-btn{background:var(--green);color:#000}
.auto-btns .cancel-btn{background:var(--card);color:var(--text);border:1px solid var(--border)}
+
+/* Card properties editor */
+.props-editor{width:420px;max-width:95vw}
+.props-editor h3{font-size:20px;margin-bottom:16px}
+.prop-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
+.prop-row label{width:100px;font-size:13px;color:var(--text2);flex-shrink:0;text-align:right}
+.prop-row input,.prop-row select{flex:1;padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);font-size:14px}
+.prop-row input[type=color]{width:50px;height:38px;padding:2px;cursor:pointer;flex:0}
+.prop-row input[type=range]{flex:1}
+.prop-preview{display:inline-block;width:24px;height:24px;border-radius:4px;border:1px solid var(--border);vertical-align:middle;margin-left:8px}
@@ -470,27 +480,28 @@ function createCardEl(c) {
const commentCount = (layout.comments || []).filter(x => x.target === c.id).length;
el.innerHTML += ``;
+ const cfs = c.fontSize || 18;
if (c.type === 'temp') {
const color = c.color || '#ff8844';
- el.innerHTML += `${c.label}
`;
+ el.innerHTML += `${c.label}
`;
el.innerHTML += `${Math.round(s.value)} °C
`;
el.innerHTML += ``;
el.innerHTML += `SP: ${c.sp_default || 70} °C
`;
el.onclick = () => { if (mode === 'preview') openTempPopup(c); };
} else if (c.type === 'motor') {
el.innerHTML += `
- ${c.label}
+ ${c.label}
${c.sp_default || 50}%
`;
el.innerHTML += `${s.on ? 'ON' : 'OFF'}
`;
el.onclick = () => { if (mode === 'preview') toggleSim(c.id); };
} else if (c.type === 'burner') {
- el.innerHTML += `${c.label}
`;
+ el.innerHTML += `${c.label}
`;
el.innerHTML += `${s.on ? 'ON' : 'OFF'}
`;
el.onclick = () => { if (mode === 'preview') toggleSim(c.id); };
} else if (c.type === 'automation') {
// Automation card — combines outputs, speeds, temp setpoints
- el.innerHTML += `${c.label}
`;
+ el.innerHTML += `${c.label}
`;
const rules = c.rules || [];
if (rules.length === 0) {
el.innerHTML += `No rules configured
Click to edit in edit mode
`;
@@ -508,7 +519,7 @@ function createCardEl(c) {
else if (mode === 'preview') toggleSim(c.id);
};
} else { // output
- el.innerHTML += `${c.label}
`;
+ el.innerHTML += `${c.label}
`;
el.innerHTML += `${s.on ? 'ON' : 'OFF'}
`;
el.onclick = () => { if (mode === 'preview') toggleSim(c.id); };
}
@@ -728,12 +739,89 @@ function deleteCard(id) {
renderCards();
}
-function renameCard(id) {
- const page = layout.pages[currentPage];
- const card = page.cards.find(c => c.id === id);
+function editCardProps(id) {
+ const card = findCard(id);
if (!card) return;
- const name = prompt('New name:', card.label);
- if (name) { card.label = name; renderCards(); }
+
+ const p = document.getElementById('popup');
+ p.style.borderColor = 'transparent';
+
+ let typeOpts = ['temp','motor','output','burner','automation'].map(t =>
+ ``
+ ).join('');
+
+ let extraFields = '';
+ if (card.type === 'temp') {
+ extraFields = `
+ °C
`;
+ } else if (card.type === 'motor') {
+ extraFields = `
+ %
`;
+ }
+
+ p.innerHTML = `
+
+
Edit Card
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${card.fontSize||18}px
+
+ ${extraFields}
+
+
+
+
+
`;
+
+ // Live preview for color picker
+ document.getElementById('prop-color').addEventListener('input', e => {
+ document.getElementById('prop-color-preview').style.background = e.target.value;
+ });
+ document.getElementById('prop-fontsize').addEventListener('input', e => {
+ document.getElementById('prop-fontsize-val').textContent = e.target.value + 'px';
+ });
+
+ document.getElementById('popup-overlay').classList.add('active');
+}
+
+function saveCardProps(id) {
+ const card = findCard(id);
+ if (!card) return;
+
+ card.label = document.getElementById('prop-name').value || card.label;
+ card.type = document.getElementById('prop-type').value;
+ card.width = document.getElementById('prop-width').value;
+ const color = document.getElementById('prop-color').value;
+ card.color = color || null;
+ card.fontSize = parseInt(document.getElementById('prop-fontsize').value) || 18;
+
+ const spEl = document.getElementById('prop-sp');
+ if (spEl) card.sp_default = parseInt(spEl.value) || 0;
+
+ closePopup();
+ renderCards();
}
function toggleCardSize(id) {