iobroker.mywebui 1.52.3 → 1.53.1

package/default-controls/controls/pipes/pipe_tee.control

@@ -1 +1 @@
-{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg id=\"tee_svg\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" enable-background=\"new 0 0 112.5 112.5\" xml:space=\"preserve\" style=\"display:block;\"></svg></div>", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    instance._assignEvent('tee-type-changed', (ev) => updateTee(ev.detail.newValue, instance));\n    updateTee(instance.teeType, instance);\n}\n\nfunction updateTee(teeType, instance) {\n   const svg = instance._getDomElement('tee_svg');\n   if (!svg) { console.error('Tee SVG not found'); return; }\n   teeType = teeType || instance.teeType || '1';\n   const tees = {\n      '1': '<g id=\"Group_Tee_H\"><linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"49.543\" y1=\"205.125\" x2=\"-8.457\" y2=\"205.125\" gradientTransform=\"matrix(0 1 -1 0 261.375 8.707)\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.16\" style=\"stop-color:#909091\"/><stop offset=\"0.49\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#646566\"/></linearGradient><rect y=\"0.25\" fill=\"url(#SVGID_1_)\" width=\"112.5\" height=\"58\"/></g><g id=\"Group_Tee_V\"><linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"27.25\" y1=\"69.8086\" x2=\"84.75\" y2=\"69.8086\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.18\" style=\"stop-color:#959595\"/><stop offset=\"0.5\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#666666\"/></linearGradient><polygon fill=\"url(#SVGID_2_)\" points=\"27.25,57.959 56.353,27.118 84.75,56.959 84.75,112.5 27.25,112.5\"/></g>',\n      '2': '<g id=\"Group_Tee_H\"><linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.2505\" y1=\"112.5\" x2=\"56.2505\" y2=\"56.2505\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.16\" style=\"stop-color:#909091\"/><stop offset=\"0.49\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#646566\"/></linearGradient><path fill=\"url(#SVGID_1_)\" d=\"M0,56.25v56.25h112.5V56.25H0z\"/></g><g id=\"Group_Tee_V\"><linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"28.125\" y1=\"42.4429\" x2=\"84.375\" y2=\"42.4429\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.18\" style=\"stop-color:#959595\"/><stop offset=\"0.5\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#666666\"/></linearGradient><polygon fill=\"url(#SVGID_2_)\" points=\"28.125,0 28.125,57.25 56.495,84.886 84.375,56.271 84.375,0\"/></g>',\n      '3': '<g id=\"Group_Tee_V\"><linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"56.25\" x2=\"56.25\" y2=\"56.25\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.18\" style=\"stop-color:#959595\"/><stop offset=\"0.5\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#666666\"/></linearGradient><polygon fill=\"url(#SVGID_1_)\" points=\"56.25,28.125 56.25,0 0,0 0,112.5 56.25,112.5 56.25,84.375\"/></g><g id=\"Group_Tee_H\"><linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"70.3379\" y1=\"84.375\" x2=\"70.3379\" y2=\"28.1255\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.16\" style=\"stop-color:#909091\"/><stop offset=\"0.49\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#646566\"/></linearGradient><polygon fill=\"url(#SVGID_2_)\" points=\"112.5,28.125 55.812,28.125 28.176,56.495 56.301,84.375 112.5,84.375\"/></g>',\n      '4': '<g id=\"Group_Tee_V\"><linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.25\" y1=\"56.25\" x2=\"112.5\" y2=\"56.25\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.18\" style=\"stop-color:#959595\"/><stop offset=\"0.5\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#666666\"/></linearGradient><polygon fill=\"url(#SVGID_1_)\" points=\"56.25,0 56.25,28.125 56.25,84.375 56.25,112.5 112.5,112.5 112.5,0\"/></g><g id=\"Group_Tee_H\"><linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"42.188\" y1=\"84.375\" x2=\"42.188\" y2=\"28.1255\"><stop offset=\"0.01\" style=\"stop-color:#646566\"/><stop offset=\"0.16\" style=\"stop-color:#909091\"/><stop offset=\"0.49\" style=\"stop-color:#E0E0E0\"/><stop offset=\"1\" style=\"stop-color:#646566\"/></linearGradient><polygon fill=\"url(#SVGID_2_)\" points=\"56.25,28.125 0,28.125 0,84.375 56.25,84.375 84.375,56.25\"/></g>'\n   };\n   svg.innerHTML = tees[teeType] || tees['1'];\n}", "properties": {"teeType": {"type": "enum", "default": "1", "values": ["1", "2", "3", "4"]}, "width": {"type": "number", "default": "112.5"}, "height": {"type": "number", "default": "112.5"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
+{"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><svg id=\"tee_svg\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 112.5 112.5\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"none\" xml:space=\"preserve\" style=\"display:block;\"></svg></div>", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    instance._assignEvent('tee-type-changed', (ev) => updateTee(ev.detail.newValue, instance));\n    instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n    const sz = ((parseFloat(instance.pipesize)||100) * 2);\n    instance.style.width = sz + 'px';\n    instance.style.height = sz + 'px';\n    updateTee(instance.teeType, instance);\n}\nfunction updatesize(value, instance){\n    const sz = ((parseFloat(value)||100) * 2);\n    instance.style.width = sz + 'px';\n    instance.style.height = sz + 'px';\n}\nfunction updateTee(teeType, instance){\n    const svg = instance._getDomElement('tee_svg');\n    if(!svg) return;\n    teeType = teeType || instance.teeType || '1';\n    const L = '<stop offset=\"0.01\" stop-color=\"#646566\"/><stop offset=\"0.16\" stop-color=\"#909091\"/><stop offset=\"0.49\" stop-color=\"#E0E0E0\"/><stop offset=\"1\" stop-color=\"#646566\"/>';\n    const defs = '<linearGradient id=\"tH\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"41.25\" x2=\"0\" y2=\"71.25\">'+L+'</linearGradient><linearGradient id=\"tV\" gradientUnits=\"userSpaceOnUse\" x1=\"41.25\" y1=\"0\" x2=\"71.25\" y2=\"0\">'+L+'</linearGradient>';\n    const barH = '<path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"url(#tH)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path>';\n    const barV = '<path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"url(#tV)\" stroke-width=\"30\" stroke-linecap=\"butt\"></path>';\n    const stubDown  = '<path d=\"M31.25,71.25 L41.25,79.25 L41.25,112.5 L71.25,112.5 L71.25,79.25 L81.25,71.25 Z\" fill=\"url(#tV)\"></path>';\n    const stubUp    = '<path d=\"M31.25,41.25 L41.25,33.25 L41.25,0 L71.25,0 L71.25,33.25 L81.25,41.25 Z\" fill=\"url(#tV)\"></path>';\n    const stubRight = '<path d=\"M71.25,31.25 L79.25,41.25 L112.5,41.25 L112.5,71.25 L79.25,71.25 L71.25,81.25 Z\" fill=\"url(#tH)\"></path>';\n    const stubLeft  = '<path d=\"M41.25,31.25 L33.25,41.25 L0,41.25 L0,71.25 L33.25,71.25 L41.25,81.25 Z\" fill=\"url(#tH)\"></path>';\n    const tees = { '1': defs+stubDown+barH, '2': defs+stubUp+barH, '3': defs+stubRight+barV, '4': defs+stubLeft+barV };\n    svg.innerHTML = tees[teeType] || tees['1'];\n}", "properties": {"teeType": {"type": "enum", "default": "1", "values": ["1", "2", "3", "4"]}, "pipesize": {"type": "number", "default": "100"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}