iobroker.mywebui 1.75.0 → 1.76.0

package/default-controls/controls/gauges/gauge-table.control

@@ -1 +1 @@
-{"properties": {"rows": {"type": "string", "default": "[{\"tag\":\"BF234239\",\"value\":86.7,\"zones\":[{\"to\":65,\"color\":\"#7c5ce0\"},{\"to\":75,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#d63b45\"}]},{\"tag\":\"BF234240\",\"value\":54.2,\"zones\":[{\"to\":15,\"color\":\"#d63b45\"},{\"to\":30,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#7c5ce0\"}]},{\"tag\":\"BF234241\",\"value\":38.7,\"zones\":[{\"to\":100,\"color\":\"#7c5ce0\"}]}]"}, "unit": {"type": "string", "default": ""}, "decimals": {"type": "number", "default": 1}}, "settings": {"width": "720px", "height": "220px"}, "html": "<div id=\"tbl\" class=\"gt\"></div>", "style": ":host{display:block;width:100%;color:#e8e8ea;font-family:'Segoe UI',Roboto,sans-serif;box-sizing:border-box;}\n.gt{display:flex;flex-direction:column;padding:8px 12px;box-sizing:border-box;}\n.gt-head,.gt-row{display:grid;grid-template-columns:160px 1fr 130px;align-items:center;gap:16px;}\n.gt-head{font-size:15px;font-weight:700;padding:6px 0;border-bottom:2px solid rgba(255,255,255,.2);color:#cdd3ff;}\n.gt-row{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);}\n.gt-tag{font-size:15px;}\n.gt-val{font-size:16px;text-align:left;}\n.gt-status webui-gauges-linear-gauge{display:block;width:100%;}", "script": "function parseRows(instance){let r=instance.rows;if(Array.isArray(r))return r;try{return JSON.parse(r||'[]');}catch(e){return [];}}\nfunction esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}\nfunction render(instance){\n    const host=instance._getDomElement('tbl'); if(!host) return;\n    const rows=parseRows(instance);\n    const dec=(instance.decimals!=null&&instance.decimals!=='')?Number(instance.decimals):1;\n    const gunit=instance.unit!=null?instance.unit:'';\n    let body='';\n    for(const row of rows){\n        const zones=row.zones?(typeof row.zones==='string'?row.zones:JSON.stringify(row.zones)):'[{\"to\":65,\"color\":\"#7c5ce0\"},{\"to\":75,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#d63b45\"}]';\n        const zAttr=zones.replace(/'/g,'&#39;');\n        const min=row.min!=null?row.min:0, max=row.max!=null?row.max:100;\n        const val=row.value!=null?Number(row.value):0;\n        const unit=row.unit!=null?row.unit:gunit;\n        const ticks=row.ticks!=null?(' ticks=\"'+esc(row.ticks)+'\"'):'';\n        body+='<div class=\"gt-row\"><div class=\"gt-tag\">'+esc(row.tag||'')+'</div>'\n            +'<div class=\"gt-status\"><webui-gauges-linear-gauge value=\"'+val+'\" min=\"'+min+'\" max=\"'+max+'\" unit=\"\" mode=\"bar\" bar-thickness=\"12\"'+ticks+' zones=\\''+zAttr+'\\'></webui-gauges-linear-gauge></div>'\n            +'<div class=\"gt-val\">'+val.toFixed(dec)+esc(unit)+'</div></div>';\n    }\n    host.innerHTML='<div class=\"gt-head\"><div class=\"gt-tag\">Tag</div><div class=\"gt-status\">Status</div><div class=\"gt-val\">Current value</div></div>'+body;\n}\nexport function init(instance){\n    try{instance._bindingsRefresh&&instance._bindingsRefresh();}catch(e){}\n    for(const pr of ['rows','unit','decimals']){ try{instance._assignEvent(pr+'-changed',()=>render(instance));}catch(e){} }\n    render(instance);\n}\nexport function connectedCallback(instance){ render(instance); }\n"}
+{"properties": {"rows": {"type": "string", "default": "[{\"tag\":\"BF234239\",\"value\":86.7,\"zones\":[{\"to\":65,\"color\":\"#7c5ce0\"},{\"to\":75,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#d63b45\"}]},{\"tag\":\"BF234240\",\"value\":54.2,\"zones\":[{\"to\":15,\"color\":\"#d63b45\"},{\"to\":30,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#7c5ce0\"}]},{\"tag\":\"BF234241\",\"value\":38.7,\"zones\":[{\"to\":100,\"color\":\"#7c5ce0\"}]}]"}, "unit": {"type": "string", "default": ""}, "decimals": {"type": "number", "default": 1}}, "settings": {"width": "720px", "height": "220px"}, "html": "<div id=\"tbl\" class=\"gt\"></div>", "style": ":host{display:block;width:100%;color:var(--ui-text,#e2e6ec);font-family:'Segoe UI',Roboto,sans-serif;box-sizing:border-box;}\n.gt{display:flex;flex-direction:column;padding:8px 12px;box-sizing:border-box;}\n.gt-head,.gt-row{display:grid;grid-template-columns:160px 1fr 130px;align-items:center;gap:16px;}\n.gt-head{font-size:15px;font-weight:700;padding:6px 0;border-bottom:2px solid var(--ui-border,#3b4250);color:var(--accent,#2680eb);}\n.gt-row{padding:8px 0;border-bottom:1px solid var(--ui-border,rgba(255,255,255,.08));}\n.gt-tag{font-size:15px;}\n.gt-val{font-size:16px;text-align:left;}\n.gt-status webui-gauges-linear-gauge{display:block;width:100%;}", "script": "function parseRows(instance){let r=instance.rows;if(Array.isArray(r))return r;try{return JSON.parse(r||'[]');}catch(e){return [];}}\nfunction esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}\nfunction render(instance){\n    const host=instance._getDomElement('tbl'); if(!host) return;\n    const rows=parseRows(instance);\n    const dec=(instance.decimals!=null&&instance.decimals!=='')?Number(instance.decimals):1;\n    const gunit=instance.unit!=null?instance.unit:'';\n    let body='';\n    for(const row of rows){\n        const zones=row.zones?(typeof row.zones==='string'?row.zones:JSON.stringify(row.zones)):'[{\"to\":65,\"color\":\"#7c5ce0\"},{\"to\":75,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#d63b45\"}]';\n        const zAttr=zones.replace(/'/g,'&#39;');\n        const min=row.min!=null?row.min:0, max=row.max!=null?row.max:100;\n        const val=row.value!=null?Number(row.value):0;\n        const unit=row.unit!=null?row.unit:gunit;\n        const ticks=row.ticks!=null?(' ticks=\"'+esc(row.ticks)+'\"'):'';\n        body+='<div class=\"gt-row\"><div class=\"gt-tag\">'+esc(row.tag||'')+'</div>'\n            +'<div class=\"gt-status\"><webui-gauges-linear-gauge value=\"'+val+'\" min=\"'+min+'\" max=\"'+max+'\" unit=\"\" mode=\"bar\" bar-thickness=\"12\"'+ticks+' zones=\\''+zAttr+'\\'></webui-gauges-linear-gauge></div>'\n            +'<div class=\"gt-val\">'+val.toFixed(dec)+esc(unit)+'</div></div>';\n    }\n    host.innerHTML='<div class=\"gt-head\"><div class=\"gt-tag\">Tag</div><div class=\"gt-status\">Status</div><div class=\"gt-val\">Current value</div></div>'+body;\n}\nexport function init(instance){\n    try{instance._bindingsRefresh&&instance._bindingsRefresh();}catch(e){}\n    for(const pr of ['rows','unit','decimals']){ try{instance._assignEvent(pr+'-changed',()=>render(instance));}catch(e){} }\n    render(instance);\n}\nexport function connectedCallback(instance){ render(instance); }\n"}

