npm - iobroker.mywebui - Versions diffs - 1.93.0 → 1.94.1 - Mend

iobroker.mywebui 1.93.0 → 1.94.1

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 (263) hide show

package/default-controls/controls/Valve.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html": "<div height=\"100%\" width=\"100%\">\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 102.744 112.5\" enable-background=\"new 0 0 102.744 112.5\" xml:space=\"preserve\">\n <g id=\"Group_Pipe\">\n <g>\n <defs>\n <rect id=\"SVGID_1_\" x=\"47.403\" y=\"32.435\" width=\"7.485\" height=\"53.979\"></rect>\n </defs>\n <clipPath id=\"SVGID_2_\">\n <use xlink:href=\"#SVGID_1_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_3_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0396\" y1=\"112.459\" x2=\"0.9604\" y2=\"112.459\" gradientTransform=\"matrix(7.4849 0 0 -7.4849 47.6998 901.1704)\">\n <stop id=\"SVGID_3_1_\" offset=\"0\" style=\"stop-color:#5C5D60;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECED;\"></stop>\n <stop offset=\"0.57\" style=\"stop-color:#D9DADB;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#B1B3B6;\"></stop>\n <stop id=\"SVGID_3_5_\" offset=\"1\" style=\"stop-color:#5C5D60;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_1_\" x=\"47.403\" y=\"32.435\" clip-path=\"url(#SVGID_2_)\" fill=\"url(#SVGID_3_)\" width=\"7.485\" height=\"53.979\"></rect>\n </g>\n </g>\n <g id=\"Group_Port2\">\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"25.917\" y1=\"112.9697\" x2=\"25.917\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_1_\" fill=\"url(#SVGID_4_)\" d=\"M0,60.393l51.834,26.097L0,112.97V60.393\"></path>\n </g>\n <g id=\"Group_Port1\">\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"76.8262\" y1=\"112.9697\" x2=\"76.8262\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_2_\" fill=\"url(#SVGID_5_)\" d=\"M102.744,60.393L50.909,86.489l51.835,26.48V60.393\"></path>\n </g>\n <g id=\"Group_Box\">\n <g>\n <defs>\n <path id=\"SVGID_6_\" d=\"M91.622,16.348l1.239,16.314l4.545,3.386c-0.073-1.252-0.01-30.573-0.01-32.629l-3.725-3.417 L91.622,16.348z\"></path>\n </defs>\n <clipPath id=\"SVGID_7_\">\n <use xlink:href=\"#SVGID_6_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_8_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0288\" y1=\"112.4717\" x2=\"0.9712\" y2=\"112.4717\" gradientTransform=\"matrix(5.7842 0 0 5.7842 91.7858 -632.5346)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.36\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#939598;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_2_\" x=\"91.622\" y=\"0.002\" clip-path=\"url(#SVGID_7_)\" fill=\"url(#SVGID_8_)\" width=\"5.784\" height=\"36.046\"></rect>\n </g>\n <g>\n <defs>\n <path id=\"SVGID_9_\" d=\"M8.846,32.662l3.75,3.192c3.174-0.033,83.323,0.118,84.81,0.195l-3.734-3.965l-42.3-1.56L8.846,32.662z\"></path>\n </defs>\n <clipPath id=\"SVGID_10_\">\n <use xlink:href=\"#SVGID_9_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_11_\" gradientUnits=\"userSpaceOnUse\" x1=\"0.0205\" y1=\"112.5215\" x2=\"1.021\" y2=\"112.5215\" gradientTransform=\"matrix(0 5.5244 5.5244 0 -568.4863 30.4067)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.28\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"0.85\" style=\"stop-color:#8E9092;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#808285;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_3_\" x=\"8.846\" y=\"30.524\" clip-path=\"url(#SVGID_10_)\" fill=\"url(#SVGID_11_)\" width=\"88.56\" height=\"5.525\"></rect>\n </g>\n <g>\n <defs>\n <rect id=\"SVGID_12_\" x=\"8.846\" y=\"0.032\" width=\"84.826\" height=\"32.63\"></rect>\n </defs>\n <clipPath id=\"SVGID_13_\">\n <use xlink:href=\"#SVGID_12_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_14_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.002\" y1=\"112.498\" x2=\"0.998\" y2=\"112.498\" gradientTransform=\"matrix(-84.8257 0 0 84.8257 93.5221 -9526.4209)\">\n <stop offset=\"0\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.01\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#D3D5D6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#BCBEC0;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_4_\" x=\"8.846\" y=\"0.032\" clip-path=\"url(#SVGID_13_)\" fill=\"url(#SVGID_14_)\" width=\"84.826\" height=\"32.63\"></rect>\n </g>\n </g>\n </svg>\n</div>\n", "style": ":host {\n background-color: transparent;\n}\n\nbody{\n background-color: transparent; \n}\n* {\n box-sizing: border-box;\n}", "script": "\n/function setDefault(instance)\n{\n let lineargradient1 = instance._getDomElement('SVGID_3_');\n lineargradient1.children[0].style['stop-color']= \"#5C5D60\";\n lineargradient1.children[4].style['stop-color']= \"#5C5D60\";\n\n let lineargradient2 = instance._getDomElement('SVGID_4_');\n lineargradient2.children[0].style['stop-color']= \"#383838\";\n lineargradient2.children[4].style['stop-color']= \"#383838\";\n\n let lineargradient3 = instance._getDomElement('SVGID_5_');\n lineargradient3.children[0].style['stop-color']= \"#383838\";\n lineargradient3.children[4].style['stop-color']= \"#383838\";\n\n let lineargradient4 = instance._getDomElement('SVGID_8_');\n lineargradient4.children[2].style['stop-color']= \"#939598\";\n\n let lineargradient5 = instance._getDomElement('SVGID_11_');\n lineargradient5.children[2].style['stop-color']= \"#8E9092\";\n lineargradient5.children[3].style['stop-color']= \"#808285\";\n\n let lineargradient6 = instance._getDomElement('SVGID_14_');\n lineargradient6.children[2].style['stop-color']= \"#D3D5D6\";\n lineargradient6.children[3].style['stop-color']= \"#BCBEC0\";\n}\n\nfunction setGreen(instance)\n{\n let lineargradient1 = instance._getDomElement('SVGID_3_');\n lineargradient1.children[0].style['stop-color']= \"green\";\n lineargradient1.children[4].style['stop-color']= \"green\";\n\n let lineargradient2 = instance._getDomElement('SVGID_4_');\n lineargradient2.children[0].style['stop-color']= \"green\";\n lineargradient2.children[4].style['stop-color']= \"green\";\n\n let lineargradient3 = instance._getDomElement('SVGID_5_');\n lineargradient3.children[0].style['stop-color']= \"green\";\n lineargradient3.children[4].style['stop-color']= \"green\";\n\n let lineargradient4 = instance._getDomElement('SVGID_8_');\n lineargradient4.children[2].style['stop-color']= \"green\";\n\n let lineargradient5 = instance._getDomElement('SVGID_11_');\n lineargradient5.children[2].style['stop-color']= \"green\";\n lineargradient5.children[3].style['stop-color']= \"green\";\n\n let lineargradient6 = instance._getDomElement('SVGID_14_');\n lineargradient6.children[2].style['stop-color']= \"green\";\n lineargradient6.children[3].style['stop-color']= \"green\";\n}\n/\n\nfunction fillgreen(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"#00ff00\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"#00ff00\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"#00ff00\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"#00ff00\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"#00ff00\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"#00ff00\";\n}\n\n\nfunction fillred(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"red\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"red\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"red\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"red\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"red\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"red\";\n}\n\n\nfunction fillyellow(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"yellow\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"yellow\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"yellow\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"yellow\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"yellow\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"yellow\";\n}\n\nfunction fillorange(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"orange\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"orange\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"orange\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"orange\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"orange\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"orange\";\n}\n\nfunction filldefault(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"url(#SVGID_3_)\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"url(#SVGID_4_)\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"url(#SVGID_5_)\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"url(#SVGID_8_)\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"url(#SVGID_11_)\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"url(#SVGID_14_)\";\n}\n let valveid;\n // this.add(colormy,\"red\");\n\nexport async function init(instance) {\n \n instance._internals = instance.attachInternals();\n //instance.bird='chickens';\n //let ghg = this;//'IobrokerWebuiCustomControl'Valve\n checkstartup(instance);\n instance._assignEvent('colorstopped-changed', (ev) => checkstartup(instance));\n instance._assignEvent('coloropened-changed', (ev) => checkstartup(instance) );\n instance._assignEvent('colorclosed-changed', (ev) => checkstartup(instance));\n instance._assignEvent('colorfault-changed', (ev) => checkstartup(instance));\n /let vbv = instance.getAttribute(\"inputID\");\n instance.setAttribute(\"Kamran\", 123456);\n let vbv1 = instance.getAttribute(\"Kamran\");/\n //instance._parseAttributesToProperties();\n //instance.push({ name: 'hello', type: 'string' });\n //instance.properties.push({ name: 'hello', type: 'string' });\n //instance._bindingsRefresh();\n\n}\n\nasync function checkstartup(instance)\n{\n\nlet result = 0;\nlet valveid = await window.IOB.getState(\"local_test\").then(function(result) {\n return result;\n});\n\n\n\n let colorstoppedNodeValue =instance.attributes[\"bind-prop:colorstopped\"].nodeValue;\n let coloropenedNodeValue =instance.attributes[\"bind-prop:coloropened\"].nodeValue;\n let colorclosedNodeValue =instance.attributes[\"bind-prop:colorclosed\"].nodeValue;\n let colorfaultNodeValue =instance.attributes[\"bind-prop:colorfault\"].nodeValue;\n let st = colorstoppedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let op = coloropenedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let cl = colorclosedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let fl = colorfaultNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n \n let stopped = await window.IOB.getState(st);\n let opened = await window.IOB.getState(op);\n let closed = await window.IOB.getState(cl);\n let fault = await window.IOB.getState(fl);\n\n /let stopped = instance._initialPropertyCache.get(\"colorstopped\");\n let opened = instance._initialPropertyCache.get(\"coloropened\");\n let closed = instance._initialPropertyCache.get(\"colorclosed\");\n let fault = instance._initialPropertyCache.get(\"colorfault\");/\n if(stopped.val==true)\n {\n fillyellow(instance);\n }\n if(opened.val==true)\n {\n fillgreen(instance);\n }\n if(closed.val==true)\n {\n fillred(instance);\n }\n\n if(fault.val==true)\n {\n fillorange(instance);\n }\n \n if(opened.val==true && closed.val==true)\n {\n fillorange(instance);\n }\n\n if(opened.val==true && closed.val==true && stopped.val==true)\n {\n fillorange(instance);\n }\n if(opened.val==false && closed.val==false && stopped.val==false && fault.val==false)\n {\n filldefault(instance);\n }\n\n\n}\n\nfunction check(instance)\n{\n let stopped = instance.colorstopped;\n let opened = instance.coloropened;\n let closed = instance.colorclosed;\n let fault = instance.colorfault;\n if(stopped==true)\n {\n fillyellow(instance);\n }\n if(opened==true)\n {\n fillgreen(instance);\n }\n if(closed==true)\n {\n fillred(instance);\n }\n\n if(fault==true)\n {\n fillorange(instance);\n }\n \n if(opened==true && closed==true)\n {\n fillorange(instance);\n }\n\n if(opened==true && closed==true && stopped==true)\n {\n fillorange(instance);\n }\n if(opened==false && closed==false && stopped==false && fault==false)\n {\n filldefault(instance);\n }\n\n\n}\nexport function connectedCallback(instance) {\n //instance._bindingsRefresh();\n //updateLevel(instance.level, instance);\n}\n\n/*\n @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n}\n\nexport function attributeChangedCallback (name, oldValue, newValue) {\n \n\tconsole.log('attribute changed', name, oldValue, newValue, this);\n}", "properties": {"colorstopped": {"type": "number"}, "coloropened": {"type": "number"}, "colorclosed": {"type": "number"}, "colorfault": {"type": "number"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
1	+ {"html": "<div height=\"100%\" width=\"100%\">\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 102.744 112.5\" enable-background=\"new 0 0 102.744 112.5\" xml:space=\"preserve\">\n <g id=\"Group_Pipe\">\n <g>\n <defs>\n <rect id=\"SVGID_1_\" x=\"47.403\" y=\"32.435\" width=\"7.485\" height=\"53.979\"></rect>\n </defs>\n <clipPath id=\"SVGID_2_\">\n <use xlink:href=\"#SVGID_1_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_3_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0396\" y1=\"112.459\" x2=\"0.9604\" y2=\"112.459\" gradientTransform=\"matrix(7.4849 0 0 -7.4849 47.6998 901.1704)\">\n <stop id=\"SVGID_3_1_\" offset=\"0\" style=\"stop-color:#5C5D60;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECED;\"></stop>\n <stop offset=\"0.57\" style=\"stop-color:#D9DADB;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#B1B3B6;\"></stop>\n <stop id=\"SVGID_3_5_\" offset=\"1\" style=\"stop-color:#5C5D60;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_1_\" x=\"47.403\" y=\"32.435\" clip-path=\"url(#SVGID_2_)\" fill=\"url(#SVGID_3_)\" width=\"7.485\" height=\"53.979\"></rect>\n </g>\n </g>\n <g id=\"Group_Port2\">\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"25.917\" y1=\"112.9697\" x2=\"25.917\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_1_\" fill=\"url(#SVGID_4_)\" d=\"M0,60.393l51.834,26.097L0,112.97V60.393\"></path>\n </g>\n <g id=\"Group_Port1\">\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"76.8262\" y1=\"112.9697\" x2=\"76.8262\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_2_\" fill=\"url(#SVGID_5_)\" d=\"M102.744,60.393L50.909,86.489l51.835,26.48V60.393\"></path>\n </g>\n <g id=\"Group_Box\">\n <g>\n <defs>\n <path id=\"SVGID_6_\" d=\"M91.622,16.348l1.239,16.314l4.545,3.386c-0.073-1.252-0.01-30.573-0.01-32.629l-3.725-3.417 L91.622,16.348z\"></path>\n </defs>\n <clipPath id=\"SVGID_7_\">\n <use xlink:href=\"#SVGID_6_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_8_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0288\" y1=\"112.4717\" x2=\"0.9712\" y2=\"112.4717\" gradientTransform=\"matrix(5.7842 0 0 5.7842 91.7858 -632.5346)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.36\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#939598;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_2_\" x=\"91.622\" y=\"0.002\" clip-path=\"url(#SVGID_7_)\" fill=\"url(#SVGID_8_)\" width=\"5.784\" height=\"36.046\"></rect>\n </g>\n <g>\n <defs>\n <path id=\"SVGID_9_\" d=\"M8.846,32.662l3.75,3.192c3.174-0.033,83.323,0.118,84.81,0.195l-3.734-3.965l-42.3-1.56L8.846,32.662z\"></path>\n </defs>\n <clipPath id=\"SVGID_10_\">\n <use xlink:href=\"#SVGID_9_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_11_\" gradientUnits=\"userSpaceOnUse\" x1=\"0.0205\" y1=\"112.5215\" x2=\"1.021\" y2=\"112.5215\" gradientTransform=\"matrix(0 5.5244 5.5244 0 -568.4863 30.4067)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.28\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"0.85\" style=\"stop-color:#8E9092;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#808285;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_3_\" x=\"8.846\" y=\"30.524\" clip-path=\"url(#SVGID_10_)\" fill=\"url(#SVGID_11_)\" width=\"88.56\" height=\"5.525\"></rect>\n </g>\n <g>\n <defs>\n <rect id=\"SVGID_12_\" x=\"8.846\" y=\"0.032\" width=\"84.826\" height=\"32.63\"></rect>\n </defs>\n <clipPath id=\"SVGID_13_\">\n <use xlink:href=\"#SVGID_12_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_14_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.002\" y1=\"112.498\" x2=\"0.998\" y2=\"112.498\" gradientTransform=\"matrix(-84.8257 0 0 84.8257 93.5221 -9526.4209)\">\n <stop offset=\"0\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.01\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#D3D5D6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#BCBEC0;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_4_\" x=\"8.846\" y=\"0.032\" clip-path=\"url(#SVGID_13_)\" fill=\"url(#SVGID_14_)\" width=\"84.826\" height=\"32.63\"></rect>\n </g>\n </g>\n </svg>\n</div>\n", "style": ":host {\n background-color: transparent;\n}\n\nbody{\n background-color: transparent; \n}\n* {\n box-sizing: border-box;\n}", "script": "\n/function setDefault(instance)\n{\n let lineargradient1 = instance._getDomElement('SVGID_3_');\n lineargradient1.children[0].style['stop-color']= \"#5C5D60\";\n lineargradient1.children[4].style['stop-color']= \"#5C5D60\";\n\n let lineargradient2 = instance._getDomElement('SVGID_4_');\n lineargradient2.children[0].style['stop-color']= \"#383838\";\n lineargradient2.children[4].style['stop-color']= \"#383838\";\n\n let lineargradient3 = instance._getDomElement('SVGID_5_');\n lineargradient3.children[0].style['stop-color']= \"#383838\";\n lineargradient3.children[4].style['stop-color']= \"#383838\";\n\n let lineargradient4 = instance._getDomElement('SVGID_8_');\n lineargradient4.children[2].style['stop-color']= \"#939598\";\n\n let lineargradient5 = instance._getDomElement('SVGID_11_');\n lineargradient5.children[2].style['stop-color']= \"#8E9092\";\n lineargradient5.children[3].style['stop-color']= \"#808285\";\n\n let lineargradient6 = instance._getDomElement('SVGID_14_');\n lineargradient6.children[2].style['stop-color']= \"#D3D5D6\";\n lineargradient6.children[3].style['stop-color']= \"#BCBEC0\";\n}\n\nfunction setGreen(instance)\n{\n let lineargradient1 = instance._getDomElement('SVGID_3_');\n lineargradient1.children[0].style['stop-color']= \"green\";\n lineargradient1.children[4].style['stop-color']= \"green\";\n\n let lineargradient2 = instance._getDomElement('SVGID_4_');\n lineargradient2.children[0].style['stop-color']= \"green\";\n lineargradient2.children[4].style['stop-color']= \"green\";\n\n let lineargradient3 = instance._getDomElement('SVGID_5_');\n lineargradient3.children[0].style['stop-color']= \"green\";\n lineargradient3.children[4].style['stop-color']= \"green\";\n\n let lineargradient4 = instance._getDomElement('SVGID_8_');\n lineargradient4.children[2].style['stop-color']= \"green\";\n\n let lineargradient5 = instance._getDomElement('SVGID_11_');\n lineargradient5.children[2].style['stop-color']= \"green\";\n lineargradient5.children[3].style['stop-color']= \"green\";\n\n let lineargradient6 = instance._getDomElement('SVGID_14_');\n lineargradient6.children[2].style['stop-color']= \"green\";\n lineargradient6.children[3].style['stop-color']= \"green\";\n}\n/\n\nfunction fillgreen(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"#00ff00\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"#00ff00\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"#00ff00\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"#00ff00\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"#00ff00\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"#00ff00\";\n}\n\n\nfunction fillred(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"red\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"red\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"red\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"red\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"red\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"red\";\n}\n\n\nfunction fillyellow(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"yellow\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"yellow\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"yellow\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"yellow\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"yellow\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"yellow\";\n}\n\nfunction fillorange(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"orange\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"orange\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"orange\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"orange\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"orange\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"orange\";\n}\n\nfunction filldefault(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"url(#SVGID_3_)\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"url(#SVGID_4_)\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"url(#SVGID_5_)\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"url(#SVGID_8_)\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"url(#SVGID_11_)\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"url(#SVGID_14_)\";\n}\n let valveid;\n // this.add(colormy,\"red\");\n\nexport async function init(instance) {\n \n instance._internals = instance.attachInternals();\n //instance.bird='chickens';\n //let ghg = this;//'IobrokerWebuiCustomControl'Valve\n checkstartup(instance);\n instance._assignEvent('colorstopped-changed', (ev) => checkstartup(instance));\n instance._assignEvent('coloropened-changed', (ev) => checkstartup(instance) );\n instance._assignEvent('colorclosed-changed', (ev) => checkstartup(instance));\n instance._assignEvent('colorfault-changed', (ev) => checkstartup(instance));\n /let vbv = instance.getAttribute(\"inputID\");\n instance.setAttribute(\"Kamran\", 123456);\n let vbv1 = instance.getAttribute(\"Kamran\");/\n //instance._parseAttributesToProperties();\n //instance.push({ name: 'hello', type: 'string' });\n //instance.properties.push({ name: 'hello', type: 'string' });\n //instance._bindingsRefresh?.();\n\n}\n\nasync function checkstartup(instance)\n{\n\nlet result = 0;\nlet valveid = await window.IOB.getState(\"local_test\").then(function(result) {\n return result;\n});\n\n\n\n let colorstoppedNodeValue =instance.attributes[\"bind-prop:colorstopped\"].nodeValue;\n let coloropenedNodeValue =instance.attributes[\"bind-prop:coloropened\"].nodeValue;\n let colorclosedNodeValue =instance.attributes[\"bind-prop:colorclosed\"].nodeValue;\n let colorfaultNodeValue =instance.attributes[\"bind-prop:colorfault\"].nodeValue;\n let st = colorstoppedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let op = coloropenedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let cl = colorclosedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let fl = colorfaultNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n \n let stopped = await window.IOB.getState(st);\n let opened = await window.IOB.getState(op);\n let closed = await window.IOB.getState(cl);\n let fault = await window.IOB.getState(fl);\n\n /let stopped = instance._initialPropertyCache.get(\"colorstopped\");\n let opened = instance._initialPropertyCache.get(\"coloropened\");\n let closed = instance._initialPropertyCache.get(\"colorclosed\");\n let fault = instance._initialPropertyCache.get(\"colorfault\");/\n if(stopped.val==true)\n {\n fillyellow(instance);\n }\n if(opened.val==true)\n {\n fillgreen(instance);\n }\n if(closed.val==true)\n {\n fillred(instance);\n }\n\n if(fault.val==true)\n {\n fillorange(instance);\n }\n \n if(opened.val==true && closed.val==true)\n {\n fillorange(instance);\n }\n\n if(opened.val==true && closed.val==true && stopped.val==true)\n {\n fillorange(instance);\n }\n if(opened.val==false && closed.val==false && stopped.val==false && fault.val==false)\n {\n filldefault(instance);\n }\n\n\n}\n\nfunction check(instance)\n{\n let stopped = instance.colorstopped;\n let opened = instance.coloropened;\n let closed = instance.colorclosed;\n let fault = instance.colorfault;\n if(stopped==true)\n {\n fillyellow(instance);\n }\n if(opened==true)\n {\n fillgreen(instance);\n }\n if(closed==true)\n {\n fillred(instance);\n }\n\n if(fault==true)\n {\n fillorange(instance);\n }\n \n if(opened==true && closed==true)\n {\n fillorange(instance);\n }\n\n if(opened==true && closed==true && stopped==true)\n {\n fillorange(instance);\n }\n if(opened==false && closed==false && stopped==false && fault==false)\n {\n filldefault(instance);\n }\n\n\n}\nexport function connectedCallback(instance) {\n //instance._bindingsRefresh?.();\n //updateLevel(instance.level, instance);\n}\n\n/*\n @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n}\n\nexport function attributeChangedCallback (name, oldValue, newValue) {\n \n\tconsole.log('attribute changed', name, oldValue, newValue, this);\n}", "properties": {"colorstopped": {"type": "number"}, "coloropened": {"type": "number"}, "colorclosed": {"type": "number"}, "colorfault": {"type": "number"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

package/default-controls/controls/Webui_Valve.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html": "<div data-visibility-enabled=\"false\" data-visibility-condition=\"==\" data-visibility-action=\"disable\">\n <mypopup-dialog id=\"mydialog2\" isdraggable=\"true\" style=\"display:none;\">\n <webui-valve_faceplate bind-prop:valveid=\"??valveid\" bind-prop:relativesignalpath=\"??relativesignalpath\" data-visibility-enabled=\"false\" data-visibility-condition=\"==\" data-visibility-action=\"hide\" data-visibility-value=\"true\" bind-prop:opened=\"??coloropened\" bind-prop:closed=\"??colorclosed\" style=\"position:absolute;\"></webui-valve_faceplate>\n <!-- <iobroker-webui-screen-viewer id=\"iobwebscreenviewer1\" stretch screen-name=\"Webui_siyirtme\"></iobroker-webui-screen-viewer>-->\n </mypopup-dialog>\n <div id=\"container_kmn_1\" height=\"100%\" width=\"100%\">\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 102.744 112.5\" enable-background=\"new 0 0 102.744 112.5\" xml:space=\"preserve\" @click=\"openPopup\">\n <g id=\"Group_Pipe\">\n <g>\n <defs>\n <rect id=\"SVGID_1_\" x=\"47.403\" y=\"32.435\" width=\"7.485\" height=\"53.979\"></rect>\n </defs>\n <clipPath id=\"SVGID_2_\">\n <use xlink:href=\"#SVGID_1_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_3_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0396\" y1=\"112.459\" x2=\"0.9604\" y2=\"112.459\" gradientTransform=\"matrix(7.4849 0 0 -7.4849 47.6998 901.1704)\">\n <stop id=\"SVGID_3_1_\" offset=\"0\" style=\"stop-color:#5C5D60;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECED;\"></stop>\n <stop offset=\"0.57\" style=\"stop-color:#D9DADB;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#B1B3B6;\"></stop>\n <stop id=\"SVGID_3_5_\" offset=\"1\" style=\"stop-color:#5C5D60;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_1_\" x=\"47.403\" y=\"32.435\" clip-path=\"url(#SVGID_2_)\" fill=\"url(#SVGID_3_)\" width=\"7.485\" height=\"53.979\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_3_)\\\";\"}'></rect>\n </g>\n </g>\n <g id=\"Group_Port2\">\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"25.917\" y1=\"112.9697\" x2=\"25.917\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_1_\" fill=\"url(#SVGID_4_)\" d=\"M0,60.393l51.834,26.097L0,112.97V60.393\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_4_)\\\";\"}'></path>\n </g>\n <g id=\"Group_Port1\">\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"76.8262\" y1=\"112.9697\" x2=\"76.8262\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_2_\" fill=\"url(#SVGID_5_)\" d=\"M102.744,60.393L50.909,86.489l51.835,26.48V60.393\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_5_)\\\";\"}'></path>\n </g>\n <g id=\"Group_Box\">\n <g>\n <defs>\n <path id=\"SVGID_6_\" d=\"M91.622,16.348l1.239,16.314l4.545,3.386c-0.073-1.252-0.01-30.573-0.01-32.629l-3.725-3.417 L91.622,16.348z\"></path>\n </defs>\n <clipPath id=\"SVGID_7_\">\n <use xlink:href=\"#SVGID_6_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_8_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0288\" y1=\"112.4717\" x2=\"0.9712\" y2=\"112.4717\" gradientTransform=\"matrix(5.7842 0 0 5.7842 91.7858 -632.5346)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.36\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#939598;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_2_\" x=\"91.622\" y=\"0.002\" clip-path=\"url(#SVGID_7_)\" fill=\"url(#SVGID_8_)\" width=\"5.784\" height=\"36.046\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_8_)\\\";\"}'></rect>\n </g>\n <g>\n <defs>\n <path id=\"SVGID_9_\" d=\"M8.846,32.662l3.75,3.192c3.174-0.033,83.323,0.118,84.81,0.195l-3.734-3.965l-42.3-1.56L8.846,32.662z\"></path>\n </defs>\n <clipPath id=\"SVGID_10_\">\n <use xlink:href=\"#SVGID_9_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_11_\" gradientUnits=\"userSpaceOnUse\" x1=\"0.0205\" y1=\"112.5215\" x2=\"1.021\" y2=\"112.5215\" gradientTransform=\"matrix(0 5.5244 5.5244 0 -568.4863 30.4067)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.28\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"0.85\" style=\"stop-color:#8E9092;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#808285;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_3_\" x=\"8.846\" y=\"30.524\" clip-path=\"url(#SVGID_10_)\" fill=\"url(#SVGID_11_)\" width=\"88.56\" height=\"5.525\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_11_)\\\";\"}'></rect>\n </g>\n <g>\n <defs>\n <rect id=\"SVGID_12_\" x=\"8.846\" y=\"0.032\" width=\"84.826\" height=\"32.63\"></rect>\n </defs>\n <clipPath id=\"SVGID_13_\">\n <use xlink:href=\"#SVGID_12_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_14_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.002\" y1=\"112.498\" x2=\"0.998\" y2=\"112.498\" gradientTransform=\"matrix(-84.8257 0 0 84.8257 93.5221 -9526.4209)\">\n <stop offset=\"0\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.01\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#D3D5D6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#BCBEC0;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_4_\" x=\"8.846\" y=\"0.032\" clip-path=\"url(#SVGID_13_)\" fill=\"url(#SVGID_14_)\" width=\"84.826\" height=\"32.63\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_14_)\\\";\"}'></rect>\n </g>\n </g>\n </svg>\n </div>\n</div>\n", "style": ":host {\n background-color: transparent;\n}\n\n\n* {\n box-sizing: border-box;\n}\n", "script": "let protocol = window.location.protocol;\nlet ip = window.location.hostname;\nlet port = window.location.port;\n\nlet BaseCustomControl;\nlet webuiCustomControlSymbol;\nlet path =(`${protocol}//${ip}:${port}/mywebui/dist/frontend/runtime/CustomControls.js`);\nconst module = await import(path) \n .then(module => { \n BaseCustomControl = module.BaseCustomControl;\n webuiCustomControlSymbol=module.webuiCustomControlSymbol;\n }) \n .catch(err => { \n console.error('Error loading module:', err); \n }); \n\n//import (`${protocol}//${ip}:${port}/webui.0.data/config/additionalfiles/svg_popup.js`);\n\n\n\n \n\n/function fillgreen(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"#00ff00\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"#00ff00\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"#00ff00\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"#00ff00\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"#00ff00\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"#00ff00\";\n}\n\n\nfunction fillred(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"red\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"red\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"red\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"red\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"red\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"red\";\n}\n\n\nfunction fillyellow(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"yellow\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"yellow\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"yellow\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"yellow\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"yellow\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"yellow\";\n}\n\nfunction fillorange(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"orange\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"orange\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"orange\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"orange\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"orange\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"orange\";\n}\n\nfunction filldefault(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"url(#SVGID_3_)\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"url(#SVGID_4_)\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"url(#SVGID_5_)\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"url(#SVGID_8_)\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"url(#SVGID_11_)\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"url(#SVGID_14_)\";\n}/\n let valveid;\n // this.add(colormy,\"red\");\n\n/function isNullOrUndefined(value) {\n return value === undefined \|\| value === null;\n}\n\n// Function to handle state changes\nfunction handleStateChange(id, state,instance) {\n checkstartup(instance);\n}/\n\nexport async function init(instance) {\n \n /let myiframe = instance._getDomElement('myiframe1');\n myiframe.src=`/webui/runtime.html?use_id=${instance.valveid}#screenName=${instance.screenSelect}`;\n myiframe.style.width='100%';\n myiframe.style.height='100%';/\n\n /let colorstoppedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorstopped\"]);\n let coloropenedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:coloropened\"]);\n let colorclosedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorclosed\"]);\n let colorfaultNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorfault\"]);\n let st = (!isNullOrUndefined(colorstoppedNodeValue)) ? window.IOB.subscribeState(colorstoppedNodeValue,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let op = (!isNullOrUndefined(coloropenedNodeValue)) ? window.IOB.subscribeState(coloropenedNodeValue,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let cl = (!isNullOrUndefined(colorclosedNodeValue)) ? window.IOB.subscribeState(colorclosedNodeValue,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let fl = (!isNullOrUndefined(colorfaultNodeValue)) ? window.IOB.subscribeState(colorfaultNodeValue, (id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n /\n \n\n //checkstartup(instance);\n /instance._assignEvent('colorstopped-changed', (ev) => checkstartup(instance));\n instance._assignEvent('coloropened-changed', (ev) => checkstartup(instance));\n instance._assignEvent('colorclosed-changed', (ev) => checkstartup(instance));\n instance._assignEvent('colorfault-changed', (ev) => checkstartup(instance));/\n \n \n /let screenviewer1 = instance._getDomElement('iobwebscreenviewer1');\n if (isNullOrUndefined(instance.screenSelect)) {\n //screenviewer1.screenName='';\n } else {\n screenviewer1.screenName=instance.screenSelect;\n /let stringify =JSON.stringify(instance.parameter);\n screenviewer1.setAttribute(\"Parameters\", stringify);/\n //}/\n\n /let vbv = instance.getAttribute(\"inputID\");\n instance.setAttribute(\"Kamran\", 123456);\n let vbv1 = instance.getAttribute(\"Kamran\");/\n //instance._bindingsRefresh();\n}\n\n/function addvalveid()\n{\n let myscreenviewer = instance._getDomElement('iobwebscreenviewer1');\n myscreenviewer.valveid=instance.valveid;\n}/\n\n/function checkisnullorumdefined(value)\n{\n if(!isNullOrUndefined(value))\n return value.nodeValue;\n}/\nasync function checkstartup(instance)\n{\n //\n /let result = 0;\n let colorstoppedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorstopped\"]);\n let coloropenedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:coloropened\"]);\n let colorclosedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorclosed\"]);\n let colorfaultNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorfault\"]);/\n /let st = colorstoppedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let op = coloropenedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let cl = colorclosedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let fl = colorfaultNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);/\n \n /let stopped = (!isNullOrUndefined(colorstoppedNodeValue)) ? await window.IOB.getState(colorstoppedNodeValue) : {'val':false};\n let opened = (!isNullOrUndefined(coloropenedNodeValue)) ? await window.IOB.getState(coloropenedNodeValue) : {'val':false};\n let closed = (!isNullOrUndefined(colorclosedNodeValue)) ? await window.IOB.getState(colorclosedNodeValue) : {'val':false};\n let fault = (!isNullOrUndefined(colorfaultNodeValue)) ? await window.IOB.getState(colorfaultNodeValue) : {'val':false};/\n \n\n /let stopped = instance._initialPropertyCache.get(\"colorstopped\");\n let opened = instance._initialPropertyCache.get(\"coloropened\");\n let closed = instance._initialPropertyCache.get(\"colorclosed\");\n let fault = instance._initialPropertyCache.get(\"colorfault\");/\n /if(stopped.val==true)\n {\n fillyellow(instance);\n }\n if(opened.val==true)\n {\n fillgreen(instance);\n }\n if(closed.val==true)\n {\n fillred(instance);\n }\n\n if(fault.val==true)\n {\n fillorange(instance);\n }\n \n if(opened.val==true && closed.val==true)\n {\n fillorange(instance);\n }\n\n if(opened.val==true && closed.val==true && stopped.val==true)\n {\n fillorange(instance);\n }\n if(opened.val==false && closed.val==false && stopped.val==false && fault.val==false)\n {\n filldefault(instance);\n }/\n\n\n}\n\n/function check(instance)\n{\n let stopped = instance.colorstopped;\n let opened = instance.coloropened;\n let closed = instance.colorclosed;\n let fault = instance.colorfault;\n if(stopped==true)\n {\n fillyellow(instance);\n }\n if(opened==true)\n {\n fillgreen(instance);\n }\n if(closed==true)\n {\n fillred(instance);\n }\n\n if(fault==true)\n {\n fillorange(instance);\n }\n \n if(opened==true && closed==true)\n {\n fillorange(instance);\n }\n\n if(opened==true && closed==true && stopped==true)\n {\n fillorange(instance);\n }\n if(opened==false && closed==false && stopped==false && fault==false)\n {\n filldefault(instance);\n }\n\n\n}/\n\nexport function connectedCallback(instance) {\n\nlet instancem = Reflect.construct(BaseCustomControl, [], window['IobrokerWebuiCustomControlWebui_Valve']);\nlet p= { type: 'string'};\nlet newKey = 'salam'; \nlet p1= { type: 'screen'};\nlet newKey1 = 'screenSelect';\n\n\n\nif(instancem.constructor[webuiCustomControlSymbol].control.properties.hasOwnProperty(newKey)){\n}\nelse{\n instancem.constructor[webuiCustomControlSymbol].control.properties[newKey]= p;\n}\n\nif(instancem.constructor[webuiCustomControlSymbol].control.properties.hasOwnProperty(newKey1)){\n}\nelse{\ninstancem.constructor[webuiCustomControlSymbol].control.properties[newKey1]= p1;\n} \n instance._bindingsRefresh();\n}\n\n/*\n @param {BaseScreenViewerAndControl} instance\n/\nexport function disconnectedCallback(instance) {\n}\n\nexport function attributeChangedCallback (name, oldValue, newValue) {\n \n\tconsole.log('attribute changed', name, oldValue, newValue, this);\n}\n\n\n/let left_kmn = \"100px\";\nlet top_kmn = \"100px\";\nlet container_kmn = \"container_kmn_1\";\nlet width_kmn = \"250px\";\nlet height_kmn = \"2000px\";*/\n\n\n\nexport function openPopup(event, eventRaisingElement, shadowRoot, instance, parameters) {\n\n const container = instance._getDomElement('container_kmn_1');\n const popup = instance._getDomElement('mydialog2');\n const svg = container.querySelector('svg');\n\n // Remove pointer-events: none from SVG\n svg.style.pointerEvents = 'auto';\n\n event.stopPropagation();\n if (popup) { \n popup.open(event);\n popup.setTitle('Valve');\n //popup.setPosition(instance.popupLeft,instance.popupTop);\n popup.setSize(instance.popupWidth, instance.popupHeight);\n //popup.setAttribute('draggable','false');\n popup.setAttribute('visible', 'true');\n }\n}\n", "properties": {"colorstopped": {"type": "boolean"}, "coloropened": {"type": "boolean"}, "colorclosed": {"type": "boolean"}, "colorfault": {"type": "boolean"}, "popupWidth": {"type": "number", "default": "500"}, "popupHeight": {"type": "number", "default": "500"}, "popupLeft": {"type": "number", "default": "100"}, "popupTop": {"type": "number", "default": "100"}, "popupTitle": {"type": "string"}, "valveid": {"type": "string"}, "salam": {"type": "string"}, "screenSelect": {"type": "screen"}, "relativesignalpath": {"type": "string"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
1	+ {"html": "<div data-visibility-enabled=\"false\" data-visibility-condition=\"==\" data-visibility-action=\"disable\">\n <mypopup-dialog id=\"mydialog2\" isdraggable=\"true\" style=\"display:none;\">\n <webui-valve_faceplate bind-prop:valveid=\"??valveid\" bind-prop:relativesignalpath=\"??relativesignalpath\" data-visibility-enabled=\"false\" data-visibility-condition=\"==\" data-visibility-action=\"hide\" data-visibility-value=\"true\" bind-prop:opened=\"??coloropened\" bind-prop:closed=\"??colorclosed\" style=\"position:absolute;\"></webui-valve_faceplate>\n <!-- <iobroker-webui-screen-viewer id=\"iobwebscreenviewer1\" stretch screen-name=\"Webui_siyirtme\"></iobroker-webui-screen-viewer>-->\n </mypopup-dialog>\n <div id=\"container_kmn_1\" height=\"100%\" width=\"100%\">\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 102.744 112.5\" enable-background=\"new 0 0 102.744 112.5\" xml:space=\"preserve\" @click=\"openPopup\">\n <g id=\"Group_Pipe\">\n <g>\n <defs>\n <rect id=\"SVGID_1_\" x=\"47.403\" y=\"32.435\" width=\"7.485\" height=\"53.979\"></rect>\n </defs>\n <clipPath id=\"SVGID_2_\">\n <use xlink:href=\"#SVGID_1_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_3_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0396\" y1=\"112.459\" x2=\"0.9604\" y2=\"112.459\" gradientTransform=\"matrix(7.4849 0 0 -7.4849 47.6998 901.1704)\">\n <stop id=\"SVGID_3_1_\" offset=\"0\" style=\"stop-color:#5C5D60;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECED;\"></stop>\n <stop offset=\"0.57\" style=\"stop-color:#D9DADB;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#B1B3B6;\"></stop>\n <stop id=\"SVGID_3_5_\" offset=\"1\" style=\"stop-color:#5C5D60;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_1_\" x=\"47.403\" y=\"32.435\" clip-path=\"url(#SVGID_2_)\" fill=\"url(#SVGID_3_)\" width=\"7.485\" height=\"53.979\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_3_)\\\";\"}'></rect>\n </g>\n </g>\n <g id=\"Group_Port2\">\n <linearGradient id=\"SVGID_4_\" gradientUnits=\"userSpaceOnUse\" x1=\"25.917\" y1=\"112.9697\" x2=\"25.917\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_1_\" fill=\"url(#SVGID_4_)\" d=\"M0,60.393l51.834,26.097L0,112.97V60.393\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_4_)\\\";\"}'></path>\n </g>\n <g id=\"Group_Port1\">\n <linearGradient id=\"SVGID_5_\" gradientUnits=\"userSpaceOnUse\" x1=\"76.8262\" y1=\"112.9697\" x2=\"76.8262\" y2=\"60.3926\">\n <stop offset=\"0\" style=\"stop-color:#383838;\"></stop>\n <stop offset=\"0.45\" style=\"stop-color:#ECECEC;\"></stop>\n <stop offset=\"0.55\" style=\"stop-color:#D9D9D9;\"></stop>\n <stop offset=\"0.76\" style=\"stop-color:#A8A8A8;\"></stop>\n <stop offset=\"0.77\" style=\"stop-color:#A6A6A6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#383838;\"></stop>\n </linearGradient>\n <path id=\"SVGID_path_2_\" fill=\"url(#SVGID_5_)\" d=\"M102.744,60.393L50.909,86.489l51.835,26.48V60.393\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_5_)\\\";\"}'></path>\n </g>\n <g id=\"Group_Box\">\n <g>\n <defs>\n <path id=\"SVGID_6_\" d=\"M91.622,16.348l1.239,16.314l4.545,3.386c-0.073-1.252-0.01-30.573-0.01-32.629l-3.725-3.417 L91.622,16.348z\"></path>\n </defs>\n <clipPath id=\"SVGID_7_\">\n <use xlink:href=\"#SVGID_6_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_8_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.0288\" y1=\"112.4717\" x2=\"0.9712\" y2=\"112.4717\" gradientTransform=\"matrix(5.7842 0 0 5.7842 91.7858 -632.5346)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.36\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#939598;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_2_\" x=\"91.622\" y=\"0.002\" clip-path=\"url(#SVGID_7_)\" fill=\"url(#SVGID_8_)\" width=\"5.784\" height=\"36.046\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_8_)\\\";\"}'></rect>\n </g>\n <g>\n <defs>\n <path id=\"SVGID_9_\" d=\"M8.846,32.662l3.75,3.192c3.174-0.033,83.323,0.118,84.81,0.195l-3.734-3.965l-42.3-1.56L8.846,32.662z\"></path>\n </defs>\n <clipPath id=\"SVGID_10_\">\n <use xlink:href=\"#SVGID_9_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_11_\" gradientUnits=\"userSpaceOnUse\" x1=\"0.0205\" y1=\"112.5215\" x2=\"1.021\" y2=\"112.5215\" gradientTransform=\"matrix(0 5.5244 5.5244 0 -568.4863 30.4067)\">\n <stop offset=\"0\" style=\"stop-color:#D1D3D4;\"></stop>\n <stop offset=\"0.28\" style=\"stop-color:#BEC0C2;\"></stop>\n <stop offset=\"0.85\" style=\"stop-color:#8E9092;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#808285;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_3_\" x=\"8.846\" y=\"30.524\" clip-path=\"url(#SVGID_10_)\" fill=\"url(#SVGID_11_)\" width=\"88.56\" height=\"5.525\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_11_)\\\";\"}'></rect>\n </g>\n <g>\n <defs>\n <rect id=\"SVGID_12_\" x=\"8.846\" y=\"0.032\" width=\"84.826\" height=\"32.63\"></rect>\n </defs>\n <clipPath id=\"SVGID_13_\">\n <use xlink:href=\"#SVGID_12_\" overflow=\"visible\"></use>\n </clipPath>\n <linearGradient id=\"SVGID_14_\" gradientUnits=\"userSpaceOnUse\" x1=\"-0.002\" y1=\"112.498\" x2=\"0.998\" y2=\"112.498\" gradientTransform=\"matrix(-84.8257 0 0 84.8257 93.5221 -9526.4209)\">\n <stop offset=\"0\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.01\" style=\"stop-color:#E6E7E8;\"></stop>\n <stop offset=\"0.5\" style=\"stop-color:#D3D5D6;\"></stop>\n <stop offset=\"1\" style=\"stop-color:#BCBEC0;\"></stop>\n </linearGradient>\n <rect id=\"SVGID_rect_4_\" x=\"8.846\" y=\"0.032\" clip-path=\"url(#SVGID_13_)\" fill=\"url(#SVGID_14_)\" width=\"84.826\" height=\"32.63\" bind-css:fill='{\"signal\":\"??colorstopped;??coloropened;??colorclosed;??colorfault\",\"expression\":\"if(__0 &&__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__1 && __2)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0)\\r\\nreturn \\\"yellow\\\";\\r\\nif(__1)\\r\\nreturn \\\"#00ff00\\\";\\r\\nif(__2)\\r\\nreturn \\\"red\\\";\\r\\nif(__3)\\r\\nreturn \\\"orange\\\";\\r\\nif(__0 ==false && __1==false && __2==false && __3==false)\\r\\nreturn \\\"url(#SVGID_14_)\\\";\"}'></rect>\n </g>\n </g>\n </svg>\n </div>\n</div>\n", "style": ":host {\n background-color: transparent;\n}\n\n\n* {\n box-sizing: border-box;\n}\n", "script": "let protocol = window.location.protocol;\nlet ip = window.location.hostname;\nlet port = window.location.port;\n\nlet BaseCustomControl;\nlet webuiCustomControlSymbol;\nlet path =(`${protocol}//${ip}:${port}/mywebui/dist/frontend/runtime/CustomControls.js`);\nconst module = await import(path) \n .then(module => { \n BaseCustomControl = module.BaseCustomControl;\n webuiCustomControlSymbol=module.webuiCustomControlSymbol;\n }) \n .catch(err => { \n console.error('Error loading module:', err); \n }); \n\n//import (`${protocol}//${ip}:${port}/webui.0.data/config/additionalfiles/svg_popup.js`);\n\n\n\n \n\n/function fillgreen(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"#00ff00\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"#00ff00\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"#00ff00\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"#00ff00\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"#00ff00\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"#00ff00\";\n}\n\n\nfunction fillred(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"red\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"red\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"red\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"red\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"red\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"red\";\n}\n\n\nfunction fillyellow(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"yellow\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"yellow\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"yellow\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"yellow\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"yellow\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"yellow\";\n}\n\nfunction fillorange(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"orange\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"orange\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"orange\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"orange\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"orange\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"orange\";\n}\n\nfunction filldefault(instance)\n{\n let fillurl1 = instance._getDomElement('SVGID_rect_1_');\n fillurl1.style['fill']= \"url(#SVGID_3_)\";\n let fillurl2 = instance._getDomElement('SVGID_path_1_');\n fillurl2.style['fill']= \"url(#SVGID_4_)\";\n let fillurl3 = instance._getDomElement('SVGID_path_2_');\n fillurl3.style['fill']= \"url(#SVGID_5_)\";\n let fillurl4 = instance._getDomElement('SVGID_rect_2_');\n fillurl4.style['fill']= \"url(#SVGID_8_)\";\n let fillurl5 = instance._getDomElement('SVGID_rect_3_');\n fillurl5.style['fill']= \"url(#SVGID_11_)\";\n let fillurl6 = instance._getDomElement('SVGID_rect_4_');\n fillurl6.style['fill']= \"url(#SVGID_14_)\";\n}/\n let valveid;\n // this.add(colormy,\"red\");\n\n/function isNullOrUndefined(value) {\n return value === undefined \|\| value === null;\n}\n\n// Function to handle state changes\nfunction handleStateChange(id, state,instance) {\n checkstartup(instance);\n}/\n\nexport async function init(instance) {\n \n /let myiframe = instance._getDomElement('myiframe1');\n myiframe.src=`/webui/runtime.html?use_id=${instance.valveid}#screenName=${instance.screenSelect}`;\n myiframe.style.width='100%';\n myiframe.style.height='100%';/\n\n /let colorstoppedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorstopped\"]);\n let coloropenedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:coloropened\"]);\n let colorclosedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorclosed\"]);\n let colorfaultNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorfault\"]);\n let st = (!isNullOrUndefined(colorstoppedNodeValue)) ? window.IOB.subscribeState(colorstoppedNodeValue,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let op = (!isNullOrUndefined(coloropenedNodeValue)) ? window.IOB.subscribeState(coloropenedNodeValue,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let cl = (!isNullOrUndefined(colorclosedNodeValue)) ? window.IOB.subscribeState(colorclosedNodeValue,(id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n let fl = (!isNullOrUndefined(colorfaultNodeValue)) ? window.IOB.subscribeState(colorfaultNodeValue, (id, state)=> handleStateChange(id,state,instance)) : {'val':false};\n /\n \n\n //checkstartup(instance);\n /instance._assignEvent('colorstopped-changed', (ev) => checkstartup(instance));\n instance._assignEvent('coloropened-changed', (ev) => checkstartup(instance));\n instance._assignEvent('colorclosed-changed', (ev) => checkstartup(instance));\n instance._assignEvent('colorfault-changed', (ev) => checkstartup(instance));/\n \n \n /let screenviewer1 = instance._getDomElement('iobwebscreenviewer1');\n if (isNullOrUndefined(instance.screenSelect)) {\n //screenviewer1.screenName='';\n } else {\n screenviewer1.screenName=instance.screenSelect;\n /let stringify =JSON.stringify(instance.parameter);\n screenviewer1.setAttribute(\"Parameters\", stringify);/\n //}/\n\n /let vbv = instance.getAttribute(\"inputID\");\n instance.setAttribute(\"Kamran\", 123456);\n let vbv1 = instance.getAttribute(\"Kamran\");/\n //instance._bindingsRefresh?.();\n}\n\n/function addvalveid()\n{\n let myscreenviewer = instance._getDomElement('iobwebscreenviewer1');\n myscreenviewer.valveid=instance.valveid;\n}/\n\n/function checkisnullorumdefined(value)\n{\n if(!isNullOrUndefined(value))\n return value.nodeValue;\n}/\nasync function checkstartup(instance)\n{\n //\n /let result = 0;\n let colorstoppedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorstopped\"]);\n let coloropenedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:coloropened\"]);\n let colorclosedNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorclosed\"]);\n let colorfaultNodeValue =checkisnullorumdefined(instance.attributes[\"bind-prop:colorfault\"]);/\n /let st = colorstoppedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let op = coloropenedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let cl = colorclosedNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);\n let fl = colorfaultNodeValue.replace(/\\s?\\{[^}]+\\}/g, valveid.val);/\n \n /let stopped = (!isNullOrUndefined(colorstoppedNodeValue)) ? await window.IOB.getState(colorstoppedNodeValue) : {'val':false};\n let opened = (!isNullOrUndefined(coloropenedNodeValue)) ? await window.IOB.getState(coloropenedNodeValue) : {'val':false};\n let closed = (!isNullOrUndefined(colorclosedNodeValue)) ? await window.IOB.getState(colorclosedNodeValue) : {'val':false};\n let fault = (!isNullOrUndefined(colorfaultNodeValue)) ? await window.IOB.getState(colorfaultNodeValue) : {'val':false};/\n \n\n /let stopped = instance._initialPropertyCache.get(\"colorstopped\");\n let opened = instance._initialPropertyCache.get(\"coloropened\");\n let closed = instance._initialPropertyCache.get(\"colorclosed\");\n let fault = instance._initialPropertyCache.get(\"colorfault\");/\n /if(stopped.val==true)\n {\n fillyellow(instance);\n }\n if(opened.val==true)\n {\n fillgreen(instance);\n }\n if(closed.val==true)\n {\n fillred(instance);\n }\n\n if(fault.val==true)\n {\n fillorange(instance);\n }\n \n if(opened.val==true && closed.val==true)\n {\n fillorange(instance);\n }\n\n if(opened.val==true && closed.val==true && stopped.val==true)\n {\n fillorange(instance);\n }\n if(opened.val==false && closed.val==false && stopped.val==false && fault.val==false)\n {\n filldefault(instance);\n }/\n\n\n}\n\n/function check(instance)\n{\n let stopped = instance.colorstopped;\n let opened = instance.coloropened;\n let closed = instance.colorclosed;\n let fault = instance.colorfault;\n if(stopped==true)\n {\n fillyellow(instance);\n }\n if(opened==true)\n {\n fillgreen(instance);\n }\n if(closed==true)\n {\n fillred(instance);\n }\n\n if(fault==true)\n {\n fillorange(instance);\n }\n \n if(opened==true && closed==true)\n {\n fillorange(instance);\n }\n\n if(opened==true && closed==true && stopped==true)\n {\n fillorange(instance);\n }\n if(opened==false && closed==false && stopped==false && fault==false)\n {\n filldefault(instance);\n }\n\n\n}/\n\nexport function connectedCallback(instance) {\n\nlet instancem = Reflect.construct(BaseCustomControl, [], window['IobrokerWebuiCustomControlWebui_Valve']);\nlet p= { type: 'string'};\nlet newKey = 'salam'; \nlet p1= { type: 'screen'};\nlet newKey1 = 'screenSelect';\n\n\n\nif(instancem.constructor[webuiCustomControlSymbol].control.properties.hasOwnProperty(newKey)){\n}\nelse{\n instancem.constructor[webuiCustomControlSymbol].control.properties[newKey]= p;\n}\n\nif(instancem.constructor[webuiCustomControlSymbol].control.properties.hasOwnProperty(newKey1)){\n}\nelse{\ninstancem.constructor[webuiCustomControlSymbol].control.properties[newKey1]= p1;\n} \n instance._bindingsRefresh?.();\n}\n\n/*\n @param {BaseScreenViewerAndControl} instance\n/\nexport function disconnectedCallback(instance) {\n}\n\nexport function attributeChangedCallback (name, oldValue, newValue) {\n \n\tconsole.log('attribute changed', name, oldValue, newValue, this);\n}\n\n\n/let left_kmn = \"100px\";\nlet top_kmn = \"100px\";\nlet container_kmn = \"container_kmn_1\";\nlet width_kmn = \"250px\";\nlet height_kmn = \"2000px\";*/\n\n\n\nexport function openPopup(event, eventRaisingElement, shadowRoot, instance, parameters) {\n\n const container = instance._getDomElement('container_kmn_1');\n const popup = instance._getDomElement('mydialog2');\n const svg = container.querySelector('svg');\n\n // Remove pointer-events: none from SVG\n svg.style.pointerEvents = 'auto';\n\n event.stopPropagation();\n if (popup) { \n popup.open(event);\n popup.setTitle('Valve');\n //popup.setPosition(instance.popupLeft,instance.popupTop);\n popup.setSize(instance.popupWidth, instance.popupHeight);\n //popup.setAttribute('draggable','false');\n popup.setAttribute('visible', 'true');\n }\n}\n", "properties": {"colorstopped": {"type": "boolean"}, "coloropened": {"type": "boolean"}, "colorclosed": {"type": "boolean"}, "colorfault": {"type": "boolean"}, "popupWidth": {"type": "number", "default": "500"}, "popupHeight": {"type": "number", "default": "500"}, "popupLeft": {"type": "number", "default": "100"}, "popupTop": {"type": "number", "default": "100"}, "popupTitle": {"type": "string"}, "valveid": {"type": "string"}, "salam": {"type": "string"}, "screenSelect": {"type": "screen"}, "relativesignalpath": {"type": "string"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

package/default-controls/controls/alarms/alarm-history-viewer.control ADDED Viewed

@@ -0,0 +1 @@

+ {"properties": {"adapterinstance": {"type": "string", "default": "myalarm.0"}, "defaultdays": {"type": "number", "default": 7}, "showfilter": {"type": "enum", "default": "true", "values": ["true", "false"]}, "maxrows": {"type": "number", "default": 1000}}, "settings": {"width": "1000px", "height": "420px"}, "html": "<div id=\"wrap\" class=\"av\"><div class=\"av-bar\"><span class=\"av-title\"><t-t>alarm.historytitle</t-t></span><span class=\"av-count\">[[this.rows.length]]</span><span class=\"av-grow\"></span><div class=\"av-hist\"><input id=\"from\" type=\"datetime-local\" class=\"av-inp\"><span class=\"av-dash\">→</span><input id=\"to\" type=\"datetime-local\" class=\"av-inp\"><button class=\"av-btn av-accent\" @click=\"[[this._loadHistory()]]\"><t-t>alarm.Getalarms</t-t></button></div><button class=\"av-btn\" @click=\"[[this._exportCsv()]]\"><t-t>alarm.export</t-t></button></div><div class=\"av-scroll\"><div class=\"av-grid av-head\"><span><t-t>alarm.id</t-t></span><span><t-t>alarm.tagname</t-t></span><span><t-t>alarm.type</t-t></span><span><t-t>alarm.time</t-t></span><span><t-t>alarm.description</t-t></span><span><t-t>alarm.limitvalue</t-t></span><span><t-t>alarm.limitmsg</t-t></span><span><t-t>alarm.highlow</t-t></span><span><t-t>alarm.value</t-t></span><span><t-t>alarm.ack</t-t></span><span><t-t>alarm.acktime</t-t></span></div><div class=\"av-grid av-filters\" css:display=\"[[this.showfilter=='false'?'none':'grid']]\"><input class=\"av-f\" data-f=\"id\"><input class=\"av-f\" data-f=\"Tagname\"><input class=\"av-f\" data-f=\"Alarmtype\"><input class=\"av-f\" data-f=\"alarmtime\"><input class=\"av-f\" data-f=\"Description\"><input class=\"av-f\" data-f=\"LimitValue\"><input class=\"av-f\" data-f=\"Limitmessage\"><input class=\"av-f\" data-f=\"HIGH_LOW\"><input class=\"av-f\" data-f=\"AlarmValue\"><input class=\"av-f\" data-f=\"Acknowledge\"><input class=\"av-f\" data-f=\"acknowledgetime\"></div><div class=\"av-body\"><template repeat:row=\"[[this.rows]]\"><div class=\"av-grid av-row\" class:talarm=\"[[row.Alarmtype=='alarm']]\" class:twarning=\"[[row.Alarmtype=='warning']]\" class:tinfo=\"[[row.Alarmtype=='info']]\"><span title=\"[[row.id]]\">[[row.id]]</span><span title=\"[[row.Tagname]]\">[[row.Tagname]]</span><span title=\"[[row.Alarmtype]]\">[[row.Alarmtype]]</span><span title=\"[[row.alarmtime]]\">[[row.alarmtime]]</span><span title=\"[[row.Description]]\">[[row.Description]]</span><span title=\"[[row.LimitValue]]\">[[row.LimitValue]]</span><span title=\"[[row.Limitmessage]]\">[[row.Limitmessage]]</span><span title=\"[[row.HIGH_LOW]]\">[[row.HIGH_LOW]]</span><span title=\"[[row.AlarmValue]]\">[[row.AlarmValue]]</span><span>[[String(row.Acknowledge)=='true'||row.Acknowledge=='ack'?'\\u2713':'\\u2014']]</span><span title=\"[[row.acknowledgetime]]\">[[row.acknowledgetime]]</span></div></template><div class=\"av-empty\" css:display=\"[[this.rows.length?'none':'block']]\"><t-t>alarm.noalarms</t-t></div></div></div></div>", "style": ":host{display:block;width:100%;height:100%;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;}.av{display:flex;flex-direction:column;height:100%;box-sizing:border-box;border:1px solid var(--ui-border,#3b4250);border-radius:10px;overflow:hidden;background:var(--ui-surface,#252b38);color:var(--ui-text,#e2e6ec);-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);}.av-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;flex:none;flex-wrap:wrap;border-bottom:1px solid var(--ui-border,#3b4250);background:var(--ui-surface-2,#2f3545);}.av-title{font-size:14px;font-weight:700;}.av-grow{flex:1;}.av-count{background:color-mix(in srgb,var(--accent,#2680eb) 30%,transparent);color:var(--ui-text,#e2e6ec);font-weight:700;border-radius:999px;padding:1px 8px;font-size:11px;}.av-hist{display:flex;align-items:center;gap:6px;}.av-dash{color:var(--ui-dim,#9aa3b0);}.av-inp{background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:5px;padding:3px 6px;font-size:11px;color-scheme:inherit;}.av-btn{appearance:none;cursor:pointer;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--ui-text,#fff) 8%,transparent);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);}.av-btn:hover{background:color-mix(in srgb,var(--ui-text,#fff) 14%,transparent);}.av-accent{background:color-mix(in srgb,var(--accent,#2680eb) 25%,transparent);border-color:color-mix(in srgb,var(--accent,#2680eb) 55%,transparent);}.av-scroll{flex:1;overflow:auto;min-height:0;}.av-grid{display:grid;grid-template-columns:52px 120px 86px 150px minmax(140px,1fr) 86px 130px 80px 90px 58px 150px;gap:0;align-items:center;min-width:1150px;}.av-grid>*{padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.av-head{position:sticky;top:0;z-index:2;background:var(--ui-surface-2,#2f3545);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ui-dim,#9aa3b0);border-bottom:1px solid var(--ui-border,#3b4250);}.av-filters{position:sticky;top:26px;z-index:2;background:var(--ui-surface,#252b38);border-bottom:1px solid var(--ui-border,#3b4250);}.av-f{width:100%;box-sizing:border-box;background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:4px;padding:2px 5px;font-size:11px;margin:3px 4px;}.av-row{border-bottom:1px solid color-mix(in srgb,var(--ui-border,#3b4250) 55%,transparent);}.av-row:hover{background:color-mix(in srgb,var(--ui-text,#fff) 6%,transparent);}.av-row.talarm{background:color-mix(in srgb,var(--ui-error,#ef4d5e) 16%,transparent);}.av-row.twarning{background:color-mix(in srgb,var(--ui-warn,#f6b73c) 14%,transparent);}.av-row.tinfo{background:color-mix(in srgb,var(--ui-info,#2b8bff) 12%,transparent);}.av-empty{text-align:center;padding:26px;color:var(--ui-dim,#9aa3b0);}", "script": "function num(v,d){v=parseInt(v);return isNaN(v)?d:v;}\nfunction pad(n){return String(n).padStart(2,'0');}\nfunction fmtAdapter(d){ // adapter getlog expects 'YYYY-MM-DD HH:mm:ss'\n return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+' '+pad(d.getHours())+':'+pad(d.getMinutes())+':'+pad(d.getSeconds());\n}\nfunction fmtLocal(d){ // datetime-local input value\n return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+'T'+pad(d.getHours())+':'+pad(d.getMinutes());\n}\nfunction applyFilters(instance){\n let rows=instance._raw||[];\n const f=instance._filters||{};\n for(const k in f){ const v=String(f[k]||'').toLowerCase(); if(!v) continue;\n rows=rows.filter(r=>String(r[k]??'').toLowerCase().includes(v)); }\n instance.rows=rows.slice(0,num(instance.maxrows,1000));\n try{ instance._bindingsRefresh?.(); }catch(e){}\n}\nfunction setRows(instance,arr){ instance._raw=Array.isArray(arr)?arr:[]; applyFilters(instance); }\nfunction inst(instance){ return instance.adapterinstance||'myalarm.0'; }\nfunction parseCb(instance,cb){\n let d=(cb&&cb.result!==undefined)?cb.result:cb;\n if(typeof d==='string'){ try{ d=JSON.parse(d); }catch(e){} }\n setRows(instance, Array.isArray(d)?d:(d&&d.rows)||[]);\n}\nexport function init(instance){\n // designer control-editor runs scripts with a plain design-surface instance that has\n // no control APIs (_getDomElement/_bindingsRefresh) - do nothing there\n if(!instance || typeof instance._getDomElement!=='function') return;\n instance.rows=[]; instance._filters={}; instance._raw=[];\n instance._loadHistory=()=>{\n const fEl=instance._getDomElement('from'), tEl=instance._getDomElement('to');\n const f=fEl&&fEl.value?fmtAdapter(new Date(fEl.value)):'';\n const t=tEl&&tEl.value?fmtAdapter(new Date(tEl.value)):'';\n try{ window.IOB.connection._socket.emit('sendTo',inst(instance),'getlog',{startdate:f,enddate:t},(cb)=>parseCb(instance,cb)); }\n catch(e){ console.warn('[alarm-history] getlog failed',e); }\n };\n instance._exportCsv=()=>{\n const cols=['id','Tagname','Alarmtype','alarmtime','Description','LimitValue','Limitmessage','HIGH_LOW','AlarmValue','Acknowledge','acknowledgetime'];\n const esc=(v)=>{ v=String(v??''); return (v.includes(',')||v.includes('\"')||v.includes('\\n'))?'\"'+v.replaceAll('\"','\"\"')+'\"':v; };\n const lines=[cols.join(',')];\n for(const r of instance.rows) lines.push(cols.map(c=>esc(r[c])).join(','));\n const blob=new Blob([''+lines.join('\\r\\n')],{type:'text/csv;charset=utf-8'});\n const a=document.createElement('a');\n a.href=URL.createObjectURL(blob); a.download='alarm-history.csv'; a.click();\n setTimeout(()=>URL.revokeObjectURL(a.href),2000);\n };\n for(const inp of instance._getDomElements('.av-f')){\n inp.addEventListener('input',()=>{ instance._filters[inp.dataset.f]=inp.value; applyFilters(instance); });\n }\n // prefill range: last `defaultdays` days, then load immediately (like the vis widget)\n const days=num(instance.defaultdays,7);\n const end=new Date(), start=new Date(Date.now()-days*86400000);\n const fEl=instance._getDomElement('from'), tEl=instance._getDomElement('to');\n if(fEl) fEl.value=fmtLocal(start);\n if(tEl) tEl.value=fmtLocal(end);\n // auto-reload when either date changes\n for(const el of [fEl,tEl]) if(el) el.addEventListener('change',()=>instance._loadHistory());\n instance._loadHistory();\n}", "translations": {"az": {"alarm": {"id": "No", "time": "Alarm Vaxtı", "type": "Alarm Tipi", "tagname": "Teq Adı", "description": "Açıqlama", "highlow": "Tip", "limitvalue": "Limit Dəyəri", "limitmsg": "Limit Mesajı", "value": "Alarm Dəyəri", "ack": "Təsdiq", "acktime": "Təsdiq Vaxtı", "ackbtn": "Təsdiqlə", "yes": "Bəli", "no": "Xeyr", "Getalarms": "Alarmları Gətir", "DownloadXLSX": "XLSX Yüklə", "DownloadCSV": "CSV Yüklə", "DownloadPDF": "PDF Yüklə", "selectdate": "Tarix aralığı seçin", "header": "Aktiv Alarmlar", "ackall": "Hamısını Təsdiqlə", "clear": "Təsdiqlənənləri Sil", "mute": "Səsi Kəs", "unmute": "Səsi Aç", "historytitle": "Alarm Tarixçəsi", "export": "CSV yüklə", "noalarms": "Alarm yoxdur"}}, "en": {"alarm": {"id": "ID", "time": "Alarm Time", "type": "Alarm Type", "tagname": "Tag Name", "description": "Description", "highlow": "Type", "limitvalue": "Limit Value", "limitmsg": "Limit Message", "value": "Alarm Value", "ack": "Acknowledge", "acktime": "Ack Time", "ackbtn": "ACK", "yes": "Yes", "no": "No", "Getalarms": "Get Alarms", "DownloadXLSX": "Download XLSX", "DownloadCSV": "Download CSV", "DownloadPDF": "Download PDF", "selectdate": "Select date range", "header": "Active Alarms", "ackall": "Acknowledge All", "clear": "Clear Acknowledged", "mute": "Mute Sound", "unmute": "Unmute Sound", "historytitle": "Alarm History", "export": "Export CSV", "noalarms": "No alarms"}}, "ru": {"alarm": {"id": "No", "time": "Время аларма", "type": "Тип аларма", "tagname": "Тег", "description": "Описание", "highlow": "Тип", "limitvalue": "Предел", "limitmsg": "Сообщение", "value": "Значение", "ack": "Квитирование", "acktime": "Время квит.", "ackbtn": "Квит.", "yes": "Да", "no": "Нет", "Getalarms": "Получить аларма", "DownloadXLSX": "Скачать XLSX", "DownloadCSV": "Скачать CSV", "DownloadPDF": "Скачать PDF", "selectdate": "Выберите дату", "header": "Активные аларма", "ackall": "Квит. все", "clear": "Очистить", "mute": "Отключить звук", "unmute": "Включить звук", "historytitle": "История алармов", "export": "Скачать CSV", "noalarms": "Нет алармов"}}, "de": {"alarm": {"id": "Nr", "time": "Alarmzeit", "type": "Alarmtyp", "tagname": "Tag-Name", "description": "Beschreibung", "highlow": "Typ", "limitvalue": "Grenzwert", "limitmsg": "Grenznachricht", "value": "Alarmwert", "ack": "Quittierung", "acktime": "Quitt.-Zeit", "ackbtn": "Quitt.", "yes": "Ja", "no": "Nein", "Getalarms": "Alarme abrufen", "DownloadXLSX": "XLSX laden", "DownloadCSV": "CSV laden", "DownloadPDF": "PDF laden", "selectdate": "Datumsbereich wählen", "header": "Aktive Alarme", "ackall": "Alle quittieren", "clear": "Bestätigte löschen", "mute": "Ton stumm", "unmute": "Ton ein", "historytitle": "Alarmhistorie", "export": "CSV exportieren", "noalarms": "Keine Alarme"}}, "tr": {"alarm": {"id": "No", "time": "Alarm Zamanı", "type": "Alarm Tipi", "tagname": "Etiket Adı", "description": "Açıklama", "highlow": "Tip", "limitvalue": "Limit Değeri", "limitmsg": "Limit Mesajı", "value": "Alarm Değeri", "ack": "Onay", "acktime": "Onay Zamanı", "ackbtn": "Onayla", "yes": "Evet", "no": "Hayır", "Getalarms": "Alarmları Getir", "DownloadXLSX": "XLSX İndir", "DownloadCSV": "CSV İndir", "DownloadPDF": "PDF İndir", "selectdate": "Tarih Aralığı Seçin", "header": "Aktif Alarmlar", "ackall": "Hepsini Onayla", "clear": "Onaylanları Sil", "mute": "Sesi Kapat", "unmute": "Sesi Aç", "historytitle": "Alarm Geçmişi", "export": "CSV indir", "noalarms": "Alarm yok"}}}}

package/default-controls/controls/alarms/alarm-viewer.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"properties": {"jsonsignal": {"type": "signal", "default": "myalarm.0.info.AlarmJson"}, "acksignal": {"type": "signal", "default": "myalarm.0.info.AcknowledgeId"}, "adapterinstance": {"type": "string", "default": "myalarm.0"}, "mode": {"type": "enum", "default": "live", "values": ["live", "history"]}, "showfilter": {"type": "enum", "default": "true", "values": ["true", "false"]}, "soundenabled": {"type": "enum", "default": "false", "values": ["true", "false"]}, "soundurl": {"type": "string", "default": ""}, "maxrows": {"type": "number", "default": 500}}, "settings": {"width": "1000px", "height": "420px"}, "html": "<div id=\"wrap\" class=\"av\"><audio id=\"snd\" loop style=\"display:none\"></audio><div class=\"av-bar\"><span class=\"av-title\"><t-t>alarm.title</t-t></span><span class=\"av-count\" css:display=\"[[this.unacked>0?'':'none']]\">[[this.unacked]]</span><span class=\"av-grow\"></span><div class=\"av-hist\" css:display=\"[[this.mode=='history'?'flex':'none']]\"><input id=\"from\" type=\"datetime-local\" class=\"av-inp\"><input id=\"to\" type=\"datetime-local\" class=\"av-inp\"><button class=\"av-btn\" @click=\"[[this._loadHistory()]]\"><t-t>alarm.Getalarms</t-t></button></div><button class=\"av-btn\" @click=\"[[this._exportCsv()]]\"><t-t>alarm.export</t-t></button><button class=\"av-btn av-accent\" css:display=\"[[this.mode=='live'?'':'none']]\" @click=\"[[this._ackAll()]]\"><t-t>alarm.ackall</t-t></button></div><div class=\"av-scroll\"><div class=\"av-grid av-head\"><span><t-t>alarm.id</t-t></span><span><t-t>alarm.tagname</t-t></span><span><t-t>alarm.type</t-t></span><span><t-t>alarm.time</t-t></span><span><t-t>alarm.description</t-t></span><span><t-t>alarm.limitvalue</t-t></span><span><t-t>alarm.limitmsg</t-t></span><span><t-t>alarm.highlow</t-t></span><span><t-t>alarm.value</t-t></span><span><t-t>alarm.ack</t-t></span><span><t-t>alarm.acktime</t-t></span><span><t-t>alarm.ackbtn</t-t></span></div><div class=\"av-grid av-filters\" css:display=\"[[this.showfilter=='false'?'none':'grid']]\"><input class=\"av-f\" data-f=\"id\"><input class=\"av-f\" data-f=\"Tagname\"><input class=\"av-f\" data-f=\"Alarmtype\"><input class=\"av-f\" data-f=\"alarmtime\"><input class=\"av-f\" data-f=\"Description\"><input class=\"av-f\" data-f=\"LimitValue\"><input class=\"av-f\" data-f=\"Limitmessage\"><input class=\"av-f\" data-f=\"HIGH_LOW\"><input class=\"av-f\" data-f=\"AlarmValue\"><input class=\"av-f\" data-f=\"Acknowledge\"><input class=\"av-f\" data-f=\"acknowledgetime\"><span></span></div><div class=\"av-body\"><template repeat:row=\"[[this.rows]]\"><div class=\"av-grid av-row\" class:unack=\"[[String(row.Acknowledge)!='true']]\" class:talarm=\"[[row.Alarmtype=='alarm']]\" class:twarning=\"[[row.Alarmtype=='warning']]\" class:tinfo=\"[[row.Alarmtype=='info']]\"><span title=\"[[row.id]]\">[[row.id]]</span><span title=\"[[row.Tagname]]\">[[row.Tagname]]</span><span title=\"[[row.Alarmtype]]\">[[row.Alarmtype]]</span><span title=\"[[row.alarmtime]]\">[[row.alarmtime]]</span><span title=\"[[row.Description]]\">[[row.Description]]</span><span title=\"[[row.LimitValue]]\">[[row.LimitValue]]</span><span title=\"[[row.Limitmessage]]\">[[row.Limitmessage]]</span><span title=\"[[row.HIGH_LOW]]\">[[row.HIGH_LOW]]</span><span title=\"[[row.AlarmValue]]\">[[row.AlarmValue]]</span><span>[[String(row.Acknowledge)=='true'?'\\u2713':'\\u2014']]</span><span title=\"[[row.acknowledgetime]]\">[[row.acknowledgetime]]</span><button class=\"av-ack\" @click=\"[[this._ack(row)]]\" css:visibility=\"[[String(row.Acknowledge)=='true'?'hidden':'visible']]\"><t-t>alarm.ackbtn</t-t></button></div></template><div class=\"av-empty\" css:display=\"[[this.rows.length?'none':'block']]\"><t-t>alarm.noalarms</t-t></div></div></div></div>", "style": ":host{display:block;width:100%;height:100%;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;}.av{display:flex;flex-direction:column;height:100%;box-sizing:border-box;border:1px solid var(--ui-border,#3b4250);border-radius:10px;overflow:hidden;background:var(--ui-surface,#252b38);color:var(--ui-text,#e2e6ec);-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);}.av-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;flex:none;border-bottom:1px solid var(--ui-border,#3b4250);background:var(--ui-surface-2,#2f3545);}.av-title{font-size:14px;font-weight:700;}.av-grow{flex:1;}.av-count{background:var(--ui-error,#ef4d5e);color:#fff;font-weight:700;border-radius:999px;padding:1px 8px;font-size:11px;}.av-hist{display:flex;align-items:center;gap:6px;}.av-inp{background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:5px;padding:3px 6px;font-size:11px;color-scheme:inherit;}.av-btn{appearance:none;cursor:pointer;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--ui-text,#fff) 8%,transparent);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);}.av-btn:hover{background:color-mix(in srgb,var(--ui-text,#fff) 14%,transparent);}.av-accent{background:color-mix(in srgb,var(--accent,#2680eb) 25%,transparent);border-color:color-mix(in srgb,var(--accent,#2680eb) 55%,transparent);}.av-scroll{flex:1;overflow:auto;min-height:0;}.av-grid{display:grid;grid-template-columns:52px 120px 86px 150px minmax(140px,1fr) 86px 130px 80px 90px 58px 150px 74px;gap:0;align-items:center;min-width:1200px;}.av-grid>*{padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.av-head{position:sticky;top:0;z-index:2;background:var(--ui-surface-2,#2f3545);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ui-dim,#9aa3b0);border-bottom:1px solid var(--ui-border,#3b4250);}.av-filters{position:sticky;top:26px;z-index:2;background:var(--ui-surface,#252b38);border-bottom:1px solid var(--ui-border,#3b4250);}.av-f{width:100%;box-sizing:border-box;background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:4px;padding:2px 5px;font-size:11px;margin:3px 4px;}.av-row{border-bottom:1px solid color-mix(in srgb,var(--ui-border,#3b4250) 55%,transparent);}.av-row:hover{background:color-mix(in srgb,var(--ui-text,#fff) 6%,transparent);}.av-row.talarm{background:color-mix(in srgb,var(--ui-error,#ef4d5e) 16%,transparent);}.av-row.twarning{background:color-mix(in srgb,var(--ui-warn,#f6b73c) 14%,transparent);}.av-row.tinfo{background:color-mix(in srgb,var(--ui-info,#2b8bff) 12%,transparent);}.av-row.unack{font-weight:700;}.av-row.unack.talarm{background:color-mix(in srgb,var(--ui-error,#ef4d5e) 30%,transparent);}.av-row.unack.twarning{background:color-mix(in srgb,var(--ui-warn,#f6b73c) 26%,transparent);}.av-ack{appearance:none;cursor:pointer;margin:2px 4px;padding:2px 8px;font-size:11px;font-weight:700;border-radius:5px;background:color-mix(in srgb,var(--ui-ok,#37d67a) 25%,transparent);color:var(--ui-text,#e2e6ec);border:1px solid color-mix(in srgb,var(--ui-ok,#37d67a) 55%,transparent);}.av-ack:hover{background:color-mix(in srgb,var(--ui-ok,#37d67a) 40%,transparent);}.av-empty{text-align:center;padding:26px;color:var(--ui-dim,#9aa3b0);}", "script": "function num(v,d){v=parseInt(v);return isNaN(v)?d:v;}\nfunction updateSound(instance){\n const a=instance._getDomElement('snd');\n if(!a) return;\n const on = instance.soundenabled==='true' && instance.unacked>0 && instance.soundurl;\n if(on){ if(a.getAttribute('src')!==instance.soundurl) a.setAttribute('src',instance.soundurl);\n a.play().catch(()=>{}); }\n else { a.pause(); }\n}\nfunction applyFilters(instance){\n let rows=instance._raw\|\|[];\n const f=instance._filters\|\|{};\n for(const k in f){ const v=String(f[k]\|\|'').toLowerCase(); if(!v) continue;\n rows=rows.filter(r=>String(r[k]??'').toLowerCase().includes(v)); }\n instance.unacked=(instance._raw\|\|[]).filter(r=>String(r.Acknowledge)!=='true').length;\n instance.rows=rows.slice(0,num(instance.maxrows,500));\n try{ instance._bindingsRefresh(); }catch(e){}\n updateSound(instance);\n}\nfunction setRows(instance,arr){ instance._raw=Array.isArray(arr)?arr:[]; applyFilters(instance); }\nfunction parseVal(instance,val){\n let arr=[]; try{ arr=JSON.parse(val\|\|'[]'); }catch(e){ arr=[]; }\n setRows(instance,arr);\n}\nfunction inst(instance){ return instance.adapterinstance\|\|'myalarm.0'; }\nexport function init(instance){\n instance.rows=[]; instance._filters={}; instance.unacked=0; instance._raw=[];\n instance._ack=(row)=>{\n if(!row\|\|row.id==null) return;\n try{ window.IOB.connection._socket.emit('sendTo',inst(instance),'ackAlarm',{alarmId:row.id},()=>{}); }catch(e){}\n if(instance.acksignal){ try{ window.IOB.setState(instance.acksignal,{val:row.id}); }catch(e){} }\n };\n instance._ackAll=()=>{ for(const r of (instance._raw\|\|[])) if(String(r.Acknowledge)!=='true') instance._ack(r); };\n instance._loadHistory=()=>{\n const f=instance._getDomElement('from')?.value, t=instance._getDomElement('to')?.value;\n try{ window.IOB.connection._socket.emit('sendTo',inst(instance),'getlog',{startdate:f,enddate:t},(cb)=>{\n let d=(cb&&cb.result!==undefined)?cb.result:cb;\n if(typeof d==='string'){ try{ d=JSON.parse(d); }catch(e){} }\n setRows(instance, Array.isArray(d)?d:(d&&d.rows)\|\|[]);\n }); }catch(e){ console.warn('[alarm-viewer] getlog failed',e); }\n };\n instance._exportCsv=()=>{\n const cols=['id','Tagname','Alarmtype','alarmtime','Description','LimitValue','Limitmessage','HIGH_LOW','AlarmValue','Acknowledge','acknowledgetime'];\n const esc=(v)=>{ v=String(v??''); return (v.includes(',')\|\|v.includes('\"')\|\|v.includes('\\n'))?'\"'+v.replaceAll('\"','\"\"')+'\"':v; };\n const lines=[cols.join(',')];\n for(const r of instance.rows) lines.push(cols.map(c=>esc(r[c])).join(','));\n const blob=new Blob([''+lines.join('\\r\\n')],{type:'text/csv;charset=utf-8'});\n const a=document.createElement('a');\n a.href=URL.createObjectURL(blob); a.download='alarms.csv'; a.click();\n setTimeout(()=>URL.revokeObjectURL(a.href),2000);\n };\n for(const inp of instance._getDomElements('.av-f')){\n inp.addEventListener('input',()=>{ instance._filters[inp.dataset.f]=inp.value; applyFilters(instance); });\n }\n const sig=instance.jsonsignal\|\|'myalarm.0.info.AlarmJson';\n try{ window.IOB.getState(sig).then(s=>parseVal(instance,s&&s.val)).catch(()=>{}); }catch(e){}\n instance.__avCb=(_id,s)=>parseVal(instance,s&&s.val);\n if((instance.mode\|\|'live')==='live'){ try{ window.IOB.subscribeState(sig,instance.__avCb); }catch(e){} }\n}\nexport function disconnectedCallback(instance){\n try{ window.IOB.unsubscribeState(instance.jsonsignal\|\|'myalarm.0.info.AlarmJson',instance.__avCb); }catch(e){}\n try{ instance._getDomElement('snd')?.pause(); }catch(e){}\n}", "translations": {"az": {"alarm": {"id": "No", "time": "Alarm Vaxtı", "type": "Alarm Tipi", "tagname": "Teq Adı", "description": "Açıqlama", "highlow": "Tip", "limitvalue": "Limit Dəyəri", "limitmsg": "Limit Mesajı", "value": "Alarm Dəyəri", "ack": "Təsdiq", "acktime": "Təsdiq Vaxtı", "ackbtn": "Təsdiqlə", "yes": "Bəli", "no": "Xeyr", "Getalarms": "Alarmları Gətir", "DownloadXLSX": "XLSX Yüklə", "DownloadCSV": "CSV Yüklə", "DownloadPDF": "PDF Yüklə", "selectdate": "Tarix aralığı seçin", "header": "Aktiv Alarmlar", "ackall": "Hamısını təsdiqlə", "clear": "Təsdiqlənənləri Sil", "mute": "Səsi Kəs", "unmute": "Səsi Aç", "title": "Alarmlar", "export": "CSV yüklə", "noalarms": "Alarm yoxdur"}}, "en": {"alarm": {"id": "ID", "time": "Alarm Time", "type": "Alarm Type", "tagname": "Tag Name", "description": "Description", "highlow": "Type", "limitvalue": "Limit Value", "limitmsg": "Limit Message", "value": "Alarm Value", "ack": "Acknowledge", "acktime": "Ack Time", "ackbtn": "ACK", "yes": "Yes", "no": "No", "Getalarms": "Get Alarms", "DownloadXLSX": "Download XLSX", "DownloadCSV": "Download CSV", "DownloadPDF": "Download PDF", "selectdate": "Select date range", "header": "Active Alarms", "ackall": "Acknowledge all", "clear": "Clear Acknowledged", "mute": "Mute Sound", "unmute": "Unmute Sound", "title": "Alarms", "export": "Export CSV", "noalarms": "No alarms"}}, "ru": {"alarm": {"id": "No", "time": "Время аларма", "type": "Тип аларма", "tagname": "Тег", "description": "Описание", "highlow": "Тип", "limitvalue": "Предел", "limitmsg": "Сообщение", "value": "Значение", "ack": "Квитирование", "acktime": "Время квит.", "ackbtn": "Квит.", "yes": "Да", "no": "Нет", "Getalarms": "Получить аларма", "DownloadXLSX": "Скачать XLSX", "DownloadCSV": "Скачать CSV", "DownloadPDF": "Скачать PDF", "selectdate": "Выберите дату", "header": "Активные аларма", "ackall": "Квитировать все", "clear": "Очистить", "mute": "Отключить звук", "unmute": "Включить звук", "title": "Алармы", "export": "Скачать CSV", "noalarms": "Нет алармов"}}, "de": {"alarm": {"id": "Nr", "time": "Alarmzeit", "type": "Alarmtyp", "tagname": "Tag-Name", "description": "Beschreibung", "highlow": "Typ", "limitvalue": "Grenzwert", "limitmsg": "Grenznachricht", "value": "Alarmwert", "ack": "Quittierung", "acktime": "Quitt.-Zeit", "ackbtn": "Quitt.", "yes": "Ja", "no": "Nein", "Getalarms": "Alarme abrufen", "DownloadXLSX": "XLSX laden", "DownloadCSV": "CSV laden", "DownloadPDF": "PDF laden", "selectdate": "Datumsbereich wählen", "header": "Aktive Alarme", "ackall": "Alle quittieren", "clear": "Bestätigte löschen", "mute": "Ton stumm", "unmute": "Ton ein", "title": "Alarme", "export": "CSV exportieren", "noalarms": "Keine Alarme"}}, "tr": {"alarm": {"id": "No", "time": "Alarm Zamanı", "type": "Alarm Tipi", "tagname": "Etiket Adı", "description": "Açıklama", "highlow": "Tip", "limitvalue": "Limit Değeri", "limitmsg": "Limit Mesajı", "value": "Alarm Değeri", "ack": "Onay", "acktime": "Onay Zamanı", "ackbtn": "Onayla", "yes": "Evet", "no": "Hayır", "Getalarms": "Alarmları Getir", "DownloadXLSX": "XLSX İndir", "DownloadCSV": "CSV İndir", "DownloadPDF": "PDF İndir", "selectdate": "Tarih Aralığı Seçin", "header": "Aktif Alarmlar", "ackall": "Tümünü onayla", "clear": "Onaylanları Sil", "mute": "Sesi Kapat", "unmute": "Sesi Aç", "title": "Alarmlar", "export": "CSV indir", "noalarms": "Alarm yok"}}}}
1	+ {"properties": {"jsonsignal": {"type": "signal", "default": "myalarm.0.info.AlarmJson"}, "acksignal": {"type": "signal", "default": "myalarm.0.info.AcknowledgeId"}, "adapterinstance": {"type": "string", "default": "myalarm.0"}, "mode": {"type": "enum", "default": "live", "values": ["live", "history"]}, "showfilter": {"type": "enum", "default": "true", "values": ["true", "false"]}, "soundenabled": {"type": "enum", "default": "false", "values": ["true", "false"]}, "soundurl": {"type": "string", "default": ""}, "maxrows": {"type": "number", "default": 500}}, "settings": {"width": "1000px", "height": "420px"}, "html": "<div id=\"wrap\" class=\"av\"><audio id=\"snd\" loop style=\"display:none\"></audio><div class=\"av-bar\"><span class=\"av-title\"><t-t>alarm.title</t-t></span><span class=\"av-count\" css:display=\"[[this.unacked>0?'':'none']]\">[[this.unacked]]</span><span class=\"av-grow\"></span><div class=\"av-hist\" css:display=\"[[this.mode=='history'?'flex':'none']]\"><input id=\"from\" type=\"datetime-local\" class=\"av-inp\"><input id=\"to\" type=\"datetime-local\" class=\"av-inp\"><button class=\"av-btn\" @click=\"[[this._loadHistory()]]\"><t-t>alarm.Getalarms</t-t></button></div><button class=\"av-btn\" @click=\"[[this._exportCsv()]]\"><t-t>alarm.export</t-t></button><button class=\"av-btn av-accent\" css:display=\"[[this.mode=='live'?'':'none']]\" @click=\"[[this._ackAll()]]\"><t-t>alarm.ackall</t-t></button></div><div class=\"av-scroll\"><div class=\"av-grid av-head\"><span><t-t>alarm.id</t-t></span><span><t-t>alarm.tagname</t-t></span><span><t-t>alarm.type</t-t></span><span><t-t>alarm.time</t-t></span><span><t-t>alarm.description</t-t></span><span><t-t>alarm.limitvalue</t-t></span><span><t-t>alarm.limitmsg</t-t></span><span><t-t>alarm.highlow</t-t></span><span><t-t>alarm.value</t-t></span><span><t-t>alarm.ack</t-t></span><span><t-t>alarm.acktime</t-t></span><span><t-t>alarm.ackbtn</t-t></span></div><div class=\"av-grid av-filters\" css:display=\"[[this.showfilter=='false'?'none':'grid']]\"><input class=\"av-f\" data-f=\"id\"><input class=\"av-f\" data-f=\"Tagname\"><input class=\"av-f\" data-f=\"Alarmtype\"><input class=\"av-f\" data-f=\"alarmtime\"><input class=\"av-f\" data-f=\"Description\"><input class=\"av-f\" data-f=\"LimitValue\"><input class=\"av-f\" data-f=\"Limitmessage\"><input class=\"av-f\" data-f=\"HIGH_LOW\"><input class=\"av-f\" data-f=\"AlarmValue\"><input class=\"av-f\" data-f=\"Acknowledge\"><input class=\"av-f\" data-f=\"acknowledgetime\"><span></span></div><div class=\"av-body\"><template repeat:row=\"[[this.rows]]\"><div class=\"av-grid av-row\" class:unack=\"[[String(row.Acknowledge)!='true']]\" class:talarm=\"[[row.Alarmtype=='alarm']]\" class:twarning=\"[[row.Alarmtype=='warning']]\" class:tinfo=\"[[row.Alarmtype=='info']]\"><span title=\"[[row.id]]\">[[row.id]]</span><span title=\"[[row.Tagname]]\">[[row.Tagname]]</span><span title=\"[[row.Alarmtype]]\">[[row.Alarmtype]]</span><span title=\"[[row.alarmtime]]\">[[row.alarmtime]]</span><span title=\"[[row.Description]]\">[[row.Description]]</span><span title=\"[[row.LimitValue]]\">[[row.LimitValue]]</span><span title=\"[[row.Limitmessage]]\">[[row.Limitmessage]]</span><span title=\"[[row.HIGH_LOW]]\">[[row.HIGH_LOW]]</span><span title=\"[[row.AlarmValue]]\">[[row.AlarmValue]]</span><span>[[String(row.Acknowledge)=='true'?'\\u2713':'\\u2014']]</span><span title=\"[[row.acknowledgetime]]\">[[row.acknowledgetime]]</span><button class=\"av-ack\" @click=\"[[this._ack(row)]]\" css:visibility=\"[[String(row.Acknowledge)=='true'?'hidden':'visible']]\"><t-t>alarm.ackbtn</t-t></button></div></template><div class=\"av-empty\" css:display=\"[[this.rows.length?'none':'block']]\"><t-t>alarm.noalarms</t-t></div></div></div></div>", "style": ":host{display:block;width:100%;height:100%;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;}.av{display:flex;flex-direction:column;height:100%;box-sizing:border-box;border:1px solid var(--ui-border,#3b4250);border-radius:10px;overflow:hidden;background:var(--ui-surface,#252b38);color:var(--ui-text,#e2e6ec);-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);}.av-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;flex:none;border-bottom:1px solid var(--ui-border,#3b4250);background:var(--ui-surface-2,#2f3545);}.av-title{font-size:14px;font-weight:700;}.av-grow{flex:1;}.av-count{background:var(--ui-error,#ef4d5e);color:#fff;font-weight:700;border-radius:999px;padding:1px 8px;font-size:11px;}.av-hist{display:flex;align-items:center;gap:6px;}.av-inp{background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:5px;padding:3px 6px;font-size:11px;color-scheme:inherit;}.av-btn{appearance:none;cursor:pointer;border-radius:6px;padding:4px 12px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--ui-text,#fff) 8%,transparent);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);}.av-btn:hover{background:color-mix(in srgb,var(--ui-text,#fff) 14%,transparent);}.av-accent{background:color-mix(in srgb,var(--accent,#2680eb) 25%,transparent);border-color:color-mix(in srgb,var(--accent,#2680eb) 55%,transparent);}.av-scroll{flex:1;overflow:auto;min-height:0;}.av-grid{display:grid;grid-template-columns:52px 120px 86px 150px minmax(140px,1fr) 86px 130px 80px 90px 58px 150px 74px;gap:0;align-items:center;min-width:1200px;}.av-grid>*{padding:5px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.av-head{position:sticky;top:0;z-index:2;background:var(--ui-surface-2,#2f3545);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--ui-dim,#9aa3b0);border-bottom:1px solid var(--ui-border,#3b4250);}.av-filters{position:sticky;top:26px;z-index:2;background:var(--ui-surface,#252b38);border-bottom:1px solid var(--ui-border,#3b4250);}.av-f{width:100%;box-sizing:border-box;background:var(--ui-input,#3a3f4b);color:var(--ui-text,#e2e6ec);border:1px solid var(--ui-border,#3b4250);border-radius:4px;padding:2px 5px;font-size:11px;margin:3px 4px;}.av-row{border-bottom:1px solid color-mix(in srgb,var(--ui-border,#3b4250) 55%,transparent);}.av-row:hover{background:color-mix(in srgb,var(--ui-text,#fff) 6%,transparent);}.av-row.talarm{background:color-mix(in srgb,var(--ui-error,#ef4d5e) 16%,transparent);}.av-row.twarning{background:color-mix(in srgb,var(--ui-warn,#f6b73c) 14%,transparent);}.av-row.tinfo{background:color-mix(in srgb,var(--ui-info,#2b8bff) 12%,transparent);}.av-row.unack{font-weight:700;}.av-row.unack.talarm{background:color-mix(in srgb,var(--ui-error,#ef4d5e) 30%,transparent);}.av-row.unack.twarning{background:color-mix(in srgb,var(--ui-warn,#f6b73c) 26%,transparent);}.av-ack{appearance:none;cursor:pointer;margin:2px 4px;padding:2px 8px;font-size:11px;font-weight:700;border-radius:5px;background:color-mix(in srgb,var(--ui-ok,#37d67a) 25%,transparent);color:var(--ui-text,#e2e6ec);border:1px solid color-mix(in srgb,var(--ui-ok,#37d67a) 55%,transparent);}.av-ack:hover{background:color-mix(in srgb,var(--ui-ok,#37d67a) 40%,transparent);}.av-empty{text-align:center;padding:26px;color:var(--ui-dim,#9aa3b0);}", "script": "function num(v,d){v=parseInt(v);return isNaN(v)?d:v;}\nfunction updateSound(instance){\n const a=instance._getDomElement('snd');\n if(!a) return;\n const on = instance.soundenabled==='true' && instance.unacked>0 && instance.soundurl;\n if(on){ if(a.getAttribute('src')!==instance.soundurl) a.setAttribute('src',instance.soundurl);\n a.play().catch(()=>{}); }\n else { a.pause(); }\n}\nfunction applyFilters(instance){\n let rows=instance._raw\|\|[];\n const f=instance._filters\|\|{};\n for(const k in f){ const v=String(f[k]\|\|'').toLowerCase(); if(!v) continue;\n rows=rows.filter(r=>String(r[k]??'').toLowerCase().includes(v)); }\n instance.unacked=(instance._raw\|\|[]).filter(r=>String(r.Acknowledge)!=='true').length;\n instance.rows=rows.slice(0,num(instance.maxrows,500));\n try{ instance._bindingsRefresh?.(); }catch(e){}\n updateSound(instance);\n}\nfunction setRows(instance,arr){ instance._raw=Array.isArray(arr)?arr:[]; applyFilters(instance); }\nfunction parseVal(instance,val){\n let arr=[]; try{ arr=JSON.parse(val\|\|'[]'); }catch(e){ arr=[]; }\n setRows(instance,arr);\n}\nfunction inst(instance){ return instance.adapterinstance\|\|'myalarm.0'; }\nexport function init(instance){\n // designer control-editor runs scripts with a plain design-surface instance that has\n // no control APIs (_getDomElement/_bindingsRefresh) - do nothing there\n if(!instance \|\| typeof instance._getDomElement!=='function') return;\n instance.rows=[]; instance._filters={}; instance.unacked=0; instance._raw=[];\n instance._ack=(row)=>{\n if(!row\|\|row.id==null) return;\n try{ window.IOB.connection._socket.emit('sendTo',inst(instance),'ackAlarm',{alarmId:row.id},()=>{}); }catch(e){}\n if(instance.acksignal){ try{ window.IOB.setState(instance.acksignal,{val:row.id}); }catch(e){} }\n };\n instance._ackAll=()=>{ for(const r of (instance._raw\|\|[])) if(String(r.Acknowledge)!=='true') instance._ack(r); };\n instance._loadHistory=()=>{\n const f=instance._getDomElement('from')?.value, t=instance._getDomElement('to')?.value;\n try{ window.IOB.connection._socket.emit('sendTo',inst(instance),'getlog',{startdate:f,enddate:t},(cb)=>{\n let d=(cb&&cb.result!==undefined)?cb.result:cb;\n if(typeof d==='string'){ try{ d=JSON.parse(d); }catch(e){} }\n setRows(instance, Array.isArray(d)?d:(d&&d.rows)\|\|[]);\n }); }catch(e){ console.warn('[alarm-viewer] getlog failed',e); }\n };\n instance._exportCsv=()=>{\n const cols=['id','Tagname','Alarmtype','alarmtime','Description','LimitValue','Limitmessage','HIGH_LOW','AlarmValue','Acknowledge','acknowledgetime'];\n const esc=(v)=>{ v=String(v??''); return (v.includes(',')\|\|v.includes('\"')\|\|v.includes('\\n'))?'\"'+v.replaceAll('\"','\"\"')+'\"':v; };\n const lines=[cols.join(',')];\n for(const r of instance.rows) lines.push(cols.map(c=>esc(r[c])).join(','));\n const blob=new Blob([''+lines.join('\\r\\n')],{type:'text/csv;charset=utf-8'});\n const a=document.createElement('a');\n a.href=URL.createObjectURL(blob); a.download='alarms.csv'; a.click();\n setTimeout(()=>URL.revokeObjectURL(a.href),2000);\n };\n for(const inp of instance._getDomElements('.av-f')){\n inp.addEventListener('input',()=>{ instance._filters[inp.dataset.f]=inp.value; applyFilters(instance); });\n }\n const sig=instance.jsonsignal\|\|'myalarm.0.info.AlarmJson';\n try{ window.IOB.getState(sig).then(s=>parseVal(instance,s&&s.val)).catch(()=>{}); }catch(e){}\n instance.__avCb=(_id,s)=>parseVal(instance,s&&s.val);\n if((instance.mode\|\|'live')==='live'){ try{ window.IOB.subscribeState(sig,instance.__avCb); }catch(e){} }\n}\nexport function disconnectedCallback(instance){\n try{ window.IOB.unsubscribeState(instance.jsonsignal\|\|'myalarm.0.info.AlarmJson',instance.__avCb); }catch(e){}\n try{ instance._getDomElement('snd')?.pause(); }catch(e){}\n}", "translations": {"az": {"alarm": {"id": "No", "time": "Alarm Vaxtı", "type": "Alarm Tipi", "tagname": "Teq Adı", "description": "Açıqlama", "highlow": "Tip", "limitvalue": "Limit Dəyəri", "limitmsg": "Limit Mesajı", "value": "Alarm Dəyəri", "ack": "Təsdiq", "acktime": "Təsdiq Vaxtı", "ackbtn": "Təsdiqlə", "yes": "Bəli", "no": "Xeyr", "Getalarms": "Alarmları Gətir", "DownloadXLSX": "XLSX Yüklə", "DownloadCSV": "CSV Yüklə", "DownloadPDF": "PDF Yüklə", "selectdate": "Tarix aralığı seçin", "header": "Aktiv Alarmlar", "ackall": "Hamısını təsdiqlə", "clear": "Təsdiqlənənləri Sil", "mute": "Səsi Kəs", "unmute": "Səsi Aç", "title": "Alarmlar", "export": "CSV yüklə", "noalarms": "Alarm yoxdur"}}, "en": {"alarm": {"id": "ID", "time": "Alarm Time", "type": "Alarm Type", "tagname": "Tag Name", "description": "Description", "highlow": "Type", "limitvalue": "Limit Value", "limitmsg": "Limit Message", "value": "Alarm Value", "ack": "Acknowledge", "acktime": "Ack Time", "ackbtn": "ACK", "yes": "Yes", "no": "No", "Getalarms": "Get Alarms", "DownloadXLSX": "Download XLSX", "DownloadCSV": "Download CSV", "DownloadPDF": "Download PDF", "selectdate": "Select date range", "header": "Active Alarms", "ackall": "Acknowledge all", "clear": "Clear Acknowledged", "mute": "Mute Sound", "unmute": "Unmute Sound", "title": "Alarms", "export": "Export CSV", "noalarms": "No alarms"}}, "ru": {"alarm": {"id": "No", "time": "Время аларма", "type": "Тип аларма", "tagname": "Тег", "description": "Описание", "highlow": "Тип", "limitvalue": "Предел", "limitmsg": "Сообщение", "value": "Значение", "ack": "Квитирование", "acktime": "Время квит.", "ackbtn": "Квит.", "yes": "Да", "no": "Нет", "Getalarms": "Получить аларма", "DownloadXLSX": "Скачать XLSX", "DownloadCSV": "Скачать CSV", "DownloadPDF": "Скачать PDF", "selectdate": "Выберите дату", "header": "Активные аларма", "ackall": "Квитировать все", "clear": "Очистить", "mute": "Отключить звук", "unmute": "Включить звук", "title": "Алармы", "export": "Скачать CSV", "noalarms": "Нет алармов"}}, "de": {"alarm": {"id": "Nr", "time": "Alarmzeit", "type": "Alarmtyp", "tagname": "Tag-Name", "description": "Beschreibung", "highlow": "Typ", "limitvalue": "Grenzwert", "limitmsg": "Grenznachricht", "value": "Alarmwert", "ack": "Quittierung", "acktime": "Quitt.-Zeit", "ackbtn": "Quitt.", "yes": "Ja", "no": "Nein", "Getalarms": "Alarme abrufen", "DownloadXLSX": "XLSX laden", "DownloadCSV": "CSV laden", "DownloadPDF": "PDF laden", "selectdate": "Datumsbereich wählen", "header": "Aktive Alarme", "ackall": "Alle quittieren", "clear": "Bestätigte löschen", "mute": "Ton stumm", "unmute": "Ton ein", "title": "Alarme", "export": "CSV exportieren", "noalarms": "Keine Alarme"}}, "tr": {"alarm": {"id": "No", "time": "Alarm Zamanı", "type": "Alarm Tipi", "tagname": "Etiket Adı", "description": "Açıklama", "highlow": "Tip", "limitvalue": "Limit Değeri", "limitmsg": "Limit Mesajı", "value": "Alarm Değeri", "ack": "Onay", "acktime": "Onay Zamanı", "ackbtn": "Onayla", "yes": "Evet", "no": "Hayır", "Getalarms": "Alarmları Getir", "DownloadXLSX": "XLSX İndir", "DownloadCSV": "CSV İndir", "DownloadPDF": "PDF İndir", "selectdate": "Tarih Aralığı Seçin", "header": "Aktif Alarmlar", "ackall": "Tümünü onayla", "clear": "Onaylanları Sil", "mute": "Sesi Kapat", "unmute": "Sesi Aç", "title": "Alarmlar", "export": "CSV indir", "noalarms": "Alarm yok"}}}}

package/default-controls/controls/analog_points/scada_point_panel.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html": "<div id=\"panel-container\" style=\"width:100%;height:100%;border:2px solid var(--ui-border,rgb(58, 90, 90));border-radius:4px;padding:8px;display:flex;flex-direction:column;font:"Times New Roman", serif;-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background:var(--ui-surface,rgb(90, 122, 122));\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex-shrink:0;\">\n <div id=\"point-name\" style=\"color:var(--ui-text,#fff);text-align:center;flex:1;font:bold 14px "Times New Roman", serif;\">Point</div>\n <svg id=\"trend-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" title=\"Show Trend\" style=\"cursor:pointer;fill:none;stroke:#fff;stroke-width:2;margin-left:4px;flex-shrink:0;\">\n <polyline points=\"3 17 9 11 13 15 21 7\"></polyline>\n <polyline points=\"14 7 21 7 21 14\"></polyline>\n </svg>\n </div>\n <div style=\"display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;flex:1;\">\n <div id=\"label1\" style=\"color:var(--ui-text,#e0e0e0);font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value1\" bind-content:text=\"??value1_value\" style=\"color:var(--ui-text,#fff);text-align:center;font:bold 16px "Times New Roman", serif;\">NaN</div>\n <div id=\"unit1\" style=\"color:var(--ui-text,#e0e0e0);font:italic 11px "Times New Roman", serif;\"></div>\n <div id=\"label2\" style=\"color:var(--ui-text,#e0e0e0);display:none;font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value2\" style=\"color:var(--ui-text,#fff);text-align:center;display:none;font:bold 16px "Times New Roman", serif;\"></div>\n <div id=\"unit2\" style=\"color:var(--ui-text,#e0e0e0);display:none;font:italic 11px "Times New Roman", serif;\"></div>\n </div>\n <div id=\"action-button\" style=\"margin-top:8px;text-align:center;display:none;flex-shrink:0;\">\n<button id=\"action-btn\" style=\"border:1px solid var(--ui-border,rgb(58, 90, 90));color:var(--ui-text,#fff);border-radius:3px;cursor:pointer;background:rgb(74, 106, 106);font:11px "Times New Roman", serif;padding:4px 12px;\">Button</button>\n </div>\n</div>\n<dialog id=\"trend-dialog\" bind-css:width=\"??grafana_dialogwidth\" bind-css:height=\"??grafana_dialogheight\" style=\"overflow:hidden;border:2px solid var(--ui-border,rgb(58, 90, 90));border-radius:8px;padding:0px;background:var(--ui-input,rgb(255, 255, 255));\">\n <div id=\"dialog-header\" style=\"color:var(--ui-text,#fff);padding:12px;display:flex;justify-content:space-between;align-items:center;background:var(--ui-surface,rgb(90, 122, 122));\">\n <h3 id=\"dialog-title\" style=\"margin:0px;font:16px "Times New Roman", serif;\">Trend</h3>\n <button id=\"close-dialog\" style=\"border:initial none initial;color:var(--ui-text,#fff);cursor:pointer;padding:0px;width:30px;height:30px;background:transparent;font:24px "Times New Roman", serif;\">×</button>\n </div>\n <div id=\"iframecontainerdiv1\" style=\"padding:0px;width:100%;height:91%;\">\n<iframe id=\"grafana-iframe\" frameborder=\"0\" style=\"width:100%;height:100%;border:initial none initial;\"></iframe>\n </div>\n</dialog>\n", "style": "#trend-dialog{\r\n width: 600px;\r\n height: 600px;\r\n}\r\n", "script": "let protocol = window.location.protocol;\nlet ip = window.location.hostname;\nlet port = window.location.port;\nlet baseaddress = protocol+\"//\"+ip+\":\"+port;\nfunction formatValue(value, options) {\n if (value === null \|\| value === undefined \|\| value === '' \|\| isNaN(value)) {\n return 'NaN';\n }\n\n let numValue = Number(value);\n\n // Apply scaling\n if (options.scale && options.scale !== 1) {\n numValue = numValue * Number(options.scale);\n }\n\n // Apply offset\n if (options.offset && options.offset !== 0) {\n numValue = numValue + Number(options.offset);\n }\n\n // Apply min/max limits\n if (options.minLimit !== undefined && options.minLimit !== null && options.minLimit !== '') {\n const min = Number(options.minLimit);\n if (numValue < min) numValue = min;\n }\n if (options.maxLimit !== undefined && options.maxLimit !== null && options.maxLimit !== '') {\n const max = Number(options.maxLimit);\n if (numValue > max) numValue = max;\n }\n\n // Apply rounding\n let formattedValue;\n const decimals = options.decimals !== undefined ? Number(options.decimals) : 2;\n\n switch (options.roundMode) {\n case 'floor':\n formattedValue = Math.floor(numValue * Math.pow(10, decimals)) / Math.pow(10, decimals);\n break;\n case 'ceil':\n formattedValue = Math.ceil(numValue * Math.pow(10, decimals)) / Math.pow(10, decimals);\n break;\n case 'round':\n default:\n formattedValue = Math.round(numValue * Math.pow(10, decimals)) / Math.pow(10, decimals);\n break;\n }\n\n // Format to fixed decimals\n let result = formattedValue.toFixed(decimals);\n\n // Add thousand separator if enabled\n if (options.thousandSep) {\n const parts = result.split('.');\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, options.thousandSep);\n result = parts.join('.');\n }\n\n // Add prefix/suffix\n if (options.prefix) result = options.prefix + result;\n if (options.suffix) result = result + options.suffix;\n\n return result;\n}\nexport async function init(instance) {\n instance._bindingsRefresh();\n\n applyTheming(instance);\n updatePanel(instance);\n\n instance._assignEvent('point-name-changed', () => updatePanel(instance));\n instance._assignEvent('value1_label-changed', () => updatePanel(instance));\n instance._assignEvent('value1_value-changed', () => updatePanel(instance));\n instance._assignEvent('value1_unit-changed', () => updatePanel(instance));\n instance._assignEvent('value2_label-changed', () => updatePanel(instance));\n instance._assignEvent('value2_value-changed', () => updatePanel(instance));\n instance._assignEvent('value2_unit-changed', () => updatePanel(instance));\n instance._assignEvent('theme-changed', () => applyTheming(instance));\n instance._assignEvent('grafana_url-changed', () => { });\n\n instance._assignEvent('show-button-changed', () => updatePanel(instance));\n instance._assignEvent('button-text-changed', () => updatePanel(instance));\n\n // SCADA functions event listeners\n instance._assignEvent('value1_decimals-changed', () => updatePanel(instance));\n instance._assignEvent('value1_roundmode-changed', () => updatePanel(instance));\n instance._assignEvent('value1_scale-changed', () => updatePanel(instance));\n instance._assignEvent('value1_offset-changed', () => updatePanel(instance));\n instance._assignEvent('value1_minlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value1_maxlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value1_prefix-changed', () => updatePanel(instance));\n instance._assignEvent('value1_suffix-changed', () => updatePanel(instance));\n instance._assignEvent('value1_thousandsep-changed', () => updatePanel(instance));\n instance._assignEvent('value2_decimals-changed', () => updatePanel(instance));\n instance._assignEvent('value2_roundmode-changed', () => updatePanel(instance));\n instance._assignEvent('value2_scale-changed', () => updatePanel(instance));\n instance._assignEvent('value2_offset-changed', () => updatePanel(instance));\n instance._assignEvent('value2_minlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value2_maxlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value2_prefix-changed', () => updatePanel(instance));\n instance._assignEvent('value2_suffix-changed', () => updatePanel(instance));\n instance._assignEvent('value2_thousandsep-changed', () => updatePanel(instance));\n\n const trendIcon = instance._getDomElement('trend-icon');\n const dialog = instance._getDomElement('trend-dialog');\n const closeBtn = instance._getDomElement('close-dialog');\n const iframe = instance._getDomElement('grafana-iframe');\n const dialogTitle = instance._getDomElement('dialog-title');\n\n /if (!instance.grafanaUrl \|\| instance.grafanaUrl.trim() === \"\") {\n console.log(\"Grafana URL boşdur!\");\n } else {\n // URL boş deyilsə, parametrləri əlavə et\n const params = new URLSearchParams({\n \"var-selected_state\": instance.grafana_selected_state_name1,\n \"var-selected_state2\": instance.grafana_selected_state_name2,\n \"var-tag_name\": instance.pointName,\n kiosk: \"\" // kiosk parametri əlavə olunur\n });\n\n\n\n const finalUrl = `${instance.grafanaUrl}?${params.toString()}`;\n // instance.grafanaUrl = finalUrl;\n }/\n\n\n\n\n\n if (trendIcon && dialog) {\n trendIcon.addEventListener('click', async() => {\n if (!instance.grafana_url \|\| instance.grafana_url.trim() === \"\") {\n console.log(\"Grafana URL boşdur!\");\n } else {\n // URL obyektini qururuq\n const url = new URL(instance.grafana_url, baseaddress); // baza hostu əlavə et\n\n // Mövcud parametrləri götürürük\n const params = url.searchParams;\n\n // İstədiyin parametrlərə dəyər ver\n params.set(\"var-selected_state\", instance.grafana_selected_state_name1);\n params.set(\"var-selected_state2\", instance.grafana_selected_state_name2);\n params.set(\"var-tag_name\", instance.pointName);\n\n\n // Yenilənmiş URL\n const finalUrl = `${url.href}&kiosk`;\n //console.log(finalUrl);\n\n //const grafanaUrl = instance.grafanaUrl \|\| 'about:blank';\n // ioBroker-dən cari useri al\n iframe.src = finalUrl;\n dialogTitle.textContent = (instance.pointName \|\| 'Trend') + ' - Trend';\n dialog.showModal();\n \n\n /const pointName = instance.pointName \|\| 'Trend';\n iframe.src = finalUrl;\n dialogTitle.textContent = pointName + ' - Trend';\n dialog.showModal();/\n }\n });\n }\n\n if (closeBtn && dialog) {\n closeBtn.addEventListener('click', () => {\n dialog.close();\n iframe.src = 'about:blank';\n });\n }\n\n if (dialog) {\n dialog.addEventListener('click', (e) => {\n const rect = dialog.getBoundingClientRect();\n if (e.clientX < rect.left \|\| e.clientX > rect.right \|\| e.clientY < rect.top \|\| e.clientY > rect.bottom) {\n dialog.close();\n iframe.src = 'about:blank';\n }\n });\n }\n\n const actionBtn = instance._getDomElement('action-btn');\n if (actionBtn) {\n actionBtn.addEventListener('click', () => {\n const event = new CustomEvent('scada-point-button-clicked', {\n detail: { pointName: instance.pointName },\n bubbles: true\n });\n instance.dispatchEvent(event);\n });\n }\n}\n\nfunction updatePanel(instance) {\n const nameEl = instance._getDomElement('point-name');\n if (nameEl) nameEl.textContent = instance.pointName \|\| 'Point';\n\n const label1El = instance._getDomElement('label1');\n const value1El = instance._getDomElement('value1');\n const unit1El = instance._getDomElement('unit1');\n if (label1El) label1El.textContent = instance.value1_label \|\| '';\n\n // Format value1 with SCADA functions\n if (value1El) {\n const value1Options = {\n decimals: instance.value1_decimals,\n roundMode: instance.value1_roundmode,\n scale: instance.value1_scale,\n offset: instance.value1_offset,\n minLimit: instance.value1_minlimit,\n maxLimit: instance.value1_maxlimit,\n prefix: instance.value1_prefix,\n suffix: instance.value1_suffix,\n thousandSep: instance.value1_thousandsep\n };\n value1El.textContent = formatValue(instance.value1_value, value1Options);\n }\n\n if (unit1El) unit1El.textContent = instance.value1_unit \|\| '';\n\n const label2El = instance._getDomElement('label2');\n const value2El = instance._getDomElement('value2');\n const unit2El = instance._getDomElement('unit2');\n const hasRow2 = instance.value2_label \|\| instance.value2_value \|\| instance.value2_unit;\n\n if (label2El) {\n label2El.textContent = instance.value2_label \|\| '';\n label2El.style.display = hasRow2 ? 'block' : 'none';\n }\n if (value2El) {\n const value2Options = {\n decimals: instance.value2_decimals,\n roundMode: instance.value2_roundmode,\n scale: instance.value2_scale,\n offset: instance.value2_offset,\n minLimit: instance.value2_minlimit,\n maxLimit: instance.value2_maxlimit,\n prefix: instance.value2_prefix,\n suffix: instance.value2_suffix,\n thousandSep: instance.value2_thousandsep\n };\n value2El.textContent = formatValue(instance.value2_value, value2Options);\n value2El.style.display = hasRow2 ? 'block' : 'none';\n }\n if (unit2El) {\n unit2El.textContent = instance.value2_unit \|\| '';\n unit2El.style.display = hasRow2 ? 'block' : 'none';\n }\n\n const buttonEl = instance._getDomElement('action-button');\n const buttonTextEl = instance._getDomElement('action-btn');\n if (buttonEl && buttonTextEl) {\n const showButton = instance.showButton === true \|\| instance.showButton === 'true';\n buttonEl.style.display = showButton ? 'block' : 'none';\n buttonTextEl.textContent = instance.buttonText \|\| 'Button';\n }\n}\n\nfunction applyTheming(instance) {\n const theme = instance.theme \|\| 'default';\n const container = instance._getDomElement('panel-container');\n if (!container) return;\n\n const themes = {\n 'default': { bg: 'var(--ui-surface,#5a7a7a)', border: 'var(--ui-border,#3a5a5a)', text: 'var(--ui-text,#fff)', label: 'var(--ui-dim,#e0e0e0)', btnBg: 'var(--ui-surface-2,#4a6a6a)' },\n 'dark': { bg: '#2d3436', border: '#000', text: '#fff', label: '#dfe6e9', btnBg: '#636e72' },\n 'light': { bg: '#dfe6e9', border: '#b2bec3', text: '#2d3436', label: '#636e72', btnBg: '#b2bec3' },\n 'blue': { bg: '#0984e3', border: '#0652DD', text: '#fff', label: '#dfe6e9', btnBg: '#74b9ff' },\n 'green': { bg: '#00b894', border: '#00a383', text: '#fff', label: '#d4f1e8', btnBg: '#55efc4' },\n 'red': { bg: '#d63031', border: '#b71c1c', text: '#fff', label: '#ffcccc', btnBg: '#ff7675' },\n 'purple': { bg: '#6c5ce7', border: '#5f3dc4', text: '#fff', label: '#e5dbff', btnBg: '#a29bfe' }\n };\n\n const colors = themes[theme] \|\| themes['default'];\n container.style.background = colors.bg;\n container.style.borderColor = colors.border;\n\n const nameEl = instance._getDomElement('point-name');\n const value1El = instance._getDomElement('value1');\n const value2El = instance._getDomElement('value2');\n if (nameEl) nameEl.style.color = colors.text;\n if (value1El) value1El.style.color = colors.text;\n if (value2El) value2El.style.color = colors.text;\n\n const label1El = instance._getDomElement('label1');\n const label2El = instance._getDomElement('label2');\n const unit1El = instance._getDomElement('unit1');\n const unit2El = instance._getDomElement('unit2');\n if (label1El) label1El.style.color = colors.label;\n if (label2El) label2El.style.color = colors.label;\n if (unit1El) unit1El.style.color = colors.label;\n if (unit2El) unit2El.style.color = colors.label;\n\n const trendIcon = instance._getDomElement('trend-icon');\n if (trendIcon) trendIcon.style.stroke = colors.text;\n\n const actionBtn = instance._getDomElement('action-btn');\n if (actionBtn) {\n actionBtn.style.background = colors.btnBg;\n actionBtn.style.borderColor = colors.border;\n actionBtn.style.color = colors.text;\n }\n\n const dialog = instance._getDomElement('trend-dialog');\n if (dialog) {\n dialog.style.borderColor = colors.border;\n const header = instance._getDomElement('dialog-header');\n if (header) {\n header.style.background = colors.bg;\n header.style.color = colors.text;\n }\n }\n}\n\nexport function connectedCallback(instance)\n{\n \n}\n\nfunction getResolvedSignalId() {\n // bind-prop:value1 atributundan ham pattern-i oxu\n const raw = element.getAttribute('bind-prop:value1');\n if (!raw) return null;\n\n // {??propName} → screen[propName] ilə replace et\n return raw.replace(/\\{(\\?\\?([^}]+))\\}/g, (_, __, propName) => {\n return screen?.[propName] ?? '';\n });\n }", "properties": {"pointName": {"type": "string", "default": "DPT 010"}, "value1_value": {"type": "number"}, "value1_label": {"type": "string"}, "value1_unit": {"type": "string", "default": "kPa"}, "value2_label": {"type": "string"}, "value2_value": {"type": "number"}, "theme": {"type": "enum", "default": "default", "values": ["default", "dark", "light", "blue", "green", "red", "purple"]}, "value2_unit": {"type": "string"}, "grafana_url": {"type": "string"}, "grafana_selected_state_name1": {"type": "string"}, "grafana_selected_state_name2": {"type": "string"}, "showButton": {"type": "boolean"}, "buttonText": {"type": "string", "default": "Button"}, "grafana_dialogheight": {"type": "string"}, "grafana_dialogwidth": {"type": "string"}, "value1_decimals": {"type": "number", "default": "2"}, "value1_roundmode": {"type": "enum", "default": "round", "values": ["round", "floor", "ceil"]}, "value1_scale": {"type": "number", "default": "1"}, "value1_offset": {"type": "number"}, "value1_maxlimit": {"type": "number"}, "value1_minlimit": {"type": "number"}, "value1_prefix": {"type": "string"}, "value1_suffix": {"type": "string"}, "value1_thousandsep": {"type": "string"}, "value2_decimals": {"type": "number", "default": "2"}, "value2_roundmode": {"type": "enum", "default": "round", "values": ["round", "floor", "ceil"]}, "value2_scale": {"type": "number", "default": "1"}, "value2_offset": {"type": "number"}, "value2_minlimit": {"type": "number"}, "value2_maxlimit": {"type": "number"}, "value2_prefix": {"type": "string"}, "value2_suffix": {"type": "string"}, "value2_thousandsep": {"type": "string"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}
1	+ {"html": "<div id=\"panel-container\" style=\"width:100%;height:100%;border:2px solid var(--ui-border,rgb(58, 90, 90));border-radius:4px;padding:8px;display:flex;flex-direction:column;font:"Times New Roman", serif;-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background:var(--ui-surface,rgb(90, 122, 122));\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;flex-shrink:0;\">\n <div id=\"point-name\" style=\"color:var(--ui-text,#fff);text-align:center;flex:1;font:bold 14px "Times New Roman", serif;\">Point</div>\n <svg id=\"trend-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" title=\"Show Trend\" style=\"cursor:pointer;fill:none;stroke:#fff;stroke-width:2;margin-left:4px;flex-shrink:0;\">\n <polyline points=\"3 17 9 11 13 15 21 7\"></polyline>\n <polyline points=\"14 7 21 7 21 14\"></polyline>\n </svg>\n </div>\n <div style=\"display:grid;grid-template-columns:auto 1fr auto;gap:4px 8px;align-items:center;flex:1;\">\n <div id=\"label1\" style=\"color:var(--ui-text,#e0e0e0);font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value1\" bind-content:text=\"??value1_value\" style=\"color:var(--ui-text,#fff);text-align:center;font:bold 16px "Times New Roman", serif;\">NaN</div>\n <div id=\"unit1\" style=\"color:var(--ui-text,#e0e0e0);font:italic 11px "Times New Roman", serif;\"></div>\n <div id=\"label2\" style=\"color:var(--ui-text,#e0e0e0);display:none;font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value2\" style=\"color:var(--ui-text,#fff);text-align:center;display:none;font:bold 16px "Times New Roman", serif;\"></div>\n <div id=\"unit2\" style=\"color:var(--ui-text,#e0e0e0);display:none;font:italic 11px "Times New Roman", serif;\"></div>\n </div>\n <div id=\"action-button\" style=\"margin-top:8px;text-align:center;display:none;flex-shrink:0;\">\n<button id=\"action-btn\" style=\"border:1px solid var(--ui-border,rgb(58, 90, 90));color:var(--ui-text,#fff);border-radius:3px;cursor:pointer;background:rgb(74, 106, 106);font:11px "Times New Roman", serif;padding:4px 12px;\">Button</button>\n </div>\n</div>\n<dialog id=\"trend-dialog\" bind-css:width=\"??grafana_dialogwidth\" bind-css:height=\"??grafana_dialogheight\" style=\"overflow:hidden;border:2px solid var(--ui-border,rgb(58, 90, 90));border-radius:8px;padding:0px;background:var(--ui-input,rgb(255, 255, 255));\">\n <div id=\"dialog-header\" style=\"color:var(--ui-text,#fff);padding:12px;display:flex;justify-content:space-between;align-items:center;background:var(--ui-surface,rgb(90, 122, 122));\">\n <h3 id=\"dialog-title\" style=\"margin:0px;font:16px "Times New Roman", serif;\">Trend</h3>\n <button id=\"close-dialog\" style=\"border:initial none initial;color:var(--ui-text,#fff);cursor:pointer;padding:0px;width:30px;height:30px;background:transparent;font:24px "Times New Roman", serif;\">×</button>\n </div>\n <div id=\"iframecontainerdiv1\" style=\"padding:0px;width:100%;height:91%;\">\n<iframe id=\"grafana-iframe\" frameborder=\"0\" style=\"width:100%;height:100%;border:initial none initial;\"></iframe>\n </div>\n</dialog>\n", "style": "#trend-dialog{\r\n width: 600px;\r\n height: 600px;\r\n}\r\n", "script": "let protocol = window.location.protocol;\nlet ip = window.location.hostname;\nlet port = window.location.port;\nlet baseaddress = protocol+\"//\"+ip+\":\"+port;\nfunction formatValue(value, options) {\n if (value === null \|\| value === undefined \|\| value === '' \|\| isNaN(value)) {\n return 'NaN';\n }\n\n let numValue = Number(value);\n\n // Apply scaling\n if (options.scale && options.scale !== 1) {\n numValue = numValue * Number(options.scale);\n }\n\n // Apply offset\n if (options.offset && options.offset !== 0) {\n numValue = numValue + Number(options.offset);\n }\n\n // Apply min/max limits\n if (options.minLimit !== undefined && options.minLimit !== null && options.minLimit !== '') {\n const min = Number(options.minLimit);\n if (numValue < min) numValue = min;\n }\n if (options.maxLimit !== undefined && options.maxLimit !== null && options.maxLimit !== '') {\n const max = Number(options.maxLimit);\n if (numValue > max) numValue = max;\n }\n\n // Apply rounding\n let formattedValue;\n const decimals = options.decimals !== undefined ? Number(options.decimals) : 2;\n\n switch (options.roundMode) {\n case 'floor':\n formattedValue = Math.floor(numValue * Math.pow(10, decimals)) / Math.pow(10, decimals);\n break;\n case 'ceil':\n formattedValue = Math.ceil(numValue * Math.pow(10, decimals)) / Math.pow(10, decimals);\n break;\n case 'round':\n default:\n formattedValue = Math.round(numValue * Math.pow(10, decimals)) / Math.pow(10, decimals);\n break;\n }\n\n // Format to fixed decimals\n let result = formattedValue.toFixed(decimals);\n\n // Add thousand separator if enabled\n if (options.thousandSep) {\n const parts = result.split('.');\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, options.thousandSep);\n result = parts.join('.');\n }\n\n // Add prefix/suffix\n if (options.prefix) result = options.prefix + result;\n if (options.suffix) result = result + options.suffix;\n\n return result;\n}\nexport async function init(instance) {\n instance._bindingsRefresh?.();\n\n applyTheming(instance);\n updatePanel(instance);\n\n instance._assignEvent('point-name-changed', () => updatePanel(instance));\n instance._assignEvent('value1_label-changed', () => updatePanel(instance));\n instance._assignEvent('value1_value-changed', () => updatePanel(instance));\n instance._assignEvent('value1_unit-changed', () => updatePanel(instance));\n instance._assignEvent('value2_label-changed', () => updatePanel(instance));\n instance._assignEvent('value2_value-changed', () => updatePanel(instance));\n instance._assignEvent('value2_unit-changed', () => updatePanel(instance));\n instance._assignEvent('theme-changed', () => applyTheming(instance));\n instance._assignEvent('grafana_url-changed', () => { });\n\n instance._assignEvent('show-button-changed', () => updatePanel(instance));\n instance._assignEvent('button-text-changed', () => updatePanel(instance));\n\n // SCADA functions event listeners\n instance._assignEvent('value1_decimals-changed', () => updatePanel(instance));\n instance._assignEvent('value1_roundmode-changed', () => updatePanel(instance));\n instance._assignEvent('value1_scale-changed', () => updatePanel(instance));\n instance._assignEvent('value1_offset-changed', () => updatePanel(instance));\n instance._assignEvent('value1_minlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value1_maxlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value1_prefix-changed', () => updatePanel(instance));\n instance._assignEvent('value1_suffix-changed', () => updatePanel(instance));\n instance._assignEvent('value1_thousandsep-changed', () => updatePanel(instance));\n instance._assignEvent('value2_decimals-changed', () => updatePanel(instance));\n instance._assignEvent('value2_roundmode-changed', () => updatePanel(instance));\n instance._assignEvent('value2_scale-changed', () => updatePanel(instance));\n instance._assignEvent('value2_offset-changed', () => updatePanel(instance));\n instance._assignEvent('value2_minlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value2_maxlimit-changed', () => updatePanel(instance));\n instance._assignEvent('value2_prefix-changed', () => updatePanel(instance));\n instance._assignEvent('value2_suffix-changed', () => updatePanel(instance));\n instance._assignEvent('value2_thousandsep-changed', () => updatePanel(instance));\n\n const trendIcon = instance._getDomElement('trend-icon');\n const dialog = instance._getDomElement('trend-dialog');\n const closeBtn = instance._getDomElement('close-dialog');\n const iframe = instance._getDomElement('grafana-iframe');\n const dialogTitle = instance._getDomElement('dialog-title');\n\n /if (!instance.grafanaUrl \|\| instance.grafanaUrl.trim() === \"\") {\n console.log(\"Grafana URL boşdur!\");\n } else {\n // URL boş deyilsə, parametrləri əlavə et\n const params = new URLSearchParams({\n \"var-selected_state\": instance.grafana_selected_state_name1,\n \"var-selected_state2\": instance.grafana_selected_state_name2,\n \"var-tag_name\": instance.pointName,\n kiosk: \"\" // kiosk parametri əlavə olunur\n });\n\n\n\n const finalUrl = `${instance.grafanaUrl}?${params.toString()}`;\n // instance.grafanaUrl = finalUrl;\n }/\n\n\n\n\n\n if (trendIcon && dialog) {\n trendIcon.addEventListener('click', async() => {\n if (!instance.grafana_url \|\| instance.grafana_url.trim() === \"\") {\n console.log(\"Grafana URL boşdur!\");\n } else {\n // URL obyektini qururuq\n const url = new URL(instance.grafana_url, baseaddress); // baza hostu əlavə et\n\n // Mövcud parametrləri götürürük\n const params = url.searchParams;\n\n // İstədiyin parametrlərə dəyər ver\n params.set(\"var-selected_state\", instance.grafana_selected_state_name1);\n params.set(\"var-selected_state2\", instance.grafana_selected_state_name2);\n params.set(\"var-tag_name\", instance.pointName);\n\n\n // Yenilənmiş URL\n const finalUrl = `${url.href}&kiosk`;\n //console.log(finalUrl);\n\n //const grafanaUrl = instance.grafanaUrl \|\| 'about:blank';\n // ioBroker-dən cari useri al\n iframe.src = finalUrl;\n dialogTitle.textContent = (instance.pointName \|\| 'Trend') + ' - Trend';\n dialog.showModal();\n \n\n /const pointName = instance.pointName \|\| 'Trend';\n iframe.src = finalUrl;\n dialogTitle.textContent = pointName + ' - Trend';\n dialog.showModal();/\n }\n });\n }\n\n if (closeBtn && dialog) {\n closeBtn.addEventListener('click', () => {\n dialog.close();\n iframe.src = 'about:blank';\n });\n }\n\n if (dialog) {\n dialog.addEventListener('click', (e) => {\n const rect = dialog.getBoundingClientRect();\n if (e.clientX < rect.left \|\| e.clientX > rect.right \|\| e.clientY < rect.top \|\| e.clientY > rect.bottom) {\n dialog.close();\n iframe.src = 'about:blank';\n }\n });\n }\n\n const actionBtn = instance._getDomElement('action-btn');\n if (actionBtn) {\n actionBtn.addEventListener('click', () => {\n const event = new CustomEvent('scada-point-button-clicked', {\n detail: { pointName: instance.pointName },\n bubbles: true\n });\n instance.dispatchEvent(event);\n });\n }\n}\n\nfunction updatePanel(instance) {\n const nameEl = instance._getDomElement('point-name');\n if (nameEl) nameEl.textContent = instance.pointName \|\| 'Point';\n\n const label1El = instance._getDomElement('label1');\n const value1El = instance._getDomElement('value1');\n const unit1El = instance._getDomElement('unit1');\n if (label1El) label1El.textContent = instance.value1_label \|\| '';\n\n // Format value1 with SCADA functions\n if (value1El) {\n const value1Options = {\n decimals: instance.value1_decimals,\n roundMode: instance.value1_roundmode,\n scale: instance.value1_scale,\n offset: instance.value1_offset,\n minLimit: instance.value1_minlimit,\n maxLimit: instance.value1_maxlimit,\n prefix: instance.value1_prefix,\n suffix: instance.value1_suffix,\n thousandSep: instance.value1_thousandsep\n };\n value1El.textContent = formatValue(instance.value1_value, value1Options);\n }\n\n if (unit1El) unit1El.textContent = instance.value1_unit \|\| '';\n\n const label2El = instance._getDomElement('label2');\n const value2El = instance._getDomElement('value2');\n const unit2El = instance._getDomElement('unit2');\n const hasRow2 = instance.value2_label \|\| instance.value2_value \|\| instance.value2_unit;\n\n if (label2El) {\n label2El.textContent = instance.value2_label \|\| '';\n label2El.style.display = hasRow2 ? 'block' : 'none';\n }\n if (value2El) {\n const value2Options = {\n decimals: instance.value2_decimals,\n roundMode: instance.value2_roundmode,\n scale: instance.value2_scale,\n offset: instance.value2_offset,\n minLimit: instance.value2_minlimit,\n maxLimit: instance.value2_maxlimit,\n prefix: instance.value2_prefix,\n suffix: instance.value2_suffix,\n thousandSep: instance.value2_thousandsep\n };\n value2El.textContent = formatValue(instance.value2_value, value2Options);\n value2El.style.display = hasRow2 ? 'block' : 'none';\n }\n if (unit2El) {\n unit2El.textContent = instance.value2_unit \|\| '';\n unit2El.style.display = hasRow2 ? 'block' : 'none';\n }\n\n const buttonEl = instance._getDomElement('action-button');\n const buttonTextEl = instance._getDomElement('action-btn');\n if (buttonEl && buttonTextEl) {\n const showButton = instance.showButton === true \|\| instance.showButton === 'true';\n buttonEl.style.display = showButton ? 'block' : 'none';\n buttonTextEl.textContent = instance.buttonText \|\| 'Button';\n }\n}\n\nfunction applyTheming(instance) {\n const theme = instance.theme \|\| 'default';\n const container = instance._getDomElement('panel-container');\n if (!container) return;\n\n const themes = {\n 'default': { bg: 'var(--ui-surface,#5a7a7a)', border: 'var(--ui-border,#3a5a5a)', text: 'var(--ui-text,#fff)', label: 'var(--ui-dim,#e0e0e0)', btnBg: 'var(--ui-surface-2,#4a6a6a)' },\n 'dark': { bg: '#2d3436', border: '#000', text: '#fff', label: '#dfe6e9', btnBg: '#636e72' },\n 'light': { bg: '#dfe6e9', border: '#b2bec3', text: '#2d3436', label: '#636e72', btnBg: '#b2bec3' },\n 'blue': { bg: '#0984e3', border: '#0652DD', text: '#fff', label: '#dfe6e9', btnBg: '#74b9ff' },\n 'green': { bg: '#00b894', border: '#00a383', text: '#fff', label: '#d4f1e8', btnBg: '#55efc4' },\n 'red': { bg: '#d63031', border: '#b71c1c', text: '#fff', label: '#ffcccc', btnBg: '#ff7675' },\n 'purple': { bg: '#6c5ce7', border: '#5f3dc4', text: '#fff', label: '#e5dbff', btnBg: '#a29bfe' }\n };\n\n const colors = themes[theme] \|\| themes['default'];\n container.style.background = colors.bg;\n container.style.borderColor = colors.border;\n\n const nameEl = instance._getDomElement('point-name');\n const value1El = instance._getDomElement('value1');\n const value2El = instance._getDomElement('value2');\n if (nameEl) nameEl.style.color = colors.text;\n if (value1El) value1El.style.color = colors.text;\n if (value2El) value2El.style.color = colors.text;\n\n const label1El = instance._getDomElement('label1');\n const label2El = instance._getDomElement('label2');\n const unit1El = instance._getDomElement('unit1');\n const unit2El = instance._getDomElement('unit2');\n if (label1El) label1El.style.color = colors.label;\n if (label2El) label2El.style.color = colors.label;\n if (unit1El) unit1El.style.color = colors.label;\n if (unit2El) unit2El.style.color = colors.label;\n\n const trendIcon = instance._getDomElement('trend-icon');\n if (trendIcon) trendIcon.style.stroke = colors.text;\n\n const actionBtn = instance._getDomElement('action-btn');\n if (actionBtn) {\n actionBtn.style.background = colors.btnBg;\n actionBtn.style.borderColor = colors.border;\n actionBtn.style.color = colors.text;\n }\n\n const dialog = instance._getDomElement('trend-dialog');\n if (dialog) {\n dialog.style.borderColor = colors.border;\n const header = instance._getDomElement('dialog-header');\n if (header) {\n header.style.background = colors.bg;\n header.style.color = colors.text;\n }\n }\n}\n\nexport function connectedCallback(instance)\n{\n \n}\n\nfunction getResolvedSignalId() {\n // bind-prop:value1 atributundan ham pattern-i oxu\n const raw = element.getAttribute('bind-prop:value1');\n if (!raw) return null;\n\n // {??propName} → screen[propName] ilə replace et\n return raw.replace(/\\{(\\?\\?([^}]+))\\}/g, (_, __, propName) => {\n return screen?.[propName] ?? '';\n });\n }", "properties": {"pointName": {"type": "string", "default": "DPT 010"}, "value1_value": {"type": "number"}, "value1_label": {"type": "string"}, "value1_unit": {"type": "string", "default": "kPa"}, "value2_label": {"type": "string"}, "value2_value": {"type": "number"}, "theme": {"type": "enum", "default": "default", "values": ["default", "dark", "light", "blue", "green", "red", "purple"]}, "value2_unit": {"type": "string"}, "grafana_url": {"type": "string"}, "grafana_selected_state_name1": {"type": "string"}, "grafana_selected_state_name2": {"type": "string"}, "showButton": {"type": "boolean"}, "buttonText": {"type": "string", "default": "Button"}, "grafana_dialogheight": {"type": "string"}, "grafana_dialogwidth": {"type": "string"}, "value1_decimals": {"type": "number", "default": "2"}, "value1_roundmode": {"type": "enum", "default": "round", "values": ["round", "floor", "ceil"]}, "value1_scale": {"type": "number", "default": "1"}, "value1_offset": {"type": "number"}, "value1_maxlimit": {"type": "number"}, "value1_minlimit": {"type": "number"}, "value1_prefix": {"type": "string"}, "value1_suffix": {"type": "string"}, "value1_thousandsep": {"type": "string"}, "value2_decimals": {"type": "number", "default": "2"}, "value2_roundmode": {"type": "enum", "default": "round", "values": ["round", "floor", "ceil"]}, "value2_scale": {"type": "number", "default": "1"}, "value2_offset": {"type": "number"}, "value2_minlimit": {"type": "number"}, "value2_maxlimit": {"type": "number"}, "value2_prefix": {"type": "string"}, "value2_suffix": {"type": "string"}, "value2_thousandsep": {"type": "string"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

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

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

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

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

package/default-controls/controls/gauges/setpoint-gauge.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"properties": {"value": {"type": "number", "default": 26}, "setpoint": {"type": "number", "default": 62}, "min": {"type": "number", "default": 0}, "max": {"type": "number", "default": 100}, "bandmin": {"type": "number", "default": 15}, "bandmax": {"type": "number", "default": 80}, "title": {"type": "string", "default": "Outdoor"}, "decimals": {"type": "number", "default": 0}, "bandcolor": {"type": "color", "default": "#cfe2f3"}, "endcolor": {"type": "color", "default": "#5b6470"}, "valuecolor": {"type": "color", "default": "#2b57b3"}}, "settings": {"width": "360px", "height": "120px"}, "html": "<div id=\"wrap\" class=\"sg-wrap\"><div class=\"sg-title\" bind-content:text=\"??title\"></div><div class=\"sg-track\"><div class=\"sg-vptr\" bind-css:left=\"??value;??min;??max;((__0-__1)/(__2-__1))100+'%'\"></div><div class=\"sg-end sg-end-l\" bind-css:background-color=\"??endcolor\" bind-css:width=\"??bandmin;??min;??max;((__0-__1)/(__2-__1))100+'%'\"></div><div class=\"sg-band\" bind-css:background-color=\"??bandcolor\" bind-css:left=\"??bandmin;??min;??max;((__0-__1)/(__2-__1))100+'%'\" bind-css:width=\"??bandmin;??bandmax;??min;??max;((__1-__0)/(__3-__2))100+'%'\"></div><div class=\"sg-end sg-end-r\" bind-css:background-color=\"??endcolor\" bind-css:left=\"??bandmax;??min;??max;((__0-__1)/(__2-__1))100+'%'\" bind-css:width=\"??bandmax;??min;??max;((__2-__0)/(__2-__1))100+'%'\"></div><div class=\"sg-diamond\" bind-css:left=\"??setpoint;??min;??max;((__0-__1)/(__2-__1))*100+'%'\"></div></div><div class=\"sg-foot\"><span class=\"sg-tick\" bind-content:text=\"??min\"></span><span class=\"sg-value\" bind-css:color=\"??valuecolor\" bind-content:text=\"??value;??decimals;Number(__0).toFixed(Number(__1))\"></span><span class=\"sg-tick\" bind-content:text=\"??max\"></span></div></div>", "style": ":host{display:block;width:100%;color:var(--ui-text,#e2e6ec);font-family:'Segoe UI',Roboto,sans-serif;box-sizing:border-box;}\n.sg-wrap{padding:20px 16px 8px;box-sizing:border-box;}\n.sg-title{text-align:center;font-size:18px;font-weight:500;margin-bottom:16px;}\n.sg-track{position:relative;height:16px;border:1px solid var(--ui-border,#3b4250);border-radius:3px;overflow:visible;-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background:var(--ui-input,#2a2f3a);}\n.sg-end{position:absolute;top:0;bottom:0;}\n.sg-end-l{left:0;border-radius:2px 0 0 2px;}\n.sg-band{position:absolute;top:0;bottom:0;}\n.sg-vptr{position:absolute;top:-13px;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:11px solid var(--ui-text,#e2e6ec);}\n.sg-diamond{position:absolute;top:50%;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:var(--ui-input,#2a2f3a);border:2px solid var(--ui-dim,#9aa3b0);}\n.sg-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}\n.sg-tick{font-size:13px;opacity:.75;}\n.sg-value{font-size:24px;font-weight:700;}", "script": "export function init(instance){ try{ instance._bindingsRefresh && instance._bindingsRefresh(); }catch(e){} }\nexport function connectedCallback(instance){}\n"}
1	+ {"properties": {"value": {"type": "number", "default": 26}, "setpoint": {"type": "number", "default": 62}, "min": {"type": "number", "default": 0}, "max": {"type": "number", "default": 100}, "bandmin": {"type": "number", "default": 15}, "bandmax": {"type": "number", "default": 80}, "title": {"type": "string", "default": "Outdoor"}, "decimals": {"type": "number", "default": 0}, "bandcolor": {"type": "color", "default": "#cfe2f3"}, "endcolor": {"type": "color", "default": "#5b6470"}, "valuecolor": {"type": "color", "default": "#2b57b3"}}, "settings": {"width": "360px", "height": "120px"}, "html": "<div id=\"wrap\" class=\"sg-wrap\"><div class=\"sg-title\" bind-content:text=\"??title\"></div><div class=\"sg-track\"><div class=\"sg-vptr\" bind-css:left=\"??value;??min;??max;((__0-__1)/(__2-__1))100+'%'\"></div><div class=\"sg-end sg-end-l\" bind-css:background-color=\"??endcolor\" bind-css:width=\"??bandmin;??min;??max;((__0-__1)/(__2-__1))100+'%'\"></div><div class=\"sg-band\" bind-css:background-color=\"??bandcolor\" bind-css:left=\"??bandmin;??min;??max;((__0-__1)/(__2-__1))100+'%'\" bind-css:width=\"??bandmin;??bandmax;??min;??max;((__1-__0)/(__3-__2))100+'%'\"></div><div class=\"sg-end sg-end-r\" bind-css:background-color=\"??endcolor\" bind-css:left=\"??bandmax;??min;??max;((__0-__1)/(__2-__1))100+'%'\" bind-css:width=\"??bandmax;??min;??max;((__2-__0)/(__2-__1))100+'%'\"></div><div class=\"sg-diamond\" bind-css:left=\"??setpoint;??min;??max;((__0-__1)/(__2-__1))*100+'%'\"></div></div><div class=\"sg-foot\"><span class=\"sg-tick\" bind-content:text=\"??min\"></span><span class=\"sg-value\" bind-css:color=\"??valuecolor\" bind-content:text=\"??value;??decimals;Number(__0).toFixed(Number(__1))\"></span><span class=\"sg-tick\" bind-content:text=\"??max\"></span></div></div>", "style": ":host{display:block;width:100%;color:var(--ui-text,#e2e6ec);font-family:'Segoe UI',Roboto,sans-serif;box-sizing:border-box;}\n.sg-wrap{padding:20px 16px 8px;box-sizing:border-box;}\n.sg-title{text-align:center;font-size:18px;font-weight:500;margin-bottom:16px;}\n.sg-track{position:relative;height:16px;border:1px solid var(--ui-border,#3b4250);border-radius:3px;overflow:visible;-webkit-backdrop-filter:var(--ui-backdrop,none);backdrop-filter:var(--ui-backdrop,none);background:var(--ui-input,#2a2f3a);}\n.sg-end{position:absolute;top:0;bottom:0;}\n.sg-end-l{left:0;border-radius:2px 0 0 2px;}\n.sg-band{position:absolute;top:0;bottom:0;}\n.sg-vptr{position:absolute;top:-13px;transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:11px solid var(--ui-text,#e2e6ec);}\n.sg-diamond{position:absolute;top:50%;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);background:var(--ui-input,#2a2f3a);border:2px solid var(--ui-dim,#9aa3b0);}\n.sg-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}\n.sg-tick{font-size:13px;opacity:.75;}\n.sg-value{font-size:24px;font-weight:700;}", "script": "export function init(instance){ try{ instance._bindingsRefresh && instance._bindingsRefresh?.(); }catch(e){} }\nexport function connectedCallback(instance){}\n"}