[
  {
    "tpl": "tplHtml",
    "data": {
      "bindings": [],
      "html": "<svg id=\"homeSvg\" viewBox=\"0 0 320 320\" xmlns=\"http://www.w3.org/2000/svg\"\r\n     style=\"width:100%; height:100%;\">\r\n\r\n  <style>\r\n    /* Nur FontAwesome – kein pointer-events mehr im CSS */\r\n    @font-face {\r\n      font-family: \"FA\";\r\n      src: url(\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2\") format(\"woff2\");\r\n    }\r\n  </style>\r\n\r\n  <!-- Hintergrund -->\r\n  <circle cx=\"160\" cy=\"160\" r=\"158\" fill=\"cdcdcd00\" stroke=\"#cdcdcd\" stroke-width=\"3\"></circle>\r\n\r\n  <!-- Trennlinien -->\r\n  <line x1=\"160\" y1=\"2\" x2=\"160\" y2=\"318\" stroke=\"#cdcdcd\" stroke-width=\"2\"></line>\r\n  <line x1=\"2\" y1=\"160\" x2=\"318\" y2=\"160\" stroke=\"#cdcdcd\" stroke-width=\"2\"></line>\r\n\r\n  <!-- SEGMENTE -->\r\n\r\n  <!-- Night -->\r\n  <g id=\"segNight\" data-state=\"Night\" cursor=\"pointer\">\r\n    <rect x=\"0\" y=\"0\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\r\n    <text x=\"80\" y=\"90\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\r\n          style=\"font-family:FA; pointer-events:none;\">&#xf236;</text>\r\n    <text x=\"80\" y=\"120\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Night</text>\r\n  </g>\r\n\r\n  <!-- Holiday -->\r\n  <g id=\"segHoliday\" data-state=\"Holiday\" cursor=\"pointer\">\r\n    <rect x=\"160\" y=\"0\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\r\n    <text x=\"240\" y=\"90\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\r\n          style=\"font-family:FA; pointer-events:none;\">&#xf0f2;</text>\r\n    <text x=\"240\" y=\"120\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Holiday</text>\r\n  </g>\r\n\r\n  <!-- Retire -->\r\n  <g id=\"segRetire\" data-state=\"Retire\" cursor=\"pointer\">\r\n    <rect x=\"0\" y=\"160\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\r\n    <text x=\"80\" y=\"250\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\r\n          style=\"font-family:FA; pointer-events:none;\">&#xf043;</text>\r\n    <text x=\"80\" y=\"280\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Retire</text>\r\n  </g>\r\n\r\n  <!-- Away -->\r\n  <g id=\"segAway\" data-state=\"Away\" cursor=\"pointer\">\r\n    <rect x=\"160\" y=\"160\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\r\n    <text x=\"240\" y=\"250\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\r\n          style=\"font-family:FA; pointer-events:none;\">&#xf1b9;</text>\r\n    <text x=\"240\" y=\"280\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Away</text>\r\n  </g>\r\n\r\n  <!--  CENTER / HOME -->\r\n\r\n  <g id=\"centerHome\" cursor=\"pointer\">\r\n    <circle cx=\"160\" cy=\"160\" r=\"70\" fill=\"#4C6A88\" stroke=\"#cdcdcd\" stroke-width=\"3\"></circle>\r\n    <text id=\"centerIcon\" x=\"160\" y=\"165\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\"\r\n          font-size=\"42\" style=\"font-family:FA; pointer-events:none;\">&#xf015;</text>\r\n    <text x=\"160\" y=\"195\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"16\">Home</text>\r\n  </g>\r\n\r\n</svg>\r\n\r\n<script>\r\nconst DP = \"0_userdata.0.HomeStatus\";\r\nconst STATES = [\"Home\", \"Night\", \"Holiday\", \"Retire\", \"Away\"];\r\n\r\nconst segments = {\r\n  Night: document.getElementById(\"segNight\"),\r\n  Holiday: document.getElementById(\"segHoliday\"),\r\n  Retire: document.getElementById(\"segRetire\"),\r\n  Away: document.getElementById(\"segAway\")\r\n};\r\n\r\nconst center = document.getElementById(\"centerHome\");\r\n\r\n// Globale MDW Farben\r\nlet MDW_BACKGROUND = \"#4C6A88\";   // fallback\r\nlet MDW_TEXT = \"#cdcdcd\";         // fallback\r\n\r\n\r\n/* === MDW Theme laden (Background + Text) === */\r\nfunction updateThemeColor() {\r\n    vis.conn.getStates(\"vis-materialdesign.0.colors.darkTheme\", (err, states) => {\r\n        if (err) return;\r\n\r\n        const isDark = states[\"vis-materialdesign.0.colors.darkTheme\"].val === true;\r\n\r\n        const backgroundState = isDark\r\n            ? \"vis-materialdesign.0.colors.dark.card.background\"\r\n            : \"vis-materialdesign.0.colors.light.card.background\";\r\n\r\n        const textState = isDark\r\n            ? \"vis-materialdesign.0.colors.dark.card.text\"\r\n            : \"vis-materialdesign.0.colors.light.card.text\";\r\n\r\n        // Background holen\r\n        vis.conn.getStates(backgroundState, (err2, stBg) => {\r\n            if (!err2 && stBg[backgroundState]) {\r\n                MDW_BACKGROUND = stBg[backgroundState].val;\r\n            }\r\n\r\n            // Text holen\r\n            vis.conn.getStates(textState, (err3, stTx) => {\r\n                if (!err3 && stTx[textState]) {\r\n                    MDW_TEXT = stTx[textState].val;\r\n                }\r\n\r\n                // Sofort anwenden: äußeren Ring einfärben\r\n                const bg = document.querySelector(\"#homeSvg > circle\");\r\n                if (bg) {\r\n                    bg.setAttribute(\"fill\", MDW_BACKGROUND);\r\n                    bg.setAttribute(\"stroke\", MDW_TEXT);\r\n                }\r\n                \r\n                // Trennlinien einfärben\r\n                const lines = document.querySelectorAll(\"#homeSvg line\");\r\n                lines.forEach(l => l.setAttribute(\"stroke\", MDW_TEXT));\r\n\r\n                // Center-Kreis + Segmente aktualisieren\r\n                fetchState();\r\n            });\r\n        });\r\n    });\r\n}\r\n\r\n\r\n/* === UI aktualisieren === */\r\nfunction updateUI(state) {\r\n\r\n  // Außen-Segmente\r\n  Object.entries(segments).forEach(([name, group]) => {\r\n    const texts = group.querySelectorAll(\"text\");\r\n    texts.forEach(t =>\r\n      t.setAttribute(\"fill\", name === state ? \"#ffae00\" : MDW_TEXT)\r\n    );\r\n  });\r\n\r\n  // Center-Kreis\r\n  const centerCircle = center.querySelector(\"circle\");\r\n\r\n  if (state === \"Home\") {\r\n    centerCircle.setAttribute(\"fill\", \"#aa6900\");\r\n    //centerCircle.setAttribute(\"stroke\", \"#6b3f00\");\r\n    centerCircle.setAttribute(\"stroke\", MDW_TEXT);\r\n  } else {\r\n    centerCircle.setAttribute(\"fill\", MDW_BACKGROUND);\r\n    centerCircle.setAttribute(\"stroke\", MDW_TEXT);\r\n  }\r\n\r\n  // Center-Icon + Beschriftung sollen auch MDW_TEXT nutzen\r\n  const centerIcon = document.getElementById(\"centerIcon\");\r\n  if (centerIcon) centerIcon.setAttribute(\"fill\", MDW_TEXT);\r\n\r\n  const centerText = center.querySelector(\"text:last-of-type\");\r\n  if (centerText) centerText.setAttribute(\"fill\", MDW_TEXT);\r\n}\r\n\r\n\r\n/* === DP lesen === */\r\nfunction fetchState() {\r\n    vis.conn.getStates(DP, (err, states) => {\r\n        if (err) return;\r\n\r\n        const val = states[DP]?.val;\r\n\r\n        if (val && STATES.includes(val)) {\r\n            updateUI(val);\r\n        }\r\n    });\r\n}\r\n\r\n\r\n/* === DP setzen === */\r\nfunction setState(state) {\r\n  if (!STATES.includes(state)) return;\r\n  vis.setValue(DP, state);\r\n  updateUI(state);\r\n}\r\n\r\n\r\n/* Klicks */\r\nObject.entries(segments).forEach(([name, group]) =>\r\n  group.addEventListener(\"click\", () => setState(name))\r\n);\r\ncenter.addEventListener(\"click\", () => setState(\"Home\"));\r\n\r\n\r\n\r\n/* === INIT === */\r\nupdateThemeColor();               // Theme gleich laden\r\nsetInterval(updateThemeColor, 2000); // alle 2s prüfen, falls Theme umgeschaltet wird\r\nsetInterval(fetchState, 3000);       // DP Polling\r\nfetchState();                       // Erstes Laden\r\n\r\n\r\n\r\n</script>",
      "refreshInterval": null,
      "g_common": true
    },
    "style": {
      "bindings": [],
      "left": "325.6px",
      "top": "171px",
      "width": "291px",
      "height": "265px"
    },
    "widgetSet": "basic",
    "_id": "i000001"
  }
]