npm - iobroker.mywebui - Versions diffs - 1.64.0 → 1.68.0 - Mend

iobroker.mywebui 1.64.0 → 1.68.0

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

Files changed (247) hide show

package/default-controls/controls/Language/LanguageSelector2.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<div id=\"lang-selector\" style=\"display:flex;flex-wrap:wrap;gap:8px;padding:8px;width:100%;height:100%;box-sizing:border-box;align-items:center;justify-content:center;\"></div>\n","style":":host {\n display: block;\n width: 100%;\n height: 100%;\n background: transparent;\n}\n* { box-sizing: border-box; }\n.lang-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 8px;\n border: 2px solid rgba(255,255,255,0.1);\n background: rgba(255,255,255,0.05);\n padding: 6px 10px;\n transition: all 0.2s ease;\n user-select: none;\n gap: 4px;\n min-width: 56px;\n}\n.lang-btn:hover {\n background: rgba(255,255,255,0.15);\n border-color: rgba(255,255,255,0.3);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n}\n.lang-btn.active {\n border-color: #2196f3;\n background: rgba(33,150,243,0.2);\n box-shadow: 0 0 12px rgba(33,150,243,0.5);\n}\n.lang-flag {\n border-radius: 3px;\n overflow: hidden;\n display: block;\n box-shadow: 0 1px 4px rgba(0,0,0,0.4);\n}\n.lang-code {\n font-size: 11px;\n font-weight: 700;\n color: #aaa;\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n.lang-btn.active .lang-code { color: #64b5f6; }\n","script":"let iobrokerHandler;\r\nlet _langChangedHandler;\r\nlet _translChangedHandler;\r\ndebugger;\r\nconst W = 36, H = 24;\r\n\r\nconst FLAGS = {\r\n az: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#0092BC\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#E8112D\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#509E2F\"/>\r\n <circle cx=\"18\" cy=\"12\" r=\"4.5\" fill=\"white\"/>\r\n <circle cx=\"19.5\" cy=\"12\" r=\"3.5\" fill=\"#E8112D\"/>\r\n <polygon fill=\"white\" points=\"22,10 23.5,12 22,14 24.5,12\"/>\r\n <polygon fill=\"white\" points=\"21.5,10.5 22.2,12 21.5,13.5 23.5,12\"/>\r\n </svg>`,\r\n ru: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#FFFFFF\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#0039A6\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#D52B1E\"/>\r\n </svg>`,\r\n en: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#012169\"/>\r\n <line x1=\"0\" y1=\"0\" x2=\"36\" y2=\"24\" stroke=\"white\" stroke-width=\"4.8\"/>\r\n <line x1=\"36\" y1=\"0\" x2=\"0\" y2=\"24\" stroke=\"white\" stroke-width=\"4.8\"/>\r\n <line x1=\"0\" y1=\"0\" x2=\"36\" y2=\"24\" stroke=\"#C8102E\" stroke-width=\"3.2\"/>\r\n <line x1=\"36\" y1=\"0\" x2=\"0\" y2=\"24\" stroke=\"#C8102E\" stroke-width=\"3.2\"/>\r\n <rect x=\"15\" y=\"0\" width=\"6\" height=\"24\" fill=\"white\"/>\r\n <rect y=\"9\" width=\"36\" height=\"6\" fill=\"white\"/>\r\n <rect x=\"16\" y=\"0\" width=\"4\" height=\"24\" fill=\"#C8102E\"/>\r\n <rect y=\"10\" width=\"36\" height=\"4\" fill=\"#C8102E\"/>\r\n </svg>`,\r\n de: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#000000\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#DD0000\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#FFCE00\"/>\r\n </svg>`,\r\n fr: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#ED2939\"/>\r\n <rect width=\"24\" height=\"24\" fill=\"#FFFFFF\"/>\r\n <rect width=\"12\" height=\"24\" fill=\"#002395\"/>\r\n </svg>`,\r\n tr: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#E30A17\"/>\r\n <circle cx=\"14\" cy=\"12\" r=\"6\" fill=\"white\"/>\r\n <circle cx=\"16\" cy=\"12\" r=\"4.5\" fill=\"#E30A17\"/>\r\n <polygon fill=\"white\" points=\"22,12 19.5,10.5 20.5,13.5 20.5,10.5 19.5,13.5\"/>\r\n <polygon fill=\"white\" transform=\"rotate(-18,20.5,12)\" points=\"20.5,8 21.2,10.2 23.5,10.2 21.7,11.5 22.4,13.7 20.5,12.5 18.6,13.7 19.3,11.5 17.5,10.2 19.8,10.2\"/>\r\n </svg>`,\r\n uk: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"12\" fill=\"#005BBB\"/>\r\n <rect y=\"12\" width=\"36\" height=\"12\" fill=\"#FFD500\"/>\r\n </svg>`,\r\n pl: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"12\" fill=\"#FFFFFF\"/>\r\n <rect y=\"12\" width=\"36\" height=\"12\" fill=\"#DC143C\"/>\r\n </svg>`,\r\n es: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#AA151B\"/>\r\n <rect y=\"6\" width=\"36\" height=\"12\" fill=\"#F1BF00\"/>\r\n </svg>`,\r\n it: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#CE2B37\"/>\r\n <rect width=\"24\" height=\"24\" fill=\"#FFFFFF\"/>\r\n <rect width=\"12\" height=\"24\" fill=\"#009246\"/>\r\n </svg>`,\r\n zh: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#DE2910\"/>\r\n <polygon fill=\"#FFDE00\" points=\"4,2 5,5.5 8.5,5.5 5.8,7.5 6.8,11 4,9 1.2,11 2.2,7.5 -0.5,5.5 3,5.5\"/>\r\n <polygon fill=\"#FFDE00\" transform=\"rotate(30,12,3)\" points=\"12,1 12.5,2.5 14,2.5 12.8,3.3 13.3,4.8 12,4 10.7,4.8 11.2,3.3 10,2.5 11.5,2.5\"/>\r\n <polygon fill=\"#FFDE00\" transform=\"rotate(-20,15,6)\" points=\"15,4 15.5,5.5 17,5.5 15.8,6.3 16.3,7.8 15,7 13.7,7.8 14.2,6.3 13,5.5 14.5,5.5\"/>\r\n </svg>`,\r\n ar: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#006C35\"/>\r\n <line x1=\"6\" y1=\"12\" x2=\"30\" y2=\"12\" stroke=\"white\" stroke-width=\"1.5\"/>\r\n <text x=\"18\" y=\"15\" text-anchor=\"middle\" fill=\"white\" font-size=\"7\" font-family=\"serif\">ع</text>\r\n </svg>`,\r\n pt: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#FF0000\"/>\r\n <rect width=\"14\" height=\"24\" fill=\"#006600\"/>\r\n <circle cx=\"14\" cy=\"12\" r=\"5\" fill=\"#FFFF00\" stroke=\"#006600\" stroke-width=\"0.8\"/>\r\n <circle cx=\"14\" cy=\"12\" r=\"3\" fill=\"#0033AA\"/>\r\n </svg>`,\r\n nl: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#AE1C28\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#FFFFFF\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#21468B\"/>\r\n </svg>`,\r\n};\r\n\r\nexport async function connectedCallback(instance) {\r\n const p = window.location.protocol;\r\n const h = window.location.hostname;\r\n const port = window.location.port;\r\n try {\r\n const mod = await import(`${p}//${h}:${port}/mywebui/dist/frontend/common/IobrokerHandler.js`);\r\n iobrokerHandler = mod.iobrokerHandler;\r\n } catch(e) {\r\n console.error('LanguageSelector: import failed', e);\r\n return;\r\n }\r\n await iobrokerHandler.waitForReady();\r\n _render(instance);\r\n _langChangedHandler = iobrokerHandler.languageChanged.on(() => _updateActive(instance));\r\n _translChangedHandler = iobrokerHandler.translationsChanged.on(() => _render(instance));\r\n iobrokerHandler.setState('0_userdata.0.language.selectedlanguage', { val: iobrokerHandler.language });\r\n}\r\n\r\nexport function disconnectedCallback(instance) {\r\n _langChangedHandler?.dispose();\r\n _translChangedHandler?.dispose();\r\n}\r\n\r\nfunction _render(instance) {\r\n const container = instance._getDomElement('lang-selector');\r\n container.innerHTML = '';\r\n const langs = Object.keys(iobrokerHandler.translations ?? {});\r\n if (!langs.length) {\r\n container.innerHTML = '<span style=\"color:#888;font-size:12px;\">No translations defined</span>';\r\n return;\r\n }\r\n const size = parseInt(instance.size ?? 36);\r\n const dir = instance.direction ?? 'horizontal';\r\n container.style.flexDirection = dir === 'vertical' ? 'column' : 'row';\r\n for (const lang of langs) {\r\n const btn = document.createElement('button');\r\n btn.className = 'lang-btn' + (lang === iobrokerHandler.language ? ' active' : '');\r\n btn.dataset.lang = lang;\r\n btn.title = lang.toUpperCase();\r\n const flagWrap = document.createElement('span');\r\n flagWrap.className = 'lang-flag';\r\n const svgStr = FLAGS[lang];\r\n if (svgStr) {\r\n const scaled = svgStr.replace(/width=\"\\d+\"/, `width=\"${size}\"`).replace(/height=\"\\d+\"/, `height=\"${Math.round(size2/3)}\"`);\r\n flagWrap.innerHTML = scaled;\r\n } else {\r\n flagWrap.style.cssText = `width:${size}px;height:${Math.round(size2/3)}px;background:#555;border-radius:3px;display:flex;align-items:center;justify-content:center;`;\r\n flagWrap.textContent = lang.toUpperCase();\r\n }\r\n const code = document.createElement('span');\r\n code.className = 'lang-code';\r\n code.textContent = lang;\r\n btn.appendChild(flagWrap);\r\n btn.appendChild(code);\r\n btn.onclick = () => {\r\n iobrokerHandler.setLanguage(lang);\r\n iobrokerHandler.setState('0_userdata.0.language.selectedlanguage', { val: lang });\r\n };\r\n container.appendChild(btn);\r\n }\r\n}\r\n\r\nfunction _updateActive(instance) {\r\n const container = instance._getDomElement('lang-selector');\r\n container.querySelectorAll('.lang-btn').forEach(btn => {\r\n btn.classList.toggle('active', btn.dataset.lang === iobrokerHandler.language);\r\n });\r\n}\r\n","properties":{"size":{"type":"number","default":"36"},"direction":{"type":"string","default":"horizontal"}},"settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":"","useGlobalStyle":"false"}}
1	+ {"html": "<div id=\"lang-selector\" style=\"display:flex;flex-wrap:wrap;gap:8px;padding:8px;width:100%;height:100%;box-sizing:border-box;align-items:center;justify-content:center;\"></div>\n", "style": ":host {\n display: block;\n width: 100%;\n height: 100%;\n background: transparent;\n}\n* { box-sizing: border-box; }\n.lang-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 8px;\n border: 2px solid rgba(255,255,255,0.1);\n background: rgba(255,255,255,0.05);\n padding: 6px 10px;\n transition: all 0.2s ease;\n user-select: none;\n gap: 4px;\n min-width: 56px;\n}\n.lang-btn:hover {\n background: rgba(255,255,255,0.15);\n border-color: rgba(255,255,255,0.3);\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0,0,0,0.3);\n}\n.lang-btn.active {\n border-color: #2196f3;\n background: rgba(33,150,243,0.2);\n box-shadow: 0 0 12px rgba(33,150,243,0.5);\n}\n.lang-flag {\n border-radius: 3px;\n overflow: hidden;\n display: block;\n box-shadow: 0 1px 4px rgba(0,0,0,0.4);\n}\n.lang-code {\n font-size: 11px;\n font-weight: 700;\n color: #aaa;\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n.lang-btn.active .lang-code { color: #64b5f6; }\n", "script": "let iobrokerHandler;\r\nlet _langChangedHandler;\r\nlet _translChangedHandler;\r\nconst W = 36, H = 24;\r\n\r\nconst FLAGS = {\r\n az: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#0092BC\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#E8112D\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#509E2F\"/>\r\n <circle cx=\"18\" cy=\"12\" r=\"4.5\" fill=\"white\"/>\r\n <circle cx=\"19.5\" cy=\"12\" r=\"3.5\" fill=\"#E8112D\"/>\r\n <polygon fill=\"white\" points=\"22,10 23.5,12 22,14 24.5,12\"/>\r\n <polygon fill=\"white\" points=\"21.5,10.5 22.2,12 21.5,13.5 23.5,12\"/>\r\n </svg>`,\r\n ru: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#FFFFFF\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#0039A6\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#D52B1E\"/>\r\n </svg>`,\r\n en: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#012169\"/>\r\n <line x1=\"0\" y1=\"0\" x2=\"36\" y2=\"24\" stroke=\"white\" stroke-width=\"4.8\"/>\r\n <line x1=\"36\" y1=\"0\" x2=\"0\" y2=\"24\" stroke=\"white\" stroke-width=\"4.8\"/>\r\n <line x1=\"0\" y1=\"0\" x2=\"36\" y2=\"24\" stroke=\"#C8102E\" stroke-width=\"3.2\"/>\r\n <line x1=\"36\" y1=\"0\" x2=\"0\" y2=\"24\" stroke=\"#C8102E\" stroke-width=\"3.2\"/>\r\n <rect x=\"15\" y=\"0\" width=\"6\" height=\"24\" fill=\"white\"/>\r\n <rect y=\"9\" width=\"36\" height=\"6\" fill=\"white\"/>\r\n <rect x=\"16\" y=\"0\" width=\"4\" height=\"24\" fill=\"#C8102E\"/>\r\n <rect y=\"10\" width=\"36\" height=\"4\" fill=\"#C8102E\"/>\r\n </svg>`,\r\n de: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#000000\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#DD0000\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#FFCE00\"/>\r\n </svg>`,\r\n fr: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#ED2939\"/>\r\n <rect width=\"24\" height=\"24\" fill=\"#FFFFFF\"/>\r\n <rect width=\"12\" height=\"24\" fill=\"#002395\"/>\r\n </svg>`,\r\n tr: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#E30A17\"/>\r\n <circle cx=\"14\" cy=\"12\" r=\"6\" fill=\"white\"/>\r\n <circle cx=\"16\" cy=\"12\" r=\"4.5\" fill=\"#E30A17\"/>\r\n <polygon fill=\"white\" points=\"22,12 19.5,10.5 20.5,13.5 20.5,10.5 19.5,13.5\"/>\r\n <polygon fill=\"white\" transform=\"rotate(-18,20.5,12)\" points=\"20.5,8 21.2,10.2 23.5,10.2 21.7,11.5 22.4,13.7 20.5,12.5 18.6,13.7 19.3,11.5 17.5,10.2 19.8,10.2\"/>\r\n </svg>`,\r\n uk: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"12\" fill=\"#005BBB\"/>\r\n <rect y=\"12\" width=\"36\" height=\"12\" fill=\"#FFD500\"/>\r\n </svg>`,\r\n pl: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"12\" fill=\"#FFFFFF\"/>\r\n <rect y=\"12\" width=\"36\" height=\"12\" fill=\"#DC143C\"/>\r\n </svg>`,\r\n es: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#AA151B\"/>\r\n <rect y=\"6\" width=\"36\" height=\"12\" fill=\"#F1BF00\"/>\r\n </svg>`,\r\n it: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#CE2B37\"/>\r\n <rect width=\"24\" height=\"24\" fill=\"#FFFFFF\"/>\r\n <rect width=\"12\" height=\"24\" fill=\"#009246\"/>\r\n </svg>`,\r\n zh: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#DE2910\"/>\r\n <polygon fill=\"#FFDE00\" points=\"4,2 5,5.5 8.5,5.5 5.8,7.5 6.8,11 4,9 1.2,11 2.2,7.5 -0.5,5.5 3,5.5\"/>\r\n <polygon fill=\"#FFDE00\" transform=\"rotate(30,12,3)\" points=\"12,1 12.5,2.5 14,2.5 12.8,3.3 13.3,4.8 12,4 10.7,4.8 11.2,3.3 10,2.5 11.5,2.5\"/>\r\n <polygon fill=\"#FFDE00\" transform=\"rotate(-20,15,6)\" points=\"15,4 15.5,5.5 17,5.5 15.8,6.3 16.3,7.8 15,7 13.7,7.8 14.2,6.3 13,5.5 14.5,5.5\"/>\r\n </svg>`,\r\n ar: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#006C35\"/>\r\n <line x1=\"6\" y1=\"12\" x2=\"30\" y2=\"12\" stroke=\"white\" stroke-width=\"1.5\"/>\r\n <text x=\"18\" y=\"15\" text-anchor=\"middle\" fill=\"white\" font-size=\"7\" font-family=\"serif\">ع</text>\r\n </svg>`,\r\n pt: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"24\" fill=\"#FF0000\"/>\r\n <rect width=\"14\" height=\"24\" fill=\"#006600\"/>\r\n <circle cx=\"14\" cy=\"12\" r=\"5\" fill=\"#FFFF00\" stroke=\"#006600\" stroke-width=\"0.8\"/>\r\n <circle cx=\"14\" cy=\"12\" r=\"3\" fill=\"#0033AA\"/>\r\n </svg>`,\r\n nl: `<svg viewBox=\"0 0 36 24\" xmlns=\"http://www.w3.org/2000/svg\" width=\"${W}\" height=\"${H}\">\r\n <rect width=\"36\" height=\"8\" fill=\"#AE1C28\"/>\r\n <rect y=\"8\" width=\"36\" height=\"8\" fill=\"#FFFFFF\"/>\r\n <rect y=\"16\" width=\"36\" height=\"8\" fill=\"#21468B\"/>\r\n </svg>`,\r\n};\r\n\r\nexport async function connectedCallback(instance) {\r\n const p = window.location.protocol;\r\n const h = window.location.hostname;\r\n const port = window.location.port;\r\n try {\r\n const mod = await import(`${p}//${h}:${port}/mywebui/dist/frontend/common/IobrokerHandler.js`);\r\n iobrokerHandler = mod.iobrokerHandler;\r\n } catch(e) {\r\n console.error('LanguageSelector: import failed', e);\r\n return;\r\n }\r\n await iobrokerHandler.waitForReady();\r\n _render(instance);\r\n _langChangedHandler = iobrokerHandler.languageChanged.on(() => _updateActive(instance));\r\n _translChangedHandler = iobrokerHandler.translationsChanged.on(() => _render(instance));\r\n iobrokerHandler.setState('0_userdata.0.language.selectedlanguage', { val: iobrokerHandler.language });\r\n}\r\n\r\nexport function disconnectedCallback(instance) {\r\n _langChangedHandler?.dispose();\r\n _translChangedHandler?.dispose();\r\n}\r\n\r\nfunction _render(instance) {\r\n const container = instance._getDomElement('lang-selector');\r\n container.innerHTML = '';\r\n const langs = Object.keys(iobrokerHandler.translations ?? {});\r\n if (!langs.length) {\r\n container.innerHTML = '<span style=\"color:#888;font-size:12px;\">No translations defined</span>';\r\n return;\r\n }\r\n const size = parseInt(instance.size ?? 36);\r\n const dir = instance.direction ?? 'horizontal';\r\n container.style.flexDirection = dir === 'vertical' ? 'column' : 'row';\r\n for (const lang of langs) {\r\n const btn = document.createElement('button');\r\n btn.className = 'lang-btn' + (lang === iobrokerHandler.language ? ' active' : '');\r\n btn.dataset.lang = lang;\r\n btn.title = lang.toUpperCase();\r\n const flagWrap = document.createElement('span');\r\n flagWrap.className = 'lang-flag';\r\n const svgStr = FLAGS[lang];\r\n if (svgStr) {\r\n const scaled = svgStr.replace(/width=\"\\d+\"/, `width=\"${size}\"`).replace(/height=\"\\d+\"/, `height=\"${Math.round(size2/3)}\"`);\r\n flagWrap.innerHTML = scaled;\r\n } else {\r\n flagWrap.style.cssText = `width:${size}px;height:${Math.round(size2/3)}px;background:#555;border-radius:3px;display:flex;align-items:center;justify-content:center;`;\r\n flagWrap.textContent = lang.toUpperCase();\r\n }\r\n const code = document.createElement('span');\r\n code.className = 'lang-code';\r\n code.textContent = lang;\r\n btn.appendChild(flagWrap);\r\n btn.appendChild(code);\r\n btn.onclick = () => {\r\n iobrokerHandler.setLanguage(lang);\r\n iobrokerHandler.setState('0_userdata.0.language.selectedlanguage', { val: lang });\r\n };\r\n container.appendChild(btn);\r\n }\r\n}\r\n\r\nfunction _updateActive(instance) {\r\n const container = instance._getDomElement('lang-selector');\r\n container.querySelectorAll('.lang-btn').forEach(btn => {\r\n btn.classList.toggle('active', btn.dataset.lang === iobrokerHandler.language);\r\n });\r\n}\r\n", "properties": {"size": {"type": "number", "default": "36"}, "direction": {"type": "string", "default": "horizontal"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": "", "useGlobalStyle": "false"}}

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 debugger;\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;\ndebugger;\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 debugger;\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 //debugger;\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\ndebugger;\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 debugger;\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/Webui_led_light1.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"html":"<div height=\"100%\" width=\"100%\">\n <svg version=\"1.1\" id=\"Default\" xmlns:agg=\"http://www.example.com\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"100%\" height=\"100%\" viewBox=\"0 0 127.21 127.21\" enable-background=\"new 0 0 127.21 127.21\" xml:space=\"preserve\">\n <defs>\n <circle id=\"body\" cx=\"63.604\" cy=\"63.604\" r=\"44\"></circle>\n <clipPath id=\"bodyClip\">\n <use xlink:href=\"#body\" overflow=\"visible\"></use>\n </clipPath>\n </defs>\n <circle cx=\"63.604\" cy=\"63.604\" r=\"46.221\"></circle>\n <radialGradient id=\"SVGID_1_\" cx=\"29.7715\" cy=\"33.4385\" r=\"91.0111\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" style=\"stop-color:white;\"></stop>\n <stop offset=\"1\" class bind-attr:class='{\"signal\":\"??fillcolor\",\"converter\":{\"true\":\"maincolor\"}}'></stop>\n </radialGradient>\n <use xlink:href=\"#body\" fill=\"url(#SVGID_1_)\"></use>\n <path opacity=\"0.5\" fill=\"#FFFFFF\" d=\"M25.532,74.503c-5.46-31.579,13.149-50.338,31.092-53.169\n\tC36.639,22.692,20.8,41.055,20.8,63.566c0,3.784,0.46,7.45,1.299,10.938H25.532z\"></path>\n <path opacity=\"0.5\" fill=\"#FFFFFF\" d=\"M22.867,77.693c4.647,12.701,14.21,22.453,25.966,26.129\n\tc-8.619-3.168-20.089-15.555-22.671-26.16L22.867,77.693z\"></path>\n <path opacity=\"0.3\" fill=\"white\" clip-path=\"url(#bodyClip)\" d=\"M103.365,45.808h15.782v-45H10.397v41.411h13.435\n\tc1.109,0.263,2.217,0.612,3.325,1.038c3.221,1.239,6.44,3.129,9.661,5.021c3.221,1.89,6.44,3.781,9.661,5.019\n\tc3.221,1.239,6.441,1.825,9.662,1.555c3.221-0.269,6.441-1.394,9.662-2.983c3.221-1.591,6.441-3.648,9.662-5.462\n\tc3.219-1.814,6.439-3.385,9.66-4.171c3.222-0.786,6.444-0.786,9.662,0C97.645,42.933,100.501,44.252,103.365,45.808z\"></path>\n </svg>\n</div>\n","style":"\n\n* {\n box-sizing: border-box;\n}\n\n.maincolor {\n fill:green;\n stop-color: green;\n}\n","script":"export function init(instance){\n ~~/debugger;\~~n let vbv = instance.fillcolor;/\n}","properties":{"fillcolor":{"type":"boolean"},"stopcolor":{"type":"boolean"}},"settings":{}}
1	+ {"html": "<div height=\"100%\" width=\"100%\">\n <svg version=\"1.1\" id=\"Default\" xmlns:agg=\"http://www.example.com\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" width=\"100%\" height=\"100%\" viewBox=\"0 0 127.21 127.21\" enable-background=\"new 0 0 127.21 127.21\" xml:space=\"preserve\">\n <defs>\n <circle id=\"body\" cx=\"63.604\" cy=\"63.604\" r=\"44\"></circle>\n <clipPath id=\"bodyClip\">\n <use xlink:href=\"#body\" overflow=\"visible\"></use>\n </clipPath>\n </defs>\n <circle cx=\"63.604\" cy=\"63.604\" r=\"46.221\"></circle>\n <radialGradient id=\"SVGID_1_\" cx=\"29.7715\" cy=\"33.4385\" r=\"91.0111\" gradientUnits=\"userSpaceOnUse\">\n <stop offset=\"0\" style=\"stop-color:white;\"></stop>\n <stop offset=\"1\" class bind-attr:class='{\"signal\":\"??fillcolor\",\"converter\":{\"true\":\"maincolor\"}}'></stop>\n </radialGradient>\n <use xlink:href=\"#body\" fill=\"url(#SVGID_1_)\"></use>\n <path opacity=\"0.5\" fill=\"#FFFFFF\" d=\"M25.532,74.503c-5.46-31.579,13.149-50.338,31.092-53.169\n\tC36.639,22.692,20.8,41.055,20.8,63.566c0,3.784,0.46,7.45,1.299,10.938H25.532z\"></path>\n <path opacity=\"0.5\" fill=\"#FFFFFF\" d=\"M22.867,77.693c4.647,12.701,14.21,22.453,25.966,26.129\n\tc-8.619-3.168-20.089-15.555-22.671-26.16L22.867,77.693z\"></path>\n <path opacity=\"0.3\" fill=\"white\" clip-path=\"url(#bodyClip)\" d=\"M103.365,45.808h15.782v-45H10.397v41.411h13.435\n\tc1.109,0.263,2.217,0.612,3.325,1.038c3.221,1.239,6.44,3.129,9.661,5.021c3.221,1.89,6.44,3.781,9.661,5.019\n\tc3.221,1.239,6.441,1.825,9.662,1.555c3.221-0.269,6.441-1.394,9.662-2.983c3.221-1.591,6.441-3.648,9.662-5.462\n\tc3.219-1.814,6.439-3.385,9.66-4.171c3.222-0.786,6.444-0.786,9.662,0C97.645,42.933,100.501,44.252,103.365,45.808z\"></path>\n </svg>\n</div>\n", "style": "\n\n* {\n box-sizing: border-box;\n}\n\n.maincolor {\n fill:green;\n stop-color: green;\n}\n", "script": "export function init(instance){\n /\n let vbv = instance.fillcolor;/\n}", "properties": {"fillcolor": {"type": "boolean"}, "stopcolor": {"type": "boolean"}}, "settings": {}}

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

	@@ -1 +1 @@
1	- {"html":"<span id=\"jkj\" style=\"position:absolute;left:118px;top:46px;\">hello world</span>\n<span id=\"jkj2\" bind-content:text=\"??testprop\" style=\"position:absolute;left:374px;top:98px;\"></span>\n<input type=\"text\" bind-prop:value=\"=??testprop\" style=\"width:140px;position:absolute;left:559px;top:40px;\">\n","style":":host {\n}\n\n* {\n box-sizing: border-box;\n}","script":"// ════════════════════════════════════════════════════════════════════════════\n// Custom Control — Lifecycle Script\n// Each exported function is called by the runtime with (instance, shadowRoot)\n// instance = the web component element (shadow host)\n// shadowRoot = instance.shadowRoot\n// ════════════════════════════════════════════════════════════════════════════\n\n// ── Import (needed only if you use iobrokerHandler directly) ─────────────────\n// import { iobrokerHandler } from '../common/IobrokerHandler.js';\n\n// ── 1. DOM ───────────────────────────────────────────────────────────────────\n// instance._getDomElement('myId')\n// getElementById inside shadow root — returns the element or null\n// NOTE: pass the bare ID, NOT '#myId'\n//\n// instance._getDomElements('.myClass')\n// querySelectorAll inside shadow root — returns NodeList\n//\n// shadowRoot.querySelector('tag')\n// raw shadow root query (any CSS selector)\n\n// ── 2. Events ────────────────────────────────────────────────────────────────\n// instance._assignEvent('click', handler)\n// Adds a listener on the host element itself.\n// → Auto-removed when the control is disconnected from DOM.\n// Returns { remove() } for early removal.\n//\n// el.addEventListener('click', handler) ← on a child element (manual cleanup)\n\n// ── 3. Properties (defined in Properties tab) ────────────────────────────────\n// instance.myProp read / write a declared property\n// instance['myProp'] same — useful for dynamic names\n\n// ── 4. Relative OID path ─────────────────────────────────────────────────────\n// instance._getRelativeSignalsPath()\n// Returns the OID prefix set by the parent screen/viewer.\n// Relative signals start with '.' → prepend this prefix yourself, or let\n// iobrokerHandler.getNormalizedSignalName() do it.\n\n// ── 5. ioBroker state (iobrokerHandler) ──────────────────────────────────────\n// Must import at top: import { iobrokerHandler } from '../common/IobrokerHandler.js';\n//\n// Read a state once:\n// const state = await iobrokerHandler.getState('hm-rpc.0.ABC.STATE');\n// console.log(state.val, state.ts, state.ack);\n//\n// Write a state:\n// await iobrokerHandler.setState('hm-rpc.0.ABC.STATE', true);\n// await iobrokerHandler.setState('hm-rpc.0.ABC.STATE', { val: 42, ack: false });\n//\n// Subscribe to state changes (remember to unsubscribe on disconnect!):\n// const handler = (id, state) => { console.log(id, state.val); };\n// await iobrokerHandler.subscribeState('hm-rpc.0.ABC.STATE', handler);\n// // in disconnectedCallback:\n// iobrokerHandler.unsubscribeState('hm-rpc.0.ABC.STATE', handler);\n//\n// Get an ioBroker object (type/role/unit/min/max/…):\n// const obj = await iobrokerHandler.getObject('hm-rpc.0.ABC.STATE');\n//\n// Current user and groups:\n// const user = await iobrokerHandler.getCurrentUser(); // { id, groups }\n//\n// Historic data (requires History adapter):\n// const { values } = await iobrokerHandler.getHistoricData(\n// 'hm-rpc.0.ABC.STATE',\n// { start: Date.now() - 3600000, end: Date.now(), count: 100, aggregate: 'none' }\n// );\n//\n// Language:\n// console.log(iobrokerHandler.language); // 'en' \| 'de' \| 'ru' \| …\n// iobrokerHandler.languageChanged.on(lang => {}); // subscribe to language switch\n//\n// Low-level socket connection (for advanced use):\n// iobrokerHandler.connection.subscribeState(id, handler);\n// iobrokerHandler.connection.getStates(pattern); // wildcard query\n\n// ── 6. Navigation & Dialogs (window.RUNTIME) ────────────────────────────────\n// Open a screen (replaces current view):\n// RUNTIME.openScreen({ screen: 'myScreen', relativeSignalsPath: 'hm-rpc.0.device', noHistory: false });\n//\n// Open a screen in a dialog:\n// RUNTIME.openDialog({ screen: 'myScreen', title: 'Details', width: '600px', height: '400px',\n// moveable: true, closeable: true });\n//\n// Run any script command object:\n// await RUNTIME.runSimpleScriptCommand({ type: 'SetSignalValue',\n// signal: 'hm-rpc.0.ABC.STATE', target: 'signal', value: true });\n//\n// Find a parent screen/control:\n// const parentScreen = RUNTIME.getParentScreen(instance); // 1 level up\n// const grandParent = RUNTIME.getParentScreen(instance, 2); // 2 levels up\n\n// ── 7. Bindings (applyBinding) ───────────────────────────────────────────────\n// The framework applies all [[signal]] bindings automatically via applyAllBindings.\n// For dynamic / programmatic bindings you can call it manually:\n//\n// const cleanup = window.appShell.bindingsHelper.applyAllBindings(\n// shadowRoot, // root element to scan\n// instance._getRelativeSignalsPath(), // relative OID prefix\n// instance // property source for ?prop bindings\n// );\n// // cleanup is an array of unsubscribe functions — call them on disconnect:\n// // cleanup.forEach(fn => fn());\n//\n// Single-element binding (low-level — normally not needed):\n// window.appShell.bindingsHelper.applyBinding(\n// element, // target DOM element\n// binding, // binding descriptor (parsed from bind-prop:* attribute)\n// relPath, // relative signal path\n// instance, // root for ?property lookups\n// null // optional specialValueHandler\n// );\n\n// ════════════════════════════════════════════════════════════════════════════\n\nexport function init(instance, shadowRoot) {\n // Called ONCE when the script module is first loaded (before connectedCallback).\n // Use for one-time setup that does not depend on the element being in the DOM.\n ~~debugger;\n~~ let kmn =instance._getDomElement('jkj');\n let jkj2 =instance._getDomElement('jkj2');\n instance._assignEvent('testprop-changed', handler);\n\n console.log(kmn.textContent);\n //jkj2.textContent='ramil';\n}\nfunction handler(e)\n{\n ~~debugger;\n~~}\n\nexport function connectedCallback(instance, shadowRoot) {\n // Called each time the control is inserted into the DOM.\n // Start subscriptions, set up event listeners, render initial state.\n //\n // Example:\n // const label = instance._getDomElement('statusLabel');\n // instance._assignEvent('click', async () => {\n // await iobrokerHandler.setState('hm-rpc.0.device.SWITCH', true);\n // });\n}\n\nexport function disconnectedCallback(instance, shadowRoot) {\n // Called each time the control is removed from the DOM.\n // _assignEvent listeners are removed automatically.\n // Manually unsubscribe from iobrokerHandler.subscribeState calls here.\n}\n","properties":{"testprop":{"type":"string","default":"salam"}},"settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"html": "<span id=\"jkj\" style=\"position:absolute;left:118px;top:46px;\">hello world</span>\n<span id=\"jkj2\" bind-content:text=\"??testprop\" style=\"position:absolute;left:374px;top:98px;\"></span>\n<input type=\"text\" bind-prop:value=\"=??testprop\" style=\"width:140px;position:absolute;left:559px;top:40px;\">\n", "style": ":host {\n}\n\n* {\n box-sizing: border-box;\n}", "script": "// ════════════════════════════════════════════════════════════════════════════\n// Custom Control — Lifecycle Script\n// Each exported function is called by the runtime with (instance, shadowRoot)\n// instance = the web component element (shadow host)\n// shadowRoot = instance.shadowRoot\n// ════════════════════════════════════════════════════════════════════════════\n\n// ── Import (needed only if you use iobrokerHandler directly) ─────────────────\n// import { iobrokerHandler } from '../common/IobrokerHandler.js';\n\n// ── 1. DOM ───────────────────────────────────────────────────────────────────\n// instance._getDomElement('myId')\n// getElementById inside shadow root — returns the element or null\n// NOTE: pass the bare ID, NOT '#myId'\n//\n// instance._getDomElements('.myClass')\n// querySelectorAll inside shadow root — returns NodeList\n//\n// shadowRoot.querySelector('tag')\n// raw shadow root query (any CSS selector)\n\n// ── 2. Events ────────────────────────────────────────────────────────────────\n// instance._assignEvent('click', handler)\n// Adds a listener on the host element itself.\n// → Auto-removed when the control is disconnected from DOM.\n// Returns { remove() } for early removal.\n//\n// el.addEventListener('click', handler) ← on a child element (manual cleanup)\n\n// ── 3. Properties (defined in Properties tab) ────────────────────────────────\n// instance.myProp read / write a declared property\n// instance['myProp'] same — useful for dynamic names\n\n// ── 4. Relative OID path ─────────────────────────────────────────────────────\n// instance._getRelativeSignalsPath()\n// Returns the OID prefix set by the parent screen/viewer.\n// Relative signals start with '.' → prepend this prefix yourself, or let\n// iobrokerHandler.getNormalizedSignalName() do it.\n\n// ── 5. ioBroker state (iobrokerHandler) ──────────────────────────────────────\n// Must import at top: import { iobrokerHandler } from '../common/IobrokerHandler.js';\n//\n// Read a state once:\n// const state = await iobrokerHandler.getState('hm-rpc.0.ABC.STATE');\n// console.log(state.val, state.ts, state.ack);\n//\n// Write a state:\n// await iobrokerHandler.setState('hm-rpc.0.ABC.STATE', true);\n// await iobrokerHandler.setState('hm-rpc.0.ABC.STATE', { val: 42, ack: false });\n//\n// Subscribe to state changes (remember to unsubscribe on disconnect!):\n// const handler = (id, state) => { console.log(id, state.val); };\n// await iobrokerHandler.subscribeState('hm-rpc.0.ABC.STATE', handler);\n// // in disconnectedCallback:\n// iobrokerHandler.unsubscribeState('hm-rpc.0.ABC.STATE', handler);\n//\n// Get an ioBroker object (type/role/unit/min/max/…):\n// const obj = await iobrokerHandler.getObject('hm-rpc.0.ABC.STATE');\n//\n// Current user and groups:\n// const user = await iobrokerHandler.getCurrentUser(); // { id, groups }\n//\n// Historic data (requires History adapter):\n// const { values } = await iobrokerHandler.getHistoricData(\n// 'hm-rpc.0.ABC.STATE',\n// { start: Date.now() - 3600000, end: Date.now(), count: 100, aggregate: 'none' }\n// );\n//\n// Language:\n// console.log(iobrokerHandler.language); // 'en' \| 'de' \| 'ru' \| …\n// iobrokerHandler.languageChanged.on(lang => {}); // subscribe to language switch\n//\n// Low-level socket connection (for advanced use):\n// iobrokerHandler.connection.subscribeState(id, handler);\n// iobrokerHandler.connection.getStates(pattern); // wildcard query\n\n// ── 6. Navigation & Dialogs (window.RUNTIME) ────────────────────────────────\n// Open a screen (replaces current view):\n// RUNTIME.openScreen({ screen: 'myScreen', relativeSignalsPath: 'hm-rpc.0.device', noHistory: false });\n//\n// Open a screen in a dialog:\n// RUNTIME.openDialog({ screen: 'myScreen', title: 'Details', width: '600px', height: '400px',\n// moveable: true, closeable: true });\n//\n// Run any script command object:\n// await RUNTIME.runSimpleScriptCommand({ type: 'SetSignalValue',\n// signal: 'hm-rpc.0.ABC.STATE', target: 'signal', value: true });\n//\n// Find a parent screen/control:\n// const parentScreen = RUNTIME.getParentScreen(instance); // 1 level up\n// const grandParent = RUNTIME.getParentScreen(instance, 2); // 2 levels up\n\n// ── 7. Bindings (applyBinding) ───────────────────────────────────────────────\n// The framework applies all [[signal]] bindings automatically via applyAllBindings.\n// For dynamic / programmatic bindings you can call it manually:\n//\n// const cleanup = window.appShell.bindingsHelper.applyAllBindings(\n// shadowRoot, // root element to scan\n// instance._getRelativeSignalsPath(), // relative OID prefix\n// instance // property source for ?prop bindings\n// );\n// // cleanup is an array of unsubscribe functions — call them on disconnect:\n// // cleanup.forEach(fn => fn());\n//\n// Single-element binding (low-level — normally not needed):\n// window.appShell.bindingsHelper.applyBinding(\n// element, // target DOM element\n// binding, // binding descriptor (parsed from bind-prop:* attribute)\n// relPath, // relative signal path\n// instance, // root for ?property lookups\n// null // optional specialValueHandler\n// );\n\n// ════════════════════════════════════════════════════════════════════════════\n\nexport function init(instance, shadowRoot) {\n // Called ONCE when the script module is first loaded (before connectedCallback).\n // Use for one-time setup that does not depend on the element being in the DOM.\n let kmn =instance._getDomElement('jkj');\n let jkj2 =instance._getDomElement('jkj2');\n instance._assignEvent('testprop-changed', handler);\n\n console.log(kmn.textContent);\n //jkj2.textContent='ramil';\n}\nfunction handler(e)\n{\n}\n\nexport function connectedCallback(instance, shadowRoot) {\n // Called each time the control is inserted into the DOM.\n // Start subscriptions, set up event listeners, render initial state.\n //\n // Example:\n // const label = instance._getDomElement('statusLabel');\n // instance._assignEvent('click', async () => {\n // await iobrokerHandler.setState('hm-rpc.0.device.SWITCH', true);\n // });\n}\n\nexport function disconnectedCallback(instance, shadowRoot) {\n // Called each time the control is removed from the DOM.\n // _assignEvent listeners are removed automatically.\n // Manually unsubscribe from iobrokerHandler.subscribeState calls here.\n}\n", "properties": {"testprop": {"type": "string", "default": "salam"}}, "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}

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 rgb(58, 90, 90);border-radius:4px;padding:8px;display:flex;flex-direction:column;font:"Times New Roman", serif;background: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:#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:#e0e0e0;font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value1\" bind-content:text=\"??value1_value\" style=\"color:#fff;text-align:center;font:bold 16px "Times New Roman", serif;\">NaN</div>\n <div id=\"unit1\" style=\"color:#e0e0e0;font:italic 11px "Times New Roman", serif;\"></div>\n <div id=\"label2\" style=\"color:#e0e0e0;display:none;font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value2\" style=\"color:#fff;text-align:center;display:none;font:bold 16px "Times New Roman", serif;\"></div>\n <div id=\"unit2\" style=\"color:#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 rgb(58, 90, 90);color:#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 rgb(58, 90, 90);border-radius:8px;padding:0px;background:rgb(255, 255, 255);\">\n <div id=\"dialog-header\" style=\"color:#fff;padding:12px;display:flex;justify-content:space-between;align-items:center;background: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:#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 debugger;\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 debugger;\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 debugger;\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: '#5a7a7a', border: '#3a5a5a', text: '#fff', label: '#e0e0e0', btnBg: '#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 rgb(58, 90, 90);border-radius:4px;padding:8px;display:flex;flex-direction:column;font:"Times New Roman", serif;background: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:#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:#e0e0e0;font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value1\" bind-content:text=\"??value1_value\" style=\"color:#fff;text-align:center;font:bold 16px "Times New Roman", serif;\">NaN</div>\n <div id=\"unit1\" style=\"color:#e0e0e0;font:italic 11px "Times New Roman", serif;\"></div>\n <div id=\"label2\" style=\"color:#e0e0e0;display:none;font:italic 12px "Times New Roman", serif;\"></div>\n <div id=\"value2\" style=\"color:#fff;text-align:center;display:none;font:bold 16px "Times New Roman", serif;\"></div>\n <div id=\"unit2\" style=\"color:#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 rgb(58, 90, 90);color:#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 rgb(58, 90, 90);border-radius:8px;padding:0px;background:rgb(255, 255, 255);\">\n <div id=\"dialog-header\" style=\"color:#fff;padding:12px;display:flex;justify-content:space-between;align-items:center;background: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:#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: '#5a7a7a', border: '#3a5a5a', text: '#fff', label: '#e0e0e0', btnBg: '#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/check_write_permission.control CHANGED Viewed

	@@ -1 +1 @@
1	- {"style":":host {\n background: transparent;\n}\n\n\n* {\n box-sizing: border-box;\n}","script":"~~debugger;\r\n~~// Original emit funksiyasını saxla\r\nconst originalEmit = window.IOB.connection._socket.emit;\r\n\r\n// Permission bitləri\r\nconst PERMISSION = {\r\n OWNER_WRITE: 0x200,\r\n GROUP_WRITE: 0x020,\r\n EVERYONE_WRITE: 0x002\r\n};\r\n\r\n// User qruplarını tapmaq üçün helper funksiya\r\nasync function getUserGroups(userName) {\r\n try {\r\n const userId = `system.user.${userName}`;\r\n const userGroups = [];\r\n\r\n // Bütün qrupları əldə et və user-in hansı qruplarda olduğunu yoxla\r\n const groups = await new Promise((resolve, reject) => {\r\n window.IOB.connection._socket.emit(\r\n 'getObjectView',\r\n 'system',\r\n 'group',\r\n { startkey: 'system.group.', endkey: 'system.group.\\u9999' },\r\n (err, res) => {\r\n if (err) reject(err);\r\n else resolve(res);\r\n }\r\n );\r\n });\r\n\r\n if (groups && groups.rows) {\r\n for (const row of groups.rows) {\r\n const groupObj = row.value;\r\n const groupId = row.id.replace('system.group.', '');\r\n \r\n // User bu qrupun üzvüdürsə\r\n if (groupObj.common?.members && groupObj.common.members.includes(userId)) {\r\n userGroups.push(groupId);\r\n }\r\n }\r\n }\r\n\r\n return userGroups;\r\n } catch (err) {\r\n console.error('User groups əldə edilərkən xəta:', err);\r\n return [];\r\n }\r\n}\r\n\r\n// Write permission yoxlama funksiyası\r\nasync function hasWritePermission(stateId, currentUserName, userGroups) {\r\n try {\r\n const obj = await window.IOB.getObject(stateId);\r\n if (!obj) {\r\n console.error('Obyekt tapılmadı:', stateId);\r\n return false;\r\n }\r\n\r\n const currentUserId = `system.user.${currentUserName}`;\r\n const acl = obj.acl \|\| {};\r\n const permission = acl.state \|\| 0;\r\n const owner = acl.owner \|\| 'system.user.admin';\r\n const ownerGroup = acl.ownerGroup \|\| 'system.group.administrator';\r\n\r\n console.log('📝 Permission yoxlanılır:', {\r\n stateId,\r\n currentUser: currentUserId,\r\n userGroups,\r\n owner,\r\n ownerGroup,\r\n permission: '0x' + permission.toString(16)\r\n });\r\n\r\n // Owner yoxla\r\n if (currentUserId === owner) {\r\n const hasOwnerWrite = !!(permission & PERMISSION.OWNER_WRITE);\r\n console.log('👤 Owner check:', hasOwnerWrite);\r\n if (hasOwnerWrite) return true;\r\n }\r\n\r\n // Group yoxla\r\n const ownerGroupName = ownerGroup.replace('system.group.', '');\r\n if (userGroups.includes(ownerGroupName)) {\r\n const hasGroupWrite = !!(permission & PERMISSION.GROUP_WRITE);\r\n console.log('👥 Group check:', hasGroupWrite);\r\n if (hasGroupWrite) return true;\r\n }\r\n\r\n // Everyone yoxla\r\n const hasEveryoneWrite = !!(permission & PERMISSION.EVERYONE_WRITE);\r\n console.log('🌍 Everyone check:', hasEveryoneWrite);\r\n if (hasEveryoneWrite) return true;\r\n\r\n return false;\r\n } catch (err) {\r\n console.error('Permission yoxlanılarkən xəta:', err);\r\n return false;\r\n }\r\n}\r\n\r\n// setState intercept\r\nwindow.IOB.connection._socket.emit = async function(event, ...args) {\r\n if (event === 'setState') {\r\n const [id, value] = args;\r\n \r\n try {\r\n // Current user əldə et\r\n const currentUserName = await window.IOB.connection.getCurrentUser();\r\n console.log('🔐 Current user:', currentUserName);\r\n\r\n // Admin istifadəçiləri yoxlama\r\n if (currentUserName === 'admin') {\r\n console.log('✅ Admin istifadəçi - icazə yoxlanmır');\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n return;\r\n }\r\n\r\n // User qruplarını tap\r\n const userGroups = await getUserGroups(currentUserName);\r\n console.log('👥 User groups:', userGroups);\r\n\r\n // Administrator qrupunda olanlar üçün yoxlama etmə\r\n if (userGroups.includes('administrator')) {\r\n console.log('✅ Administrator qrupunda - icazə yoxlanmır');\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n return;\r\n }\r\n\r\n // Write permission yoxla\r\n const hasPermission = await hasWritePermission(id, currentUserName, userGroups);\r\n \r\n if (!hasPermission) {\r\n console.warn('⛔ Write permission yoxdur:', id);\r\n alert('Yazmaq mümkün deyil, icazə yoxdur!');\r\n return;\r\n }\r\n\r\n console.log('✅ Write icazəsi təsdiqləndi');\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n } catch (err) {\r\n console.error('❌ setState yoxlanılarkən xəta:', err);\r\n alert('İcazə yoxlanılarkən xəta baş verdi!');\r\n }\r\n } else {\r\n // Digər event-lər normal getsin\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n }\r\n};\r\n\r\nconsole.log('✅ setState permission yoxlaması aktivləşdirildi');","settings":{"visibilityEnabled":"false","visibilityGroups":"","visibilityAction":"hide","visibilityRedirectScreen":""}}
1	+ {"style": ":host {\n background: transparent;\n}\n\n\n* {\n box-sizing: border-box;\n}", "script": "// Original emit funksiyasını saxla\r\nconst originalEmit = window.IOB.connection._socket.emit;\r\n\r\n// Permission bitləri\r\nconst PERMISSION = {\r\n OWNER_WRITE: 0x200,\r\n GROUP_WRITE: 0x020,\r\n EVERYONE_WRITE: 0x002\r\n};\r\n\r\n// User qruplarını tapmaq üçün helper funksiya\r\nasync function getUserGroups(userName) {\r\n try {\r\n const userId = `system.user.${userName}`;\r\n const userGroups = [];\r\n\r\n // Bütün qrupları əldə et və user-in hansı qruplarda olduğunu yoxla\r\n const groups = await new Promise((resolve, reject) => {\r\n window.IOB.connection._socket.emit(\r\n 'getObjectView',\r\n 'system',\r\n 'group',\r\n { startkey: 'system.group.', endkey: 'system.group.\\u9999' },\r\n (err, res) => {\r\n if (err) reject(err);\r\n else resolve(res);\r\n }\r\n );\r\n });\r\n\r\n if (groups && groups.rows) {\r\n for (const row of groups.rows) {\r\n const groupObj = row.value;\r\n const groupId = row.id.replace('system.group.', '');\r\n \r\n // User bu qrupun üzvüdürsə\r\n if (groupObj.common?.members && groupObj.common.members.includes(userId)) {\r\n userGroups.push(groupId);\r\n }\r\n }\r\n }\r\n\r\n return userGroups;\r\n } catch (err) {\r\n console.error('User groups əldə edilərkən xəta:', err);\r\n return [];\r\n }\r\n}\r\n\r\n// Write permission yoxlama funksiyası\r\nasync function hasWritePermission(stateId, currentUserName, userGroups) {\r\n try {\r\n const obj = await window.IOB.getObject(stateId);\r\n if (!obj) {\r\n console.error('Obyekt tapılmadı:', stateId);\r\n return false;\r\n }\r\n\r\n const currentUserId = `system.user.${currentUserName}`;\r\n const acl = obj.acl \|\| {};\r\n const permission = acl.state \|\| 0;\r\n const owner = acl.owner \|\| 'system.user.admin';\r\n const ownerGroup = acl.ownerGroup \|\| 'system.group.administrator';\r\n\r\n console.log('📝 Permission yoxlanılır:', {\r\n stateId,\r\n currentUser: currentUserId,\r\n userGroups,\r\n owner,\r\n ownerGroup,\r\n permission: '0x' + permission.toString(16)\r\n });\r\n\r\n // Owner yoxla\r\n if (currentUserId === owner) {\r\n const hasOwnerWrite = !!(permission & PERMISSION.OWNER_WRITE);\r\n console.log('👤 Owner check:', hasOwnerWrite);\r\n if (hasOwnerWrite) return true;\r\n }\r\n\r\n // Group yoxla\r\n const ownerGroupName = ownerGroup.replace('system.group.', '');\r\n if (userGroups.includes(ownerGroupName)) {\r\n const hasGroupWrite = !!(permission & PERMISSION.GROUP_WRITE);\r\n console.log('👥 Group check:', hasGroupWrite);\r\n if (hasGroupWrite) return true;\r\n }\r\n\r\n // Everyone yoxla\r\n const hasEveryoneWrite = !!(permission & PERMISSION.EVERYONE_WRITE);\r\n console.log('🌍 Everyone check:', hasEveryoneWrite);\r\n if (hasEveryoneWrite) return true;\r\n\r\n return false;\r\n } catch (err) {\r\n console.error('Permission yoxlanılarkən xəta:', err);\r\n return false;\r\n }\r\n}\r\n\r\n// setState intercept\r\nwindow.IOB.connection._socket.emit = async function(event, ...args) {\r\n if (event === 'setState') {\r\n const [id, value] = args;\r\n \r\n try {\r\n // Current user əldə et\r\n const currentUserName = await window.IOB.connection.getCurrentUser();\r\n console.log('🔐 Current user:', currentUserName);\r\n\r\n // Admin istifadəçiləri yoxlama\r\n if (currentUserName === 'admin') {\r\n console.log('✅ Admin istifadəçi - icazə yoxlanmır');\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n return;\r\n }\r\n\r\n // User qruplarını tap\r\n const userGroups = await getUserGroups(currentUserName);\r\n console.log('👥 User groups:', userGroups);\r\n\r\n // Administrator qrupunda olanlar üçün yoxlama etmə\r\n if (userGroups.includes('administrator')) {\r\n console.log('✅ Administrator qrupunda - icazə yoxlanmır');\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n return;\r\n }\r\n\r\n // Write permission yoxla\r\n const hasPermission = await hasWritePermission(id, currentUserName, userGroups);\r\n \r\n if (!hasPermission) {\r\n console.warn('⛔ Write permission yoxdur:', id);\r\n alert('Yazmaq mümkün deyil, icazə yoxdur!');\r\n return;\r\n }\r\n\r\n console.log('✅ Write icazəsi təsdiqləndi');\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n } catch (err) {\r\n console.error('❌ setState yoxlanılarkən xəta:', err);\r\n alert('İcazə yoxlanılarkən xəta baş verdi!');\r\n }\r\n } else {\r\n // Digər event-lər normal getsin\r\n originalEmit.call(window.IOB.connection._socket, event, ...args);\r\n }\r\n};\r\n\r\nconsole.log('✅ setState permission yoxlaması aktivləşdirildi');", "settings": {"visibilityEnabled": "false", "visibilityGroups": "", "visibilityAction": "hide", "visibilityRedirectScreen": ""}}