[{"tpl":"tplVis-materialdesign-Card","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"listItemDataMethod":"inputPerEditor","cardLayout":"Basic","cardStyle":"default","showScrollbar":false,"showTitle":false,"titleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.title","titleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.title","showSubTitle":false,"subtitleLayout":"#mdwTheme:vis-materialdesign.0.fontSizes.card.subTitle","subTitleFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.subTitle","showText":true,"textFontSize":"#mdwTheme:vis-materialdesign.0.fontSizes.card.text","textFontFamily":"#mdwTheme:vis-materialdesign.0.fonts.card.text","refresh_oid_delay":"100","refresh_animation_duration":"150","colorBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background","colorTitleSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_title","colorTextSectionBackground":"#mdwTheme:vis-materialdesign.0.colors.card.background_body","colorTitle":"#mdwTheme:vis-materialdesign.0.colors.card.title","colorSubtitle":"#mdwTheme:vis-materialdesign.0.colors.card.subTitle","colorBody":"#mdwTheme:vis-materialdesign.0.colors.card.text","clickType":"none","controlType":"link","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"html":"<svg id=\"homeSvg\" viewBox=\"0 0 320 320\" xmlns=\"http://www.w3.org/2000/svg\"\n     style=\"width:100%; height:100%;\">\n\n  <style>\n    /* Nur FontAwesome – kein pointer-events mehr im CSS */\n    @font-face {\n      font-family: \"FA\";\n      src: url(\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2\") format(\"woff2\");\n    }\n  </style>\n\n  <!-- Hintergrund -->\n  <circle cx=\"160\" cy=\"160\" r=\"158\" fill=\"cdcdcd00\" stroke=\"#cdcdcd\" stroke-width=\"3\"></circle>\n\n  <!-- Trennlinien -->\n  <line x1=\"160\" y1=\"2\" x2=\"160\" y2=\"318\" stroke=\"#cdcdcd\" stroke-width=\"2\"></line>\n  <line x1=\"2\" y1=\"160\" x2=\"318\" y2=\"160\" stroke=\"#cdcdcd\" stroke-width=\"2\"></line>\n\n  <!-- SEGMENTE -->\n\n  <!-- Night -->\n  <g id=\"segNight\" data-state=\"Night\" cursor=\"pointer\">\n    <rect x=\"0\" y=\"0\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\n    <text x=\"80\" y=\"90\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\n          style=\"font-family:FA; pointer-events:none;\">&#xf236;</text>\n    <text x=\"80\" y=\"120\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Night</text>\n  </g>\n\n  <!-- Holiday -->\n  <g id=\"segHoliday\" data-state=\"Holiday\" cursor=\"pointer\">\n    <rect x=\"160\" y=\"0\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\n    <text x=\"240\" y=\"90\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\n          style=\"font-family:FA; pointer-events:none;\">&#xf0f2;</text>\n    <text x=\"240\" y=\"120\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Holiday</text>\n  </g>\n\n  <!-- Retire -->\n  <g id=\"segRetire\" data-state=\"Retire\" cursor=\"pointer\">\n    <rect x=\"0\" y=\"160\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\n    <text x=\"80\" y=\"250\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\n          style=\"font-family:FA; pointer-events:none;\">&#xf043;</text>\n    <text x=\"80\" y=\"280\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Retire</text>\n  </g>\n\n  <!-- Away -->\n  <g id=\"segAway\" data-state=\"Away\" cursor=\"pointer\">\n    <rect x=\"160\" y=\"160\" width=\"160\" height=\"160\" fill=\"none\" pointer-events=\"all\"></rect>\n    <text x=\"240\" y=\"250\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\" font-size=\"36\"\n          style=\"font-family:FA; pointer-events:none;\">&#xf1b9;</text>\n    <text x=\"240\" y=\"280\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"14\">Away</text>\n  </g>\n\n  <!--  CENTER / HOME -->\n\n  <g id=\"centerHome\" cursor=\"pointer\">\n    <circle cx=\"160\" cy=\"160\" r=\"70\" fill=\"#4C6A88\" stroke=\"#cdcdcd\" stroke-width=\"3\"></circle>\n    <text id=\"centerIcon\" x=\"160\" y=\"165\" fill=\"#cdcdcd\" class=\"fa\" text-anchor=\"middle\"\n          font-size=\"42\" style=\"font-family:FA; pointer-events:none;\">&#xf015;</text>\n    <text x=\"160\" y=\"195\" fill=\"#cdcdcd\" text-anchor=\"middle\" font-size=\"16\">Home</text>\n  </g>\n\n</svg>\n\n<script>\nconst DP = \"0_userdata.0.HomeStatus\";\nconst STATES = [\"Home\", \"Night\", \"Holiday\", \"Retire\", \"Away\"];\n\nconst segments = {\n  Night: document.getElementById(\"segNight\"),\n  Holiday: document.getElementById(\"segHoliday\"),\n  Retire: document.getElementById(\"segRetire\"),\n  Away: document.getElementById(\"segAway\")\n};\n\nconst center = document.getElementById(\"centerHome\");\n\n// Globale MDW Farben\nlet MDW_BACKGROUND = \"#4C6A88\";   // fallback\nlet MDW_TEXT = \"#cdcdcd\";         // fallback\n\n\n/* === MDW Theme laden (Background + Text) === */\nfunction updateThemeColor() {\n    vis.conn.getStates(\"vis-materialdesign.0.colors.darkTheme\", (err, states) => {\n        if (err) return;\n\n        const isDark = states[\"vis-materialdesign.0.colors.darkTheme\"].val === true;\n\n        const backgroundState = isDark\n            ? \"vis-materialdesign.0.colors.dark.card.background\"\n            : \"vis-materialdesign.0.colors.light.card.background\";\n\n        const textState = isDark\n            ? \"vis-materialdesign.0.colors.dark.card.text\"\n            : \"vis-materialdesign.0.colors.light.card.text\";\n\n        // Background holen\n        vis.conn.getStates(backgroundState, (err2, stBg) => {\n            if (!err2 && stBg[backgroundState]) {\n                MDW_BACKGROUND = stBg[backgroundState].val;\n            }\n\n            // Text holen\n            vis.conn.getStates(textState, (err3, stTx) => {\n                if (!err3 && stTx[textState]) {\n                    MDW_TEXT = stTx[textState].val;\n                }\n\n                // Sofort anwenden: äußeren Ring einfärben\n                const bg = document.querySelector(\"#homeSvg > circle\");\n                if (bg) {\n                    bg.setAttribute(\"fill\", MDW_BACKGROUND);\n                    bg.setAttribute(\"stroke\", MDW_TEXT);\n                }\n                \n                // Trennlinien einfärben\n                const lines = document.querySelectorAll(\"#homeSvg line\");\n                lines.forEach(l => l.setAttribute(\"stroke\", MDW_TEXT));\n\n                // Center-Kreis + Segmente aktualisieren\n                fetchState();\n            });\n        });\n    });\n}\n\n\n/* === UI aktualisieren === */\nfunction updateUI(state) {\n\n  // Außen-Segmente\n  Object.entries(segments).forEach(([name, group]) => {\n    const texts = group.querySelectorAll(\"text\");\n    texts.forEach(t =>\n      t.setAttribute(\"fill\", name === state ? \"#ffae00\" : MDW_TEXT)\n    );\n  });\n\n  // Center-Kreis\n  const centerCircle = center.querySelector(\"circle\");\n\n  if (state === \"Home\") {\n    centerCircle.setAttribute(\"fill\", \"#aa6900\");\n    //centerCircle.setAttribute(\"stroke\", \"#6b3f00\");\n    centerCircle.setAttribute(\"stroke\", MDW_TEXT);\n  } else {\n    centerCircle.setAttribute(\"fill\", MDW_BACKGROUND);\n    centerCircle.setAttribute(\"stroke\", MDW_TEXT);\n  }\n\n  // Center-Icon + Beschriftung sollen auch MDW_TEXT nutzen\n  const centerIcon = document.getElementById(\"centerIcon\");\n  if (centerIcon) centerIcon.setAttribute(\"fill\", MDW_TEXT);\n\n  const centerText = center.querySelector(\"text:last-of-type\");\n  if (centerText) centerText.setAttribute(\"fill\", MDW_TEXT);\n}\n\n\n/* === DP lesen === */\nfunction fetchState() {\n    vis.conn.getStates(DP, (err, states) => {\n        if (err) return;\n\n        const val = states[DP]?.val;\n\n        if (val && STATES.includes(val)) {\n            updateUI(val);\n        }\n    });\n}\n\n\n/* === DP setzen === */\nfunction setState(state) {\n  if (!STATES.includes(state)) return;\n  vis.setValue(DP, state);\n  updateUI(state);\n}\n\n\n/* Klicks */\nObject.entries(segments).forEach(([name, group]) =>\n  group.addEventListener(\"click\", () => setState(name))\n);\ncenter.addEventListener(\"click\", () => setState(\"Home\"));\n\n\n\n/* === INIT === */\nupdateThemeColor();               // Theme gleich laden\nsetInterval(updateThemeColor, 2000); // alle 2s prüfen, falls Theme umgeschaltet wird\nsetInterval(fetchState, 3000);       // DP Polling\nfetchState();                       // Erstes Laden\n\n\n\n</script>","json_string_oid":"","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"153px","top":"42px","width":"569px","height":"564px","z-index":"9","overflow-x":"","overflow-y":""},"widgetSet":"materialdesign"}]