iobroker.mywebui 1.83.0 → 1.84.0

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": "enum", "default": "horizontal", "values": ["horizontal", "vertical"]}, "mode": {"type": "enum", "default": "full", "values": ["full", "bar"]}, "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(8px + '+tp+'% - '+(tp*0.16).toFixed(2)+'px);\">'+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    const _d=x=>x.replace(/([A-Z])/g,'-$1').toLowerCase(); for(const pr of props){ try{const cb=()=>render(instance); instance._assignEvent(pr+'-changed',cb); const dd=_d(pr); if(dd!==pr) instance._assignEvent(dd+'-changed',cb);}catch(e){} }\n    render(instance);\n}\nexport function connectedCallback(instance){ render(instance); }\n"}
+{"properties": {"value": {"type": "number", "default": 42}, "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\"}]"}, "orientation": {"type": "enum", "default": "horizontal", "values": ["horizontal", "vertical"]}, "mode": {"type": "enum", "default": "full", "values": ["full", "bar"]}, "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\" bind-attr:data-orient=\"??orientation\" bind-attr:data-mode=\"??mode\"><div class=\"lg-title\" bind-content:text=\"??title\" bind-css:display=\"??title;__0?'':'none'\"></div><div class=\"lg-sub\" bind-content:text=\"??subtitle\" bind-css:display=\"??subtitle;__0?'':'none'\"></div><div class=\"lg-val\" bind-css:display=\"??showValue;??mode;(__0===false||__0==='false'||__1==='bar')?'none':''\"><span class=\"lg-num\" bind-content:text=\"??value;??decimals;Number(__0).toFixed(Number(__1))\"></span><span class=\"lg-unit\" bind-content:text=\"??unit\"></span></div><div class=\"lg-gauge\" bind-css:height=\"??barThickness;??orientation;__1==='vertical'?'':(Number(__0)+'px')\" bind-css:width=\"??barThickness;??orientation;__1==='vertical'?(Number(__0)+'px'):''\"><div class=\"lg-track\" bind-css:background-color=\"??trackColor;__0||'var(--ui-surface-2,#3a3f4b)'\"></div><div class=\"lg-scale\" bind-css:background-image=\"??zones;??min;??max;??orientation;return 'linear-gradient('+(__3==='vertical'?'to top':'to right')+String.fromCharCode(44)+(function(a){return a.map(function(z){return z.color+' '+(((a.indexOf(z)>0?Number(a[a.indexOf(z)-1].to):Number(__1))-Number(__1))/(Number(__2)-Number(__1))*100)+'% '+((Number(z.to)-Number(__1))/(Number(__2)-Number(__1))*100)+'%'}).join(String.fromCharCode(44))})(JSON.parse(__0||'[]'))+')'\"></div><div class=\"lg-mask\" bind-css:display=\"??mode;__0==='bar'?'':'none'\" bind-css:background-color=\"??trackColor;__0||'var(--ui-surface-2,#3a3f4b)'\" bind-css:left=\"??value;??min;??max;??orientation;__3==='vertical'?'':(((Number(__0)-Number(__1))/(Number(__2)-Number(__1))*100)+'%')\" bind-css:height=\"??value;??min;??max;??orientation;__3==='vertical'?((100-((Number(__0)-Number(__1))/(Number(__2)-Number(__1))*100))+'%'):''\"></div><div class=\"lg-ptr\" bind-css:display=\"??showPointer;??mode;(__0===false||__0==='false')?'none':(__1==='bar'?'none':'')\" bind-css:left=\"??value;??min;??max;??orientation;__3==='vertical'?'':(((Number(__0)-Number(__1))/(Number(__2)-Number(__1))*100)+'%')\" bind-css:bottom=\"??value;??min;??max;??orientation;__3==='vertical'?(((Number(__0)-Number(__1))/(Number(__2)-Number(__1))*100)+'%'):''\"></div><div class=\"lg-tick lg-tick-min\" bind-content:text=\"??min\"></div><div class=\"lg-tick lg-tick-max\" bind-content:text=\"??max\"></div></div></div>", "style": ":host{display:block;width:100%;height:100%;color:var(--ui-text,#e2e6ec);font-family:'Segoe UI',Roboto,sans-serif;box-sizing:border-box;}.lg-wrap{display:flex;flex-direction:column;padding:8px 12px;box-sizing:border-box;height:100%;}.lg-title{font-size:15px;font-weight:700;line-height:1.15;}.lg-sub{font-size:12px;opacity:.55;}.lg-val{margin:2px 0 4px;}.lg-val .lg-num{font-size:34px;font-weight:800;line-height:1;}.lg-val .lg-unit{font-size:16px;opacity:.8;margin-left:4px;}.lg-gauge{position:relative;box-sizing:border-box;flex-shrink:0;}.lg-track,.lg-scale,.lg-mask{position:absolute;inset:0;border-radius:5px;}.lg-scale{overflow:hidden;z-index:1;}.lg-mask{z-index:2;}.lg-ptr{position:absolute;width:0;height:0;z-index:3;}.lg-tick{position:absolute;font-size:11px;font-weight:600;opacity:.85;white-space:nowrap;}[data-orient=\"horizontal\"] .lg-gauge{height:18px;margin:16px 2px 22px;}[data-orient=\"horizontal\"] .lg-ptr{top:-13px;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid var(--ui-text,#f2f4f8);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}[data-orient=\"horizontal\"] .lg-tick{top:calc(100% + 4px);}[data-orient=\"horizontal\"] .lg-tick-min{left:0;}[data-orient=\"horizontal\"] .lg-tick-max{right:0;}[data-orient=\"horizontal\"] .lg-mask{left:auto;right:0;top:0;bottom:0;border-radius:0 5px 5px 0;}[data-orient=\"vertical\"] .lg-gauge{flex:1;width:18px;min-height:120px;margin:8px 8px 8px 42px;}[data-orient=\"vertical\"] .lg-ptr{left:calc(100% + 2px);transform:translateY(50%);border-top:7px solid transparent;border-bottom:7px solid transparent;border-right:12px solid var(--ui-text,#f2f4f8);filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));}[data-orient=\"vertical\"] .lg-tick{right:calc(100% + 8px);text-align:right;}[data-orient=\"vertical\"] .lg-tick-min{bottom:0;transform:translateY(50%);}[data-orient=\"vertical\"] .lg-tick-max{top:0;transform:translateY(-50%);}[data-orient=\"vertical\"] .lg-mask{left:0;right:0;top:0;bottom:auto;border-radius:5px 5px 0 0;}", "script": "export function init(instance){ try{ instance._bindingsRefresh && instance._bindingsRefresh(); }catch(e){} }\nexport function connectedCallback(instance){}"}