package/default-controls/controls/gauges/linear-gauge.control

@@ -1 +1 @@
-{"properties": {"value": {"type": "number", "default": 0}, "min": {"type": "number", "default": 0}, "max": {"type": "number", "default": 100}, "zones": {"type": "string", "default": "[{\"to\":65,\"color\":\"#7c5ce0\"},{\"to\":75,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#d63b45\"}]"}, "ticks": {"type": "string", "default": ""}, "orientation": {"type": "string", "default": "horizontal"}, "mode": {"type": "string", "default": "full"}, "title": {"type": "string", "default": ""}, "subtitle": {"type": "string", "default": ""}, "unit": {"type": "string", "default": "%"}, "decimals": {"type": "number", "default": 1}, "showValue": {"type": "boolean", "default": true}, "showPointer": {"type": "boolean", "default": true}, "trackColor": {"type": "color", "default": "#3a3f4b"}, "barThickness": {"type": "number", "default": 18}}, "settings": {"width": "360px", "height": "150px"}, "html": "<div id=\"wrap\" class=\"lg-wrap\"><div id=\"head\" class=\"lg-head\"></div><div id=\"val\" class=\"lg-val\"></div><div id=\"gauge\" class=\"lg-gauge\"></div></div>", "style": ":host{display:block;width:100%;color:#e8e8ea;font-family:'Segoe UI',Roboto,sans-serif;box-sizing:border-box;}\n.lg-wrap{display:flex;flex-direction:column;gap:6px;padding:8px 10px;box-sizing:border-box;height:100%;}\n.lg-title{font-size:15px;font-weight:700;line-height:1.1;}\n.lg-sub{font-size:12px;opacity:.55;margin-top:2px;}\n.lg-val{margin:2px 0 6px;}\n.lg-val .lg-num{font-size:40px;font-weight:800;line-height:1;}\n.lg-val .lg-unit{font-size:18px;opacity:.8;margin-left:4px;}\n.lg-gauge{position:relative;}\n.lg-track{position:absolute;border-radius:3px;}\n.lg-seg{position:absolute;}\n.lg-ptr{position:absolute;width:0;height:0;}\n.lg-tick{position:absolute;font-size:11px;font-weight:600;opacity:.85;white-space:nowrap;}\n/* horizontal */\n.lg-horizontal{padding:16px 0 20px;}\n.lg-horizontal .lg-track{left:0;right:0;top:16px;height:var(--lg-thick,18px);}\n.lg-horizontal .lg-seg{top:16px;height:var(--lg-thick,18px);}\n.lg-horizontal .lg-ptr-h{top:3px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid #fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}\n.lg-horizontal .lg-tick-h{top:calc(16px + var(--lg-thick,18px) + 3px);transform:translateX(-50%);}\n/* vertical */\n.lg-vertical{padding:0 0 0 34px;height:100%;min-height:220px;}\n.lg-vertical .lg-track{left:34px;width:var(--lg-thick,18px);top:8px;bottom:8px;}\n.lg-vertical .lg-seg{left:34px;width:var(--lg-thick,18px);}\n.lg-vertical .lg-ptr-v{left:calc(34px + var(--lg-thick,18px) + 3px);border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid #fff;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}\n.lg-vertical .lg-tick-v{left:0;width:30px;text-align:right;transform:translateY(50%);}", "script": "function num(v,d){v=parseFloat(v);return isNaN(v)?d:v;}\nfunction parseZones(instance){let z=instance.zones;if(Array.isArray(z))return z;try{return JSON.parse(z||'[]');}catch(e){return [];}}\nfunction render(instance){\n    const el=(id)=>instance._getDomElement(id);\n    const g=el('gauge'); if(!g) return;\n    const min=num(instance.min,0), max=num(instance.max,100);\n    let value=num(instance.value,0); value=Math.max(min,Math.min(max,value));\n    const vertical=(instance.orientation==='vertical');\n    const zones=parseZones(instance).slice().sort((a,b)=>num(a.to,0)-num(b.to,0));\n    const track=instance.trackColor||'#3a3f4b';\n    const thick=num(instance.barThickness,18);\n    const dec=num(instance.decimals,1);\n    const pct=(v)=>(max>min)?((v-min)/(max-min))*100:0;\n    const barOnly=(instance.mode==='bar');\n    // head\n    const head=el('head');\n    if(head){ if(barOnly){head.style.display='none';} else {head.style.display='';head.innerHTML=(instance.title?('<div class=\"lg-title\">'+instance.title+'</div>'):'')+(instance.subtitle?('<div class=\"lg-sub\">'+instance.subtitle+'</div>'):'');} }\n    // value\n    const valEl=el('val');\n    if(valEl){ if(barOnly||instance.showValue===false||instance.showValue==='false'){valEl.style.display='none';} else {valEl.style.display='';valEl.innerHTML='<span class=\"lg-num\">'+value.toFixed(dec)+'</span><span class=\"lg-unit\">'+(instance.unit||'')+'</span>';} }\n    // ticks list\n    let ticks;\n    if(instance.ticks&&String(instance.ticks).trim()) ticks=String(instance.ticks).split(',').map(x=>num(x,null)).filter(x=>x!=null);\n    else { ticks=[min]; for(const z of zones) ticks.push(num(z.to,max)); ticks.push(max); ticks=[...new Set(ticks)].sort((a,b)=>a-b); }\n    // segments up to value\n    let prev=min, segs='';\n    const seg=(a,b,color)=>{const s=pct(a),sz=pct(b)-pct(a); if(sz<=0) return ''; return '<div class=\"lg-seg\" style=\"'+(vertical?('bottom:'+s+'%;height:'+sz+'%;'):('left:'+s+'%;width:'+sz+'%;'))+'background:'+(color||'#888')+';\"></div>';};\n    for(const z of zones){ const to=Math.min(num(z.to,max),value); if(to>prev) segs+=seg(prev,to,z.color); prev=num(z.to,max); if(prev>=value) break; }\n    if(value>prev&&zones.length) segs+=seg(prev,value,zones[zones.length-1].color);\n    const p=pct(value);\n    const pointer=(instance.showPointer===false||instance.showPointer==='false')?'':(vertical?('<div class=\"lg-ptr lg-ptr-v\" style=\"bottom:calc('+p+'% - 7px);\"></div>'):('<div class=\"lg-ptr lg-ptr-h\" style=\"left:calc('+p+'% - 7px);\"></div>'));\n    const ticksHtml=ticks.map(t=>{const tp=pct(t);return vertical?('<div class=\"lg-tick lg-tick-v\" style=\"bottom:calc('+tp+'% - 7px);\">'+t+'</div>'):('<div class=\"lg-tick lg-tick-h\" style=\"left:'+tp+'%;\">'+t+'</div>');}).join('');\n    g.className='lg-gauge '+(vertical?'lg-vertical':'lg-horizontal');\n    g.style.setProperty('--lg-thick',thick+'px');\n    g.innerHTML='<div class=\"lg-track\" style=\"background:'+track+';\"></div>'+segs+pointer+'<div class=\"lg-ticks\">'+ticksHtml+'</div>';\n}\nexport function init(instance){\n    try{instance._bindingsRefresh&&instance._bindingsRefresh();}catch(e){}\n    const props=['value','min','max','zones','ticks','orientation','mode','title','subtitle','unit','decimals','showValue','showPointer','trackColor','barThickness'];\n    for(const pr of props){ try{instance._assignEvent(pr+'-changed',()=>render(instance));}catch(e){} }\n    render(instance);\n}\nexport function connectedCallback(instance){ render(instance); }\n"}
+{"properties": {"value": {"type": "number", "default": 0}, "min": {"type": "number", "default": 0}, "max": {"type": "number", "default": 100}, "zones": {"type": "string", "default": "[{\"to\":65,\"color\":\"#7c5ce0\"},{\"to\":75,\"color\":\"#c8551f\"},{\"to\":100,\"color\":\"#d63b45\"}]"}, "ticks": {"type": "string", "default": ""}, "orientation": {"type": "string", "default": "horizontal"}, "mode": {"type": "string", "default": "full"}, "title": {"type": "string", "default": ""}, "subtitle": {"type": "string", "default": ""}, "unit": {"type": "string", "default": "%"}, "decimals": {"type": "number", "default": 1}, "showValue": {"type": "boolean", "default": true}, "showPointer": {"type": "boolean", "default": true}, "trackColor": {"type": "color", "default": ""}, "barThickness": {"type": "number", "default": 18}}, "settings": {"width": "360px", "height": "150px"}, "html": "<div id=\"wrap\" class=\"lg-wrap\"><div id=\"head\" class=\"lg-head\"></div><div id=\"val\" class=\"lg-val\"></div><div id=\"gauge\" class=\"lg-gauge\"></div></div>", "style": ":host{display:block;width:100%;color:var(--ui-text,#e2e6ec);font-family:'Segoe UI',Roboto,sans-serif;box-sizing:border-box;}\n.lg-wrap{display:flex;flex-direction:column;gap:6px;padding:8px 10px;box-sizing:border-box;height:100%;}\n.lg-title{font-size:15px;font-weight:700;line-height:1.1;}\n.lg-sub{font-size:12px;opacity:.55;margin-top:2px;}\n.lg-val{margin:2px 0 6px;}\n.lg-val .lg-num{font-size:40px;font-weight:800;line-height:1;}\n.lg-val .lg-unit{font-size:18px;opacity:.8;margin-left:4px;}\n.lg-gauge{position:relative;}\n.lg-track{position:absolute;border-radius:3px;}\n.lg-seg{position:absolute;}\n.lg-ptr{position:absolute;width:0;height:0;}\n.lg-tick{position:absolute;font-size:11px;font-weight:600;opacity:.85;white-space:nowrap;}\n/* horizontal */\n.lg-horizontal{padding:16px 0 20px;}\n.lg-horizontal .lg-track{left:0;right:0;top:16px;height:var(--lg-thick,18px);}\n.lg-horizontal .lg-seg{top:16px;height:var(--lg-thick,18px);}\n.lg-horizontal .lg-ptr-h{top:3px;border-left:7px solid transparent;border-right:7px solid transparent;border-top:10px solid var(--ui-text,#f2f4f8);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}\n.lg-horizontal .lg-tick-h{top:calc(16px + var(--lg-thick,18px) + 3px);transform:translateX(-50%);}\n/* vertical */\n.lg-vertical{padding:0 0 0 34px;height:100%;min-height:220px;}\n.lg-vertical .lg-track{left:34px;width:var(--lg-thick,18px);top:8px;bottom:8px;}\n.lg-vertical .lg-seg{left:34px;width:var(--lg-thick,18px);}\n.lg-vertical .lg-ptr-v{left:calc(34px + var(--lg-thick,18px) + 3px);border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:10px solid var(--ui-text,#f2f4f8);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}\n.lg-vertical .lg-tick-v{left:0;width:30px;text-align:right;transform:translateY(50%);}", "script": "function num(v,d){v=parseFloat(v);return isNaN(v)?d:v;}\nfunction parseZones(instance){let z=instance.zones;if(Array.isArray(z))return z;try{return JSON.parse(z||'[]');}catch(e){return [];}}\nfunction render(instance){\n    const el=(id)=>instance._getDomElement(id);\n    const g=el('gauge'); if(!g) return;\n    const min=num(instance.min,0), max=num(instance.max,100);\n    let value=num(instance.value,0); value=Math.max(min,Math.min(max,value));\n    const vertical=(instance.orientation==='vertical');\n    const zones=parseZones(instance).slice().sort((a,b)=>num(a.to,0)-num(b.to,0));\n    const track=instance.trackColor||'var(--ui-surface-2,#3a3f4b)';\n    const thick=num(instance.barThickness,18);\n    const dec=num(instance.decimals,1);\n    const pct=(v)=>(max>min)?((v-min)/(max-min))*100:0;\n    const barOnly=(instance.mode==='bar');\n    // head\n    const head=el('head');\n    if(head){ if(barOnly){head.style.display='none';} else {head.style.display='';head.innerHTML=(instance.title?('<div class=\"lg-title\">'+instance.title+'</div>'):'')+(instance.subtitle?('<div class=\"lg-sub\">'+instance.subtitle+'</div>'):'');} }\n    // value\n    const valEl=el('val');\n    if(valEl){ if(barOnly||instance.showValue===false||instance.showValue==='false'){valEl.style.display='none';} else {valEl.style.display='';valEl.innerHTML='<span class=\"lg-num\">'+value.toFixed(dec)+'</span><span class=\"lg-unit\">'+(instance.unit||'')+'</span>';} }\n    // ticks list\n    let ticks;\n    if(instance.ticks&&String(instance.ticks).trim()) ticks=String(instance.ticks).split(',').map(x=>num(x,null)).filter(x=>x!=null);\n    else { ticks=[min]; for(const z of zones) ticks.push(num(z.to,max)); ticks.push(max); ticks=[...new Set(ticks)].sort((a,b)=>a-b); }\n    // segments up to value\n    let prev=min, segs='';\n    const seg=(a,b,color)=>{const s=pct(a),sz=pct(b)-pct(a); if(sz<=0) return ''; return '<div class=\"lg-seg\" style=\"'+(vertical?('bottom:'+s+'%;height:'+sz+'%;'):('left:'+s+'%;width:'+sz+'%;'))+'background:'+(color||'#888')+';\"></div>';};\n    for(const z of zones){ const to=Math.min(num(z.to,max),value); if(to>prev) segs+=seg(prev,to,z.color); prev=num(z.to,max); if(prev>=value) break; }\n    if(value>prev&&zones.length) segs+=seg(prev,value,zones[zones.length-1].color);\n    const p=pct(value);\n    const pointer=(instance.showPointer===false||instance.showPointer==='false')?'':(vertical?('<div class=\"lg-ptr lg-ptr-v\" style=\"bottom:calc('+p+'% - 7px);\"></div>'):('<div class=\"lg-ptr lg-ptr-h\" style=\"left:calc('+p+'% - 7px);\"></div>'));\n    const ticksHtml=ticks.map(t=>{const tp=pct(t);return vertical?('<div class=\"lg-tick lg-tick-v\" style=\"bottom:calc('+tp+'% - 7px);\">'+t+'</div>'):('<div class=\"lg-tick lg-tick-h\" style=\"left:'+tp+'%;\">'+t+'</div>');}).join('');\n    g.className='lg-gauge '+(vertical?'lg-vertical':'lg-horizontal');\n    g.style.setProperty('--lg-thick',thick+'px');\n    g.innerHTML='<div class=\"lg-track\" style=\"background:'+track+';\"></div>'+segs+pointer+'<div class=\"lg-ticks\">'+ticksHtml+'</div>';\n}\nexport function init(instance){\n    try{instance._bindingsRefresh&&instance._bindingsRefresh();}catch(e){}\n    const props=['value','min','max','zones','ticks','orientation','mode','title','subtitle','unit','decimals','showValue','showPointer','trackColor','barThickness'];\n    for(const pr of props){ try{instance._assignEvent(pr+'-changed',()=>render(instance));}catch(e){} }\n    render(instance);\n}\nexport function connectedCallback(instance){ render(instance); }\n"}