npm - iobroker.mywebui - Versions diffs - 1.50.1 → 1.51.0 - Mend

iobroker.mywebui 1.50.1 → 1.51.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (222) hide show

package/default-controls/controls/pipes/Short_Horizontal_Pipe.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<div class=\"responsive-container\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 112.5 29.297\" width=\"100%\" height=\"100%\" enable-background=\"new 0 0 112.5 112.5\" preserveAspectRatio=\"none\" xml:space=\"preserve\">\n <g id=\"Group_Horizonatal_Short\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"94.2881\" y1=\"-23.0383\" x2=\"123.9873\" y2=\"-23.0383\" gradientTransform=\"matrix(0 -1 1 0 79.2883 124.2117)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M112.5,29.924H0V0.224h112.5V29.924z\" style=\"position:absolute;left:-5px;top:-7px;\"></path>\n </g>\n <path id=\"flowingLiquid\" d=\"M0,15 H112.5\"></path>\n </svg>\n</div>\n","style":":host {\n width:100%;\n height:100%;\n\n}\n\n* {\n box-sizing: border-box;\n}\n\n\n.responsive-container {\n width: 100%;\n height: 100%;\n }\n\n@keyframes dashright {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashleft {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n.flowingLiquidright {\n fill: none;\n stroke: brown;\n /* Qəhvəyi rəng /\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n / Dash və boşluq dəyərləri /\n animation: dashright 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}\n\n.flowingLiquidleft {\n fill: none;\n stroke: brown;\n / Qəhvəyi rəng /\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n / Dash və boşluq dəyərləri /\n animation: dashleft 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}","script":"export function init(instance)\r\n{\r\n \r\n instance._bindingsRefresh();\r\n \r\n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\r\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\r\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\r\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\r\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\r\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\r\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\r\n //instance.style.width = instance.pipewidth+\"px\";\r\n /instance.style.height =instance.pipeheight+\"px\";/\r\n instance.style.height = instance.pipesize+\"px\";\r\n flowingliquid.style.strokeWidth =instance.strokewidth;\r\n flowingliquid.style.stroke = instance.strokecolor;\r\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\r\n checkflowdirection(instance);\r\n let sl = (!isNullOrUndefined(instance.signalleft)) ? window.IOB.subscribeState(instance.signalleft,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let sr = (!isNullOrUndefined(instance.signalright)) ? window.IOB.subscribeState(instance.signalright,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\r\n\r\n}\r\n\r\n\r\n\r\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \r\n\r\n}\r\n\r\nasync function checkflowdirection(instance)\r\n{ \r\n let signalleft = instance.signalleft;\r\n let checksignalleft =(!isNullOrUndefined(signalleft)) ? await window.IOB.getState(signalleft) : {'val':false};\r\n let conditionleft = instance.conditionleft;\r\n let conditionleftvalue = instance.conditionleftvalue;\r\n let left = (!isNullOrUndefined(instance.left)) ? instance.left : false;\r\n\r\n let signalright = instance.signalright;\r\n let checksignalright =(!isNullOrUndefined(signalright)) ? await window.IOB.getState(signalright) : {'val':false};\r\n let conditionright = instance.conditionright;\r\n let conditionrightvalue = instance.conditionrightvalue;\r\n let right = (!isNullOrUndefined(instance.right)) ? instance.right : false;\r\n \r\n let x = (instance.left==true) ? selectCase(checksignalleft.val, conditionleft, conditionleftvalue) : false;\r\n let y = (instance.right==true) ? selectCase(checksignalright.val, conditionright, conditionrightvalue) : false;\r\n if (x == true \|\| y == true) {\r\n if (x == true) {\r\n checkleft(left,instance);\r\n }\r\n if (y == true) {\r\n checkright(right,instance);\r\n }\r\n }\r\n else {\r\n nothing(instance);\r\n }\r\n \r\n}\r\n\r\nfunction handleStateChange(id, state,instance) {\r\n checkflowdirection(instance);\r\n}\r\n\r\nfunction updatewidth(value,instance){\r\n instance.style.width=value+\"px\";\r\n}\r\n\r\nfunction updateheight(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatesize(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatestrokeWidth(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeWidth = value;\r\n \r\n}\r\n\r\nfunction updatestrokecolor(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.stroke = value;\r\n \r\n}\r\n\r\nfunction updatestrokedasharray(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeDasharray = value;\r\n \r\n}\r\n\r\nfunction updateanimationspeed(id, state,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration = state.val+'s';\r\n}\r\n\r\nfunction selectCase(value, condition, conditionvalue) {\r\n var flag1;\r\n switch (condition) {\r\n case 'exist':\r\n flag1 = value.includes(conditionvalue);\r\n break;\r\n\r\n case 'equal':\r\n let vl = Number(value);\r\n let convl = Number(Boolean(conditionvalue)) ;\r\n if (vl == convl) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'is not equal':\r\n let vl1 = Number(value);\r\n let convl1 = Number(Boolean(conditionvalue)) ;\r\n if (vl1 != convl1) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than':\r\n if (parseInt(value) < parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than or equal':\r\n if (parseInt(value) <= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than':\r\n if (parseInt(value) > parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than or equal':\r\n if (parseInt(value) >= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n }\r\n return flag1;\r\n}\r\n\r\nfunction isNullOrUndefined(value) {\r\n return value === undefined \|\| value === null \|\| value ===\"\";\r\n}\r\n\r\nfunction nothing(instance) {\r\n //if(data==true)\r\n //{\r\n /var svg = instance.shadowRoot.querySelector(\"svg\");\r\n var line = $(svg).find(\"line\");*/\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", '');\r\n path.setAttribute(\"visibility\", 'hidden');\r\n //$(line).css('display', 'none');\r\n // }\r\n }\r\n\r\n function checkleft(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidleft');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n }\r\n\r\nfunction checkright(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidright');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n} \r\n","properties":{"pipesize":{"type":"number","default":"100"},"strokewidth":{"type":"number","default":"5"},"strokecolor":{"type":"color","default":"brown"},"strokedasharray":{"type":"string","default":"0,10,0"},"left":{"type":"boolean"},"signalleft":{"type":"signal"},"conditionleft":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditionleftvalue":{"type":"string"},"right":{"type":"boolean"},"signalright":{"type":"signal"},"conditionright":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditionrightvalue":{"type":"string"},"animationspeed":{"type":"signal"}},"settings":{"width":"","height":"","visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><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;\"><g id=\"Group_Horizonatal_Short\"><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 H112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n width:100%;\n height:100%;\n\n}\n\n* {\n box-sizing: border-box;\n}\n\n\n.responsive-container {\n width: 100%;\n height: 100%;\n }\n\n@keyframes dashright {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashleft {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n.flowingLiquidright {\n fill: none;\n stroke: brown;\n /* Qəhvəyi rəng /\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n / Dash və boşluq dəyərləri /\n animation: dashright 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}\n\n.flowingLiquidleft {\n fill: none;\n stroke: brown;\n / Qəhvəyi rəng /\n stroke-width: 10;\n stroke-dasharray: 10, 10;\n / Dash və boşluq dəyərləri /\n animation: dashleft 3s linear infinite;\n vector-effect: non-scaling-stroke;\n}", "script": "export function init(instance)\r\n{\r\n \r\n instance._bindingsRefresh();\r\n \r\n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\r\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\r\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\r\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\r\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\r\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\r\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\r\n //instance.style.width = instance.pipewidth+\"px\";\r\n /instance.style.height =instance.pipeheight+\"px\";/\r\n instance.style.height = instance.pipesize+\"px\";\r\n flowingliquid.style.strokeWidth =instance.strokewidth;\r\n flowingliquid.style.stroke = instance.strokecolor;\r\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\r\n checkflowdirection(instance);\r\n let sl = (!isNullOrUndefined(instance.signalleft)) ? window.IOB.subscribeState(instance.signalleft,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let sr = (!isNullOrUndefined(instance.signalright)) ? window.IOB.subscribeState(instance.signalright,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\r\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\r\n\r\n}\r\n\r\n\r\n\r\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \r\n\r\n}\r\n\r\nasync function checkflowdirection(instance)\r\n{ \r\n let signalleft = instance.signalleft;\r\n let checksignalleft =(!isNullOrUndefined(signalleft)) ? await window.IOB.getState(signalleft) : {'val':false};\r\n let conditionleft = instance.conditionleft;\r\n let conditionleftvalue = instance.conditionleftvalue;\r\n let left = (!isNullOrUndefined(instance.left)) ? instance.left : false;\r\n\r\n let signalright = instance.signalright;\r\n let checksignalright =(!isNullOrUndefined(signalright)) ? await window.IOB.getState(signalright) : {'val':false};\r\n let conditionright = instance.conditionright;\r\n let conditionrightvalue = instance.conditionrightvalue;\r\n let right = (!isNullOrUndefined(instance.right)) ? instance.right : false;\r\n \r\n let x = (instance.left==true) ? selectCase(checksignalleft.val, conditionleft, conditionleftvalue) : false;\r\n let y = (instance.right==true) ? selectCase(checksignalright.val, conditionright, conditionrightvalue) : false;\r\n if (x == true \|\| y == true) {\r\n if (x == true) {\r\n checkleft(left,instance);\r\n }\r\n if (y == true) {\r\n checkright(right,instance);\r\n }\r\n }\r\n else {\r\n nothing(instance);\r\n }\r\n \r\n}\r\n\r\nfunction handleStateChange(id, state,instance) {\r\n checkflowdirection(instance);\r\n}\r\n\r\nfunction updatewidth(value,instance){\r\n instance.style.width=value+\"px\";\r\n}\r\n\r\nfunction updateheight(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatesize(value,instance){\r\n instance.style.height=value+\"px\";\r\n}\r\n\r\nfunction updatestrokeWidth(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeWidth = value;\r\n \r\n}\r\n\r\nfunction updatestrokecolor(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.stroke = value;\r\n \r\n}\r\n\r\nfunction updatestrokedasharray(value,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.strokeDasharray = value;\r\n \r\n}\r\n\r\nfunction updateanimationspeed(id, state,instance)\r\n{\r\n let flowingliquid = instance._getDomElement('flowingLiquid');\r\n flowingliquid.style.animationDuration = state.val+'s';\r\n}\r\n\r\nfunction selectCase(value, condition, conditionvalue) {\r\n var flag1;\r\n switch (condition) {\r\n case 'exist':\r\n flag1 = value.includes(conditionvalue);\r\n break;\r\n\r\n case 'equal':\r\n let vl = Number(value);\r\n let convl = Number(Boolean(conditionvalue)) ;\r\n if (vl == convl) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'is not equal':\r\n let vl1 = Number(value);\r\n let convl1 = Number(Boolean(conditionvalue)) ;\r\n if (vl1 != convl1) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than':\r\n if (parseInt(value) < parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'less-than or equal':\r\n if (parseInt(value) <= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than':\r\n if (parseInt(value) > parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n\r\n case 'greater-than or equal':\r\n if (parseInt(value) >= parseInt(conditionvalue)) {\r\n return flag1 = true;\r\n }\r\n else\r\n {\r\n return flag1 = false;\r\n }\r\n break;\r\n }\r\n return flag1;\r\n}\r\n\r\nfunction isNullOrUndefined(value) {\r\n return value === undefined \|\| value === null \|\| value ===\"\";\r\n}\r\n\r\nfunction nothing(instance) {\r\n //if(data==true)\r\n //{\r\n /var svg = instance.shadowRoot.querySelector(\"svg\");\r\n var line = $(svg).find(\"line\");*/\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", '');\r\n path.setAttribute(\"visibility\", 'hidden');\r\n //$(line).css('display', 'none');\r\n // }\r\n }\r\n\r\n function checkleft(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidleft');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n }\r\n\r\nfunction checkright(data,instance) {\r\n if (data == true) {\r\n let path = instance._getDomElement('flowingLiquid');\r\n path.setAttribute(\"class\", 'flowingLiquidright');\r\n path.setAttribute(\"visibility\", 'visible');\r\n }\r\n} \r\n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "0,10,0"}, "left": {"type": "boolean"}, "signalleft": {"type": "signal"}, "conditionleft": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionleftvalue": {"type": "string"}, "right": {"type": "boolean"}, "signalright": {"type": "signal"}, "conditionright": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionrightvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"width": "", "height": "", "visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

package/default-controls/controls/pipes/Short_Vertical_Pipe.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<!--<div class=\"responsive-container\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"0 0 29.7 112.5\" enable-background=\"new 0 0 29.7 112.5\" preserveAspectRatio=\"none\" xml:space=\"preserve\">\n <g id=\"Group_Vertical_Short\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"56.25\" x2=\"29.6997\" y2=\"56.25\">\n <stop offset=\"0.01\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.18\" style=\"stop-color:#959595;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#666666;\"></stop>\n </linearGradient>\n <path transform=\"translate(0 100%)\" fill=\"url(#SVGID_1_)\" d=\"M0,112.5V0h29.7v112.5H0z\"></path>\n </g>\n </svg>\n</div>!-->\n<div class=\"responsive-container\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"0 0 29.7 112.5\" enable-background=\"new 0 0 29.7 112.5\" preserveAspectRatio=\"none\" xml:space=\"preserve\">\n <g id=\"Group_Vertical_Short\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"56.25\" x2=\"29.6997\" y2=\"56.25\">\n <stop offset=\"0.01\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.18\" style=\"stop-color:#959595;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#666666;\"></stop>\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M0,112.5V0h29.7v112.5H0z\"></path>\n </g>\n <path id=\"flowingLiquid\" d=\"M14.85,0 V112.5\"></path>\n </svg>\n</div>\n","style":":host {\n height: 100%;\n width: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}","script":"export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n /instance.style.height =instance.pipeheight+\"px\";/\n instance.style.width = instance.pipesize+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n","properties":{"pipesize":{"type":"number","default":"100"},"strokewidth":{"type":"number","default":"5"},"strokecolor":{"type":"color","default":"brown"},"strokedasharray":{"type":"string","default":"0,10,0"},"up":{"type":"boolean"},"signalup":{"type":"signal"},"conditionup":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditionupvalue":{"type":"string"},"down":{"type":"boolean"},"signaldown":{"type":"signal"},"conditiondown":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditiondownvalue":{"type":"string"},"animationspeed":{"type":"signal"}},"settings":{"width":"100%","height":"100%","visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><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;\"><g id=\"Group_Vertical_Short\"><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 V112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 V112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 100%;\n width: 100%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n /instance.style.height =instance.pipeheight+\"px\";/\n instance.style.width = instance.pipesize+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "0,10,0"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"width": "100%", "height": "100%", "visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

package/default-controls/controls/pipes/pipe_90deg_curve1.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<div class=\"responsive-container\" style=\"width:100%;max-width:112.5px;aspect-ratio:1/1;position:relative;\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"0 0 112.5 112.5\" enable-background=\"new 0 0 112.5 112.5\" xml:space=\"preserve\" style=\"display:block;width:100%;height:100%;\">\n <g id=\"Group_90_curve_1\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"36.1162\" y1=\"90.2363\" x2=\"96.6025\" y2=\"90.2363\" gradientTransform=\"matrix(-1 0 0 1 96.6025 -25.2188)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.18\" style=\"stop-color:#959595;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#666666;\"></stop>\n </linearGradient>\n <rect y=\"62.271\" fill=\"url(#SVGID_1_)\" width=\"60.486\" height=\"5.491\"></rect>\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"25.0601\" y1=\"25.2188\" x2=\"25.0601\" y2=\"80.4263\" gradientTransform=\"matrix(-1 0 0 1 96.6025 -25.2188)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <rect x=\"69.408\" fill=\"url(#SVGID_2_)\" width=\"4.269\" height=\"55.207\"></rect>\n <radialGradient id=\"SVGID_3_\" cx=\"140.0811\" cy=\"319.2207\" r=\"23.7788\" gradientTransform=\"matrix(-2.9866 0.2001 0.2179 2.719 416.3635 -834.6254)\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" style=\"stop-color:#595959;\"></stop>\n <stop offset=\"0.1\" style=\"stop-color:#666767;\"></stop>\n <stop offset=\"0.22\" style=\"stop-color:#888888;\"></stop>\n <stop offset=\"0.4\" style=\"stop-color:#BEBEBE;\"></stop>\n <stop offset=\"0.53\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.64\" style=\"stop-color:#C3C3C3;\"></stop>\n <stop offset=\"0.89\" style=\"stop-color:#787878;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#545454;\"></stop>\n </radialGradient>\n <path fill=\"url(#SVGID_3_)\" d=\"M71.319,0C36.547,0,0,21.826,0,65.055l60.45,0.162c1.263-7.605,4.71-9.44,10.676-9.932 C71.827,40.793,71.319,0,71.319,0z\"></path>\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"36.1162\" y1=\"113.1973\" x2=\"96.6025\" y2=\"113.1973\" gradientTransform=\"matrix(-1 0 0 1 96.6025 -25.2188)\">\n <stop offset=\"0.01\" style=\"stop-color:#676868;\"></stop>\n <stop offset=\"0.18\" style=\"stop-color:#939394;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.74\" style=\"stop-color:#A9AAAA;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#656667;\"></stop>\n </linearGradient>\n <rect y=\"63.209\" fill=\"url(#SVGID_4_)\" width=\"60.486\" height=\"49.54\"></rect>\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"4.8184\" y1=\"25.2749\" x2=\"4.8184\" y2=\"80.4819\" gradientTransform=\"matrix(-1 0 0 1 96.6025 -25.2188)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.75\" style=\"stop-color:#A3A4A4;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <rect x=\"70.908\" y=\"0.056\" fill=\"url(#SVGID_5_)\" width=\"41.752\" height=\"55.207\"></rect>\n<!-- Eğri boyunca ortada olan axan maye animasiyası --> <path id=\"flowingLiquid\" d=\"M30.03178,112.49936 L30.15063,57.438508 C30.002762,55.532183 34.574834,45.582497 41.956652,37.649311 C46.803615,32.440316 56.313718,27.112346 63.162076,26.813443 L113.93008,26.69427\" class=\"flow\"></path>\n </g>\n </svg>\n</div>\n","style":":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 20%; height: 20%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}","script":"export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n","properties":{"pipesize":{"type":"number","default":"100"},"strokewidth":{"type":"number","default":"5"},"strokecolor":{"type":"color","default":"brown"},"strokedasharray":{"type":"string","default":"10, 10"},"up":{"type":"boolean"},"signalup":{"type":"signal"},"conditionup":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditionupvalue":{"type":"string"},"down":{"type":"boolean"},"signaldown":{"type":"signal"},"conditiondown":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditiondownvalue":{"type":"string"},"animationspeed":{"type":"signal"}},"settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><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;\"><g id=\"Group_curve\"><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 A56.25,56.25 0 0 1 0,56.25\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 20%; height: 20%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

package/default-controls/controls/pipes/pipe_90deg_curve2.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<div class=\"responsive-container\" style=\"width:100%;max-width:112.5px;aspect-ratio:1/1;position:relative;\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"0 0 112.5 112.5\" enable-background=\"new 0 0 112.5 112.5\" xml:space=\"preserve\" style=\"display:block;width:100%;height:100%;\">\n <g id=\"Group_90_curve_2\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"266.2324\" y1=\"37.9233\" x2=\"321.6895\" y2=\"37.9233\" gradientTransform=\"matrix(1 0 0 1 -208.7109 27.2813)\">\n <stop offset=\"0.01\" id=\"stop6\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.18\" id=\"stop8\" style=\"stop-color:#959595;\"></stop>\n <stop offset=\"0.5\" id=\"stop10\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" id=\"stop12\" style=\"stop-color:#666666;\"></stop>\n </linearGradient>\n <path d=\"m 57.521,62.465 55.457,0 0,5.479 -55.457,0 z\" id=\"rect14\" style=\"fill:url(#SVGID_1_);\"></path>\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"256.0947\" y1=\"-26.9634\" x2=\"256.0947\" y2=\"28.1353\" gradientTransform=\"matrix(1 0 0 1 -208.7109 27.2813)\">\n <stop offset=\"0.01\" id=\"stop17\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" id=\"stop19\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" id=\"stop21\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" id=\"stop23\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <path d=\"m 45.426998,0.31799999 3.914,0 0,55.09899901 -3.914,0 z\" id=\"rect25\" style=\"fill:url(#SVGID_2_);\"></path>\n <radialGradient id=\"SVGID_3_\" cx=\"215.2344\" cy=\"292.1357\" r=\"21.5211\" gradientTransform=\"matrix(3.0257 0.2207 -0.2208 2.9984 -535.747 -861.8795)\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" id=\"stop28\" style=\"stop-color:#595959;\"></stop>\n <stop offset=\"0.1\" id=\"stop30\" style=\"stop-color:#666666;\"></stop>\n <stop offset=\"0.22\" id=\"stop32\" style=\"stop-color:#888888;\"></stop>\n <stop offset=\"0.4\" id=\"stop34\" style=\"stop-color:#BEBEBE;\"></stop>\n <stop offset=\"0.52\" id=\"stop36\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.64\" id=\"stop38\" style=\"stop-color:#C3C3C3;\"></stop>\n <stop offset=\"0.89\" id=\"stop40\" style=\"stop-color:#787878;\"></stop>\n <stop offset=\"1\" id=\"stop42\" style=\"stop-color:#545454;\"></stop>\n </radialGradient>\n <path d=\"M47.537,0.318c31.881,0,65.391,21.782,65.391,64.923l-55.424,0.164 c-1.161-7.592-4.318-9.422-9.79-9.912C47.069,41.03,47.537,0.318,47.537,0.318z\" id=\"path44\" fill=\"url(#SVGID_3_)\"></path>\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"266.2324\" y1=\"62.1826\" x2=\"321.6895\" y2=\"62.1826\" gradientTransform=\"matrix(1 0 0 1 -208.7109 27.2813)\">\n <stop offset=\"0\" id=\"stop47\" style=\"stop-color:#666666;\"></stop>\n <stop offset=\"0.5\" id=\"stop49\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.82\" id=\"stop51\" style=\"stop-color:#959595;\"></stop>\n <stop offset=\"0.99\" id=\"stop53\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <path d=\"m 57.521,66.158997 55.457,0 0,46.609003 -55.457,0 z\" id=\"rect55\" style=\"fill:url(#SVGID_4_);\"></path>\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"232.834\" y1=\"28.186\" x2=\"232.834\" y2=\"-26.9082\" gradientTransform=\"matrix(1 0 0 1 -208.7109 27.2813)\">\n <stop offset=\"0\" id=\"stop58\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.51\" id=\"stop60\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.84\" id=\"stop62\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.99\" id=\"stop64\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <path d=\"m 0.28299999,0.373 47.68100001,0 0,55.094002 -47.68100001,0 z\" id=\"rect66\" style=\"fill:url(#SVGID_5_);\"></path>\n </g>\n<!-- Flowing liquid path with dash animation --> <path id=\"flowingLiquid\" d=\"M 0.48201868,29.376622 C 31.702105,29.090226 59.768416,26.614403 74.472467,40.020089 c 10.358685,9.444015 11.836613,17.482683 11.81154,33.883481 -0.0031,2.064215 0.09943,3.801831 0.122979,12.319862 0.009,3.282058 0.0065,7.565915 0.0078,11.73337 0.0021,6.674888 0.01396,13.051148 0.09948,14.534278\"></path>\n </svg>\n</div>\n","style":":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}","script":"export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n","properties":{"pipesize":{"type":"number","default":"100"},"strokewidth":{"type":"number","default":"5"},"strokecolor":{"type":"color","default":"brown"},"strokedasharray":{"type":"string","default":"10, 10"},"up":{"type":"boolean"},"signalup":{"type":"signal"},"conditionup":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditionupvalue":{"type":"string"},"down":{"type":"boolean"},"signaldown":{"type":"signal"},"conditiondown":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditiondownvalue":{"type":"string"},"animationspeed":{"type":"signal"}},"settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><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;\"><g id=\"Group_curve\"><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M56.25,0 A56.25,56.25 0 0 0 112.5,56.25\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

package/default-controls/controls/pipes/pipe_90deg_curve3.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<div class=\"responsive-container\" style=\"width:100%;max-width:112.5px;aspect-ratio:1/1;position:relative;\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"0 0 112.5 112.5\" enable-background=\"new 0 0 112.5 112.5\" xml:space=\"preserve\" style=\"display:block;width:100%;height:100%;\">\n <g id=\"Group_90_curve_3\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"50.1162\" y1=\"90.2344\" x2=\"110.6025\" y2=\"90.2344\" gradientTransform=\"matrix(-1 0 0 -1 110.6025 137.9668)\">\n <stop offset=\"0.01\" id=\"stop6\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.18\" id=\"stop8\" style=\"stop-color:#959595;\"></stop>\n <stop offset=\"0.5\" id=\"stop10\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" id=\"stop12\" style=\"stop-color:#666666;\"></stop>\n </linearGradient>\n <rect y=\"44.986\" width=\"60.486\" height=\"5.491\" id=\"rect14\" fill=\"url(#SVGID_1_)\"></rect>\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"39.0601\" y1=\"25.2188\" x2=\"39.0601\" y2=\"80.4253\" gradientTransform=\"matrix(-1 0 0 -1 110.6025 137.9668)\">\n <stop offset=\"0.01\" id=\"stop17\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" id=\"stop19\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" id=\"stop21\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" id=\"stop23\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <rect x=\"69.408\" y=\"57.542\" width=\"4.269\" height=\"55.207\" id=\"rect25\" fill=\"url(#SVGID_2_)\"></rect>\n <radialGradient id=\"SVGID_3_\" cx=\"144.7432\" cy=\"318.877\" r=\"23.7788\" gradientTransform=\"matrix(-2.9866 -0.2001 0.2179 -2.719 430.3635 947.3754)\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" id=\"stop28\" style=\"stop-color:#595959;\"></stop>\n <stop offset=\"0.1\" id=\"stop30\" style=\"stop-color:#666767;\"></stop>\n <stop offset=\"0.22\" id=\"stop32\" style=\"stop-color:#888989;\"></stop>\n <stop offset=\"0.4\" id=\"stop34\" style=\"stop-color:#BEBEBE;\"></stop>\n <stop offset=\"0.53\" id=\"stop36\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.64\" id=\"stop38\" style=\"stop-color:#C3C3C3;\"></stop>\n <stop offset=\"0.89\" id=\"stop40\" style=\"stop-color:#787878;\"></stop>\n <stop offset=\"1\" id=\"stop42\" style=\"stop-color:#545454;\"></stop>\n </radialGradient>\n <path d=\"M71.319,112.749C36.548,112.749,0,90.923,0,47.694l60.45-0.162c1.263,7.605,4.71,9.44,10.676,9.932 C71.827,71.956,71.319,112.749,71.319,112.749z\" id=\"path44\" fill=\"url(#SVGID_3_)\"></path>\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"50.1162\" y1=\"113.1973\" x2=\"110.6025\" y2=\"113.1973\" gradientTransform=\"matrix(-1 0 0 -1 110.6025 137.9668)\">\n <stop offset=\"0.01\" id=\"stop47\" style=\"stop-color:#676868;\"></stop>\n <stop offset=\"0.18\" id=\"stop49\" style=\"stop-color:#939394;\"></stop>\n <stop offset=\"0.5\" id=\"stop51\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.74\" id=\"stop53\" style=\"stop-color:#A9AAAA;\"></stop>\n <stop offset=\"1\" id=\"stop55\" style=\"stop-color:#656667;\"></stop>\n </linearGradient>\n <rect width=\"60.486\" height=\"49.54\" id=\"rect57\" fill=\"url(#SVGID_4_)\"></rect>\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"18.8184\" y1=\"25.2754\" x2=\"18.8184\" y2=\"80.4819\" gradientTransform=\"matrix(-1 0 0 -1 110.6025 137.9668)\">\n <stop offset=\"0.01\" id=\"stop60\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" id=\"stop62\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" id=\"stop64\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.75\" id=\"stop66\" style=\"stop-color:#A3A4A4;\"></stop>\n <stop offset=\"1\" id=\"stop68\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <rect x=\"70.908\" y=\"57.485\" width=\"41.752\" height=\"55.207\" id=\"rect70\" fill=\"url(#SVGID_5_)\"></rect>\n </g>\n<!-- Flowing liquid path with dash animation --> <path id=\"flowingLiquid\" d=\"M 113.79027,85.615119 C 83.262371,85.908056 55.81833,88.440393 41.440282,74.728697 31.311267,65.069103 29.866105,56.846936 29.890619,40.071755 c 0.003,-2.111335 -0.09719,-3.888615 -0.120244,-12.60109 -0.0088,-3.356975 -0.0069,-7.738621 -0.0078,-12.001206 -0.0019,-6.8272571 -0.0136,-13.3490695 -0.09729,-14.86605397\" style=\"fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1.71001875px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;\"></path>\n </svg>\n</div>\n","style":":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}","script":"export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n","properties":{"pipesize":{"type":"number","default":"100"},"strokewidth":{"type":"number","default":"5"},"strokecolor":{"type":"color","default":"brown"},"strokedasharray":{"type":"string","default":"10, 10"},"up":{"type":"boolean"},"signalup":{"type":"signal"},"conditionup":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditionupvalue":{"type":"string"},"down":{"type":"boolean"},"signaldown":{"type":"signal"},"conditiondown":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditiondownvalue":{"type":"string"},"animationspeed":{"type":"signal"}},"settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><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;\"><g id=\"Group_curve\"><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 A56.25,56.25 0 0 1 56.25,112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

package/default-controls/controls/pipes/pipe_90deg_curve4.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<div class=\"responsive-container\" style=\"width:100%;max-width:112.5px;aspect-ratio:1/1;position:relative;\">\n <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"100%\" height=\"100%\" viewBox=\"0 0 112.5 112.5\" enable-background=\"new 0 0 112.5 112.5\" xml:space=\"preserve\" style=\"display:block;width:100%;height:100%;\">\n <g id=\"Group_90_Deg_Bend_Pipe\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"50.1162\" y1=\"90.2344\" x2=\"110.6025\" y2=\"90.2344\" gradientTransform=\"matrix(1 0 0 -1 2.0576 137.9668)\">\n <stop offset=\"0.01\" id=\"stop5\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.18\" id=\"stop7\" style=\"stop-color:#959595;\"></stop>\n <stop offset=\"0.5\" id=\"stop9\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" id=\"stop11\" style=\"stop-color:#666666;\"></stop>\n </linearGradient>\n <rect x=\"52.174\" y=\"44.986\" fill=\"url(#SVGID_1_)\" width=\"60.486\" height=\"5.491\" id=\"rect13\"></rect>\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"39.0601\" y1=\"25.2178\" x2=\"39.0601\" y2=\"80.4253\" gradientTransform=\"matrix(1 0 0 -1 2.0576 137.9668)\">\n <stop offset=\"0.01\" id=\"stop16\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" id=\"stop18\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" id=\"stop20\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"1\" id=\"stop22\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <rect x=\"38.983\" y=\"57.542\" fill=\"url(#SVGID_2_)\" width=\"4.269\" height=\"55.207\" id=\"rect24\"></rect>\n <radialGradient id=\"SVGID_3_\" cx=\"144.7432\" cy=\"318.8779\" r=\"23.7788\" gradientTransform=\"matrix(2.9866 -0.2001 -0.2179 -2.719 -317.7034 947.3754)\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" id=\"stop27\" style=\"stop-color:#595959;\"></stop>\n <stop offset=\"0.1\" id=\"stop29\" style=\"stop-color:#666767;\"></stop>\n <stop offset=\"0.22\" id=\"stop31\" style=\"stop-color:#888989;\"></stop>\n <stop offset=\"0.4\" id=\"stop33\" style=\"stop-color:#BEBEBE;\"></stop>\n <stop offset=\"0.53\" id=\"stop35\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.64\" id=\"stop37\" style=\"stop-color:#C3C3C3;\"></stop>\n <stop offset=\"0.89\" id=\"stop39\" style=\"stop-color:#787878;\"></stop>\n <stop offset=\"1\" id=\"stop41\" style=\"stop-color:#545454;\"></stop>\n </radialGradient>\n <path fill=\"url(#SVGID_3_)\" d=\"M41.341,112.749c34.771,0,71.319-21.826,71.319-65.055l-60.45-0.162 c-1.263,7.605-4.71,9.44-10.676,9.932C40.833,71.956,41.341,112.749,41.341,112.749z\" id=\"path43\"></path>\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"50.1162\" y1=\"113.1973\" x2=\"110.6025\" y2=\"113.1973\" gradientTransform=\"matrix(1 0 0 -1 2.0576 137.9668)\">\n <stop offset=\"0.01\" id=\"stop46\" style=\"stop-color:#676868;\"></stop>\n <stop offset=\"0.18\" id=\"stop48\" style=\"stop-color:#939394;\"></stop>\n <stop offset=\"0.5\" id=\"stop50\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.74\" id=\"stop52\" style=\"stop-color:#A9AAAA;\"></stop>\n <stop offset=\"1\" id=\"stop54\" style=\"stop-color:#656667;\"></stop>\n </linearGradient>\n <rect x=\"52.174\" fill=\"url(#SVGID_4_)\" width=\"60.486\" height=\"49.54\" id=\"rect56\"></rect>\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"18.8184\" y1=\"25.2744\" x2=\"18.8184\" y2=\"80.4819\" gradientTransform=\"matrix(1 0 0 -1 2.0576 137.9668)\">\n <stop offset=\"0.01\" id=\"stop59\" style=\"stop-color:#646566;\"></stop>\n <stop offset=\"0.16\" id=\"stop61\" style=\"stop-color:#909091;\"></stop>\n <stop offset=\"0.49\" id=\"stop63\" style=\"stop-color:#E0E0E0;\"></stop>\n <stop offset=\"0.75\" id=\"stop65\" style=\"stop-color:#A3A4A4;\"></stop>\n <stop offset=\"1\" id=\"stop67\" style=\"stop-color:#646566;\"></stop>\n </linearGradient>\n <rect y=\"57.485\" fill=\"url(#SVGID_5_)\" width=\"41.752\" height=\"55.207\" id=\"rect69\"></rect>\n </g>\n<!-- Flowing liquid path with dash animation --> <path id=\"flowingLiquid\" d=\"m 84.93152,0.197066 c 0.29294,30.527903 2.825275,57.971944 -10.886421,72.349993 -9.659595,10.129015 -17.881763,11.574177 -34.656944,11.549667 -2.111335,-0.003 -3.888613,0.0972 -12.601089,0.12024 -3.356974,0.009 -7.738621,0.007 -12.001206,0.008 -6.8272566,0.002 -13.3490696,0.0136 -14.86605466,0.0973\"></path>\n </svg>\n</div>\n","style":":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}","script":"export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n","properties":{"pipesize":{"type":"number","default":"100"},"strokewidth":{"type":"number","default":"5"},"strokecolor":{"type":"color","default":"brown"},"strokedasharray":{"type":"string","default":"10, 10"},"up":{"type":"boolean"},"signalup":{"type":"signal"},"conditionup":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditionupvalue":{"type":"string"},"down":{"type":"boolean"},"signaldown":{"type":"signal"},"conditiondown":{"type":"enum","values":["exist","equal","is not equal","less-than","less-than or equal","greater-than","greater-than or equal"]},"conditiondownvalue":{"type":"string"},"animationspeed":{"type":"signal"}},"settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><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;\"><g id=\"Group_curve\"><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M112.5,56.25 A56.25,56.25 0 0 0 56.25,112.5\" fill=\"none\"></path></svg></div>", "style": ":host {\n height: 20%;\n width: 20%;\n}\n\n* {\n box-sizing: border-box;\n}\n\n//.responsive-container { width: 100%; height: 100%;} \n//.responsive-container svg {width: 100%; height: 100%;}\n\n@keyframes dashdown {\n to {\n stroke-dashoffset: -200;\n }\n}\n\n@keyframes dashup {\n to {\n stroke-dashoffset: 200;\n }\n}\n\n\n.flowingLiquiddown {\n fill: none;\n stroke: brown; /* Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashdown 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}\n\n.flowingLiquidup {\n fill: none;\n stroke: brown; / Color of the liquid /\n stroke-width: 10;\n stroke-dasharray: 10, 10; / Dash and gap values /\n animation: dashup 3s linear infinite;\n vector-effect: non-scaling-stroke; / Keeps stroke widths from scaling /\n}", "script": "export function init(instance)\n{\n \n instance._bindingsRefresh();\n \n //instance._assignEvent('pipewidth-changed', (ev) => updatewidth(ev.detail.newValue, instance));\n //instance._assignEvent('pipeheight-changed', (ev) => updateheight(ev.detail.newValue, instance));\n instance._assignEvent('pipesize-changed', (ev) => updatesize(ev.detail.newValue, instance));\n instance._assignEvent('strokewidth-changed', (ev) => updatestrokeWidth(ev.detail.newValue, instance));\n instance._assignEvent('strokecolor-changed', (ev) => updatestrokecolor(ev.detail.newValue, instance));\n instance._assignEvent('strokedasharray-changed', (ev) => updatestrokedasharray(ev.detail.newValue, instance));\n //instance._assignEvent('animationspeed-changed', (ev) => updateanimationspeed(ev.detail.newValue, instance));\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration=instance.animationspeed+'s';\n //instance.style.width = instance.pipewidth+\"px\";\n instance.style.height =(instance.pipesize2)+\"px\";\n instance.style.width = (instance.pipesize2)+\"px\";\n flowingliquid.style.strokeWidth =instance.strokewidth;\n flowingliquid.style.stroke = instance.strokecolor;\n flowingliquid.style.strokeDasharray = instance.strokedasharray;\n checkflowdirection(instance);\n let sl = (!isNullOrUndefined(instance.signalup)) ? window.IOB.subscribeState(instance.signalup,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let sr = (!isNullOrUndefined(instance.signaldown)) ? window.IOB.subscribeState(instance.signaldown,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let animationspeed = (!isNullOrUndefined(instance.animationspeed)) ? window.IOB.subscribeState(instance.animationspeed,(id, state)=> updateanimationspeed(id,state,instance)) : {'val':false};\n\n}\n\n\n\nexport function disconnectedCallback(instance) { // Disconnect the observer when the element is removed from the DOM \n\n}\n\nasync function checkflowdirection(instance)\n{ \n let signalup = instance.signalup;\n let checksignalup =(!isNullOrUndefined(signalup)) ? await window.IOB.getState(signalup) : {'val':false};\n let conditionup = instance.conditionup;\n let conditionupvalue = instance.conditionupvalue;\n let up = (!isNullOrUndefined(instance.up)) ? instance.up : false;\n\n let signaldown = instance.signaldown;\n let checksignaldown =(!isNullOrUndefined(signaldown)) ? await window.IOB.getState(signaldown) : {'val':false};\n let conditiondown = instance.conditiondown;\n let conditiondownvalue = instance.conditiondownvalue;\n let down = (!isNullOrUndefined(instance.down)) ? instance.down : false;\n \n let x = (instance.up==true) ? selectCase(checksignalup.val, conditionup, conditionupvalue) : false;\n let y = (instance.down==true) ? selectCase(checksignaldown.val, conditiondown, conditiondownvalue) : false;\n if (x == true \|\| y == true) {\n if (x == true) {\n checkup(up,instance);\n }\n if (y == true) {\n checkdown(down,instance);\n }\n }\n else {\n nothing(instance);\n }\n \n}\n\nfunction handleStateChange(id, state,instance) {\n checkflowdirection(instance);\n}\n\nfunction updatewidth(value,instance){\n instance.style.width=value+\"px\";\n}\n\nfunction updateheight(value,instance){\n instance.style.height=value+\"px\";\n}\n\nfunction updatesize(value,instance){\n instance.style.width=(value2)+\"px\";\n instance.style.height=(value2)+\"px\";\n}\n\nfunction updatestrokeWidth(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeWidth = value;\n \n}\n\nfunction updatestrokecolor(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.stroke = value;\n \n}\n\nfunction updatestrokedasharray(value,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.strokeDasharray = value;\n \n}\n\nfunction updateanimationspeed(id, state,instance)\n{\n let flowingliquid = instance._getDomElement('flowingLiquid');\n flowingliquid.style.animationDuration = state.val+'s';\n}\n\nfunction selectCase(value, condition, conditionvalue) {\n var flag1;\n switch (condition) {\n case 'exist':\n flag1 = value.includes(conditionvalue);\n break;\n\n case 'equal':\n let vl = Number(value);\n let convl = Number(Boolean(conditionvalue)) ;\n if (vl == convl) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'is not equal':\n let vl1 = Number(value);\n let convl1 = Number(Boolean(conditionvalue)) ;\n if (vl1 != convl1) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than':\n if (parseInt(value) < parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'less-than or equal':\n if (parseInt(value) <= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than':\n if (parseInt(value) > parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n\n case 'greater-than or equal':\n if (parseInt(value) >= parseInt(conditionvalue)) {\n return flag1 = true;\n }\n else\n {\n return flag1 = false;\n }\n break;\n }\n return flag1;\n}\n\nfunction isNullOrUndefined(value) {\n return value === undefined \|\| value === null \|\| value ===\"\";\n}\n\nfunction nothing(instance) {\n //if(data==true)\n //{\n /var svg = instance.shadowRoot.querySelector(\"svg\");\n var line = $(svg).find(\"line\");*/\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", '');\n path.setAttribute(\"visibility\", 'hidden');\n //$(line).css('display', 'none');\n // }\n }\n\n function checkup(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquidup');\n path.setAttribute(\"visibility\", 'visible');\n }\n }\n\nfunction checkdown(data,instance) {\n if (data == true) {\n let path = instance._getDomElement('flowingLiquid');\n path.setAttribute(\"class\", 'flowingLiquiddown');\n path.setAttribute(\"visibility\", 'visible');\n }\n} \n", "properties": {"pipesize": {"type": "number", "default": "100"}, "strokewidth": {"type": "number", "default": "5"}, "strokecolor": {"type": "color", "default": "brown"}, "strokedasharray": {"type": "string", "default": "10, 10"}, "up": {"type": "boolean"}, "signalup": {"type": "signal"}, "conditionup": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditionupvalue": {"type": "string"}, "down": {"type": "boolean"}, "signaldown": {"type": "signal"}, "conditiondown": {"type": "enum", "values": ["exist", "equal", "is not equal", "less-than", "less-than or equal", "greater-than", "greater-than or equal"]}, "conditiondownvalue": {"type": "string"}, "animationspeed": {"type": "signal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

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

	@@ -1 +1 @@
1	- {"html":"<~~svg~~ id=\"~~tee_svg~~\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" ~~xmlns:xlink~~=\"~~http://www~~.w3.~~org/1999/xlink~~\" width=\"100%\" height=\"100%\" ~~viewBox~~=\"0 0 ~~112~~.5 ~~112~~.5\" ~~enable~~-~~background~~=\"~~new~~ 0 0 ~~112~~.5 ~~112~~.5\" ~~xml:space~~=\"~~preserve~~\" ~~style~~=\"~~display:block;~~width~~:100%;height:100%;\~~"></svg~~>\n~~","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 debugger;\n const svg = instance._getDomElement('tee_svg');\n if (!svg) {\n console.error('Tee SVG not found');\n return;\n }\n \n teeType = teeType \|\| instance.teeType \|\| '1';\n console.log('Updating tee type:', teeType);\n \n const tees = {\n '1': `<g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.2505\" y1=\"56.25\" x2=\"56.2505\" y2=\"0\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M112.5,56.25H0V0h112.5V56.25z\" />\n </g>\n <g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"96.1426\" y1=\"31.2671\" x2=\"96.1426\" y2=\"-25.1353\" gradientTransform=\"matrix(0 -1 -1 0 59.3184 166.4961)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M84.453,112.393h-56.25l-0.152-52.848c0-20.878,12.613-31.23,28.172-31.23s28.172,10.352,28.172,31.23L84.453,112.393z\" />\n </g>`,\n \n '2': `<g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.2505\" y1=\"112.5\" x2=\"56.2505\" y2=\"56.2505\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M0,56.25h112.5v56.25H0V56.25z\" />\n </g>\n <g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"28.125\" y1=\"42.1875\" x2=\"84.375\" y2=\"42.1875\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M84.375,0v56.25c0,0-2.207,28.125-28.125,28.125c-26.336,0-28.125-28.125-28.125-28.125V0\" />\n </g>`,\n \n '3': `<g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"56.25\" x2=\"56.25\" y2=\"56.25\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M56.25,0v112.5H0V0H56.25z\" />\n </g>\n <g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"70.3125\" y1=\"84.375\" x2=\"70.3125\" y2=\"28.1255\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M112.5,84.375H56.25c0,0-28.125-0.825-28.125-28.125c0-28.125,28.125-28.125,28.125-28.125h56.25\" />\n </g>`,\n \n '4': `<g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.75\" y1=\"57\" x2=\"55.5\" y2=\"57\" gradientTransform=\"matrix(-1 0 0 1 111 0)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M55.5,0.75v112.5h56.25V0.75H55.5z\" />\n </g>\n <g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"69.5625\" y1=\"85.125\" x2=\"69.5625\" y2=\"28.8755\" gradientTransform=\"matrix(-1 0 0 1 111 0)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M-0.75,85.125H55.5c0,0,28.125-0.825,28.125-28.125c0-28.125-28.125-28.125-28.125-28.125H-0.75\" />\n </g>`\n };\n \n svg.innerHTML = tees[teeType] \|\| tees['1'];\n console.log('Tee updated successfully');\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":""}}
1	+ {"html": "<div class=\"responsive-container\" style=\"width:100%;height:100%;position:relative;\"><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;\"><g id=\"Group_tee\"><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M0,56.25 H112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path><path d=\"M56.25,56.25 V112.5\" fill=\"none\" stroke=\"#646566\" stroke-width=\"30\" stroke-linecap=\"butt\"></path><path d=\"M56.25,56.25 V112.5\" fill=\"none\" stroke=\"#7a7b7c\" stroke-width=\"26\" stroke-linecap=\"butt\"></path><path d=\"M56.25,56.25 V112.5\" fill=\"none\" stroke=\"#949596\" stroke-width=\"21\" stroke-linecap=\"butt\"></path><path d=\"M56.25,56.25 V112.5\" fill=\"none\" stroke=\"#bdbebf\" stroke-width=\"15\" stroke-linecap=\"butt\"></path><path d=\"M56.25,56.25 V112.5\" fill=\"none\" stroke=\"#E0E0E0\" stroke-width=\"9\" stroke-linecap=\"butt\"></path><path d=\"M56.25,56.25 V112.5\" fill=\"none\" stroke=\"#efefef\" stroke-width=\"4\" stroke-linecap=\"butt\"></path></g><path id=\"flowingLiquid\" d=\"M0,56.25 H112.5\" fill=\"none\"></path></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 debugger;\n const svg = instance._getDomElement('tee_svg');\n if (!svg) {\n console.error('Tee SVG not found');\n return;\n }\n \n teeType = teeType \|\| instance.teeType \|\| '1';\n console.log('Updating tee type:', teeType);\n \n const tees = {\n '1': `<g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.2505\" y1=\"56.25\" x2=\"56.2505\" y2=\"0\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M112.5,56.25H0V0h112.5V56.25z\" />\n </g>\n <g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"96.1426\" y1=\"31.2671\" x2=\"96.1426\" y2=\"-25.1353\" gradientTransform=\"matrix(0 -1 -1 0 59.3184 166.4961)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M84.453,112.393h-56.25l-0.152-52.848c0-20.878,12.613-31.23,28.172-31.23s28.172,10.352,28.172,31.23L84.453,112.393z\" />\n </g>`,\n \n '2': `<g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"56.2505\" y1=\"112.5\" x2=\"56.2505\" y2=\"56.2505\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M0,56.25h112.5v56.25H0V56.25z\" />\n </g>\n <g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"28.125\" y1=\"42.1875\" x2=\"84.375\" y2=\"42.1875\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M84.375,0v56.25c0,0-2.207,28.125-28.125,28.125c-26.336,0-28.125-28.125-28.125-28.125V0\" />\n </g>`,\n \n '3': `<g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"0\" y1=\"56.25\" x2=\"56.25\" y2=\"56.25\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M56.25,0v112.5H0V0H56.25z\" />\n </g>\n <g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"70.3125\" y1=\"84.375\" x2=\"70.3125\" y2=\"28.1255\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M112.5,84.375H56.25c0,0-28.125-0.825-28.125-28.125c0-28.125,28.125-28.125,28.125-28.125h56.25\" />\n </g>`,\n \n '4': `<g id=\"Group_Tee_V\">\n <linearGradient id=\"SVGID_1_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.75\" y1=\"57\" x2=\"55.5\" y2=\"57\" gradientTransform=\"matrix(-1 0 0 1 111 0)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.18\" style=\"stop-color:#959595\" />\n <stop offset=\"0.5\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#666666\" />\n </linearGradient>\n <path fill=\"url(#SVGID_1_)\" d=\"M55.5,0.75v112.5h56.25V0.75H55.5z\" />\n </g>\n <g id=\"Group_Tee_H\">\n <linearGradient id=\"SVGID_2_\" gradientUnits=\"userSpaceOnUse\" x1=\"69.5625\" y1=\"85.125\" x2=\"69.5625\" y2=\"28.8755\" gradientTransform=\"matrix(-1 0 0 1 111 0)\">\n <stop offset=\"0.01\" style=\"stop-color:#646566\" />\n <stop offset=\"0.16\" style=\"stop-color:#909091\" />\n <stop offset=\"0.49\" style=\"stop-color:#E0E0E0\" />\n <stop offset=\"1\" style=\"stop-color:#646566\" />\n </linearGradient>\n <path fill=\"url(#SVGID_2_)\" d=\"M-0.75,85.125H55.5c0,0,28.125-0.825,28.125-28.125c0-28.125-28.125-28.125-28.125-28.125H-0.75\" />\n </g>`\n };\n \n svg.innerHTML = tees[teeType] \|\| tees['1'];\n console.log('Tee updated successfully');\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": ""}}