Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Hardware
  4. Sonoff NSPanel

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.5k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.0k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    2.7k

Sonoff NSPanel

Geplant Angeheftet Gesperrt Verschoben Hardware
1.5k Beiträge 78 Kommentatoren 640.0k Aufrufe 80 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • ArmilarA Armilar

    @britzelpuf sagte in Sonoff NSPanel:

    @armilar Moin moin, dass Problem hatte ich auch einmal, bei mir hat es geholfen, im MQTT Adapter den Haken "Nur bei Änderungen" publizieren herauszunehmen.

    Zu deinen anderen Anregungen:

    1. das mit den Float Werten habe ich übernommen, dass ist mir gar nicht aufgefallen, dass die Temperatur da abweicht
      Github Commit
    2. finde ich gut mit der Idee, da eine Option zu verwenden, wobei der Config Parameter ja eigentlich gar nicht gebraucht wird. Wenn first,second .... gesetzt ist, dann nimm den, ansonsten die Daten aus dem Forecast
    3. Meine Thermostate sind ein wenig doof oder ich habe da die Aliase noch nicht richtig konfiguriert

    Das Skript unterstützt jetzt die neue Firmware Version von jobr99, allerdings nicht mehr die Alte, da sich die Commands etwas geändert haben, vor allem aber die Trennzeichen.
    JoBr99 hat ein weiteres TypeSkript automatisch erzeugt, was im gleichen Github Verzeichnis liegt. Dieses muss jetzt im Javascript Adapter unter Global liegen. Darüber werden jetzt die Icons aufgelöst und somit sind alle Icons der Schriftart verfügbar.
    Github.

    Falls der Pullrequest noch nicht durch ist, gerade schläft Jobr99 anscheinend mal ;-)
    Github Fork

    Schriftart (Ich hoffe, dass ist der richtige Link)

    Die MediaCard wollte ich implementieren, wenn mein Media Alias funktioniert. Bei mir ist das buggy und ich kann die nicht anlegen. Wie hast du das Alias hinbekommen? Hast du die States dort alle selber angelegt? Bei mir wird es immer nur ein Info Device.

    Gruß

    Britzelpuf

    Hey Britzelpuf, ich schreibe morgen etwas ausführlicher. Der Pull Request ist nicht durchgegangen, weil irgendein dusseliger Algorithmus meinen Account bei Github im Zusammenhang mit dem Speichern des Requests (mittlerweille eine Woche) gesperrt hat. Hab ihn quasi seit heute mit einer Entschuldigung von Github wieder entsperrt bekommen. JoBr99 hat nicht wirklich geschlafen ;-) . Freue mich auf einen Austausch, da ich auch die cardAlarm, cardThermo und die cardMedia bedienen kann. Aktuell aber noch nicht über ALIASE, sondern an den Spotify-Premium Datenpunkten. Nervig ist aktuell noch, dass Spotify über den Rechner oder Handy-App zunächst angeworfen werden muss (Der Spotify-Player ist sehr vergesslich). Geht aber auch mit Alexa.

    VG
    Armilar

    britzelpufB Offline
    britzelpufB Offline
    britzelpuf
    schrieb am zuletzt editiert von
    #203

    @armilar Ja das mit den gesperrten Accounts kenne ich auch. Mein Account wurde 3x hintereinander gesperrt. Teilweise direkt nachdem ich mich angemeldet habe :( Bis der das erste mal entsperrt wurde hat es knapp eine Woche gedauert, danach konnte ich den Github Henry direkt anschreiben und es ging immer sehr schnell. Jetzt hat er aber versprochen, dass es nicht mehr passiert ;-)

    ArmilarA 2 Antworten Letzte Antwort
    0
    • britzelpufB britzelpuf

      @armilar Ja das mit den gesperrten Accounts kenne ich auch. Mein Account wurde 3x hintereinander gesperrt. Teilweise direkt nachdem ich mich angemeldet habe :( Bis der das erste mal entsperrt wurde hat es knapp eine Woche gedauert, danach konnte ich den Github Henry direkt anschreiben und es ging immer sehr schnell. Jetzt hat er aber versprochen, dass es nicht mehr passiert ;-)

      ArmilarA Offline
      ArmilarA Offline
      Armilar
      Most Active Forum Testing
      schrieb am zuletzt editiert von
      #204

      @britzelpuf sagte in Sonoff NSPanel:

      @armilar Ja das mit den gesperrten Accounts kenne ich auch. Mein Account wurde 3x hintereinander gesperrt. Teilweise direkt nachdem ich mich angemeldet habe :( Bis der das erste mal entsperrt wurde hat es knapp eine Woche gedauert, danach konnte ich den Github Henry direkt anschreiben und es ging immer sehr schnell. Jetzt hat er aber versprochen, dass es nicht mehr passiert ;-)

      Hab mal nebenbei in der Konsole "FlashNextion http://nspanel.pky.eu/lui-release.tft" ausgeführt und erste Anpassungen an den Configs vorgenommen und die Icons in "global" abgelegt. Läuft alles soweit. Werde später noch Implementierungen von TrueType-V1.9.1 auf TrueType- aktuell schieben. Dann haben wir wieder einen Gleichstand.

      die Änderungen für WheaterForecast habe ich bei mir schon wieder drin. Aber schon "cool" mit der Icon-Sammlung...

      function HandleScreensaverUpdate(): void {
          if (screensaverEnabled && config.weatherEntity != null && existsObject(config.weatherEntity)) {
              var icon = getState(config.weatherEntity + ".ICON").val;
      
              let temperature: string =
                  existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
                      existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
      
              let payloadString =
                  "weatherUpdate~" + Icons.GetIcon(GetAccuWeatherIcon(parseInt(icon))) + "~"
                  + temperature + " " + config.temperatureUnit + "~"
      
      /*-------------------------------------------------------------------------------------------------------------------------------------*/
              if (weatherForecast == true) {
                  // Accu-Weather Forecast Tag 2 - Tag 5 -- Wenn weatherForecast = true
                  for (let i = 2; i < 6; i++) {
                      let TempMax = getState("accuweather.0.Summary.TempMax_d" + i).val;
                      let DayOfWeek = getState("accuweather.0.Summary.DayOfWeek_d" + i).val;
                      let WeatherIcon = GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                      console.log(GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                      payloadString += DayOfWeek + "~" + Icons.GetIcon(WeatherIcon) + "~" + TempMax + " °C~";
                  }
              } 
              else {
                  //In Config definierte Zustände wenn weatherForecast = false
                  payloadString += GetScreenSaverEntityString(config.firstScreensaverEntity);
                  payloadString += GetScreenSaverEntityString(config.secondScreensaverEntity);
                  payloadString += GetScreenSaverEntityString(config.thirdScreensaverEntity);
                  payloadString += GetScreenSaverEntityString(config.fourthScreensaverEntity);
              }
      /*-------------------------------------------------------------------------------------------------------------------------------------*/
      
              SendToPanel(<Payload>{ payload: payloadString });
          }
      }
      

      Hintergrund der Option war bei mir eigentlich ein minütlicher Wechsel zwischen "WheatherForecast" und "definierten Werten" - Bringt etwas Leben in den Screensaver und kann mit der Zeitübertragung umgeschaltet werden. Parameter ändert jede Minute true/false.

      Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
      https://github.com/joBr99/nspanel-lovelace-ui/wiki

      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

      1 Antwort Letzte Antwort
      0
      • britzelpufB britzelpuf

        @armilar Ja das mit den gesperrten Accounts kenne ich auch. Mein Account wurde 3x hintereinander gesperrt. Teilweise direkt nachdem ich mich angemeldet habe :( Bis der das erste mal entsperrt wurde hat es knapp eine Woche gedauert, danach konnte ich den Github Henry direkt anschreiben und es ging immer sehr schnell. Jetzt hat er aber versprochen, dass es nicht mehr passiert ;-)

        ArmilarA Offline
        ArmilarA Offline
        Armilar
        Most Active Forum Testing
        schrieb am zuletzt editiert von Armilar
        #205

        @britzelpuf sagte in Sonoff NSPanel:

        @armilar Ja das mit den gesperrten Accounts kenne ich auch. Mein Account wurde 3x hintereinander gesperrt. Teilweise direkt nachdem ich mich angemeldet habe :( Bis der das erste mal entsperrt wurde hat es knapp eine Woche gedauert, danach konnte ich den Github Henry direkt anschreiben und es ging immer sehr schnell. Jetzt hat er aber versprochen, dass es nicht mehr passiert ;-)

        Ja der Github-Henry ;-) Hoffentlich macht er die Drohung wahr und lässt die Accounts freigeschaltet :+1:

        Zum Spotify-Player habe ich jetzt oben eine weitere Variable mit der Spotify-Premium Instanz eingesetzt. Ich denke niemand wird die Datenpunkte des Adapters wirklich verändern, daher kein ALIAS.

        Hier mein aktueller lauffähiger Stand in der neuesten tft Version mit erweiterter cardThermo, sowie der cardMedia (Spotify-Premium Steuerung) und der cardAlarm :

        var Icons = new IconsSelector();
        
        const Months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
        const Days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
        const Red: RGB = { red: 255, green: 0, blue: 0 };
        const White: RGB = { red: 255, green: 255, blue: 255 };
        const Off: RGB = { red: 68, green: 115, blue: 158 };
        const On: RGB = { red: 253, green: 216, blue: 53 };
        const BatteryFull: RGB = { red: 96, green: 176, blue: 62 }
        const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 }
        
        //----Möglichkeit, im Screensaver zwischen Accu-Weather Forcast oder selbstdefinierten Werten zu wählen---------------------------------
        var weatherForecast = true; //true = WheatherForecast 5 Days --- false = Config --> firstScreensaverEntity - fourthScreensaverEntity ...
        //Spotify Instanz
        var spotifyInstanz = "spotify-premium.0"
        
        var Buero_Seite_1: PageEntities =
        {
            "type": "cardEntities",
            "heading": "Büro",
            "useColor": true,
            "items": [
                <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe"},
                <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung"},
                <PageItem>{ id: "alias.0.NSPanel_1.MyTestbutton", icon: "lightbulb", offColor: Off, onColor: On, name: "Taster"},
                <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power" }
            ]
        };
        
        var Buero_Seite_2: PageGrid =
        {
            "type": "cardGrid",
            "heading": "Büro",
            "useColor": true,
            "items": [
                <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", name: "Schreibtisch"},
                <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", name: "Deckenlampe"},
                <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power"},
                <PageItem>{ id: "alias.0.NSPanel_1.Radio.TuneIn", icon: "play"}
            ]
        };
        
        var Spotify: PageMedia = 
        {
            "type": "cardMedia",
            "heading": "Spotify",
            "useColor": false,
            "items": [<PageItem>{ id: "alias.0.NSPanel_1.Spotify" }]
        };
        
        var Buero_Themostat: PageThermo = 
        {
            "type": "cardThermo",
            "heading": "Thermostat",
            "useColor": true,
            "items": [<PageItem>{ id: "alias.0.NSPanel_1.Thermostat_Büro" }]
        };
        
        var Buero_Alarm: PageAlarm = 
        {
            "type": "cardAlarm",
            "heading": "Alarm",
            "useColor": true,
            "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alarm" }]
        };
        
        var button1Page: PageGrid =
        {
            "type": "cardGrid",
            "heading": "Radio",
            "useColor": true,
            "items": [
                <PageItem>{ id: "alias.0.Radio.NJoy" },
                <PageItem>{ id: "alias.0.Radio.Delta_Radio" },
                <PageItem>{ id: "alias.0.Radio.NDR2" },
            ]
        };
        
        var button2Page: PageEntities =
        {
            "type": "cardEntities",
            "heading": "Knopf2",
            "useColor": true,
            "items": [
                <PageItem>{ id: "alias.0.Schlafen" },
                <PageItem>{ id: "alias.0.Stern" }
            ]
        };
        
        export const config: Config = {
            panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //anpassen
            panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //anpassen
            firstScreensaverEntity: { ScreensaverEntity: "hmip.0.devices.3014F711A000185BE9922BCF.channels.1.humidity", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
            secondScreensaverEntity: { ScreensaverEntity: "accuweather.0.Daily.Day1.Day.PrecipitationProbability", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" },
            thirdScreensaverEntity: { ScreensaverEntity: "0_userdata.0.Wetter.Windstaerke_homaticIP", ScreensaverEntityIcon: "weather-windy", ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: "bft" },
            fourthScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.UVIndex", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "UV", ScreensaverEntityUnitText: "" },
            timeoutScreensaver: 15,
            dimmode: 8,
            screenSaverDoubleClick: false,
            locale: "de_DE",
            timeFormat: "%H:%M",
            dateFormat: "%A, %d. %B %Y",
            weatherEntity: "alias.0.Wetter.Wetter",
            defaultOffColor: Off,
            defaultOnColor: On,
            defaultColor: Off,
            temperatureUnit: "°C",
            pages: [Buero_Seite_1, 
                    Buero_Seite_2, 
                    Spotify,
                    Buero_Themostat,
                    Buero_Alarm
            ],
            button1Page: button1Page,
            button2Page: button2Page
        };
        
        
        // _________________________________ Ab hier keine Konfiguration mehr _____________________________________
        
        var subscriptions: any = {};
        var screensaverEnabled : boolean = false;
        var pageId = 0;
        
        schedule("* * * * *", function () {
            SendTime();
        });
        schedule("0 * * * *", function () {
            SendDate();
        });
        
        
        // Only monitor the extra nodes if present
        var updateArray: string[] = [];
        if (config.firstScreensaverEntity !== null && config.firstScreensaverEntity.ScreensaverEntity != null && existsState(config.firstScreensaverEntity.ScreensaverEntity)) {
            updateArray.push(config.firstScreensaverEntity.ScreensaverEntity)
        }
        if (config.secondScreensaverEntity !== null && config.secondScreensaverEntity.ScreensaverEntity != null && existsState(config.secondScreensaverEntity.ScreensaverEntity)) {
            updateArray.push(config.secondScreensaverEntity.ScreensaverEntity)
        }
        if (config.thirdScreensaverEntity !== null && config.thirdScreensaverEntity.ScreensaverEntity != null && existsState(config.thirdScreensaverEntity.ScreensaverEntity)) {
            updateArray.push(config.thirdScreensaverEntity.ScreensaverEntity)
        }
        if (config.fourthScreensaverEntity !== null && config.fourthScreensaverEntity.ScreensaverEntity != null && existsState(config.fourthScreensaverEntity.ScreensaverEntity)) {
            updateArray.push(config.fourthScreensaverEntity.ScreensaverEntity)
        }
        
        if (updateArray.length > 0) {
            on(updateArray, function () {
                HandleScreensaverUpdate();
            })
        }
        on({ id: config.panelRecvTopic }, function (obj) {
            if (obj.state.val.startsWith('\{"CustomRecv":')) {
                var json = JSON.parse(obj.state.val);
        
                var split = json.CustomRecv.split(",");
                HandleMessage(split[0], split[1], parseInt(split[2]), split);
            }
        });
        
        function SendToPanel(val: Payload | Payload[]): void {
            if (Array.isArray(val)) {
                val.forEach(function (id, i) {
                    setState(config.panelSendTopic, id.payload);
                });
            }
            else
                setState(config.panelSendTopic, val.payload);
        }
        
        function HandleMessage(typ: string, method: string, page: number, words: Array<string>): void {
            if (typ == "event") {
                switch (method) {
                    case "startup":
                        screensaverEnabled = false;
                        UnsubscribeWatcher();
                        HandleStartupProcess();
                        pageId = 0;
                        GeneratePage(config.pages[0]);
                        break;
                    case "sleepReached":
                        screensaverEnabled = true;
                        HandleScreensaver();
                        break;
                    case "pageOpenDetail":
                        screensaverEnabled = false;
                        UnsubscribeWatcher();
                        let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
                        if (pageItem !== undefined)
                            SendToPanel(GenerateDetailPage(words[2], pageItem));
                    case "buttonPress2":
                        screensaverEnabled = false;
                        HandleButtonEvent(words);
                        break;
                    case "button1":
                    case "button2":
                        screensaverEnabled = false;
                        HandleHardwareButton(method);
                    default:
                        break;
                }
            }
        }
        
        function GeneratePage(page: Page): void {
            switch (page.type) {
                case "cardEntities":
                    SendToPanel(GenerateEntitiesPage(<PageEntities>page));
                    break;
                case "cardThermo":
                    SendToPanel(GenerateThermoPage(<PageThermo>page));
                    break;
                case "cardGrid":
                    SendToPanel(GenerateGridPage(<PageGrid>page));
                    break;
                case "cardMedia":
                    SendToPanel(GenerateMediaPage(<PageMedia>page));
                    break;
                case "cardAlarm":
                    SendToPanel(GenerateAlarmPage(<PageAlarm>page));
                    break;
            }
        }
        
        function HandleHardwareButton(method: string): void {
            let page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid);
            if (config.button1Page !== null && method == "button1") {
                page = config.button1Page;
            }
            else if (config.button2Page !== null && method == "button2") {
                page = config.button2Page;
            }
            else {
                return;
            }
        
            // Set pageId to -1, because of the navigation arrows
            let tempPageId = pageId;
            pageId = -1;
            GeneratePage(page);
            pageId = tempPageId;
        }
        
        function HandleStartupProcess(): void {
            SendDate();
            SendTime();
            SendToPanel({ payload: "timeout~" + config.timeoutScreensaver });
            SendToPanel({ payload: "dimmode~" + config.dimmode });
        }
        
        function SendDate(): void {
            var d = new Date();
            var day = Days[d.getDay()];
            var date = d.getDate();
            var month = Months[d.getMonth()];
            var year = d.getFullYear();
            var _sendDate = "date~" + day + " " + date + " " + month + " " + year;
            SendToPanel(<Payload>{ payload: _sendDate });
        }
        
        function SendTime(): void {
            var d = new Date();
            var hr = d.getHours().toString();
            var min = d.getMinutes().toString();
        
            if (d.getHours() < 10) {
                hr = "0" + d.getHours().toString();
            }
            if (d.getMinutes() < 10) {
                min = "0" + d.getMinutes().toString();
            }
            SendToPanel(<Payload>{ payload: "time~" + hr + ":" + min });
        }
        
        function GenerateEntitiesPage(page: PageEntities): Payload[] {
            var out_msgs: Array<Payload> = [];
            out_msgs = [{ payload: "pageType~cardEntities" }]
            out_msgs.push({ payload: GeneratePageElements(page) });
            return out_msgs
        }
        
        function GenerateGridPage(page: PageGrid): Payload[] {
            var out_msgs: Array<Payload> = [];
            out_msgs = [{ payload: "pageType~cardGrid" }]
            out_msgs.push({ payload: GeneratePageElements(page) });
            return out_msgs
        }
        
        function GeneratePageElements(page: Page): string {
            let maxItems = 0;
            switch (page.type) {
                case "cardThermo":
                    maxItems = 1;
                    break;
                case "cardAlarm":
                    maxItems = 1;
                    break;
                case "cardMedia":
                    maxItems = 1;
                    break;
                case "cardEntities":
                    maxItems = 4;
                    break;
                case "cardGrid":
                    maxItems = 6;
                    break;
            }
            let pageData = "entityUpd~" + page.heading + "~" + GetNavigationString(pageId)
            for (let index = 0; index < maxItems; index++) {
                if (page.items[index] !== undefined) {
                    pageData += CreateEntity(page.items[index], index + 1, page.useColor);
                }
                else {
                    pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1);
                }
            }
            return pageData;
        }
        
        function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
            var iconId = "0"
            if (pageItem.id == "delete") {
                return "~delete~~~~~"
            }
            var name: string;
            var type: string;
            // ioBroker
            if (existsObject(pageItem.id)) {
                let o = getObject(pageItem.id)
                var val = null;
                name = pageItem.name !== undefined ? pageItem.name : o.common.name.de
        
                if (existsState(pageItem.id + ".GET")) {
                    val = getState(pageItem.id + ".GET").val;
                    RegisterEntityWatcher(pageItem.id + ".GET");
                }
                else if (existsState(pageItem.id + ".SET")) {
                    val = getState(pageItem.id + ".SET").val;
                    RegisterEntityWatcher(pageItem.id + ".SET");
                }
                var iconColor = rgb_dec565(config.defaultColor);
        
                switch (o.common.role) {
                    case "light":
                        type = "light"
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                        var optVal = "0"
        
                        if (val === true || val === "true") {
                            optVal = "1"
                            iconColor = GetIconColor(pageItem, true, useColors);
                        }
        
                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
        
                    case "dimmer":
                        type = "light"
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                        var optVal = "0"
                        if (existsState(pageItem.id + ".ON_ACTUAL")) {
                            val = getState(pageItem.id + ".ON_ACTUAL").val;
                            RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                        }
                        else if (existsState(pageItem.id + ".ON_SET")) {
                            val = getState(pageItem.id + ".ON_SET").val;
                            RegisterEntityWatcher(pageItem.id + ".ON_SET");
                        }
                        if (val === true || val === "true") {
                            optVal = "1"
                            iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                        }
        
                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
        
                    case "blind":
                        type = "shutter"
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("window-open");
                        iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~"
        
                    case "info":
                    case "value.temperature":
                    case "thermostat":
                        type = "text";
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == "value.temperature" || o.common.role == "thermostat" ? Icons.GetIcon("thermometer") : Icons.GetIcon("information-outline");
                        let unit = "";
                        var optVal = "0"
                        if (existsState(pageItem.id + ".ON_ACTUAL")) {
                            optVal = getState(pageItem.id + ".ON_ACTUAL").val;
                            unit = GetUnitOfMeasurement(pageItem.id + ".ON_ACTUAL");
                            RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                        }
                        else if (existsState(pageItem.id + ".ACTUAL")) {
                            optVal = getState(pageItem.id + ".ACTUAL").val;
                            unit = GetUnitOfMeasurement(pageItem.id + ".ACTUAL");
                            RegisterEntityWatcher(pageItem.id + ".ACTUAL");
                        }
        
                        if (o.common.role == "value.temperature") {
                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("thermometer");
                        }
        
                        iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);
        
                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal + " " + unit;
        
                    case "button":
                        type = "button";
                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("gesture-tap-button");
                        let buttonText = pageItem.name !== undefined ? pageItem.name : "PRESS";
                        iconColor = GetIconColor(pageItem, true, useColors);
                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + + iconColor + "~" + name + "~" + buttonText;
        
                    default:
                        return "~delete~~~~~";
                }
            }
        
            return "~delete~~~~~"
        }
        
        function GetIconColor(pageItem: PageItem, value: (boolean | number), useColors: boolean): number {
            // dimmer
            if ((pageItem.useColor || useColors) && pageItem.interpolateColor && typeof (value) === "number") {
                let maxValue = pageItem.maxValue !== undefined ? pageItem.maxValue : 100;
                let minValue = pageItem.minValue !== undefined ? pageItem.minValue : 0;
                value = value > maxValue ? maxValue : value;
                value = value < minValue ? minValue : value;
                return rgb_dec565(
                    Interpolate(
                        pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor,
                        pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor,
                        scale(value, minValue, maxValue, 0, 1)
                    ));
            }
        
            if ((pageItem.useColor || useColors) && ((typeof (value) === "boolean" && value) || value > (pageItem.minValue !== undefined ? pageItem.minValue : 0))) {
                return rgb_dec565(pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor)
            }
        
            return rgb_dec565(pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor);
        }
        
        function RegisterEntityWatcher(id: string): void {
            if (subscriptions.hasOwnProperty(id)) {
                return;
            }
            subscriptions[id] = (on({ id: id, change: 'any' }, function (data) {
                SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });
            }))
        }
        
        function RegisterDetailEntityWatcher(id: string, pageItem: PageItem, type: string): void {
            if (subscriptions.hasOwnProperty(id)) {
                return;
            }
            subscriptions[id] = (on({ id: id, change: 'any' }, function () {
                SendToPanel(GenerateDetailPage(type, pageItem));
            }))
        }
        
        function GetUnitOfMeasurement(id: string): string {
            if (!existsObject(id))
                return "";
        
            let obj = getObject(id);
            if (typeof obj.common.unit !== 'undefined') {
                return obj.common.unit
            }
        
            if (typeof obj.common.alias !== 'undefined' && typeof obj.common.alias.id !== 'undefined') {
                return GetUnitOfMeasurement(obj.common.alias.id);
            }
            return "";
        }
        
        function GenerateThermoPage(page: PageThermo): Payload[] {
            var id = page.items[0].id
            var out_msgs: Array<Payload> = [];
            out_msgs.push({ payload: "pageType~cardThermo" });
        
            // ioBroker
            if (existsObject(id)) {
                let o = getObject(id)
                let name = page.items[0].name !== undefined ? page.items[0].name : o.common.name.de
                let currentTemp = 0;
                if (existsState(id + ".ACTUAL"))
                    currentTemp = (Math.round(parseFloat(getState(id + ".ACTUAL").val) * 10)/10)*10;
        
                let destTemp = 0;
                if (existsState(id + ".SET")) {
                    destTemp = getState(id + ".SET").val.toFixed(2) * 10;
                    log(id + ".SET " + destTemp)
                }
        
                let status = ""
                if (existsState(id + ".MODE"))
                    status = getState(id + ".MODE").val;
                let minTemp = 50 //Min Temp 5°C
                let maxTemp = 300 //Max Temp 30°C
                let stepTemp = 5
        
                //0-4 verwendet bei ungerader Anzahl Parametern
                let bt0 = "~~~~"; //verwendet bei ungleichen Parametern
                let bt1 = "~~~~"; //verwendet bei ungleichen Parametern
                let bt2 = "~~~~"; //verwendet bei ungleichen Parametern
                let bt3 = "~~~~"; //verwendet bei ungleichen Parametern
                let bt4 = "~~~~"; //verwendet bei ungleichen Parametern
                //5-8 verwendet bei gerader Anzahl Parametern
                let bt5 = Icons.GetIcon("water-percent") + "~0~1~~";    
                let bt6 = Icons.GetIcon("fire") + "~0~1~~";             
                let bt7 = Icons.GetIcon("wifi") + "~0~1~~";             
                let bt8 = Icons.GetIcon("battery-high") + "~0~1~~";     
        
                if (existsState(id + ".HUMIDITY")){
                    console.log(parseInt(getState(id + ".HUMIDITY").val));
                    bt5 =  Icons.GetIcon("water-percent") + "~2016~1~bt8~";
                    if (parseInt(getState(id + ".HUMIDITY").val) < 40) {
                        bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                    } else if (parseInt(getState(id + ".HUMIDITY").val) < 30) {
                        bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                    } else if (parseInt(getState(id + ".HUMIDITY").val) > 65) {
                        bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                    } else if (parseInt(getState(id + ".HUMIDITY").val) > 75) {
                        bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                    }
                }
        
                if (existsState(id + ".MAINTAIN")){
                    if (getState(id + ".MAINTAIN").val >> .1) {
                        bt6 =  Icons.GetIcon("fire") + "~60897~1~bt8~";
                    } else {
                        bt6 =  Icons.GetIcon("fire") + "~33840~0~bt8~";
                    }
                }
        
                if (existsState(id + ".UNREACH")){
                    if (getState(id + ".UNREACH").val) {
                        bt7 =  Icons.GetIcon("wifi-off") + "~63488~1~bt8~";
                    } else {
                        bt7 =  Icons.GetIcon("wifi") + "~2016~1~bt8~";
                    }
                }
        
                if (existsState(id + ".LOWBAT")){
                    if (getState(id + ".LOWBAT").val) {
                        bt8 =  Icons.GetIcon("battery-low") + "~63488~1~bt8~";
                    } else {
                        bt8 =  Icons.GetIcon("battery-high") + "~2016~1~bt8~";
                    }
                }
        
                let icon_res = bt0 + bt1 + bt2 + bt3 + bt4 + bt5 + bt6 + bt7 + bt8;
        
                out_msgs.push({ payload: "entityUpd~" + name + "~" + GetNavigationString(pageId) + "~" + id + "~" + currentTemp + "~" + destTemp + "~" + status + "~" + minTemp + "~" + maxTemp + "~" + stepTemp + "~" +icon_res})
            }
        
            return out_msgs
        }
        
        function GenerateMediaPage(page: PageMedia): Payload[] {
            var id = page.items[0].id
            var out_msgs: Array<Payload> = [];
            out_msgs.push({ payload: "pageType~cardMedia" });
        
            if (existsObject(id)) {
                let o = getObject(id);
                //let name = o.common.name.de;
                let name = getState(spotifyInstanz + ".player.contextDescription").val;
                let media_icon = Icons.GetIcon("spotify");
                let title = getState(spotifyInstanz + ".player.trackName").val;
                let author = getState(spotifyInstanz + ".player.artistName").val
                let volume = getState(spotifyInstanz + ".player.volume").val;
                var iconplaypause = Icons.GetIcon("pause"); //pause
                if (getState(spotifyInstanz + ".player.isPlaying").val) {
                    iconplaypause = Icons.GetIcon("pause"); //pause
                } else {
                    iconplaypause = Icons.GetIcon("play"); //play
                }
                let currentSpeaker = getState(spotifyInstanz + ".player.device.name").val
                let speakerlist = getState(spotifyInstanz + ".devices.deviceListString").val.replace(/;/g,"?");
                let onoffbutton = 1;
        
                out_msgs.push({ payload: "entityUpd~" + 
                                          name + "~" +
                                          id + "~" +
                                          "~" +         //????
                                          media_icon + "~" +
                                          title + "~" +
                                          author + "~" +
                                          volume + "~" +
                                          iconplaypause + "~" +
                                          currentSpeaker + "~" +
                                          speakerlist + "~" +
                                          onoffbutton});
            }
        
            return out_msgs
        }
        
        function GenerateAlarmPage(page: PageAlarm): Payload[] {
            var id = page.items[0].id
            var out_msgs: Array<Payload> = [];
            out_msgs.push({ payload: "pageType~cardAlarm" });
        
            var armed: boolean = false;
            
            if (armed) {
                var arm1 = "Deaktivieren";                  //arm1*~*
                var arm1ActionName = "D1";                  //arm1ActionName*~*
                var arm2 = "";                              //arm2*~*
                var arm2ActionName = "";                    //arm2ActionName*~*
                var arm3 = "";                              //arm3*~*
                var arm3ActionName = "";                    //arm3ActionName*~*
                var arm4 = "";                              //arm4*~*
                var arm4ActionName = "";                    //arm4ActionName*~*
                var icon = Icons.GetIcon("shield-home");    //icon*~*
                var iconcolor = 63488;                      //iconcolor*~*
                var numpadStatus = 1;                       //numpadStatus*~*
                var flashing = 1;                           //flashing*
            } 
            else {
                var arm1 = "Alarm 1";                       //arm1*~*
                var arm1ActionName = "A1";                  //arm1ActionName*~*
                var arm2 = "Alarm 2";                       //arm2*~*
                var arm2ActionName = "A2";                  //arm2ActionName*~*
                var arm3 = "Alarm 3";                       //arm3*~*
                var arm3ActionName = "A3";                  //arm3ActionName*~*
                var arm4 = "Alarm 4";                       //arm4*~*
                var arm4ActionName = "A4";                  //arm4ActionName*~*
                var icon = Icons.GetIcon("shield-off");     //icon*~*
                var iconcolor = 2016;                       //iconcolor*~*
                var numpadStatus = 1;                       //numpadStatus*~*
                var flashing = 1;                           //flashing*        
            }
                
            out_msgs.push({ payload:    "entityUpd~" +             //entityUpd~*
                                        id + "~" +                 //internalNameEntity*~* //navigation*~*
                                        "~" +                      //???
                                        arm1 + "~" +               //arm1*~*
                                        arm1ActionName + "~" +     //arm1ActionName*~*
                                        arm2 + "~" +               //arm2*~*
                                        arm2ActionName + "~" +     //arm2ActionName*~*
                                        arm3 + "~" +               //arm3*~*
                                        arm3ActionName + "~" +     //arm3ActionName*~*
                                        arm4 + "~" +               //arm4*~*
                                        arm4ActionName + "~" +     //arm4ActionName*~*
                                        icon + "~" +               //icon*~* 39=Disarmed 35=Shield_Home, 40
                                        iconcolor + "~" +          //iconcolor*~* 2016=green  63488=red
                                        numpadStatus + "~" +       //numpadStatus*~*
                                        flashing});                //flashing*
        
            return out_msgs
        }
        
        function setIfExists(id: string, value: any, type: string | null = null): boolean {
            if (type === null) {
                if (existsState(id)) {
                    setState(id, value);
                    return true;
                }
            }
            else {
                let obj = getObject(id);
                if (existsState(id) && obj.common.type !== undefined && obj.common.type === type) {
                    setState(id, value);
                    return true;
                }
            }
            return false;
        }
        
        function toggleState(id: string): boolean {
            let obj = getObject(id);
            if (existsState(id) && obj.common.type !== undefined && obj.common.type === "boolean") {
                setState(id, !getState(id).val);
                return true;
            }
            return false;
        }
        
        function HandleButtonEvent(words): void {
            let id = words[2]
            let buttonAction = words[3];
        
            switch (buttonAction) {
                case "bNext":
                    var pageNum = ((pageId + 1) % config.pages.length);
                    pageId = Math.abs(pageNum);
                    UnsubscribeWatcher();
                    GeneratePage(config.pages[pageId]);
                    break;
                case "bPrev":
                    var pageNum = ((pageId - 1) % config.pages.length);
                    pageId = Math.abs(pageNum);
                    UnsubscribeWatcher();
                    GeneratePage(config.pages[pageId]);
                    break;
                case "bExit":
                    if (config.screenSaverDoubleClick) {
                        if (words[4] == 2)
                            GeneratePage(config.pages[pageId]);
                    }
                    else
                        GeneratePage(config.pages[pageId]);
                    break;
                case "OnOff":
                    if (existsObject(id)) {
                        var action = false
                        if (words[4] == "1")
                            action = true
                        let o = getObject(id)
                        switch (o.common.role) {
                            case "light":
                                setIfExists(id + ".SET", action);
                                break;
                            case "dimmer":
                                setIfExists(id + ".ON_SET", action) ? true : setIfExists(id + ".ON_ACTUAL", action);
                        }
                    }
                    break;
                case "up":
                    setIfExists(id + ".OPEN", true)
                    break;
                case "stop":
                    setIfExists(id + ".STOP", true)
                    break;
                case "down":
                    setIfExists(id + ".CLOSE", true)
                    break;
                case "button":
                    toggleState(id + ".SET") ? true : toggleState(id + ".ON_SET")
                    break;
                case "positionSlider":
                case "brightnessSlider":
                    setIfExists(id + ".SET", parseInt(words[4])) ? true : setIfExists(id + ".ACTUAL", parseInt(words[4]));
                    break;
                case "tempUpd":
                    setIfExists(id + ".SET", parseInt(words[4]) / 10)
                    break;
                case "media-back":
                    setIfExists(spotifyInstanz + ".player.skipMinus", true)
                    break;
                case "media-pause":
                    if (getState(spotifyInstanz + ".player.isPlaying").val === true) {
                        setIfExists(spotifyInstanz + ".player.pause", true)
                    } else {
                        setIfExists(spotifyInstanz + ".player.play", true)
                    }
                    break;
                case "media-next":
                    setIfExists(spotifyInstanz + ".player.skipPlus", true)
                    break;
                case "volumeSlider":
                    setIfExists(spotifyInstanz + ".player.volume", parseInt(words[4]))
                    break;
                case "speaker-sel":
                    console.log("auf mediaCard - speaker-sel - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                    break;
                case "A1": //Alarm-Page Alarm 1 aktivieren
                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                    break;
                case "A2": //Alarm-Page Alarm 2 aktivieren
                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                    break;  
                case "A3": //Alarm-Page Alarm 3 aktivieren
                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                    break;  
                case "A4": //Alarm-Page Alarm 4 aktivieren
                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                    break;         
                case "D1": //Alarm-Page Alarm Deaktivieren
                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                    break;  
                default:
                    break;
            }
        }
        
        function GetNavigationString(pageId: number): string {
            switch (pageId) {
                case 0:
                    return "0|1";
                case config.pages.length - 1:
                    return "1|0";
                case -1:
                    return "0|0";
                default:
                    return "1|1";
            }
        }
        
        function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
        
            var out_msgs: Array<Payload> = [];
            let id = pageItem.id
            if (existsObject(id)) {
                var o = getObject(id)
                var val: (boolean | number) = 0;
                let icon = Icons.GetIcon("lightbulb");
                var iconColor = rgb_dec565(config.defaultColor);
                if (type == "popupLight") {
                    let switchVal = "0"
                    if (o.common.role == "light") {
                        if (existsState(id + ".GET")) {
                            val = getState(id + ".GET").val;
                            RegisterDetailEntityWatcher(id + ".GET", pageItem, type);
                        }
                        else if (existsState(id + ".SET")) {
                            val = getState(id + ".SET").val;
                            RegisterDetailEntityWatcher(id + ".SET", pageItem, type);
                        }
        
                        if (val) {
                            switchVal = "1";
                            iconColor = GetIconColor(pageItem, true, false);
                        }
        
                        out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + + iconColor + "~" + switchVal + ",disable,disable,disable" })
                    }
        
                    if (o.common.role == "dimmer") {
                        if (existsState(id + ".ON_ACTUAL")) {
                            val = getState(id + ".ON_ACTUAL").val;
                            RegisterDetailEntityWatcher(id + ".ON_ACTUAL", pageItem, type);
                        }
        
                        else if (existsState(id + ".ON_SET")) {
                            val = getState(id + ".ON_SET").val;
                            RegisterDetailEntityWatcher(id + ".ON_SET", pageItem, type);
                        }
        
                        if (val === true) {
                            var iconColor = GetIconColor(pageItem, val, false);
                            switchVal = "1"
                        }
                        let brightness = 0;
                        if (existsState(id + ".ACTUAL")) {
                            brightness = Math.trunc(scale(getState(id + ".ACTUAL").val, 0, 100, 0, 100))
                            iconColor = GetIconColor(pageItem, brightness, false);
                            RegisterDetailEntityWatcher(id + ".ACTUAL", pageItem, type);
                        }
                        let colorTemp = "disable"
                        let colorMode = "disable"
                        //let attr_support_color = attr.supported_color_modes
                        //if (attr_support_color.includes("color_temp"))
                        // colortemp = Math.trunc(scale(attr.color_temp, attr.min_mireds, attr.max_mireds, 0, 100))
        
                        out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + iconColor + "~" + switchVal + "~" + brightness + "~" + colorTemp + "~" + colorMode })
                    }
        
                }
        
                if (type == "popupShutter") {
                    if (existsState(id + ".ACTUAL"))
                        val = getState(id + ".ACTUAL").val;
                    else if (existsState(id + ".SET"))
                        val = getState(id + ".SET").val;
                    out_msgs.push({ payload: "entityUpdateDetail," + val })
                }
            }
            return out_msgs
        }
        
        function scale(number: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
            return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
        }
        
        function UnsubscribeWatcher(): void {
            for (const [key, value] of Object.entries(subscriptions)) {
                unsubscribe(value);
                delete subscriptions[key]
            }
        }
        
        function HandleScreensaver(): void {
            SendToPanel({ payload: "pageType~screensaver"})
            UnsubscribeWatcher();
            HandleScreensaverUpdate();
        }
        
        function HandleScreensaverUpdate(): void {
            if (screensaverEnabled && config.weatherEntity != null && existsObject(config.weatherEntity)) {
                var icon = getState(config.weatherEntity + ".ICON").val;
         
                let temperature: string =
                    existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
                        existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
         
                let payloadString =
                    "weatherUpdate~" + Icons.GetIcon(GetAccuWeatherIcon(parseInt(icon))) + "~"
                    + temperature + " " + config.temperatureUnit + "~"
         
        /*-------------------------------------------------------------------------------------------------------------------------------------*/
                if (weatherForecast == true) {
                    // Accu-Weather Forecast Tag 2 - Tag 5 -- Wenn weatherForecast = true
                    for (let i = 2; i < 6; i++) {
                        let TempMax = getState("accuweather.0.Summary.TempMax_d" + i).val;
                        let DayOfWeek = getState("accuweather.0.Summary.DayOfWeek_d" + i).val;
                        let WeatherIcon = GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                        payloadString += DayOfWeek + "~" + Icons.GetIcon(WeatherIcon) + "~" + TempMax + " °C~";
                    }
                } 
                else {
                    //In Config definierte Zustände wenn weatherForecast = false
                    payloadString += GetScreenSaverEntityString(config.firstScreensaverEntity);
                    payloadString += GetScreenSaverEntityString(config.secondScreensaverEntity);
                    payloadString += GetScreenSaverEntityString(config.thirdScreensaverEntity);
                    payloadString += GetScreenSaverEntityString(config.fourthScreensaverEntity);
                }
        /*-------------------------------------------------------------------------------------------------------------------------------------*/
         
                SendToPanel(<Payload>{ payload: payloadString });
            }
        }
        
        function GetScreenSaverEntityString(configElement: ScreenSaverElement | null): string {
            if (configElement != null && configElement.ScreensaverEntity != null && existsState(configElement.ScreensaverEntity)) {
                let u1 = getState(configElement.ScreensaverEntity).val;
                return configElement.ScreensaverEntityText + "~" + Icons.GetIcon(configElement.ScreensaverEntityIcon) + "~" + u1 + " " + configElement.ScreensaverEntityUnitText + "~";
            }
            else {
                return "~~~";
            }
        }
        
        function GetAccuWeatherIcon(icon: number): string {
            switch (icon) {
                case 24:        // Ice        
                case 30:        // Hot    
                case 31:        // Cold    
                    return "window-open";  // exceptional
        
                case 7:         // Cloudy
                case 8:         // Dreary (Overcast)        
                case 38:        // Mostly Cloudy
                    return "weather-cloudy";  // cloudy
        
                case 11:        // fog
                    return "weather-fog";  // fog
        
                case 25:        // Sleet    
                    return "weather-hail";  // Hail
        
                case 15:        // T-Storms    
                    return "weather-lightning";  // lightning
        
                case 16:        // Mostly Cloudy w/ T-Storms
                case 17:        // Partly Sunny w/ T-Storms
                case 41:        // Partly Cloudy w/ T-Storms       
                case 42:        // Mostly Cloudy w/ T-Storms
                    return "weather-lightning-rainy";  // lightning-rainy
        
                case 33:        // Clear
                case 34:        // Mostly Clear
                case 37:        // Hazy Moonlight
                    return "weather-night";
        
                case 3:         // Partly Sunny
                case 4:         // Intermittent Clouds
                case 6:         // Mostly Cloudy
                case 35: 	    // Partly Cloudy
                case 36: 	    // Intermittent Clouds
                    return "weather-partly-cloudy";  // partlycloudy 
        
                case 18:        // pouring
                    return "weather-pouring";  // pouring
        
                case 12:        // Showers
                case 13:        // Mostly Cloudy w/ Showers
                case 14:        // Partly Sunny w/ Showers      
                case 26:        // Freezing Rain
                case 39:        // Partly Cloudy w/ Showers
                case 40:        // Mostly Cloudy w/ Showers
                    return "weather-rainy";  // rainy
        
                case 19:        // Flurries
                case 20:        // Mostly Cloudy w/ Flurries
                case 21:        // Partly Sunny w/ Flurries
                case 22:        // Snow
                case 23:        // Mostly Cloudy w/ Snow
                case 43:        // Mostly Cloudy w/ Flurries
                case 44:        // Mostly Cloudy w/ Snow
                    return "weather-snowy";  // snowy
        
                case 29:        // Rain and Snow
                    return "weather-snowy-rainy";  // snowy-rainy
        
                case 1:         // Sunny
                case 2: 	    // Mostly Sunny
                case 5:         // Hazy Sunshine
                    return "weather-sunny";  // sunny
        
                case 32:        // windy
                    return "weather-windy";  // windy
        
                default:
                    return "alert-circle-outline";
            }
        }
        
        function GetBlendedColor(percentage: number): RGB {
            if (percentage < 50)
                return Interpolate(config.defaultOffColor, config.defaultOnColor, percentage / 50.0);
            return Interpolate(Red, White, (percentage - 50) / 50.0);
        }
        
        function Interpolate(color1: RGB, color2: RGB, fraction: number): RGB {
            var r: number = InterpolateNum(color1.red, color2.red, fraction);
            var g: number = InterpolateNum(color1.green, color2.green, fraction);
            var b: number = InterpolateNum(color1.blue, color2.blue, fraction);
            return <RGB>{ red: Math.round(r), green: Math.round(g), blue: Math.round(b) };
        }
        
        function InterpolateNum(d1: number, d2: number, fraction: number): number {
            return d1 + (d2 - d1) * fraction;
        }
        
        function rgb_dec565(rgb: RGB): number {
            return ((Math.floor(rgb.red / 255 * 31) << 11) | (Math.floor(rgb.green / 255 * 63) << 5) | (Math.floor(rgb.blue / 255 * 31)));
        }
        
        type RGB = {
            red: number,
            green: number,
            blue: number
        };
        
        type Payload = {
            payload: string;
        };
        
        type Page = {
            type: string,
            heading: string,
            items: PageItem[],
            useColor: boolean
        };
        
        interface PageEntities extends Page {
            type: "cardEntities",
            items: PageItem[],
        
        };
        interface PageGrid extends Page {
            type: "cardGrid",
            items: PageItem[],
        };
        
        interface PageThermo extends Page {
            type: "cardThermo",
            items: PageItem[],
        };
        
        interface PageMedia extends Page {
            type: "cardMedia",
            items: PageItem[],
        };
        
        interface PageAlarm extends Page {
            type: "cardAlarm",
            items: PageItem[],
        };
        
        type PageItem = {
            id: string,
            icon: (string | undefined),
            onColor: (RGB | undefined),
            offColor: (RGB | undefined),
            useColor: (boolean | undefined),
            interpolateColor: (boolean | undefined),
            minValue: (number | undefined),
            maxValue: (number | undefined),
            name: (string | undefined)
        }
        
        type Config = {
            panelRecvTopic: string,
            panelSendTopic: string,
            timeoutScreensaver: number,
            dimmode: number,
            //brightnessScreensaver:
            locale: string,
            timeFormat: string,
            dateFormat: string,
            weatherEntity: string | null,
            screenSaverDoubleClick: boolean,
            temperatureUnit: string,
            firstScreensaverEntity: ScreenSaverElement | null,
            secondScreensaverEntity: ScreenSaverElement | null,
            thirdScreensaverEntity: ScreenSaverElement | null,
            fourthScreensaverEntity: ScreenSaverElement | null,
            defaultColor: RGB,
            defaultOnColor: RGB,
            defaultOffColor: RGB,
            pages: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid)[],
            button1Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
            button2Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
        };
        
        type ScreenSaverElement = {
            ScreensaverEntity: string | null,
            ScreensaverEntityIcon: string | null,
            ScreensaverEntityText: string | null,
            ScreensaverEntityUnitText: string | null,
        }
        
        /*
        RED 	63488	Red
        BLUE	31	    Blue
        GRAY	33840	Gray
        BLACK	0	    Black
        WHITE	65535	White
        GREEN	2016	Green
        BROWN	48192	Brown
        YELLOW	65504	Yellow
        Background 6371 
        */
        

        Spotify-Premium mit Angabe Instanz --> z.B. (spotify-premium.0)
        02f07afa-ab8a-4c2a-87b5-252a2036417b-image.png

        cardThermo mit ALIAS Thermostat inkl. LOWBAT/HUMIDITY/UNREACH/MAINTAIN (missbaraucht für VALVE)
        1c830f2a-11ad-44a0-a119-093c45c19a06-image.png

        cardAlarm Alarm stellen
        6e343adf-fd77-4aa5-a586-47581c332175-image.png

        cardAlarm Deaktiveren
        af041f07-c5a2-4e13-a467-211df2ada410-image.png

        P.S.: was hängt eigentlich hinter deinem ALIAS Radio.NJoy/Delta_Radio/NDR2

        Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
        https://github.com/joBr99/nspanel-lovelace-ui/wiki

        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

        britzelpufB 1 Antwort Letzte Antwort
        0
        • ArmilarA Armilar

          @britzelpuf sagte in Sonoff NSPanel:

          @armilar Ja das mit den gesperrten Accounts kenne ich auch. Mein Account wurde 3x hintereinander gesperrt. Teilweise direkt nachdem ich mich angemeldet habe :( Bis der das erste mal entsperrt wurde hat es knapp eine Woche gedauert, danach konnte ich den Github Henry direkt anschreiben und es ging immer sehr schnell. Jetzt hat er aber versprochen, dass es nicht mehr passiert ;-)

          Ja der Github-Henry ;-) Hoffentlich macht er die Drohung wahr und lässt die Accounts freigeschaltet :+1:

          Zum Spotify-Player habe ich jetzt oben eine weitere Variable mit der Spotify-Premium Instanz eingesetzt. Ich denke niemand wird die Datenpunkte des Adapters wirklich verändern, daher kein ALIAS.

          Hier mein aktueller lauffähiger Stand in der neuesten tft Version mit erweiterter cardThermo, sowie der cardMedia (Spotify-Premium Steuerung) und der cardAlarm :

          var Icons = new IconsSelector();
          
          const Months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
          const Days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
          const Red: RGB = { red: 255, green: 0, blue: 0 };
          const White: RGB = { red: 255, green: 255, blue: 255 };
          const Off: RGB = { red: 68, green: 115, blue: 158 };
          const On: RGB = { red: 253, green: 216, blue: 53 };
          const BatteryFull: RGB = { red: 96, green: 176, blue: 62 }
          const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 }
          
          //----Möglichkeit, im Screensaver zwischen Accu-Weather Forcast oder selbstdefinierten Werten zu wählen---------------------------------
          var weatherForecast = true; //true = WheatherForecast 5 Days --- false = Config --> firstScreensaverEntity - fourthScreensaverEntity ...
          //Spotify Instanz
          var spotifyInstanz = "spotify-premium.0"
          
          var Buero_Seite_1: PageEntities =
          {
              "type": "cardEntities",
              "heading": "Büro",
              "useColor": true,
              "items": [
                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe"},
                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung"},
                  <PageItem>{ id: "alias.0.NSPanel_1.MyTestbutton", icon: "lightbulb", offColor: Off, onColor: On, name: "Taster"},
                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power" }
              ]
          };
          
          var Buero_Seite_2: PageGrid =
          {
              "type": "cardGrid",
              "heading": "Büro",
              "useColor": true,
              "items": [
                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", name: "Schreibtisch"},
                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", name: "Deckenlampe"},
                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power"},
                  <PageItem>{ id: "alias.0.NSPanel_1.Radio.TuneIn", icon: "play"}
              ]
          };
          
          var Spotify: PageMedia = 
          {
              "type": "cardMedia",
              "heading": "Spotify",
              "useColor": false,
              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Spotify" }]
          };
          
          var Buero_Themostat: PageThermo = 
          {
              "type": "cardThermo",
              "heading": "Thermostat",
              "useColor": true,
              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Thermostat_Büro" }]
          };
          
          var Buero_Alarm: PageAlarm = 
          {
              "type": "cardAlarm",
              "heading": "Alarm",
              "useColor": true,
              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alarm" }]
          };
          
          var button1Page: PageGrid =
          {
              "type": "cardGrid",
              "heading": "Radio",
              "useColor": true,
              "items": [
                  <PageItem>{ id: "alias.0.Radio.NJoy" },
                  <PageItem>{ id: "alias.0.Radio.Delta_Radio" },
                  <PageItem>{ id: "alias.0.Radio.NDR2" },
              ]
          };
          
          var button2Page: PageEntities =
          {
              "type": "cardEntities",
              "heading": "Knopf2",
              "useColor": true,
              "items": [
                  <PageItem>{ id: "alias.0.Schlafen" },
                  <PageItem>{ id: "alias.0.Stern" }
              ]
          };
          
          export const config: Config = {
              panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //anpassen
              panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //anpassen
              firstScreensaverEntity: { ScreensaverEntity: "hmip.0.devices.3014F711A000185BE9922BCF.channels.1.humidity", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
              secondScreensaverEntity: { ScreensaverEntity: "accuweather.0.Daily.Day1.Day.PrecipitationProbability", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" },
              thirdScreensaverEntity: { ScreensaverEntity: "0_userdata.0.Wetter.Windstaerke_homaticIP", ScreensaverEntityIcon: "weather-windy", ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: "bft" },
              fourthScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.UVIndex", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "UV", ScreensaverEntityUnitText: "" },
              timeoutScreensaver: 15,
              dimmode: 8,
              screenSaverDoubleClick: false,
              locale: "de_DE",
              timeFormat: "%H:%M",
              dateFormat: "%A, %d. %B %Y",
              weatherEntity: "alias.0.Wetter.Wetter",
              defaultOffColor: Off,
              defaultOnColor: On,
              defaultColor: Off,
              temperatureUnit: "°C",
              pages: [Buero_Seite_1, 
                      Buero_Seite_2, 
                      Spotify,
                      Buero_Themostat,
                      Buero_Alarm
              ],
              button1Page: button1Page,
              button2Page: button2Page
          };
          
          
          // _________________________________ Ab hier keine Konfiguration mehr _____________________________________
          
          var subscriptions: any = {};
          var screensaverEnabled : boolean = false;
          var pageId = 0;
          
          schedule("* * * * *", function () {
              SendTime();
          });
          schedule("0 * * * *", function () {
              SendDate();
          });
          
          
          // Only monitor the extra nodes if present
          var updateArray: string[] = [];
          if (config.firstScreensaverEntity !== null && config.firstScreensaverEntity.ScreensaverEntity != null && existsState(config.firstScreensaverEntity.ScreensaverEntity)) {
              updateArray.push(config.firstScreensaverEntity.ScreensaverEntity)
          }
          if (config.secondScreensaverEntity !== null && config.secondScreensaverEntity.ScreensaverEntity != null && existsState(config.secondScreensaverEntity.ScreensaverEntity)) {
              updateArray.push(config.secondScreensaverEntity.ScreensaverEntity)
          }
          if (config.thirdScreensaverEntity !== null && config.thirdScreensaverEntity.ScreensaverEntity != null && existsState(config.thirdScreensaverEntity.ScreensaverEntity)) {
              updateArray.push(config.thirdScreensaverEntity.ScreensaverEntity)
          }
          if (config.fourthScreensaverEntity !== null && config.fourthScreensaverEntity.ScreensaverEntity != null && existsState(config.fourthScreensaverEntity.ScreensaverEntity)) {
              updateArray.push(config.fourthScreensaverEntity.ScreensaverEntity)
          }
          
          if (updateArray.length > 0) {
              on(updateArray, function () {
                  HandleScreensaverUpdate();
              })
          }
          on({ id: config.panelRecvTopic }, function (obj) {
              if (obj.state.val.startsWith('\{"CustomRecv":')) {
                  var json = JSON.parse(obj.state.val);
          
                  var split = json.CustomRecv.split(",");
                  HandleMessage(split[0], split[1], parseInt(split[2]), split);
              }
          });
          
          function SendToPanel(val: Payload | Payload[]): void {
              if (Array.isArray(val)) {
                  val.forEach(function (id, i) {
                      setState(config.panelSendTopic, id.payload);
                  });
              }
              else
                  setState(config.panelSendTopic, val.payload);
          }
          
          function HandleMessage(typ: string, method: string, page: number, words: Array<string>): void {
              if (typ == "event") {
                  switch (method) {
                      case "startup":
                          screensaverEnabled = false;
                          UnsubscribeWatcher();
                          HandleStartupProcess();
                          pageId = 0;
                          GeneratePage(config.pages[0]);
                          break;
                      case "sleepReached":
                          screensaverEnabled = true;
                          HandleScreensaver();
                          break;
                      case "pageOpenDetail":
                          screensaverEnabled = false;
                          UnsubscribeWatcher();
                          let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
                          if (pageItem !== undefined)
                              SendToPanel(GenerateDetailPage(words[2], pageItem));
                      case "buttonPress2":
                          screensaverEnabled = false;
                          HandleButtonEvent(words);
                          break;
                      case "button1":
                      case "button2":
                          screensaverEnabled = false;
                          HandleHardwareButton(method);
                      default:
                          break;
                  }
              }
          }
          
          function GeneratePage(page: Page): void {
              switch (page.type) {
                  case "cardEntities":
                      SendToPanel(GenerateEntitiesPage(<PageEntities>page));
                      break;
                  case "cardThermo":
                      SendToPanel(GenerateThermoPage(<PageThermo>page));
                      break;
                  case "cardGrid":
                      SendToPanel(GenerateGridPage(<PageGrid>page));
                      break;
                  case "cardMedia":
                      SendToPanel(GenerateMediaPage(<PageMedia>page));
                      break;
                  case "cardAlarm":
                      SendToPanel(GenerateAlarmPage(<PageAlarm>page));
                      break;
              }
          }
          
          function HandleHardwareButton(method: string): void {
              let page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid);
              if (config.button1Page !== null && method == "button1") {
                  page = config.button1Page;
              }
              else if (config.button2Page !== null && method == "button2") {
                  page = config.button2Page;
              }
              else {
                  return;
              }
          
              // Set pageId to -1, because of the navigation arrows
              let tempPageId = pageId;
              pageId = -1;
              GeneratePage(page);
              pageId = tempPageId;
          }
          
          function HandleStartupProcess(): void {
              SendDate();
              SendTime();
              SendToPanel({ payload: "timeout~" + config.timeoutScreensaver });
              SendToPanel({ payload: "dimmode~" + config.dimmode });
          }
          
          function SendDate(): void {
              var d = new Date();
              var day = Days[d.getDay()];
              var date = d.getDate();
              var month = Months[d.getMonth()];
              var year = d.getFullYear();
              var _sendDate = "date~" + day + " " + date + " " + month + " " + year;
              SendToPanel(<Payload>{ payload: _sendDate });
          }
          
          function SendTime(): void {
              var d = new Date();
              var hr = d.getHours().toString();
              var min = d.getMinutes().toString();
          
              if (d.getHours() < 10) {
                  hr = "0" + d.getHours().toString();
              }
              if (d.getMinutes() < 10) {
                  min = "0" + d.getMinutes().toString();
              }
              SendToPanel(<Payload>{ payload: "time~" + hr + ":" + min });
          }
          
          function GenerateEntitiesPage(page: PageEntities): Payload[] {
              var out_msgs: Array<Payload> = [];
              out_msgs = [{ payload: "pageType~cardEntities" }]
              out_msgs.push({ payload: GeneratePageElements(page) });
              return out_msgs
          }
          
          function GenerateGridPage(page: PageGrid): Payload[] {
              var out_msgs: Array<Payload> = [];
              out_msgs = [{ payload: "pageType~cardGrid" }]
              out_msgs.push({ payload: GeneratePageElements(page) });
              return out_msgs
          }
          
          function GeneratePageElements(page: Page): string {
              let maxItems = 0;
              switch (page.type) {
                  case "cardThermo":
                      maxItems = 1;
                      break;
                  case "cardAlarm":
                      maxItems = 1;
                      break;
                  case "cardMedia":
                      maxItems = 1;
                      break;
                  case "cardEntities":
                      maxItems = 4;
                      break;
                  case "cardGrid":
                      maxItems = 6;
                      break;
              }
              let pageData = "entityUpd~" + page.heading + "~" + GetNavigationString(pageId)
              for (let index = 0; index < maxItems; index++) {
                  if (page.items[index] !== undefined) {
                      pageData += CreateEntity(page.items[index], index + 1, page.useColor);
                  }
                  else {
                      pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1);
                  }
              }
              return pageData;
          }
          
          function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
              var iconId = "0"
              if (pageItem.id == "delete") {
                  return "~delete~~~~~"
              }
              var name: string;
              var type: string;
              // ioBroker
              if (existsObject(pageItem.id)) {
                  let o = getObject(pageItem.id)
                  var val = null;
                  name = pageItem.name !== undefined ? pageItem.name : o.common.name.de
          
                  if (existsState(pageItem.id + ".GET")) {
                      val = getState(pageItem.id + ".GET").val;
                      RegisterEntityWatcher(pageItem.id + ".GET");
                  }
                  else if (existsState(pageItem.id + ".SET")) {
                      val = getState(pageItem.id + ".SET").val;
                      RegisterEntityWatcher(pageItem.id + ".SET");
                  }
                  var iconColor = rgb_dec565(config.defaultColor);
          
                  switch (o.common.role) {
                      case "light":
                          type = "light"
                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                          var optVal = "0"
          
                          if (val === true || val === "true") {
                              optVal = "1"
                              iconColor = GetIconColor(pageItem, true, useColors);
                          }
          
                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
          
                      case "dimmer":
                          type = "light"
                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                          var optVal = "0"
                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                              val = getState(pageItem.id + ".ON_ACTUAL").val;
                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                          }
                          else if (existsState(pageItem.id + ".ON_SET")) {
                              val = getState(pageItem.id + ".ON_SET").val;
                              RegisterEntityWatcher(pageItem.id + ".ON_SET");
                          }
                          if (val === true || val === "true") {
                              optVal = "1"
                              iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                          }
          
                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
          
                      case "blind":
                          type = "shutter"
                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("window-open");
                          iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~"
          
                      case "info":
                      case "value.temperature":
                      case "thermostat":
                          type = "text";
                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == "value.temperature" || o.common.role == "thermostat" ? Icons.GetIcon("thermometer") : Icons.GetIcon("information-outline");
                          let unit = "";
                          var optVal = "0"
                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                              optVal = getState(pageItem.id + ".ON_ACTUAL").val;
                              unit = GetUnitOfMeasurement(pageItem.id + ".ON_ACTUAL");
                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                          }
                          else if (existsState(pageItem.id + ".ACTUAL")) {
                              optVal = getState(pageItem.id + ".ACTUAL").val;
                              unit = GetUnitOfMeasurement(pageItem.id + ".ACTUAL");
                              RegisterEntityWatcher(pageItem.id + ".ACTUAL");
                          }
          
                          if (o.common.role == "value.temperature") {
                              iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("thermometer");
                          }
          
                          iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);
          
                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal + " " + unit;
          
                      case "button":
                          type = "button";
                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("gesture-tap-button");
                          let buttonText = pageItem.name !== undefined ? pageItem.name : "PRESS";
                          iconColor = GetIconColor(pageItem, true, useColors);
                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + + iconColor + "~" + name + "~" + buttonText;
          
                      default:
                          return "~delete~~~~~";
                  }
              }
          
              return "~delete~~~~~"
          }
          
          function GetIconColor(pageItem: PageItem, value: (boolean | number), useColors: boolean): number {
              // dimmer
              if ((pageItem.useColor || useColors) && pageItem.interpolateColor && typeof (value) === "number") {
                  let maxValue = pageItem.maxValue !== undefined ? pageItem.maxValue : 100;
                  let minValue = pageItem.minValue !== undefined ? pageItem.minValue : 0;
                  value = value > maxValue ? maxValue : value;
                  value = value < minValue ? minValue : value;
                  return rgb_dec565(
                      Interpolate(
                          pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor,
                          pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor,
                          scale(value, minValue, maxValue, 0, 1)
                      ));
              }
          
              if ((pageItem.useColor || useColors) && ((typeof (value) === "boolean" && value) || value > (pageItem.minValue !== undefined ? pageItem.minValue : 0))) {
                  return rgb_dec565(pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor)
              }
          
              return rgb_dec565(pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor);
          }
          
          function RegisterEntityWatcher(id: string): void {
              if (subscriptions.hasOwnProperty(id)) {
                  return;
              }
              subscriptions[id] = (on({ id: id, change: 'any' }, function (data) {
                  SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });
              }))
          }
          
          function RegisterDetailEntityWatcher(id: string, pageItem: PageItem, type: string): void {
              if (subscriptions.hasOwnProperty(id)) {
                  return;
              }
              subscriptions[id] = (on({ id: id, change: 'any' }, function () {
                  SendToPanel(GenerateDetailPage(type, pageItem));
              }))
          }
          
          function GetUnitOfMeasurement(id: string): string {
              if (!existsObject(id))
                  return "";
          
              let obj = getObject(id);
              if (typeof obj.common.unit !== 'undefined') {
                  return obj.common.unit
              }
          
              if (typeof obj.common.alias !== 'undefined' && typeof obj.common.alias.id !== 'undefined') {
                  return GetUnitOfMeasurement(obj.common.alias.id);
              }
              return "";
          }
          
          function GenerateThermoPage(page: PageThermo): Payload[] {
              var id = page.items[0].id
              var out_msgs: Array<Payload> = [];
              out_msgs.push({ payload: "pageType~cardThermo" });
          
              // ioBroker
              if (existsObject(id)) {
                  let o = getObject(id)
                  let name = page.items[0].name !== undefined ? page.items[0].name : o.common.name.de
                  let currentTemp = 0;
                  if (existsState(id + ".ACTUAL"))
                      currentTemp = (Math.round(parseFloat(getState(id + ".ACTUAL").val) * 10)/10)*10;
          
                  let destTemp = 0;
                  if (existsState(id + ".SET")) {
                      destTemp = getState(id + ".SET").val.toFixed(2) * 10;
                      log(id + ".SET " + destTemp)
                  }
          
                  let status = ""
                  if (existsState(id + ".MODE"))
                      status = getState(id + ".MODE").val;
                  let minTemp = 50 //Min Temp 5°C
                  let maxTemp = 300 //Max Temp 30°C
                  let stepTemp = 5
          
                  //0-4 verwendet bei ungerader Anzahl Parametern
                  let bt0 = "~~~~"; //verwendet bei ungleichen Parametern
                  let bt1 = "~~~~"; //verwendet bei ungleichen Parametern
                  let bt2 = "~~~~"; //verwendet bei ungleichen Parametern
                  let bt3 = "~~~~"; //verwendet bei ungleichen Parametern
                  let bt4 = "~~~~"; //verwendet bei ungleichen Parametern
                  //5-8 verwendet bei gerader Anzahl Parametern
                  let bt5 = Icons.GetIcon("water-percent") + "~0~1~~";    
                  let bt6 = Icons.GetIcon("fire") + "~0~1~~";             
                  let bt7 = Icons.GetIcon("wifi") + "~0~1~~";             
                  let bt8 = Icons.GetIcon("battery-high") + "~0~1~~";     
          
                  if (existsState(id + ".HUMIDITY")){
                      console.log(parseInt(getState(id + ".HUMIDITY").val));
                      bt5 =  Icons.GetIcon("water-percent") + "~2016~1~bt8~";
                      if (parseInt(getState(id + ".HUMIDITY").val) < 40) {
                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                      } else if (parseInt(getState(id + ".HUMIDITY").val) < 30) {
                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 65) {
                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 75) {
                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                      }
                  }
          
                  if (existsState(id + ".MAINTAIN")){
                      if (getState(id + ".MAINTAIN").val >> .1) {
                          bt6 =  Icons.GetIcon("fire") + "~60897~1~bt8~";
                      } else {
                          bt6 =  Icons.GetIcon("fire") + "~33840~0~bt8~";
                      }
                  }
          
                  if (existsState(id + ".UNREACH")){
                      if (getState(id + ".UNREACH").val) {
                          bt7 =  Icons.GetIcon("wifi-off") + "~63488~1~bt8~";
                      } else {
                          bt7 =  Icons.GetIcon("wifi") + "~2016~1~bt8~";
                      }
                  }
          
                  if (existsState(id + ".LOWBAT")){
                      if (getState(id + ".LOWBAT").val) {
                          bt8 =  Icons.GetIcon("battery-low") + "~63488~1~bt8~";
                      } else {
                          bt8 =  Icons.GetIcon("battery-high") + "~2016~1~bt8~";
                      }
                  }
          
                  let icon_res = bt0 + bt1 + bt2 + bt3 + bt4 + bt5 + bt6 + bt7 + bt8;
          
                  out_msgs.push({ payload: "entityUpd~" + name + "~" + GetNavigationString(pageId) + "~" + id + "~" + currentTemp + "~" + destTemp + "~" + status + "~" + minTemp + "~" + maxTemp + "~" + stepTemp + "~" +icon_res})
              }
          
              return out_msgs
          }
          
          function GenerateMediaPage(page: PageMedia): Payload[] {
              var id = page.items[0].id
              var out_msgs: Array<Payload> = [];
              out_msgs.push({ payload: "pageType~cardMedia" });
          
              if (existsObject(id)) {
                  let o = getObject(id);
                  //let name = o.common.name.de;
                  let name = getState(spotifyInstanz + ".player.contextDescription").val;
                  let media_icon = Icons.GetIcon("spotify");
                  let title = getState(spotifyInstanz + ".player.trackName").val;
                  let author = getState(spotifyInstanz + ".player.artistName").val
                  let volume = getState(spotifyInstanz + ".player.volume").val;
                  var iconplaypause = Icons.GetIcon("pause"); //pause
                  if (getState(spotifyInstanz + ".player.isPlaying").val) {
                      iconplaypause = Icons.GetIcon("pause"); //pause
                  } else {
                      iconplaypause = Icons.GetIcon("play"); //play
                  }
                  let currentSpeaker = getState(spotifyInstanz + ".player.device.name").val
                  let speakerlist = getState(spotifyInstanz + ".devices.deviceListString").val.replace(/;/g,"?");
                  let onoffbutton = 1;
          
                  out_msgs.push({ payload: "entityUpd~" + 
                                            name + "~" +
                                            id + "~" +
                                            "~" +         //????
                                            media_icon + "~" +
                                            title + "~" +
                                            author + "~" +
                                            volume + "~" +
                                            iconplaypause + "~" +
                                            currentSpeaker + "~" +
                                            speakerlist + "~" +
                                            onoffbutton});
              }
          
              return out_msgs
          }
          
          function GenerateAlarmPage(page: PageAlarm): Payload[] {
              var id = page.items[0].id
              var out_msgs: Array<Payload> = [];
              out_msgs.push({ payload: "pageType~cardAlarm" });
          
              var armed: boolean = false;
              
              if (armed) {
                  var arm1 = "Deaktivieren";                  //arm1*~*
                  var arm1ActionName = "D1";                  //arm1ActionName*~*
                  var arm2 = "";                              //arm2*~*
                  var arm2ActionName = "";                    //arm2ActionName*~*
                  var arm3 = "";                              //arm3*~*
                  var arm3ActionName = "";                    //arm3ActionName*~*
                  var arm4 = "";                              //arm4*~*
                  var arm4ActionName = "";                    //arm4ActionName*~*
                  var icon = Icons.GetIcon("shield-home");    //icon*~*
                  var iconcolor = 63488;                      //iconcolor*~*
                  var numpadStatus = 1;                       //numpadStatus*~*
                  var flashing = 1;                           //flashing*
              } 
              else {
                  var arm1 = "Alarm 1";                       //arm1*~*
                  var arm1ActionName = "A1";                  //arm1ActionName*~*
                  var arm2 = "Alarm 2";                       //arm2*~*
                  var arm2ActionName = "A2";                  //arm2ActionName*~*
                  var arm3 = "Alarm 3";                       //arm3*~*
                  var arm3ActionName = "A3";                  //arm3ActionName*~*
                  var arm4 = "Alarm 4";                       //arm4*~*
                  var arm4ActionName = "A4";                  //arm4ActionName*~*
                  var icon = Icons.GetIcon("shield-off");     //icon*~*
                  var iconcolor = 2016;                       //iconcolor*~*
                  var numpadStatus = 1;                       //numpadStatus*~*
                  var flashing = 1;                           //flashing*        
              }
                  
              out_msgs.push({ payload:    "entityUpd~" +             //entityUpd~*
                                          id + "~" +                 //internalNameEntity*~* //navigation*~*
                                          "~" +                      //???
                                          arm1 + "~" +               //arm1*~*
                                          arm1ActionName + "~" +     //arm1ActionName*~*
                                          arm2 + "~" +               //arm2*~*
                                          arm2ActionName + "~" +     //arm2ActionName*~*
                                          arm3 + "~" +               //arm3*~*
                                          arm3ActionName + "~" +     //arm3ActionName*~*
                                          arm4 + "~" +               //arm4*~*
                                          arm4ActionName + "~" +     //arm4ActionName*~*
                                          icon + "~" +               //icon*~* 39=Disarmed 35=Shield_Home, 40
                                          iconcolor + "~" +          //iconcolor*~* 2016=green  63488=red
                                          numpadStatus + "~" +       //numpadStatus*~*
                                          flashing});                //flashing*
          
              return out_msgs
          }
          
          function setIfExists(id: string, value: any, type: string | null = null): boolean {
              if (type === null) {
                  if (existsState(id)) {
                      setState(id, value);
                      return true;
                  }
              }
              else {
                  let obj = getObject(id);
                  if (existsState(id) && obj.common.type !== undefined && obj.common.type === type) {
                      setState(id, value);
                      return true;
                  }
              }
              return false;
          }
          
          function toggleState(id: string): boolean {
              let obj = getObject(id);
              if (existsState(id) && obj.common.type !== undefined && obj.common.type === "boolean") {
                  setState(id, !getState(id).val);
                  return true;
              }
              return false;
          }
          
          function HandleButtonEvent(words): void {
              let id = words[2]
              let buttonAction = words[3];
          
              switch (buttonAction) {
                  case "bNext":
                      var pageNum = ((pageId + 1) % config.pages.length);
                      pageId = Math.abs(pageNum);
                      UnsubscribeWatcher();
                      GeneratePage(config.pages[pageId]);
                      break;
                  case "bPrev":
                      var pageNum = ((pageId - 1) % config.pages.length);
                      pageId = Math.abs(pageNum);
                      UnsubscribeWatcher();
                      GeneratePage(config.pages[pageId]);
                      break;
                  case "bExit":
                      if (config.screenSaverDoubleClick) {
                          if (words[4] == 2)
                              GeneratePage(config.pages[pageId]);
                      }
                      else
                          GeneratePage(config.pages[pageId]);
                      break;
                  case "OnOff":
                      if (existsObject(id)) {
                          var action = false
                          if (words[4] == "1")
                              action = true
                          let o = getObject(id)
                          switch (o.common.role) {
                              case "light":
                                  setIfExists(id + ".SET", action);
                                  break;
                              case "dimmer":
                                  setIfExists(id + ".ON_SET", action) ? true : setIfExists(id + ".ON_ACTUAL", action);
                          }
                      }
                      break;
                  case "up":
                      setIfExists(id + ".OPEN", true)
                      break;
                  case "stop":
                      setIfExists(id + ".STOP", true)
                      break;
                  case "down":
                      setIfExists(id + ".CLOSE", true)
                      break;
                  case "button":
                      toggleState(id + ".SET") ? true : toggleState(id + ".ON_SET")
                      break;
                  case "positionSlider":
                  case "brightnessSlider":
                      setIfExists(id + ".SET", parseInt(words[4])) ? true : setIfExists(id + ".ACTUAL", parseInt(words[4]));
                      break;
                  case "tempUpd":
                      setIfExists(id + ".SET", parseInt(words[4]) / 10)
                      break;
                  case "media-back":
                      setIfExists(spotifyInstanz + ".player.skipMinus", true)
                      break;
                  case "media-pause":
                      if (getState(spotifyInstanz + ".player.isPlaying").val === true) {
                          setIfExists(spotifyInstanz + ".player.pause", true)
                      } else {
                          setIfExists(spotifyInstanz + ".player.play", true)
                      }
                      break;
                  case "media-next":
                      setIfExists(spotifyInstanz + ".player.skipPlus", true)
                      break;
                  case "volumeSlider":
                      setIfExists(spotifyInstanz + ".player.volume", parseInt(words[4]))
                      break;
                  case "speaker-sel":
                      console.log("auf mediaCard - speaker-sel - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                      break;
                  case "A1": //Alarm-Page Alarm 1 aktivieren
                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                      break;
                  case "A2": //Alarm-Page Alarm 2 aktivieren
                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                      break;  
                  case "A3": //Alarm-Page Alarm 3 aktivieren
                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                      break;  
                  case "A4": //Alarm-Page Alarm 4 aktivieren
                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                      break;         
                  case "D1": //Alarm-Page Alarm Deaktivieren
                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                      break;  
                  default:
                      break;
              }
          }
          
          function GetNavigationString(pageId: number): string {
              switch (pageId) {
                  case 0:
                      return "0|1";
                  case config.pages.length - 1:
                      return "1|0";
                  case -1:
                      return "0|0";
                  default:
                      return "1|1";
              }
          }
          
          function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
          
              var out_msgs: Array<Payload> = [];
              let id = pageItem.id
              if (existsObject(id)) {
                  var o = getObject(id)
                  var val: (boolean | number) = 0;
                  let icon = Icons.GetIcon("lightbulb");
                  var iconColor = rgb_dec565(config.defaultColor);
                  if (type == "popupLight") {
                      let switchVal = "0"
                      if (o.common.role == "light") {
                          if (existsState(id + ".GET")) {
                              val = getState(id + ".GET").val;
                              RegisterDetailEntityWatcher(id + ".GET", pageItem, type);
                          }
                          else if (existsState(id + ".SET")) {
                              val = getState(id + ".SET").val;
                              RegisterDetailEntityWatcher(id + ".SET", pageItem, type);
                          }
          
                          if (val) {
                              switchVal = "1";
                              iconColor = GetIconColor(pageItem, true, false);
                          }
          
                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + + iconColor + "~" + switchVal + ",disable,disable,disable" })
                      }
          
                      if (o.common.role == "dimmer") {
                          if (existsState(id + ".ON_ACTUAL")) {
                              val = getState(id + ".ON_ACTUAL").val;
                              RegisterDetailEntityWatcher(id + ".ON_ACTUAL", pageItem, type);
                          }
          
                          else if (existsState(id + ".ON_SET")) {
                              val = getState(id + ".ON_SET").val;
                              RegisterDetailEntityWatcher(id + ".ON_SET", pageItem, type);
                          }
          
                          if (val === true) {
                              var iconColor = GetIconColor(pageItem, val, false);
                              switchVal = "1"
                          }
                          let brightness = 0;
                          if (existsState(id + ".ACTUAL")) {
                              brightness = Math.trunc(scale(getState(id + ".ACTUAL").val, 0, 100, 0, 100))
                              iconColor = GetIconColor(pageItem, brightness, false);
                              RegisterDetailEntityWatcher(id + ".ACTUAL", pageItem, type);
                          }
                          let colorTemp = "disable"
                          let colorMode = "disable"
                          //let attr_support_color = attr.supported_color_modes
                          //if (attr_support_color.includes("color_temp"))
                          // colortemp = Math.trunc(scale(attr.color_temp, attr.min_mireds, attr.max_mireds, 0, 100))
          
                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + iconColor + "~" + switchVal + "~" + brightness + "~" + colorTemp + "~" + colorMode })
                      }
          
                  }
          
                  if (type == "popupShutter") {
                      if (existsState(id + ".ACTUAL"))
                          val = getState(id + ".ACTUAL").val;
                      else if (existsState(id + ".SET"))
                          val = getState(id + ".SET").val;
                      out_msgs.push({ payload: "entityUpdateDetail," + val })
                  }
              }
              return out_msgs
          }
          
          function scale(number: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
              return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
          }
          
          function UnsubscribeWatcher(): void {
              for (const [key, value] of Object.entries(subscriptions)) {
                  unsubscribe(value);
                  delete subscriptions[key]
              }
          }
          
          function HandleScreensaver(): void {
              SendToPanel({ payload: "pageType~screensaver"})
              UnsubscribeWatcher();
              HandleScreensaverUpdate();
          }
          
          function HandleScreensaverUpdate(): void {
              if (screensaverEnabled && config.weatherEntity != null && existsObject(config.weatherEntity)) {
                  var icon = getState(config.weatherEntity + ".ICON").val;
           
                  let temperature: string =
                      existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
                          existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
           
                  let payloadString =
                      "weatherUpdate~" + Icons.GetIcon(GetAccuWeatherIcon(parseInt(icon))) + "~"
                      + temperature + " " + config.temperatureUnit + "~"
           
          /*-------------------------------------------------------------------------------------------------------------------------------------*/
                  if (weatherForecast == true) {
                      // Accu-Weather Forecast Tag 2 - Tag 5 -- Wenn weatherForecast = true
                      for (let i = 2; i < 6; i++) {
                          let TempMax = getState("accuweather.0.Summary.TempMax_d" + i).val;
                          let DayOfWeek = getState("accuweather.0.Summary.DayOfWeek_d" + i).val;
                          let WeatherIcon = GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                          payloadString += DayOfWeek + "~" + Icons.GetIcon(WeatherIcon) + "~" + TempMax + " °C~";
                      }
                  } 
                  else {
                      //In Config definierte Zustände wenn weatherForecast = false
                      payloadString += GetScreenSaverEntityString(config.firstScreensaverEntity);
                      payloadString += GetScreenSaverEntityString(config.secondScreensaverEntity);
                      payloadString += GetScreenSaverEntityString(config.thirdScreensaverEntity);
                      payloadString += GetScreenSaverEntityString(config.fourthScreensaverEntity);
                  }
          /*-------------------------------------------------------------------------------------------------------------------------------------*/
           
                  SendToPanel(<Payload>{ payload: payloadString });
              }
          }
          
          function GetScreenSaverEntityString(configElement: ScreenSaverElement | null): string {
              if (configElement != null && configElement.ScreensaverEntity != null && existsState(configElement.ScreensaverEntity)) {
                  let u1 = getState(configElement.ScreensaverEntity).val;
                  return configElement.ScreensaverEntityText + "~" + Icons.GetIcon(configElement.ScreensaverEntityIcon) + "~" + u1 + " " + configElement.ScreensaverEntityUnitText + "~";
              }
              else {
                  return "~~~";
              }
          }
          
          function GetAccuWeatherIcon(icon: number): string {
              switch (icon) {
                  case 24:        // Ice        
                  case 30:        // Hot    
                  case 31:        // Cold    
                      return "window-open";  // exceptional
          
                  case 7:         // Cloudy
                  case 8:         // Dreary (Overcast)        
                  case 38:        // Mostly Cloudy
                      return "weather-cloudy";  // cloudy
          
                  case 11:        // fog
                      return "weather-fog";  // fog
          
                  case 25:        // Sleet    
                      return "weather-hail";  // Hail
          
                  case 15:        // T-Storms    
                      return "weather-lightning";  // lightning
          
                  case 16:        // Mostly Cloudy w/ T-Storms
                  case 17:        // Partly Sunny w/ T-Storms
                  case 41:        // Partly Cloudy w/ T-Storms       
                  case 42:        // Mostly Cloudy w/ T-Storms
                      return "weather-lightning-rainy";  // lightning-rainy
          
                  case 33:        // Clear
                  case 34:        // Mostly Clear
                  case 37:        // Hazy Moonlight
                      return "weather-night";
          
                  case 3:         // Partly Sunny
                  case 4:         // Intermittent Clouds
                  case 6:         // Mostly Cloudy
                  case 35: 	    // Partly Cloudy
                  case 36: 	    // Intermittent Clouds
                      return "weather-partly-cloudy";  // partlycloudy 
          
                  case 18:        // pouring
                      return "weather-pouring";  // pouring
          
                  case 12:        // Showers
                  case 13:        // Mostly Cloudy w/ Showers
                  case 14:        // Partly Sunny w/ Showers      
                  case 26:        // Freezing Rain
                  case 39:        // Partly Cloudy w/ Showers
                  case 40:        // Mostly Cloudy w/ Showers
                      return "weather-rainy";  // rainy
          
                  case 19:        // Flurries
                  case 20:        // Mostly Cloudy w/ Flurries
                  case 21:        // Partly Sunny w/ Flurries
                  case 22:        // Snow
                  case 23:        // Mostly Cloudy w/ Snow
                  case 43:        // Mostly Cloudy w/ Flurries
                  case 44:        // Mostly Cloudy w/ Snow
                      return "weather-snowy";  // snowy
          
                  case 29:        // Rain and Snow
                      return "weather-snowy-rainy";  // snowy-rainy
          
                  case 1:         // Sunny
                  case 2: 	    // Mostly Sunny
                  case 5:         // Hazy Sunshine
                      return "weather-sunny";  // sunny
          
                  case 32:        // windy
                      return "weather-windy";  // windy
          
                  default:
                      return "alert-circle-outline";
              }
          }
          
          function GetBlendedColor(percentage: number): RGB {
              if (percentage < 50)
                  return Interpolate(config.defaultOffColor, config.defaultOnColor, percentage / 50.0);
              return Interpolate(Red, White, (percentage - 50) / 50.0);
          }
          
          function Interpolate(color1: RGB, color2: RGB, fraction: number): RGB {
              var r: number = InterpolateNum(color1.red, color2.red, fraction);
              var g: number = InterpolateNum(color1.green, color2.green, fraction);
              var b: number = InterpolateNum(color1.blue, color2.blue, fraction);
              return <RGB>{ red: Math.round(r), green: Math.round(g), blue: Math.round(b) };
          }
          
          function InterpolateNum(d1: number, d2: number, fraction: number): number {
              return d1 + (d2 - d1) * fraction;
          }
          
          function rgb_dec565(rgb: RGB): number {
              return ((Math.floor(rgb.red / 255 * 31) << 11) | (Math.floor(rgb.green / 255 * 63) << 5) | (Math.floor(rgb.blue / 255 * 31)));
          }
          
          type RGB = {
              red: number,
              green: number,
              blue: number
          };
          
          type Payload = {
              payload: string;
          };
          
          type Page = {
              type: string,
              heading: string,
              items: PageItem[],
              useColor: boolean
          };
          
          interface PageEntities extends Page {
              type: "cardEntities",
              items: PageItem[],
          
          };
          interface PageGrid extends Page {
              type: "cardGrid",
              items: PageItem[],
          };
          
          interface PageThermo extends Page {
              type: "cardThermo",
              items: PageItem[],
          };
          
          interface PageMedia extends Page {
              type: "cardMedia",
              items: PageItem[],
          };
          
          interface PageAlarm extends Page {
              type: "cardAlarm",
              items: PageItem[],
          };
          
          type PageItem = {
              id: string,
              icon: (string | undefined),
              onColor: (RGB | undefined),
              offColor: (RGB | undefined),
              useColor: (boolean | undefined),
              interpolateColor: (boolean | undefined),
              minValue: (number | undefined),
              maxValue: (number | undefined),
              name: (string | undefined)
          }
          
          type Config = {
              panelRecvTopic: string,
              panelSendTopic: string,
              timeoutScreensaver: number,
              dimmode: number,
              //brightnessScreensaver:
              locale: string,
              timeFormat: string,
              dateFormat: string,
              weatherEntity: string | null,
              screenSaverDoubleClick: boolean,
              temperatureUnit: string,
              firstScreensaverEntity: ScreenSaverElement | null,
              secondScreensaverEntity: ScreenSaverElement | null,
              thirdScreensaverEntity: ScreenSaverElement | null,
              fourthScreensaverEntity: ScreenSaverElement | null,
              defaultColor: RGB,
              defaultOnColor: RGB,
              defaultOffColor: RGB,
              pages: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid)[],
              button1Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
              button2Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
          };
          
          type ScreenSaverElement = {
              ScreensaverEntity: string | null,
              ScreensaverEntityIcon: string | null,
              ScreensaverEntityText: string | null,
              ScreensaverEntityUnitText: string | null,
          }
          
          /*
          RED 	63488	Red
          BLUE	31	    Blue
          GRAY	33840	Gray
          BLACK	0	    Black
          WHITE	65535	White
          GREEN	2016	Green
          BROWN	48192	Brown
          YELLOW	65504	Yellow
          Background 6371 
          */
          

          Spotify-Premium mit Angabe Instanz --> z.B. (spotify-premium.0)
          02f07afa-ab8a-4c2a-87b5-252a2036417b-image.png

          cardThermo mit ALIAS Thermostat inkl. LOWBAT/HUMIDITY/UNREACH/MAINTAIN (missbaraucht für VALVE)
          1c830f2a-11ad-44a0-a119-093c45c19a06-image.png

          cardAlarm Alarm stellen
          6e343adf-fd77-4aa5-a586-47581c332175-image.png

          cardAlarm Deaktiveren
          af041f07-c5a2-4e13-a467-211df2ada410-image.png

          P.S.: was hängt eigentlich hinter deinem ALIAS Radio.NJoy/Delta_Radio/NDR2

          britzelpufB Offline
          britzelpufB Offline
          britzelpuf
          schrieb am zuletzt editiert von
          #206

          @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
          Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

          Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

          Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

          Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

          ArmilarA R 5 Antworten Letzte Antwort
          0
          • britzelpufB britzelpuf

            @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
            Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

            Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

            Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

            Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

            ArmilarA Offline
            ArmilarA Offline
            Armilar
            Most Active Forum Testing
            schrieb am zuletzt editiert von Armilar
            #207

            @britzelpuf sagte in Sonoff NSPanel:

            Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

            Moin Britzelpuf,

            Ich versuche gleich mal ein MEDIA Alias. Dürfte mit den paar Datenpunkten eigentlich (hoffe doch) kein Problem mehr sein.
            Use Case: Die wird eher für das Gartenhaus (Die eigene friesische Kneipe natürlich). Ist über Kamera und Bewegungssensor gesichert und dann der Alarm, gekoppelt an die internen Alexas und eine WLED Stripe, deaktiviert werden. Also drin=Alarm aus und nicht mehr drin Alarm=scharfschalten.
            Ich kenne den "Bug" mit dem Script aber noch nicht. Schaltet immer brav in den Screensaver-Mode und hat sich echt noch "nie" weggehängt. Läuft wie ne "1"

            VG

            Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
            https://github.com/joBr99/nspanel-lovelace-ui/wiki

            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

            1 Antwort Letzte Antwort
            0
            • britzelpufB britzelpuf

              @armilar Moin moin, dass Problem hatte ich auch einmal, bei mir hat es geholfen, im MQTT Adapter den Haken "Nur bei Änderungen" publizieren herauszunehmen.

              Zu deinen anderen Anregungen:

              1. das mit den Float Werten habe ich übernommen, dass ist mir gar nicht aufgefallen, dass die Temperatur da abweicht
                Github Commit
              2. finde ich gut mit der Idee, da eine Option zu verwenden, wobei der Config Parameter ja eigentlich gar nicht gebraucht wird. Wenn first,second .... gesetzt ist, dann nimm den, ansonsten die Daten aus dem Forecast
              3. Meine Thermostate sind ein wenig doof oder ich habe da die Aliase noch nicht richtig konfiguriert

              Das Skript unterstützt jetzt die neue Firmware Version von jobr99, allerdings nicht mehr die Alte, da sich die Commands etwas geändert haben, vor allem aber die Trennzeichen.
              JoBr99 hat ein weiteres TypeSkript automatisch erzeugt, was im gleichen Github Verzeichnis liegt. Dieses muss jetzt im Javascript Adapter unter Global liegen. Darüber werden jetzt die Icons aufgelöst und somit sind alle Icons der Schriftart verfügbar.
              Github.

              Falls der Pullrequest noch nicht durch ist, gerade schläft Jobr99 anscheinend mal ;-)
              Github Fork

              Schriftart (Ich hoffe, dass ist der richtige Link)

              Die MediaCard wollte ich implementieren, wenn mein Media Alias funktioniert. Bei mir ist das buggy und ich kann die nicht anlegen. Wie hast du das Alias hinbekommen? Hast du die States dort alle selber angelegt? Bei mir wird es immer nur ein Info Device.

              Gruß

              Britzelpuf

              J Offline
              J Offline
              joBr99
              schrieb am zuletzt editiert von joBr99
              #208

              @britzelpuf
              Link ist fast richtig, aktuell stimmt das, würde aber den hier nehmen, der passt auch noch, wenn ich die MDI font geupdatet hab. (vermutlich dann in 2.8.0)

              https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html

              Mit dem nächsten Release kommt ein optimierter Berry Treiber, mit dem das flashing deutlich schneller geht (full flash von 15 minuten auf 5 Minuten und update flash von 4 minuten auf 22 sekunden)

              Zum updaten könnt ihr das hier auf der Tasmota Konsole eingeben: (auch jetzt schon, vor release)

              Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1

              ArmilarA MikewolfM 2 Antworten Letzte Antwort
              0
              • britzelpufB britzelpuf

                @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
                Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

                Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

                Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

                Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

                ArmilarA Offline
                ArmilarA Offline
                Armilar
                Most Active Forum Testing
                schrieb am zuletzt editiert von
                #209

                @britzelpuf sagte in Sonoff NSPanel:

                @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
                Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

                Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

                Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

                Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

                Ich kann mir jetzt in etwa vorstellen was du mit zu unfähig für "Media Aliase" meinst. Ich reihe mich ebenso ein. Ist faktisch unmöglich mit validen Daten in das Script zu gehen. Macht irgendwie keinen Spaß... ;-)

                Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                https://github.com/joBr99/nspanel-lovelace-ui/wiki

                Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                1 Antwort Letzte Antwort
                0
                • J joBr99

                  @britzelpuf
                  Link ist fast richtig, aktuell stimmt das, würde aber den hier nehmen, der passt auch noch, wenn ich die MDI font geupdatet hab. (vermutlich dann in 2.8.0)

                  https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html

                  Mit dem nächsten Release kommt ein optimierter Berry Treiber, mit dem das flashing deutlich schneller geht (full flash von 15 minuten auf 5 Minuten und update flash von 4 minuten auf 22 sekunden)

                  Zum updaten könnt ihr das hier auf der Tasmota Konsole eingeben: (auch jetzt schon, vor release)

                  Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1

                  ArmilarA Offline
                  ArmilarA Offline
                  Armilar
                  Most Active Forum Testing
                  schrieb am zuletzt editiert von
                  #210

                  @jobr99 sagte in Sonoff NSPanel:

                  @britzelpuf
                  Link ist fast richtig, aktuell stimmt das, würde aber den hier nehmen, der passt auch noch, wenn ich die MDI font geupdatet hab. (vermutlich dann in 2.8.0)

                  https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html

                  Mit dem nächsten Release kommt ein optimierter Berry Treiber, mit dem das flashing deutlich schneller geht (full flash von 15 minuten auf 5 Minuten und update flash von 4 minuten auf 22 sekunden)

                  Zum updaten könnt ihr das hier auf der Tasmota Konsole eingeben: (auch jetzt schon, vor release)

                  Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1

                  Coole Idee, habe ich vorhin schon auf Github gesehen :+1:

                  Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                  https://github.com/joBr99/nspanel-lovelace-ui/wiki

                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                  1 Antwort Letzte Antwort
                  0
                  • J joBr99

                    @britzelpuf
                    Link ist fast richtig, aktuell stimmt das, würde aber den hier nehmen, der passt auch noch, wenn ich die MDI font geupdatet hab. (vermutlich dann in 2.8.0)

                    https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html

                    Mit dem nächsten Release kommt ein optimierter Berry Treiber, mit dem das flashing deutlich schneller geht (full flash von 15 minuten auf 5 Minuten und update flash von 4 minuten auf 22 sekunden)

                    Zum updaten könnt ihr das hier auf der Tasmota Konsole eingeben: (auch jetzt schon, vor release)

                    Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1

                    MikewolfM Offline
                    MikewolfM Offline
                    Mikewolf
                    schrieb am zuletzt editiert von Mikewolf
                    #211

                    Hallo wenn ich ts script starte kommt

                    Javascript.0 (1002) script.js.HPCLTEST.Skript_3NS: TypeScript compilation failed: var Icons = new IconsSelector(); ^ ERROR: Cannot find name 'IconsSelector'.
                    
                    

                    Gibts eine step by step anleitung ?? probiere seit über einer Woche das zum laufen zu bekommen,
                    und dieser Thread ist etwas unübersichtlich geworden ..Speziell für nen neuanfang !

                    Mit freundlichen Grüßen
                    mikewolf

                    Homematic (ca450 Rf komponenten), FS20,Alexas,Sonoff,ESP,Arduino,Lightly,Milight,NEEO,Harmony,Synology,HP-Gen8

                    RF-link,Dreamboxen,Raspi,Cubie,Odroid,Fritz,Xiaomi-Vaccum,

                    R ArmilarA 2 Antworten Letzte Antwort
                    0
                    • MikewolfM Mikewolf

                      Hallo wenn ich ts script starte kommt

                      Javascript.0 (1002) script.js.HPCLTEST.Skript_3NS: TypeScript compilation failed: var Icons = new IconsSelector(); ^ ERROR: Cannot find name 'IconsSelector'.
                      
                      

                      Gibts eine step by step anleitung ?? probiere seit über einer Woche das zum laufen zu bekommen,
                      und dieser Thread ist etwas unübersichtlich geworden ..Speziell für nen neuanfang !

                      Mit freundlichen Grüßen
                      mikewolf

                      R Offline
                      R Offline
                      ronny130286
                      schrieb am zuletzt editiert von
                      #212

                      @mikewolf
                      Du musst vorher ein neues Script unter Global erzeugen, das Script findest du hier:

                      https://github.com/britzelpuf/nspanel-lovelace-ui/blob/main/ioBroker/icon_mapping.ts

                      79a811d2-09b8-47a2-96e2-b6bb2bed8487-image.png

                      Dann findet er auch den IconsSelector

                      1 Antwort Letzte Antwort
                      0
                      • MikewolfM Mikewolf

                        Hallo wenn ich ts script starte kommt

                        Javascript.0 (1002) script.js.HPCLTEST.Skript_3NS: TypeScript compilation failed: var Icons = new IconsSelector(); ^ ERROR: Cannot find name 'IconsSelector'.
                        
                        

                        Gibts eine step by step anleitung ?? probiere seit über einer Woche das zum laufen zu bekommen,
                        und dieser Thread ist etwas unübersichtlich geworden ..Speziell für nen neuanfang !

                        Mit freundlichen Grüßen
                        mikewolf

                        ArmilarA Offline
                        ArmilarA Offline
                        Armilar
                        Most Active Forum Testing
                        schrieb am zuletzt editiert von Armilar
                        #213

                        @mikewolf sagte in Sonoff NSPanel:

                        Hallo wenn ich ts script starte kommt

                        Javascript.0 (1002) script.js.HPCLTEST.Skript_3NS: TypeScript compilation failed: var Icons = new IconsSelector(); ^ ERROR: Cannot find name 'IconsSelector'.
                        
                        

                        Gibts eine step by step anleitung ?? probiere seit über einer Woche das zum laufen zu bekommen,
                        und dieser Thread ist etwas unübersichtlich geworden ..Speziell für nen neuanfang !

                        Mit freundlichen Grüßen
                        mikewolf

                        Ich versuche es mal:

                        • Tasmota flashen (analog Anleitung @haus-automatisierung) Die ist schon echt super erklärt! - Vielleicht macht er ja hierzu auch ein Video ;-)
                        • autoexec.be in Tasmota Konsole/Verwalte Dateisystem anlegen
                        • Nachfolgenden Befehl in Tasmota-Konsole ausführen
                        Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
                        
                        • NSPanel TFT Flashen mit (aktuelle Version 2.0.7):
                        FlashNextion http://nspanel.pky.eu/lui-release.tft
                        

                        Das NSPanel kurz rebooten - kann nicht schaden - Danach wartet es auf Infos von ioBroker

                        • TypeScript unter ioBroker/Skripte anlegen analog Britzelpuf auf Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker Inhalt aus der NsPanelTs.ts übernehmen oder mein Script verwenden:

                        (@britzelpuf hat eine Anpassung auf das letzte Release 1.9.1 auf 2.0.7 von @joBr99 gemacht. Daher dringend das neueste TS-Script verwenden, sonst läuft es nicht)

                        var Icons = new IconsSelector();
                        
                        const Months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
                        const Days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
                        const Red: RGB = { red: 255, green: 0, blue: 0 };
                        const White: RGB = { red: 255, green: 255, blue: 255 };
                        const Off: RGB = { red: 68, green: 115, blue: 158 };
                        const On: RGB = { red: 253, green: 216, blue: 53 };
                        const BatteryFull: RGB = { red: 96, green: 176, blue: 62 }
                        const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 }
                        
                        //----Möglichkeit, im Screensaver zwischen Accu-Weather Forcast oder selbstdefinierten Werten zu wählen---------------------------------
                        var weatherForecast = true; //true = WheatherForecast 5 Days --- false = Config --> firstScreensaverEntity - fourthScreensaverEntity ...
                        //Spotify Instanz
                        var spotifyInstanz = "spotify-premium.0"
                        
                        var Buero_Seite_1: PageEntities =
                        {
                            "type": "cardEntities",
                            "heading": "Büro",
                            "useColor": true,
                            "items": [
                                <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe"},
                                <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung"},
                                <PageItem>{ id: "alias.0.NSPanel_1.MyTestbutton", icon: "lightbulb", offColor: Off, onColor: On, name: "Taster"},
                                <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power" }
                            ]
                        };
                        
                        var Buero_Seite_2: PageGrid =
                        {
                            "type": "cardGrid",
                            "heading": "Büro",
                            "useColor": true,
                            "items": [
                                <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", name: "Schreibtisch"},
                                <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", name: "Deckenlampe"},
                                <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power"},
                                <PageItem>{ id: "alias.0.NSPanel_1.Radio.TuneIn", icon: "play"}
                            ]
                        };
                        
                        var Spotify: PageMedia = 
                        {
                            "type": "cardMedia",
                            "heading": "Spotify",
                            "useColor": false,
                            "items": [<PageItem>{ id: "alias.0.NSPanel_1.Spotify" }]
                        };
                        
                        var Buero_Themostat: PageThermo = 
                        {
                            "type": "cardThermo",
                            "heading": "Thermostat",
                            "useColor": true,
                            "items": [<PageItem>{ id: "alias.0.NSPanel_1.Thermostat_Büro" }]
                        };
                        
                        var Buero_Alarm: PageAlarm = 
                        {
                            "type": "cardAlarm",
                            "heading": "Alarm",
                            "useColor": true,
                            "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alarm" }]
                        };
                        
                        var button1Page: PageGrid =
                        {
                            "type": "cardGrid",
                            "heading": "Radio",
                            "useColor": true,
                            "items": [
                                <PageItem>{ id: "alias.0.Radio.NJoy" },
                                <PageItem>{ id: "alias.0.Radio.Delta_Radio" },
                                <PageItem>{ id: "alias.0.Radio.NDR2" },
                            ]
                        };
                        
                        var button2Page: PageEntities =
                        {
                            "type": "cardEntities",
                            "heading": "Knopf2",
                            "useColor": true,
                            "items": [
                                <PageItem>{ id: "alias.0.Schlafen" },
                                <PageItem>{ id: "alias.0.Stern" }
                            ]
                        };
                        
                        export const config: Config = {
                            panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //anpassen
                            panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //anpassen
                            firstScreensaverEntity: { ScreensaverEntity: "hmip.0.devices.3014F711A000185BE9922BCF.channels.1.humidity", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
                            secondScreensaverEntity: { ScreensaverEntity: "accuweather.0.Daily.Day1.Day.PrecipitationProbability", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" },
                            thirdScreensaverEntity: { ScreensaverEntity: "0_userdata.0.Wetter.Windstaerke_homaticIP", ScreensaverEntityIcon: "weather-windy", ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: "bft" },
                            fourthScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.UVIndex", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "UV", ScreensaverEntityUnitText: "" },
                            timeoutScreensaver: 15,
                            dimmode: 8,
                            screenSaverDoubleClick: false,
                            locale: "de_DE",
                            timeFormat: "%H:%M",
                            dateFormat: "%A, %d. %B %Y",
                            weatherEntity: "alias.0.Wetter.Wetter",
                            defaultOffColor: Off,
                            defaultOnColor: On,
                            defaultColor: Off,
                            temperatureUnit: "°C",
                            pages: [Buero_Seite_1, 
                                    Buero_Seite_2, 
                                    Spotify,
                                    Buero_Themostat,
                                    Buero_Alarm
                            ],
                            button1Page: button1Page,
                            button2Page: button2Page
                        };
                        
                        
                        // _________________________________ Ab hier keine Konfiguration mehr _____________________________________
                        
                        var subscriptions: any = {};
                        var screensaverEnabled : boolean = false;
                        var pageId = 0;
                        
                        schedule("* * * * *", function () {
                            SendTime();
                        });
                        schedule("0 * * * *", function () {
                            SendDate();
                        });
                        
                        
                        // Only monitor the extra nodes if present
                        var updateArray: string[] = [];
                        if (config.firstScreensaverEntity !== null && config.firstScreensaverEntity.ScreensaverEntity != null && existsState(config.firstScreensaverEntity.ScreensaverEntity)) {
                            updateArray.push(config.firstScreensaverEntity.ScreensaverEntity)
                        }
                        if (config.secondScreensaverEntity !== null && config.secondScreensaverEntity.ScreensaverEntity != null && existsState(config.secondScreensaverEntity.ScreensaverEntity)) {
                            updateArray.push(config.secondScreensaverEntity.ScreensaverEntity)
                        }
                        if (config.thirdScreensaverEntity !== null && config.thirdScreensaverEntity.ScreensaverEntity != null && existsState(config.thirdScreensaverEntity.ScreensaverEntity)) {
                            updateArray.push(config.thirdScreensaverEntity.ScreensaverEntity)
                        }
                        if (config.fourthScreensaverEntity !== null && config.fourthScreensaverEntity.ScreensaverEntity != null && existsState(config.fourthScreensaverEntity.ScreensaverEntity)) {
                            updateArray.push(config.fourthScreensaverEntity.ScreensaverEntity)
                        }
                        
                        if (updateArray.length > 0) {
                            on(updateArray, function () {
                                HandleScreensaverUpdate();
                            })
                        }
                        on({ id: config.panelRecvTopic }, function (obj) {
                            if (obj.state.val.startsWith('\{"CustomRecv":')) {
                                var json = JSON.parse(obj.state.val);
                        
                                var split = json.CustomRecv.split(",");
                                HandleMessage(split[0], split[1], parseInt(split[2]), split);
                            }
                        });
                        
                        function SendToPanel(val: Payload | Payload[]): void {
                            if (Array.isArray(val)) {
                                val.forEach(function (id, i) {
                                    setState(config.panelSendTopic, id.payload);
                                });
                            }
                            else
                                setState(config.panelSendTopic, val.payload);
                        }
                        
                        function HandleMessage(typ: string, method: string, page: number, words: Array<string>): void {
                            if (typ == "event") {
                                switch (method) {
                                    case "startup":
                                        screensaverEnabled = false;
                                        UnsubscribeWatcher();
                                        HandleStartupProcess();
                                        pageId = 0;
                                        GeneratePage(config.pages[0]);
                                        break;
                                    case "sleepReached":
                                        screensaverEnabled = true;
                                        HandleScreensaver();
                                        break;
                                    case "pageOpenDetail":
                                        screensaverEnabled = false;
                                        UnsubscribeWatcher();
                                        let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
                                        if (pageItem !== undefined)
                                            SendToPanel(GenerateDetailPage(words[2], pageItem));
                                    case "buttonPress2":
                                        screensaverEnabled = false;
                                        HandleButtonEvent(words);
                                        break;
                                    case "button1":
                                    case "button2":
                                        screensaverEnabled = false;
                                        HandleHardwareButton(method);
                                    default:
                                        break;
                                }
                            }
                        }
                        
                        function GeneratePage(page: Page): void {
                            switch (page.type) {
                                case "cardEntities":
                                    SendToPanel(GenerateEntitiesPage(<PageEntities>page));
                                    break;
                                case "cardThermo":
                                    SendToPanel(GenerateThermoPage(<PageThermo>page));
                                    break;
                                case "cardGrid":
                                    SendToPanel(GenerateGridPage(<PageGrid>page));
                                    break;
                                case "cardMedia":
                                    SendToPanel(GenerateMediaPage(<PageMedia>page));
                                    break;
                                case "cardAlarm":
                                    SendToPanel(GenerateAlarmPage(<PageAlarm>page));
                                    break;
                            }
                        }
                        
                        function HandleHardwareButton(method: string): void {
                            let page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid);
                            if (config.button1Page !== null && method == "button1") {
                                page = config.button1Page;
                            }
                            else if (config.button2Page !== null && method == "button2") {
                                page = config.button2Page;
                            }
                            else {
                                return;
                            }
                        
                            // Set pageId to -1, because of the navigation arrows
                            let tempPageId = pageId;
                            pageId = -1;
                            GeneratePage(page);
                            pageId = tempPageId;
                        }
                        
                        function HandleStartupProcess(): void {
                            SendDate();
                            SendTime();
                            SendToPanel({ payload: "timeout~" + config.timeoutScreensaver });
                            SendToPanel({ payload: "dimmode~" + config.dimmode });
                        }
                        
                        function SendDate(): void {
                            var d = new Date();
                            var day = Days[d.getDay()];
                            var date = d.getDate();
                            var month = Months[d.getMonth()];
                            var year = d.getFullYear();
                            var _sendDate = "date~" + day + " " + date + " " + month + " " + year;
                            SendToPanel(<Payload>{ payload: _sendDate });
                        }
                        
                        function SendTime(): void {
                            var d = new Date();
                            var hr = d.getHours().toString();
                            var min = d.getMinutes().toString();
                        
                            if (d.getHours() < 10) {
                                hr = "0" + d.getHours().toString();
                            }
                            if (d.getMinutes() < 10) {
                                min = "0" + d.getMinutes().toString();
                            }
                            SendToPanel(<Payload>{ payload: "time~" + hr + ":" + min });
                        }
                        
                        function GenerateEntitiesPage(page: PageEntities): Payload[] {
                            var out_msgs: Array<Payload> = [];
                            out_msgs = [{ payload: "pageType~cardEntities" }]
                            out_msgs.push({ payload: GeneratePageElements(page) });
                            return out_msgs
                        }
                        
                        function GenerateGridPage(page: PageGrid): Payload[] {
                            var out_msgs: Array<Payload> = [];
                            out_msgs = [{ payload: "pageType~cardGrid" }]
                            out_msgs.push({ payload: GeneratePageElements(page) });
                            return out_msgs
                        }
                        
                        function GeneratePageElements(page: Page): string {
                            let maxItems = 0;
                            switch (page.type) {
                                case "cardThermo":
                                    maxItems = 1;
                                    break;
                                case "cardAlarm":
                                    maxItems = 1;
                                    break;
                                case "cardMedia":
                                    maxItems = 1;
                                    break;
                                case "cardEntities":
                                    maxItems = 4;
                                    break;
                                case "cardGrid":
                                    maxItems = 6;
                                    break;
                            }
                            let pageData = "entityUpd~" + page.heading + "~" + GetNavigationString(pageId)
                            for (let index = 0; index < maxItems; index++) {
                                if (page.items[index] !== undefined) {
                                    pageData += CreateEntity(page.items[index], index + 1, page.useColor);
                                }
                                else {
                                    pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1);
                                }
                            }
                            return pageData;
                        }
                        
                        function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
                            var iconId = "0"
                            if (pageItem.id == "delete") {
                                return "~delete~~~~~"
                            }
                            var name: string;
                            var type: string;
                            // ioBroker
                            if (existsObject(pageItem.id)) {
                                let o = getObject(pageItem.id)
                                var val = null;
                                name = pageItem.name !== undefined ? pageItem.name : o.common.name.de
                        
                                if (existsState(pageItem.id + ".GET")) {
                                    val = getState(pageItem.id + ".GET").val;
                                    RegisterEntityWatcher(pageItem.id + ".GET");
                                }
                                else if (existsState(pageItem.id + ".SET")) {
                                    val = getState(pageItem.id + ".SET").val;
                                    RegisterEntityWatcher(pageItem.id + ".SET");
                                }
                                var iconColor = rgb_dec565(config.defaultColor);
                        
                                switch (o.common.role) {
                                    case "light":
                                        type = "light"
                                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                        var optVal = "0"
                        
                                        if (val === true || val === "true") {
                                            optVal = "1"
                                            iconColor = GetIconColor(pageItem, true, useColors);
                                        }
                        
                                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                        
                                    case "dimmer":
                                        type = "light"
                                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                        var optVal = "0"
                                        if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                            val = getState(pageItem.id + ".ON_ACTUAL").val;
                                            RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                        }
                                        else if (existsState(pageItem.id + ".ON_SET")) {
                                            val = getState(pageItem.id + ".ON_SET").val;
                                            RegisterEntityWatcher(pageItem.id + ".ON_SET");
                                        }
                                        if (val === true || val === "true") {
                                            optVal = "1"
                                            iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                        }
                        
                                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                        
                                    case "blind":
                                        type = "shutter"
                                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("window-open");
                                        iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~"
                        
                                    case "info":
                                    case "value.temperature":
                                    case "thermostat":
                                        type = "text";
                                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == "value.temperature" || o.common.role == "thermostat" ? Icons.GetIcon("thermometer") : Icons.GetIcon("information-outline");
                                        let unit = "";
                                        var optVal = "0"
                                        if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                            optVal = getState(pageItem.id + ".ON_ACTUAL").val;
                                            unit = GetUnitOfMeasurement(pageItem.id + ".ON_ACTUAL");
                                            RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                        }
                                        else if (existsState(pageItem.id + ".ACTUAL")) {
                                            optVal = getState(pageItem.id + ".ACTUAL").val;
                                            unit = GetUnitOfMeasurement(pageItem.id + ".ACTUAL");
                                            RegisterEntityWatcher(pageItem.id + ".ACTUAL");
                                        }
                        
                                        if (o.common.role == "value.temperature") {
                                            iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("thermometer");
                                        }
                        
                                        iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);
                        
                                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal + " " + unit;
                        
                                    case "button":
                                        type = "button";
                                        iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("gesture-tap-button");
                                        let buttonText = pageItem.name !== undefined ? pageItem.name : "PRESS";
                                        iconColor = GetIconColor(pageItem, true, useColors);
                                        return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + + iconColor + "~" + name + "~" + buttonText;
                        
                                    default:
                                        return "~delete~~~~~";
                                }
                            }
                        
                            return "~delete~~~~~"
                        }
                        
                        function GetIconColor(pageItem: PageItem, value: (boolean | number), useColors: boolean): number {
                            // dimmer
                            if ((pageItem.useColor || useColors) && pageItem.interpolateColor && typeof (value) === "number") {
                                let maxValue = pageItem.maxValue !== undefined ? pageItem.maxValue : 100;
                                let minValue = pageItem.minValue !== undefined ? pageItem.minValue : 0;
                                value = value > maxValue ? maxValue : value;
                                value = value < minValue ? minValue : value;
                                return rgb_dec565(
                                    Interpolate(
                                        pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor,
                                        pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor,
                                        scale(value, minValue, maxValue, 0, 1)
                                    ));
                            }
                        
                            if ((pageItem.useColor || useColors) && ((typeof (value) === "boolean" && value) || value > (pageItem.minValue !== undefined ? pageItem.minValue : 0))) {
                                return rgb_dec565(pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor)
                            }
                        
                            return rgb_dec565(pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor);
                        }
                        
                        function RegisterEntityWatcher(id: string): void {
                            if (subscriptions.hasOwnProperty(id)) {
                                return;
                            }
                            subscriptions[id] = (on({ id: id, change: 'any' }, function (data) {
                                SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });
                            }))
                        }
                        
                        function RegisterDetailEntityWatcher(id: string, pageItem: PageItem, type: string): void {
                            if (subscriptions.hasOwnProperty(id)) {
                                return;
                            }
                            subscriptions[id] = (on({ id: id, change: 'any' }, function () {
                                SendToPanel(GenerateDetailPage(type, pageItem));
                            }))
                        }
                        
                        function GetUnitOfMeasurement(id: string): string {
                            if (!existsObject(id))
                                return "";
                        
                            let obj = getObject(id);
                            if (typeof obj.common.unit !== 'undefined') {
                                return obj.common.unit
                            }
                        
                            if (typeof obj.common.alias !== 'undefined' && typeof obj.common.alias.id !== 'undefined') {
                                return GetUnitOfMeasurement(obj.common.alias.id);
                            }
                            return "";
                        }
                        
                        function GenerateThermoPage(page: PageThermo): Payload[] {
                            var id = page.items[0].id
                            var out_msgs: Array<Payload> = [];
                            out_msgs.push({ payload: "pageType~cardThermo" });
                        
                            // ioBroker
                            if (existsObject(id)) {
                                let o = getObject(id)
                                let name = page.items[0].name !== undefined ? page.items[0].name : o.common.name.de
                                let currentTemp = 0;
                                if (existsState(id + ".ACTUAL"))
                                    currentTemp = (Math.round(parseFloat(getState(id + ".ACTUAL").val) * 10)/10)*10;
                        
                                let destTemp = 0;
                                if (existsState(id + ".SET")) {
                                    destTemp = getState(id + ".SET").val.toFixed(2) * 10;
                                    log(id + ".SET " + destTemp)
                                }
                        
                                let status = ""
                                if (existsState(id + ".MODE"))
                                    status = getState(id + ".MODE").val;
                                let minTemp = 50 //Min Temp 5°C
                                let maxTemp = 300 //Max Temp 30°C
                                let stepTemp = 5
                        
                                //0-4 verwendet bei ungerader Anzahl Parametern
                                let bt0 = "~~~~"; //verwendet bei ungleichen Parametern
                                let bt1 = "~~~~"; //verwendet bei ungleichen Parametern
                                let bt2 = "~~~~"; //verwendet bei ungleichen Parametern
                                let bt3 = "~~~~"; //verwendet bei ungleichen Parametern
                                let bt4 = "~~~~"; //verwendet bei ungleichen Parametern
                                //5-8 verwendet bei gerader Anzahl Parametern
                                let bt5 = Icons.GetIcon("water-percent") + "~0~1~~";    
                                let bt6 = Icons.GetIcon("fire") + "~0~1~~";             
                                let bt7 = Icons.GetIcon("wifi") + "~0~1~~";             
                                let bt8 = Icons.GetIcon("battery-high") + "~0~1~~";     
                        
                                if (existsState(id + ".HUMIDITY")){
                                    console.log(parseInt(getState(id + ".HUMIDITY").val));
                                    bt5 =  Icons.GetIcon("water-percent") + "~2016~1~bt8~";
                                    if (parseInt(getState(id + ".HUMIDITY").val) < 40) {
                                        bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                    } else if (parseInt(getState(id + ".HUMIDITY").val) < 30) {
                                        bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                    } else if (parseInt(getState(id + ".HUMIDITY").val) > 65) {
                                        bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                    } else if (parseInt(getState(id + ".HUMIDITY").val) > 75) {
                                        bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                    }
                                }
                        
                                if (existsState(id + ".MAINTAIN")){
                                    if (getState(id + ".MAINTAIN").val >> .1) {
                                        bt6 =  Icons.GetIcon("fire") + "~60897~1~bt8~";
                                    } else {
                                        bt6 =  Icons.GetIcon("fire") + "~33840~0~bt8~";
                                    }
                                }
                        
                                if (existsState(id + ".UNREACH")){
                                    if (getState(id + ".UNREACH").val) {
                                        bt7 =  Icons.GetIcon("wifi-off") + "~63488~1~bt8~";
                                    } else {
                                        bt7 =  Icons.GetIcon("wifi") + "~2016~1~bt8~";
                                    }
                                }
                        
                                if (existsState(id + ".LOWBAT")){
                                    if (getState(id + ".LOWBAT").val) {
                                        bt8 =  Icons.GetIcon("battery-low") + "~63488~1~bt8~";
                                    } else {
                                        bt8 =  Icons.GetIcon("battery-high") + "~2016~1~bt8~";
                                    }
                                }
                        
                                let icon_res = bt0 + bt1 + bt2 + bt3 + bt4 + bt5 + bt6 + bt7 + bt8;
                        
                                out_msgs.push({ payload: "entityUpd~" + name + "~" + GetNavigationString(pageId) + "~" + id + "~" + currentTemp + "~" + destTemp + "~" + status + "~" + minTemp + "~" + maxTemp + "~" + stepTemp + "~" +icon_res})
                            }
                        
                            return out_msgs
                        }
                        
                        function GenerateMediaPage(page: PageMedia): Payload[] {
                            var id = page.items[0].id
                            var out_msgs: Array<Payload> = [];
                            out_msgs.push({ payload: "pageType~cardMedia" });
                        
                            if (existsObject(id)) {
                                let o = getObject(id);
                                //let name = o.common.name.de;
                                let name = getState(spotifyInstanz + ".player.contextDescription").val;
                                let media_icon = Icons.GetIcon("spotify");
                                let title = getState(spotifyInstanz + ".player.trackName").val;
                                let author = getState(spotifyInstanz + ".player.artistName").val
                                let volume = getState(spotifyInstanz + ".player.volume").val;
                                var iconplaypause = Icons.GetIcon("pause"); //pause
                                if (getState(spotifyInstanz + ".player.isPlaying").val) {
                                    iconplaypause = Icons.GetIcon("pause"); //pause
                                } else {
                                    iconplaypause = Icons.GetIcon("play"); //play
                                }
                                let currentSpeaker = getState(spotifyInstanz + ".player.device.name").val
                                let speakerlist = getState(spotifyInstanz + ".devices.deviceListString").val.replace(/;/g,"?");
                                let onoffbutton = 1;
                        
                                out_msgs.push({ payload: "entityUpd~" + 
                                                          name + "~" +
                                                          id + "~" +
                                                          "~" +         //????
                                                          media_icon + "~" +
                                                          title + "~" +
                                                          author + "~" +
                                                          volume + "~" +
                                                          iconplaypause + "~" +
                                                          currentSpeaker + "~" +
                                                          speakerlist + "~" +
                                                          onoffbutton});
                            }
                        
                            return out_msgs
                        }
                        
                        function GenerateAlarmPage(page: PageAlarm): Payload[] {
                            var id = page.items[0].id
                            var out_msgs: Array<Payload> = [];
                            out_msgs.push({ payload: "pageType~cardAlarm" });
                        
                            var armed: boolean = false;
                            
                            if (armed) {
                                var arm1 = "Deaktivieren";                  //arm1*~*
                                var arm1ActionName = "D1";                  //arm1ActionName*~*
                                var arm2 = "";                              //arm2*~*
                                var arm2ActionName = "";                    //arm2ActionName*~*
                                var arm3 = "";                              //arm3*~*
                                var arm3ActionName = "";                    //arm3ActionName*~*
                                var arm4 = "";                              //arm4*~*
                                var arm4ActionName = "";                    //arm4ActionName*~*
                                var icon = Icons.GetIcon("shield-home");    //icon*~*
                                var iconcolor = 63488;                      //iconcolor*~*
                                var numpadStatus = 1;                       //numpadStatus*~*
                                var flashing = 1;                           //flashing*
                            } 
                            else {
                                var arm1 = "Alarm 1";                       //arm1*~*
                                var arm1ActionName = "A1";                  //arm1ActionName*~*
                                var arm2 = "Alarm 2";                       //arm2*~*
                                var arm2ActionName = "A2";                  //arm2ActionName*~*
                                var arm3 = "Alarm 3";                       //arm3*~*
                                var arm3ActionName = "A3";                  //arm3ActionName*~*
                                var arm4 = "Alarm 4";                       //arm4*~*
                                var arm4ActionName = "A4";                  //arm4ActionName*~*
                                var icon = Icons.GetIcon("shield-off");     //icon*~*
                                var iconcolor = 2016;                       //iconcolor*~*
                                var numpadStatus = 1;                       //numpadStatus*~*
                                var flashing = 1;                           //flashing*        
                            }
                                
                            out_msgs.push({ payload:    "entityUpd~" +             //entityUpd~*
                                                        id + "~" +                 //internalNameEntity*~* //navigation*~*
                                                        "~" +                      //???
                                                        arm1 + "~" +               //arm1*~*
                                                        arm1ActionName + "~" +     //arm1ActionName*~*
                                                        arm2 + "~" +               //arm2*~*
                                                        arm2ActionName + "~" +     //arm2ActionName*~*
                                                        arm3 + "~" +               //arm3*~*
                                                        arm3ActionName + "~" +     //arm3ActionName*~*
                                                        arm4 + "~" +               //arm4*~*
                                                        arm4ActionName + "~" +     //arm4ActionName*~*
                                                        icon + "~" +               //icon*~* 39=Disarmed 35=Shield_Home, 40
                                                        iconcolor + "~" +          //iconcolor*~* 2016=green  63488=red
                                                        numpadStatus + "~" +       //numpadStatus*~*
                                                        flashing});                //flashing*
                        
                            return out_msgs
                        }
                        
                        function setIfExists(id: string, value: any, type: string | null = null): boolean {
                            if (type === null) {
                                if (existsState(id)) {
                                    setState(id, value);
                                    return true;
                                }
                            }
                            else {
                                let obj = getObject(id);
                                if (existsState(id) && obj.common.type !== undefined && obj.common.type === type) {
                                    setState(id, value);
                                    return true;
                                }
                            }
                            return false;
                        }
                        
                        function toggleState(id: string): boolean {
                            let obj = getObject(id);
                            if (existsState(id) && obj.common.type !== undefined && obj.common.type === "boolean") {
                                setState(id, !getState(id).val);
                                return true;
                            }
                            return false;
                        }
                        
                        function HandleButtonEvent(words): void {
                            let id = words[2]
                            let buttonAction = words[3];
                        
                            switch (buttonAction) {
                                case "bNext":
                                    var pageNum = ((pageId + 1) % config.pages.length);
                                    pageId = Math.abs(pageNum);
                                    UnsubscribeWatcher();
                                    GeneratePage(config.pages[pageId]);
                                    break;
                                case "bPrev":
                                    var pageNum = ((pageId - 1) % config.pages.length);
                                    pageId = Math.abs(pageNum);
                                    UnsubscribeWatcher();
                                    GeneratePage(config.pages[pageId]);
                                    break;
                                case "bExit":
                                    if (config.screenSaverDoubleClick) {
                                        if (words[4] == 2)
                                            GeneratePage(config.pages[pageId]);
                                    }
                                    else
                                        GeneratePage(config.pages[pageId]);
                                    break;
                                case "OnOff":
                                    if (existsObject(id)) {
                                        var action = false
                                        if (words[4] == "1")
                                            action = true
                                        let o = getObject(id)
                                        switch (o.common.role) {
                                            case "light":
                                                setIfExists(id + ".SET", action);
                                                break;
                                            case "dimmer":
                                                setIfExists(id + ".ON_SET", action) ? true : setIfExists(id + ".ON_ACTUAL", action);
                                        }
                                    }
                                    break;
                                case "up":
                                    setIfExists(id + ".OPEN", true)
                                    break;
                                case "stop":
                                    setIfExists(id + ".STOP", true)
                                    break;
                                case "down":
                                    setIfExists(id + ".CLOSE", true)
                                    break;
                                case "button":
                                    toggleState(id + ".SET") ? true : toggleState(id + ".ON_SET")
                                    break;
                                case "positionSlider":
                                case "brightnessSlider":
                                    setIfExists(id + ".SET", parseInt(words[4])) ? true : setIfExists(id + ".ACTUAL", parseInt(words[4]));
                                    break;
                                case "tempUpd":
                                    setIfExists(id + ".SET", parseInt(words[4]) / 10)
                                    break;
                                case "media-back":
                                    setIfExists(spotifyInstanz + ".player.skipMinus", true)
                                    break;
                                case "media-pause":
                                    if (getState(spotifyInstanz + ".player.isPlaying").val === true) {
                                        setIfExists(spotifyInstanz + ".player.pause", true)
                                    } else {
                                        setIfExists(spotifyInstanz + ".player.play", true)
                                    }
                                    break;
                                case "media-next":
                                    setIfExists(spotifyInstanz + ".player.skipPlus", true)
                                    break;
                                case "volumeSlider":
                                    setIfExists(spotifyInstanz + ".player.volume", parseInt(words[4]))
                                    break;
                                case "speaker-sel":
                                    console.log("auf mediaCard - speaker-sel - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                    break;
                                case "A1": //Alarm-Page Alarm 1 aktivieren
                                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                    break;
                                case "A2": //Alarm-Page Alarm 2 aktivieren
                                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                    break;  
                                case "A3": //Alarm-Page Alarm 3 aktivieren
                                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                    break;  
                                case "A4": //Alarm-Page Alarm 4 aktivieren
                                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                    break;         
                                case "D1": //Alarm-Page Alarm Deaktivieren
                                    console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                    break;  
                                default:
                                    break;
                            }
                        }
                        
                        function GetNavigationString(pageId: number): string {
                            switch (pageId) {
                                case 0:
                                    return "0|1";
                                case config.pages.length - 1:
                                    return "1|0";
                                case -1:
                                    return "0|0";
                                default:
                                    return "1|1";
                            }
                        }
                        
                        function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
                        
                            var out_msgs: Array<Payload> = [];
                            let id = pageItem.id
                            if (existsObject(id)) {
                                var o = getObject(id)
                                var val: (boolean | number) = 0;
                                let icon = Icons.GetIcon("lightbulb");
                                var iconColor = rgb_dec565(config.defaultColor);
                                if (type == "popupLight") {
                                    let switchVal = "0"
                                    if (o.common.role == "light") {
                                        if (existsState(id + ".GET")) {
                                            val = getState(id + ".GET").val;
                                            RegisterDetailEntityWatcher(id + ".GET", pageItem, type);
                                        }
                                        else if (existsState(id + ".SET")) {
                                            val = getState(id + ".SET").val;
                                            RegisterDetailEntityWatcher(id + ".SET", pageItem, type);
                                        }
                        
                                        if (val) {
                                            switchVal = "1";
                                            iconColor = GetIconColor(pageItem, true, false);
                                        }
                        
                                        out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + + iconColor + "~" + switchVal + ",disable,disable,disable" })
                                    }
                        
                                    if (o.common.role == "dimmer") {
                                        if (existsState(id + ".ON_ACTUAL")) {
                                            val = getState(id + ".ON_ACTUAL").val;
                                            RegisterDetailEntityWatcher(id + ".ON_ACTUAL", pageItem, type);
                                        }
                        
                                        else if (existsState(id + ".ON_SET")) {
                                            val = getState(id + ".ON_SET").val;
                                            RegisterDetailEntityWatcher(id + ".ON_SET", pageItem, type);
                                        }
                        
                                        if (val === true) {
                                            var iconColor = GetIconColor(pageItem, val, false);
                                            switchVal = "1"
                                        }
                                        let brightness = 0;
                                        if (existsState(id + ".ACTUAL")) {
                                            brightness = Math.trunc(scale(getState(id + ".ACTUAL").val, 0, 100, 0, 100))
                                            iconColor = GetIconColor(pageItem, brightness, false);
                                            RegisterDetailEntityWatcher(id + ".ACTUAL", pageItem, type);
                                        }
                                        let colorTemp = "disable"
                                        let colorMode = "disable"
                                        //let attr_support_color = attr.supported_color_modes
                                        //if (attr_support_color.includes("color_temp"))
                                        // colortemp = Math.trunc(scale(attr.color_temp, attr.min_mireds, attr.max_mireds, 0, 100))
                        
                                        out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + iconColor + "~" + switchVal + "~" + brightness + "~" + colorTemp + "~" + colorMode })
                                    }
                        
                                }
                        
                                if (type == "popupShutter") {
                                    if (existsState(id + ".ACTUAL"))
                                        val = getState(id + ".ACTUAL").val;
                                    else if (existsState(id + ".SET"))
                                        val = getState(id + ".SET").val;
                                    out_msgs.push({ payload: "entityUpdateDetail," + val })
                                }
                            }
                            return out_msgs
                        }
                        
                        function scale(number: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
                            return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
                        }
                        
                        function UnsubscribeWatcher(): void {
                            for (const [key, value] of Object.entries(subscriptions)) {
                                unsubscribe(value);
                                delete subscriptions[key]
                            }
                        }
                        
                        function HandleScreensaver(): void {
                            SendToPanel({ payload: "pageType~screensaver"})
                            UnsubscribeWatcher();
                            HandleScreensaverUpdate();
                        }
                        
                        function HandleScreensaverUpdate(): void {
                            if (screensaverEnabled && config.weatherEntity != null && existsObject(config.weatherEntity)) {
                                var icon = getState(config.weatherEntity + ".ICON").val;
                         
                                let temperature: string =
                                    existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
                                        existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
                         
                                let payloadString =
                                    "weatherUpdate~" + Icons.GetIcon(GetAccuWeatherIcon(parseInt(icon))) + "~"
                                    + temperature + " " + config.temperatureUnit + "~"
                         
                        /*-------------------------------------------------------------------------------------------------------------------------------------*/
                                if (weatherForecast == true) {
                                    // Accu-Weather Forecast Tag 2 - Tag 5 -- Wenn weatherForecast = true
                                    for (let i = 2; i < 6; i++) {
                                        let TempMax = getState("accuweather.0.Summary.TempMax_d" + i).val;
                                        let DayOfWeek = getState("accuweather.0.Summary.DayOfWeek_d" + i).val;
                                        let WeatherIcon = GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                                        payloadString += DayOfWeek + "~" + Icons.GetIcon(WeatherIcon) + "~" + TempMax + " °C~";
                                    }
                                } 
                                else {
                                    //In Config definierte Zustände wenn weatherForecast = false
                                    payloadString += GetScreenSaverEntityString(config.firstScreensaverEntity);
                                    payloadString += GetScreenSaverEntityString(config.secondScreensaverEntity);
                                    payloadString += GetScreenSaverEntityString(config.thirdScreensaverEntity);
                                    payloadString += GetScreenSaverEntityString(config.fourthScreensaverEntity);
                                }
                        /*-------------------------------------------------------------------------------------------------------------------------------------*/
                         
                                SendToPanel(<Payload>{ payload: payloadString });
                            }
                        }
                        
                        function GetScreenSaverEntityString(configElement: ScreenSaverElement | null): string {
                            if (configElement != null && configElement.ScreensaverEntity != null && existsState(configElement.ScreensaverEntity)) {
                                let u1 = getState(configElement.ScreensaverEntity).val;
                                return configElement.ScreensaverEntityText + "~" + Icons.GetIcon(configElement.ScreensaverEntityIcon) + "~" + u1 + " " + configElement.ScreensaverEntityUnitText + "~";
                            }
                            else {
                                return "~~~";
                            }
                        }
                        
                        function GetAccuWeatherIcon(icon: number): string {
                            switch (icon) {
                                case 24:        // Ice        
                                case 30:        // Hot    
                                case 31:        // Cold    
                                    return "window-open";  // exceptional
                        
                                case 7:         // Cloudy
                                case 8:         // Dreary (Overcast)        
                                case 38:        // Mostly Cloudy
                                    return "weather-cloudy";  // cloudy
                        
                                case 11:        // fog
                                    return "weather-fog";  // fog
                        
                                case 25:        // Sleet    
                                    return "weather-hail";  // Hail
                        
                                case 15:        // T-Storms    
                                    return "weather-lightning";  // lightning
                        
                                case 16:        // Mostly Cloudy w/ T-Storms
                                case 17:        // Partly Sunny w/ T-Storms
                                case 41:        // Partly Cloudy w/ T-Storms       
                                case 42:        // Mostly Cloudy w/ T-Storms
                                    return "weather-lightning-rainy";  // lightning-rainy
                        
                                case 33:        // Clear
                                case 34:        // Mostly Clear
                                case 37:        // Hazy Moonlight
                                    return "weather-night";
                        
                                case 3:         // Partly Sunny
                                case 4:         // Intermittent Clouds
                                case 6:         // Mostly Cloudy
                                case 35: 	    // Partly Cloudy
                                case 36: 	    // Intermittent Clouds
                                    return "weather-partly-cloudy";  // partlycloudy 
                        
                                case 18:        // pouring
                                    return "weather-pouring";  // pouring
                        
                                case 12:        // Showers
                                case 13:        // Mostly Cloudy w/ Showers
                                case 14:        // Partly Sunny w/ Showers      
                                case 26:        // Freezing Rain
                                case 39:        // Partly Cloudy w/ Showers
                                case 40:        // Mostly Cloudy w/ Showers
                                    return "weather-rainy";  // rainy
                        
                                case 19:        // Flurries
                                case 20:        // Mostly Cloudy w/ Flurries
                                case 21:        // Partly Sunny w/ Flurries
                                case 22:        // Snow
                                case 23:        // Mostly Cloudy w/ Snow
                                case 43:        // Mostly Cloudy w/ Flurries
                                case 44:        // Mostly Cloudy w/ Snow
                                    return "weather-snowy";  // snowy
                        
                                case 29:        // Rain and Snow
                                    return "weather-snowy-rainy";  // snowy-rainy
                        
                                case 1:         // Sunny
                                case 2: 	    // Mostly Sunny
                                case 5:         // Hazy Sunshine
                                    return "weather-sunny";  // sunny
                        
                                case 32:        // windy
                                    return "weather-windy";  // windy
                        
                                default:
                                    return "alert-circle-outline";
                            }
                        }
                        
                        function GetBlendedColor(percentage: number): RGB {
                            if (percentage < 50)
                                return Interpolate(config.defaultOffColor, config.defaultOnColor, percentage / 50.0);
                            return Interpolate(Red, White, (percentage - 50) / 50.0);
                        }
                        
                        function Interpolate(color1: RGB, color2: RGB, fraction: number): RGB {
                            var r: number = InterpolateNum(color1.red, color2.red, fraction);
                            var g: number = InterpolateNum(color1.green, color2.green, fraction);
                            var b: number = InterpolateNum(color1.blue, color2.blue, fraction);
                            return <RGB>{ red: Math.round(r), green: Math.round(g), blue: Math.round(b) };
                        }
                        
                        function InterpolateNum(d1: number, d2: number, fraction: number): number {
                            return d1 + (d2 - d1) * fraction;
                        }
                        
                        function rgb_dec565(rgb: RGB): number {
                            return ((Math.floor(rgb.red / 255 * 31) << 11) | (Math.floor(rgb.green / 255 * 63) << 5) | (Math.floor(rgb.blue / 255 * 31)));
                        }
                        
                        type RGB = {
                            red: number,
                            green: number,
                            blue: number
                        };
                        
                        type Payload = {
                            payload: string;
                        };
                        
                        type Page = {
                            type: string,
                            heading: string,
                            items: PageItem[],
                            useColor: boolean
                        };
                        
                        interface PageEntities extends Page {
                            type: "cardEntities",
                            items: PageItem[],
                        
                        };
                        interface PageGrid extends Page {
                            type: "cardGrid",
                            items: PageItem[],
                        };
                        
                        interface PageThermo extends Page {
                            type: "cardThermo",
                            items: PageItem[],
                        };
                        
                        interface PageMedia extends Page {
                            type: "cardMedia",
                            items: PageItem[],
                        };
                        
                        interface PageAlarm extends Page {
                            type: "cardAlarm",
                            items: PageItem[],
                        };
                        
                        type PageItem = {
                            id: string,
                            icon: (string | undefined),
                            onColor: (RGB | undefined),
                            offColor: (RGB | undefined),
                            useColor: (boolean | undefined),
                            interpolateColor: (boolean | undefined),
                            minValue: (number | undefined),
                            maxValue: (number | undefined),
                            name: (string | undefined)
                        }
                        
                        type Config = {
                            panelRecvTopic: string,
                            panelSendTopic: string,
                            timeoutScreensaver: number,
                            dimmode: number,
                            //brightnessScreensaver:
                            locale: string,
                            timeFormat: string,
                            dateFormat: string,
                            weatherEntity: string | null,
                            screenSaverDoubleClick: boolean,
                            temperatureUnit: string,
                            firstScreensaverEntity: ScreenSaverElement | null,
                            secondScreensaverEntity: ScreenSaverElement | null,
                            thirdScreensaverEntity: ScreenSaverElement | null,
                            fourthScreensaverEntity: ScreenSaverElement | null,
                            defaultColor: RGB,
                            defaultOnColor: RGB,
                            defaultOffColor: RGB,
                            pages: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid)[],
                            button1Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                            button2Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                        };
                        
                        type ScreenSaverElement = {
                            ScreensaverEntity: string | null,
                            ScreensaverEntityIcon: string | null,
                            ScreensaverEntityText: string | null,
                            ScreensaverEntityUnitText: string | null,
                        }
                        
                        
                        • Unter ioBroker/Skripte weiteres Type-Script unter global !!!! (nicht common, etc) anlegen (Name: Blabla oder NSPanel_icon_mapping, etc)

                        • Inhalt aus Datei icon_mapping.ts von Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker (nicht wundern, wenn die etwas zerrissen aussieht - Fragezeichen, etc.)

                        • Beide Skripte starten nicht vergessen

                        Ab jetzt holt sich das Hauptscript (Inhalt der NsPanelTs.ts) die Icons aus der Mapping-Datei.

                        Jetzt noch NSPanel-Parameter (ALIASE, MQTT-anpassen, Datenpunkte) anpassen oder weitere Seiten gestalten und einfügen
                        Sollten weitere oder andere Icons gewünscht sein dann auf https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html nachsehen und den Namen entsprechend an der Stelle des Icons im TypeScript "NSPanelTs" tauschen.

                        Noch ein kleiner Hinweis. Der MQTT-Adpter benötigt noch den Datenpunkt "CustomSend". Einfach in der Tasmota-Konsole folgende Zeile absenden. Danach sollte der MQTT-Adapter den Datenpunkt anlegen und abonieren.

                        CustomSend time~15:42
                        

                        Ich hoffe das hilft :+1:

                        Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                        https://github.com/joBr99/nspanel-lovelace-ui/wiki

                        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                        ArmilarA M 2 Antworten Letzte Antwort
                        2
                        • ArmilarA Armilar

                          @mikewolf sagte in Sonoff NSPanel:

                          Hallo wenn ich ts script starte kommt

                          Javascript.0 (1002) script.js.HPCLTEST.Skript_3NS: TypeScript compilation failed: var Icons = new IconsSelector(); ^ ERROR: Cannot find name 'IconsSelector'.
                          
                          

                          Gibts eine step by step anleitung ?? probiere seit über einer Woche das zum laufen zu bekommen,
                          und dieser Thread ist etwas unübersichtlich geworden ..Speziell für nen neuanfang !

                          Mit freundlichen Grüßen
                          mikewolf

                          Ich versuche es mal:

                          • Tasmota flashen (analog Anleitung @haus-automatisierung) Die ist schon echt super erklärt! - Vielleicht macht er ja hierzu auch ein Video ;-)
                          • autoexec.be in Tasmota Konsole/Verwalte Dateisystem anlegen
                          • Nachfolgenden Befehl in Tasmota-Konsole ausführen
                          Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
                          
                          • NSPanel TFT Flashen mit (aktuelle Version 2.0.7):
                          FlashNextion http://nspanel.pky.eu/lui-release.tft
                          

                          Das NSPanel kurz rebooten - kann nicht schaden - Danach wartet es auf Infos von ioBroker

                          • TypeScript unter ioBroker/Skripte anlegen analog Britzelpuf auf Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker Inhalt aus der NsPanelTs.ts übernehmen oder mein Script verwenden:

                          (@britzelpuf hat eine Anpassung auf das letzte Release 1.9.1 auf 2.0.7 von @joBr99 gemacht. Daher dringend das neueste TS-Script verwenden, sonst läuft es nicht)

                          var Icons = new IconsSelector();
                          
                          const Months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
                          const Days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
                          const Red: RGB = { red: 255, green: 0, blue: 0 };
                          const White: RGB = { red: 255, green: 255, blue: 255 };
                          const Off: RGB = { red: 68, green: 115, blue: 158 };
                          const On: RGB = { red: 253, green: 216, blue: 53 };
                          const BatteryFull: RGB = { red: 96, green: 176, blue: 62 }
                          const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 }
                          
                          //----Möglichkeit, im Screensaver zwischen Accu-Weather Forcast oder selbstdefinierten Werten zu wählen---------------------------------
                          var weatherForecast = true; //true = WheatherForecast 5 Days --- false = Config --> firstScreensaverEntity - fourthScreensaverEntity ...
                          //Spotify Instanz
                          var spotifyInstanz = "spotify-premium.0"
                          
                          var Buero_Seite_1: PageEntities =
                          {
                              "type": "cardEntities",
                              "heading": "Büro",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.MyTestbutton", icon: "lightbulb", offColor: Off, onColor: On, name: "Taster"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power" }
                              ]
                          };
                          
                          var Buero_Seite_2: PageGrid =
                          {
                              "type": "cardGrid",
                              "heading": "Büro",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", name: "Schreibtisch"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", name: "Deckenlampe"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Radio.TuneIn", icon: "play"}
                              ]
                          };
                          
                          var Spotify: PageMedia = 
                          {
                              "type": "cardMedia",
                              "heading": "Spotify",
                              "useColor": false,
                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Spotify" }]
                          };
                          
                          var Buero_Themostat: PageThermo = 
                          {
                              "type": "cardThermo",
                              "heading": "Thermostat",
                              "useColor": true,
                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Thermostat_Büro" }]
                          };
                          
                          var Buero_Alarm: PageAlarm = 
                          {
                              "type": "cardAlarm",
                              "heading": "Alarm",
                              "useColor": true,
                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alarm" }]
                          };
                          
                          var button1Page: PageGrid =
                          {
                              "type": "cardGrid",
                              "heading": "Radio",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.Radio.NJoy" },
                                  <PageItem>{ id: "alias.0.Radio.Delta_Radio" },
                                  <PageItem>{ id: "alias.0.Radio.NDR2" },
                              ]
                          };
                          
                          var button2Page: PageEntities =
                          {
                              "type": "cardEntities",
                              "heading": "Knopf2",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.Schlafen" },
                                  <PageItem>{ id: "alias.0.Stern" }
                              ]
                          };
                          
                          export const config: Config = {
                              panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //anpassen
                              panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //anpassen
                              firstScreensaverEntity: { ScreensaverEntity: "hmip.0.devices.3014F711A000185BE9922BCF.channels.1.humidity", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
                              secondScreensaverEntity: { ScreensaverEntity: "accuweather.0.Daily.Day1.Day.PrecipitationProbability", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" },
                              thirdScreensaverEntity: { ScreensaverEntity: "0_userdata.0.Wetter.Windstaerke_homaticIP", ScreensaverEntityIcon: "weather-windy", ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: "bft" },
                              fourthScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.UVIndex", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "UV", ScreensaverEntityUnitText: "" },
                              timeoutScreensaver: 15,
                              dimmode: 8,
                              screenSaverDoubleClick: false,
                              locale: "de_DE",
                              timeFormat: "%H:%M",
                              dateFormat: "%A, %d. %B %Y",
                              weatherEntity: "alias.0.Wetter.Wetter",
                              defaultOffColor: Off,
                              defaultOnColor: On,
                              defaultColor: Off,
                              temperatureUnit: "°C",
                              pages: [Buero_Seite_1, 
                                      Buero_Seite_2, 
                                      Spotify,
                                      Buero_Themostat,
                                      Buero_Alarm
                              ],
                              button1Page: button1Page,
                              button2Page: button2Page
                          };
                          
                          
                          // _________________________________ Ab hier keine Konfiguration mehr _____________________________________
                          
                          var subscriptions: any = {};
                          var screensaverEnabled : boolean = false;
                          var pageId = 0;
                          
                          schedule("* * * * *", function () {
                              SendTime();
                          });
                          schedule("0 * * * *", function () {
                              SendDate();
                          });
                          
                          
                          // Only monitor the extra nodes if present
                          var updateArray: string[] = [];
                          if (config.firstScreensaverEntity !== null && config.firstScreensaverEntity.ScreensaverEntity != null && existsState(config.firstScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.firstScreensaverEntity.ScreensaverEntity)
                          }
                          if (config.secondScreensaverEntity !== null && config.secondScreensaverEntity.ScreensaverEntity != null && existsState(config.secondScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.secondScreensaverEntity.ScreensaverEntity)
                          }
                          if (config.thirdScreensaverEntity !== null && config.thirdScreensaverEntity.ScreensaverEntity != null && existsState(config.thirdScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.thirdScreensaverEntity.ScreensaverEntity)
                          }
                          if (config.fourthScreensaverEntity !== null && config.fourthScreensaverEntity.ScreensaverEntity != null && existsState(config.fourthScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.fourthScreensaverEntity.ScreensaverEntity)
                          }
                          
                          if (updateArray.length > 0) {
                              on(updateArray, function () {
                                  HandleScreensaverUpdate();
                              })
                          }
                          on({ id: config.panelRecvTopic }, function (obj) {
                              if (obj.state.val.startsWith('\{"CustomRecv":')) {
                                  var json = JSON.parse(obj.state.val);
                          
                                  var split = json.CustomRecv.split(",");
                                  HandleMessage(split[0], split[1], parseInt(split[2]), split);
                              }
                          });
                          
                          function SendToPanel(val: Payload | Payload[]): void {
                              if (Array.isArray(val)) {
                                  val.forEach(function (id, i) {
                                      setState(config.panelSendTopic, id.payload);
                                  });
                              }
                              else
                                  setState(config.panelSendTopic, val.payload);
                          }
                          
                          function HandleMessage(typ: string, method: string, page: number, words: Array<string>): void {
                              if (typ == "event") {
                                  switch (method) {
                                      case "startup":
                                          screensaverEnabled = false;
                                          UnsubscribeWatcher();
                                          HandleStartupProcess();
                                          pageId = 0;
                                          GeneratePage(config.pages[0]);
                                          break;
                                      case "sleepReached":
                                          screensaverEnabled = true;
                                          HandleScreensaver();
                                          break;
                                      case "pageOpenDetail":
                                          screensaverEnabled = false;
                                          UnsubscribeWatcher();
                                          let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
                                          if (pageItem !== undefined)
                                              SendToPanel(GenerateDetailPage(words[2], pageItem));
                                      case "buttonPress2":
                                          screensaverEnabled = false;
                                          HandleButtonEvent(words);
                                          break;
                                      case "button1":
                                      case "button2":
                                          screensaverEnabled = false;
                                          HandleHardwareButton(method);
                                      default:
                                          break;
                                  }
                              }
                          }
                          
                          function GeneratePage(page: Page): void {
                              switch (page.type) {
                                  case "cardEntities":
                                      SendToPanel(GenerateEntitiesPage(<PageEntities>page));
                                      break;
                                  case "cardThermo":
                                      SendToPanel(GenerateThermoPage(<PageThermo>page));
                                      break;
                                  case "cardGrid":
                                      SendToPanel(GenerateGridPage(<PageGrid>page));
                                      break;
                                  case "cardMedia":
                                      SendToPanel(GenerateMediaPage(<PageMedia>page));
                                      break;
                                  case "cardAlarm":
                                      SendToPanel(GenerateAlarmPage(<PageAlarm>page));
                                      break;
                              }
                          }
                          
                          function HandleHardwareButton(method: string): void {
                              let page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid);
                              if (config.button1Page !== null && method == "button1") {
                                  page = config.button1Page;
                              }
                              else if (config.button2Page !== null && method == "button2") {
                                  page = config.button2Page;
                              }
                              else {
                                  return;
                              }
                          
                              // Set pageId to -1, because of the navigation arrows
                              let tempPageId = pageId;
                              pageId = -1;
                              GeneratePage(page);
                              pageId = tempPageId;
                          }
                          
                          function HandleStartupProcess(): void {
                              SendDate();
                              SendTime();
                              SendToPanel({ payload: "timeout~" + config.timeoutScreensaver });
                              SendToPanel({ payload: "dimmode~" + config.dimmode });
                          }
                          
                          function SendDate(): void {
                              var d = new Date();
                              var day = Days[d.getDay()];
                              var date = d.getDate();
                              var month = Months[d.getMonth()];
                              var year = d.getFullYear();
                              var _sendDate = "date~" + day + " " + date + " " + month + " " + year;
                              SendToPanel(<Payload>{ payload: _sendDate });
                          }
                          
                          function SendTime(): void {
                              var d = new Date();
                              var hr = d.getHours().toString();
                              var min = d.getMinutes().toString();
                          
                              if (d.getHours() < 10) {
                                  hr = "0" + d.getHours().toString();
                              }
                              if (d.getMinutes() < 10) {
                                  min = "0" + d.getMinutes().toString();
                              }
                              SendToPanel(<Payload>{ payload: "time~" + hr + ":" + min });
                          }
                          
                          function GenerateEntitiesPage(page: PageEntities): Payload[] {
                              var out_msgs: Array<Payload> = [];
                              out_msgs = [{ payload: "pageType~cardEntities" }]
                              out_msgs.push({ payload: GeneratePageElements(page) });
                              return out_msgs
                          }
                          
                          function GenerateGridPage(page: PageGrid): Payload[] {
                              var out_msgs: Array<Payload> = [];
                              out_msgs = [{ payload: "pageType~cardGrid" }]
                              out_msgs.push({ payload: GeneratePageElements(page) });
                              return out_msgs
                          }
                          
                          function GeneratePageElements(page: Page): string {
                              let maxItems = 0;
                              switch (page.type) {
                                  case "cardThermo":
                                      maxItems = 1;
                                      break;
                                  case "cardAlarm":
                                      maxItems = 1;
                                      break;
                                  case "cardMedia":
                                      maxItems = 1;
                                      break;
                                  case "cardEntities":
                                      maxItems = 4;
                                      break;
                                  case "cardGrid":
                                      maxItems = 6;
                                      break;
                              }
                              let pageData = "entityUpd~" + page.heading + "~" + GetNavigationString(pageId)
                              for (let index = 0; index < maxItems; index++) {
                                  if (page.items[index] !== undefined) {
                                      pageData += CreateEntity(page.items[index], index + 1, page.useColor);
                                  }
                                  else {
                                      pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1);
                                  }
                              }
                              return pageData;
                          }
                          
                          function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
                              var iconId = "0"
                              if (pageItem.id == "delete") {
                                  return "~delete~~~~~"
                              }
                              var name: string;
                              var type: string;
                              // ioBroker
                              if (existsObject(pageItem.id)) {
                                  let o = getObject(pageItem.id)
                                  var val = null;
                                  name = pageItem.name !== undefined ? pageItem.name : o.common.name.de
                          
                                  if (existsState(pageItem.id + ".GET")) {
                                      val = getState(pageItem.id + ".GET").val;
                                      RegisterEntityWatcher(pageItem.id + ".GET");
                                  }
                                  else if (existsState(pageItem.id + ".SET")) {
                                      val = getState(pageItem.id + ".SET").val;
                                      RegisterEntityWatcher(pageItem.id + ".SET");
                                  }
                                  var iconColor = rgb_dec565(config.defaultColor);
                          
                                  switch (o.common.role) {
                                      case "light":
                                          type = "light"
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                          var optVal = "0"
                          
                                          if (val === true || val === "true") {
                                              optVal = "1"
                                              iconColor = GetIconColor(pageItem, true, useColors);
                                          }
                          
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                          
                                      case "dimmer":
                                          type = "light"
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                          var optVal = "0"
                                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                              val = getState(pageItem.id + ".ON_ACTUAL").val;
                                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                          }
                                          else if (existsState(pageItem.id + ".ON_SET")) {
                                              val = getState(pageItem.id + ".ON_SET").val;
                                              RegisterEntityWatcher(pageItem.id + ".ON_SET");
                                          }
                                          if (val === true || val === "true") {
                                              optVal = "1"
                                              iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                          }
                          
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                          
                                      case "blind":
                                          type = "shutter"
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("window-open");
                                          iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~"
                          
                                      case "info":
                                      case "value.temperature":
                                      case "thermostat":
                                          type = "text";
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == "value.temperature" || o.common.role == "thermostat" ? Icons.GetIcon("thermometer") : Icons.GetIcon("information-outline");
                                          let unit = "";
                                          var optVal = "0"
                                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                              optVal = getState(pageItem.id + ".ON_ACTUAL").val;
                                              unit = GetUnitOfMeasurement(pageItem.id + ".ON_ACTUAL");
                                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                          }
                                          else if (existsState(pageItem.id + ".ACTUAL")) {
                                              optVal = getState(pageItem.id + ".ACTUAL").val;
                                              unit = GetUnitOfMeasurement(pageItem.id + ".ACTUAL");
                                              RegisterEntityWatcher(pageItem.id + ".ACTUAL");
                                          }
                          
                                          if (o.common.role == "value.temperature") {
                                              iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("thermometer");
                                          }
                          
                                          iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);
                          
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal + " " + unit;
                          
                                      case "button":
                                          type = "button";
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("gesture-tap-button");
                                          let buttonText = pageItem.name !== undefined ? pageItem.name : "PRESS";
                                          iconColor = GetIconColor(pageItem, true, useColors);
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + + iconColor + "~" + name + "~" + buttonText;
                          
                                      default:
                                          return "~delete~~~~~";
                                  }
                              }
                          
                              return "~delete~~~~~"
                          }
                          
                          function GetIconColor(pageItem: PageItem, value: (boolean | number), useColors: boolean): number {
                              // dimmer
                              if ((pageItem.useColor || useColors) && pageItem.interpolateColor && typeof (value) === "number") {
                                  let maxValue = pageItem.maxValue !== undefined ? pageItem.maxValue : 100;
                                  let minValue = pageItem.minValue !== undefined ? pageItem.minValue : 0;
                                  value = value > maxValue ? maxValue : value;
                                  value = value < minValue ? minValue : value;
                                  return rgb_dec565(
                                      Interpolate(
                                          pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor,
                                          pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor,
                                          scale(value, minValue, maxValue, 0, 1)
                                      ));
                              }
                          
                              if ((pageItem.useColor || useColors) && ((typeof (value) === "boolean" && value) || value > (pageItem.minValue !== undefined ? pageItem.minValue : 0))) {
                                  return rgb_dec565(pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor)
                              }
                          
                              return rgb_dec565(pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor);
                          }
                          
                          function RegisterEntityWatcher(id: string): void {
                              if (subscriptions.hasOwnProperty(id)) {
                                  return;
                              }
                              subscriptions[id] = (on({ id: id, change: 'any' }, function (data) {
                                  SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });
                              }))
                          }
                          
                          function RegisterDetailEntityWatcher(id: string, pageItem: PageItem, type: string): void {
                              if (subscriptions.hasOwnProperty(id)) {
                                  return;
                              }
                              subscriptions[id] = (on({ id: id, change: 'any' }, function () {
                                  SendToPanel(GenerateDetailPage(type, pageItem));
                              }))
                          }
                          
                          function GetUnitOfMeasurement(id: string): string {
                              if (!existsObject(id))
                                  return "";
                          
                              let obj = getObject(id);
                              if (typeof obj.common.unit !== 'undefined') {
                                  return obj.common.unit
                              }
                          
                              if (typeof obj.common.alias !== 'undefined' && typeof obj.common.alias.id !== 'undefined') {
                                  return GetUnitOfMeasurement(obj.common.alias.id);
                              }
                              return "";
                          }
                          
                          function GenerateThermoPage(page: PageThermo): Payload[] {
                              var id = page.items[0].id
                              var out_msgs: Array<Payload> = [];
                              out_msgs.push({ payload: "pageType~cardThermo" });
                          
                              // ioBroker
                              if (existsObject(id)) {
                                  let o = getObject(id)
                                  let name = page.items[0].name !== undefined ? page.items[0].name : o.common.name.de
                                  let currentTemp = 0;
                                  if (existsState(id + ".ACTUAL"))
                                      currentTemp = (Math.round(parseFloat(getState(id + ".ACTUAL").val) * 10)/10)*10;
                          
                                  let destTemp = 0;
                                  if (existsState(id + ".SET")) {
                                      destTemp = getState(id + ".SET").val.toFixed(2) * 10;
                                      log(id + ".SET " + destTemp)
                                  }
                          
                                  let status = ""
                                  if (existsState(id + ".MODE"))
                                      status = getState(id + ".MODE").val;
                                  let minTemp = 50 //Min Temp 5°C
                                  let maxTemp = 300 //Max Temp 30°C
                                  let stepTemp = 5
                          
                                  //0-4 verwendet bei ungerader Anzahl Parametern
                                  let bt0 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt1 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt2 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt3 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt4 = "~~~~"; //verwendet bei ungleichen Parametern
                                  //5-8 verwendet bei gerader Anzahl Parametern
                                  let bt5 = Icons.GetIcon("water-percent") + "~0~1~~";    
                                  let bt6 = Icons.GetIcon("fire") + "~0~1~~";             
                                  let bt7 = Icons.GetIcon("wifi") + "~0~1~~";             
                                  let bt8 = Icons.GetIcon("battery-high") + "~0~1~~";     
                          
                                  if (existsState(id + ".HUMIDITY")){
                                      console.log(parseInt(getState(id + ".HUMIDITY").val));
                                      bt5 =  Icons.GetIcon("water-percent") + "~2016~1~bt8~";
                                      if (parseInt(getState(id + ".HUMIDITY").val) < 40) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                      } else if (parseInt(getState(id + ".HUMIDITY").val) < 30) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 65) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 75) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                      }
                                  }
                          
                                  if (existsState(id + ".MAINTAIN")){
                                      if (getState(id + ".MAINTAIN").val >> .1) {
                                          bt6 =  Icons.GetIcon("fire") + "~60897~1~bt8~";
                                      } else {
                                          bt6 =  Icons.GetIcon("fire") + "~33840~0~bt8~";
                                      }
                                  }
                          
                                  if (existsState(id + ".UNREACH")){
                                      if (getState(id + ".UNREACH").val) {
                                          bt7 =  Icons.GetIcon("wifi-off") + "~63488~1~bt8~";
                                      } else {
                                          bt7 =  Icons.GetIcon("wifi") + "~2016~1~bt8~";
                                      }
                                  }
                          
                                  if (existsState(id + ".LOWBAT")){
                                      if (getState(id + ".LOWBAT").val) {
                                          bt8 =  Icons.GetIcon("battery-low") + "~63488~1~bt8~";
                                      } else {
                                          bt8 =  Icons.GetIcon("battery-high") + "~2016~1~bt8~";
                                      }
                                  }
                          
                                  let icon_res = bt0 + bt1 + bt2 + bt3 + bt4 + bt5 + bt6 + bt7 + bt8;
                          
                                  out_msgs.push({ payload: "entityUpd~" + name + "~" + GetNavigationString(pageId) + "~" + id + "~" + currentTemp + "~" + destTemp + "~" + status + "~" + minTemp + "~" + maxTemp + "~" + stepTemp + "~" +icon_res})
                              }
                          
                              return out_msgs
                          }
                          
                          function GenerateMediaPage(page: PageMedia): Payload[] {
                              var id = page.items[0].id
                              var out_msgs: Array<Payload> = [];
                              out_msgs.push({ payload: "pageType~cardMedia" });
                          
                              if (existsObject(id)) {
                                  let o = getObject(id);
                                  //let name = o.common.name.de;
                                  let name = getState(spotifyInstanz + ".player.contextDescription").val;
                                  let media_icon = Icons.GetIcon("spotify");
                                  let title = getState(spotifyInstanz + ".player.trackName").val;
                                  let author = getState(spotifyInstanz + ".player.artistName").val
                                  let volume = getState(spotifyInstanz + ".player.volume").val;
                                  var iconplaypause = Icons.GetIcon("pause"); //pause
                                  if (getState(spotifyInstanz + ".player.isPlaying").val) {
                                      iconplaypause = Icons.GetIcon("pause"); //pause
                                  } else {
                                      iconplaypause = Icons.GetIcon("play"); //play
                                  }
                                  let currentSpeaker = getState(spotifyInstanz + ".player.device.name").val
                                  let speakerlist = getState(spotifyInstanz + ".devices.deviceListString").val.replace(/;/g,"?");
                                  let onoffbutton = 1;
                          
                                  out_msgs.push({ payload: "entityUpd~" + 
                                                            name + "~" +
                                                            id + "~" +
                                                            "~" +         //????
                                                            media_icon + "~" +
                                                            title + "~" +
                                                            author + "~" +
                                                            volume + "~" +
                                                            iconplaypause + "~" +
                                                            currentSpeaker + "~" +
                                                            speakerlist + "~" +
                                                            onoffbutton});
                              }
                          
                              return out_msgs
                          }
                          
                          function GenerateAlarmPage(page: PageAlarm): Payload[] {
                              var id = page.items[0].id
                              var out_msgs: Array<Payload> = [];
                              out_msgs.push({ payload: "pageType~cardAlarm" });
                          
                              var armed: boolean = false;
                              
                              if (armed) {
                                  var arm1 = "Deaktivieren";                  //arm1*~*
                                  var arm1ActionName = "D1";                  //arm1ActionName*~*
                                  var arm2 = "";                              //arm2*~*
                                  var arm2ActionName = "";                    //arm2ActionName*~*
                                  var arm3 = "";                              //arm3*~*
                                  var arm3ActionName = "";                    //arm3ActionName*~*
                                  var arm4 = "";                              //arm4*~*
                                  var arm4ActionName = "";                    //arm4ActionName*~*
                                  var icon = Icons.GetIcon("shield-home");    //icon*~*
                                  var iconcolor = 63488;                      //iconcolor*~*
                                  var numpadStatus = 1;                       //numpadStatus*~*
                                  var flashing = 1;                           //flashing*
                              } 
                              else {
                                  var arm1 = "Alarm 1";                       //arm1*~*
                                  var arm1ActionName = "A1";                  //arm1ActionName*~*
                                  var arm2 = "Alarm 2";                       //arm2*~*
                                  var arm2ActionName = "A2";                  //arm2ActionName*~*
                                  var arm3 = "Alarm 3";                       //arm3*~*
                                  var arm3ActionName = "A3";                  //arm3ActionName*~*
                                  var arm4 = "Alarm 4";                       //arm4*~*
                                  var arm4ActionName = "A4";                  //arm4ActionName*~*
                                  var icon = Icons.GetIcon("shield-off");     //icon*~*
                                  var iconcolor = 2016;                       //iconcolor*~*
                                  var numpadStatus = 1;                       //numpadStatus*~*
                                  var flashing = 1;                           //flashing*        
                              }
                                  
                              out_msgs.push({ payload:    "entityUpd~" +             //entityUpd~*
                                                          id + "~" +                 //internalNameEntity*~* //navigation*~*
                                                          "~" +                      //???
                                                          arm1 + "~" +               //arm1*~*
                                                          arm1ActionName + "~" +     //arm1ActionName*~*
                                                          arm2 + "~" +               //arm2*~*
                                                          arm2ActionName + "~" +     //arm2ActionName*~*
                                                          arm3 + "~" +               //arm3*~*
                                                          arm3ActionName + "~" +     //arm3ActionName*~*
                                                          arm4 + "~" +               //arm4*~*
                                                          arm4ActionName + "~" +     //arm4ActionName*~*
                                                          icon + "~" +               //icon*~* 39=Disarmed 35=Shield_Home, 40
                                                          iconcolor + "~" +          //iconcolor*~* 2016=green  63488=red
                                                          numpadStatus + "~" +       //numpadStatus*~*
                                                          flashing});                //flashing*
                          
                              return out_msgs
                          }
                          
                          function setIfExists(id: string, value: any, type: string | null = null): boolean {
                              if (type === null) {
                                  if (existsState(id)) {
                                      setState(id, value);
                                      return true;
                                  }
                              }
                              else {
                                  let obj = getObject(id);
                                  if (existsState(id) && obj.common.type !== undefined && obj.common.type === type) {
                                      setState(id, value);
                                      return true;
                                  }
                              }
                              return false;
                          }
                          
                          function toggleState(id: string): boolean {
                              let obj = getObject(id);
                              if (existsState(id) && obj.common.type !== undefined && obj.common.type === "boolean") {
                                  setState(id, !getState(id).val);
                                  return true;
                              }
                              return false;
                          }
                          
                          function HandleButtonEvent(words): void {
                              let id = words[2]
                              let buttonAction = words[3];
                          
                              switch (buttonAction) {
                                  case "bNext":
                                      var pageNum = ((pageId + 1) % config.pages.length);
                                      pageId = Math.abs(pageNum);
                                      UnsubscribeWatcher();
                                      GeneratePage(config.pages[pageId]);
                                      break;
                                  case "bPrev":
                                      var pageNum = ((pageId - 1) % config.pages.length);
                                      pageId = Math.abs(pageNum);
                                      UnsubscribeWatcher();
                                      GeneratePage(config.pages[pageId]);
                                      break;
                                  case "bExit":
                                      if (config.screenSaverDoubleClick) {
                                          if (words[4] == 2)
                                              GeneratePage(config.pages[pageId]);
                                      }
                                      else
                                          GeneratePage(config.pages[pageId]);
                                      break;
                                  case "OnOff":
                                      if (existsObject(id)) {
                                          var action = false
                                          if (words[4] == "1")
                                              action = true
                                          let o = getObject(id)
                                          switch (o.common.role) {
                                              case "light":
                                                  setIfExists(id + ".SET", action);
                                                  break;
                                              case "dimmer":
                                                  setIfExists(id + ".ON_SET", action) ? true : setIfExists(id + ".ON_ACTUAL", action);
                                          }
                                      }
                                      break;
                                  case "up":
                                      setIfExists(id + ".OPEN", true)
                                      break;
                                  case "stop":
                                      setIfExists(id + ".STOP", true)
                                      break;
                                  case "down":
                                      setIfExists(id + ".CLOSE", true)
                                      break;
                                  case "button":
                                      toggleState(id + ".SET") ? true : toggleState(id + ".ON_SET")
                                      break;
                                  case "positionSlider":
                                  case "brightnessSlider":
                                      setIfExists(id + ".SET", parseInt(words[4])) ? true : setIfExists(id + ".ACTUAL", parseInt(words[4]));
                                      break;
                                  case "tempUpd":
                                      setIfExists(id + ".SET", parseInt(words[4]) / 10)
                                      break;
                                  case "media-back":
                                      setIfExists(spotifyInstanz + ".player.skipMinus", true)
                                      break;
                                  case "media-pause":
                                      if (getState(spotifyInstanz + ".player.isPlaying").val === true) {
                                          setIfExists(spotifyInstanz + ".player.pause", true)
                                      } else {
                                          setIfExists(spotifyInstanz + ".player.play", true)
                                      }
                                      break;
                                  case "media-next":
                                      setIfExists(spotifyInstanz + ".player.skipPlus", true)
                                      break;
                                  case "volumeSlider":
                                      setIfExists(spotifyInstanz + ".player.volume", parseInt(words[4]))
                                      break;
                                  case "speaker-sel":
                                      console.log("auf mediaCard - speaker-sel - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;
                                  case "A1": //Alarm-Page Alarm 1 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;
                                  case "A2": //Alarm-Page Alarm 2 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;  
                                  case "A3": //Alarm-Page Alarm 3 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;  
                                  case "A4": //Alarm-Page Alarm 4 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;         
                                  case "D1": //Alarm-Page Alarm Deaktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;  
                                  default:
                                      break;
                              }
                          }
                          
                          function GetNavigationString(pageId: number): string {
                              switch (pageId) {
                                  case 0:
                                      return "0|1";
                                  case config.pages.length - 1:
                                      return "1|0";
                                  case -1:
                                      return "0|0";
                                  default:
                                      return "1|1";
                              }
                          }
                          
                          function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
                          
                              var out_msgs: Array<Payload> = [];
                              let id = pageItem.id
                              if (existsObject(id)) {
                                  var o = getObject(id)
                                  var val: (boolean | number) = 0;
                                  let icon = Icons.GetIcon("lightbulb");
                                  var iconColor = rgb_dec565(config.defaultColor);
                                  if (type == "popupLight") {
                                      let switchVal = "0"
                                      if (o.common.role == "light") {
                                          if (existsState(id + ".GET")) {
                                              val = getState(id + ".GET").val;
                                              RegisterDetailEntityWatcher(id + ".GET", pageItem, type);
                                          }
                                          else if (existsState(id + ".SET")) {
                                              val = getState(id + ".SET").val;
                                              RegisterDetailEntityWatcher(id + ".SET", pageItem, type);
                                          }
                          
                                          if (val) {
                                              switchVal = "1";
                                              iconColor = GetIconColor(pageItem, true, false);
                                          }
                          
                                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + + iconColor + "~" + switchVal + ",disable,disable,disable" })
                                      }
                          
                                      if (o.common.role == "dimmer") {
                                          if (existsState(id + ".ON_ACTUAL")) {
                                              val = getState(id + ".ON_ACTUAL").val;
                                              RegisterDetailEntityWatcher(id + ".ON_ACTUAL", pageItem, type);
                                          }
                          
                                          else if (existsState(id + ".ON_SET")) {
                                              val = getState(id + ".ON_SET").val;
                                              RegisterDetailEntityWatcher(id + ".ON_SET", pageItem, type);
                                          }
                          
                                          if (val === true) {
                                              var iconColor = GetIconColor(pageItem, val, false);
                                              switchVal = "1"
                                          }
                                          let brightness = 0;
                                          if (existsState(id + ".ACTUAL")) {
                                              brightness = Math.trunc(scale(getState(id + ".ACTUAL").val, 0, 100, 0, 100))
                                              iconColor = GetIconColor(pageItem, brightness, false);
                                              RegisterDetailEntityWatcher(id + ".ACTUAL", pageItem, type);
                                          }
                                          let colorTemp = "disable"
                                          let colorMode = "disable"
                                          //let attr_support_color = attr.supported_color_modes
                                          //if (attr_support_color.includes("color_temp"))
                                          // colortemp = Math.trunc(scale(attr.color_temp, attr.min_mireds, attr.max_mireds, 0, 100))
                          
                                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + iconColor + "~" + switchVal + "~" + brightness + "~" + colorTemp + "~" + colorMode })
                                      }
                          
                                  }
                          
                                  if (type == "popupShutter") {
                                      if (existsState(id + ".ACTUAL"))
                                          val = getState(id + ".ACTUAL").val;
                                      else if (existsState(id + ".SET"))
                                          val = getState(id + ".SET").val;
                                      out_msgs.push({ payload: "entityUpdateDetail," + val })
                                  }
                              }
                              return out_msgs
                          }
                          
                          function scale(number: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
                              return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
                          }
                          
                          function UnsubscribeWatcher(): void {
                              for (const [key, value] of Object.entries(subscriptions)) {
                                  unsubscribe(value);
                                  delete subscriptions[key]
                              }
                          }
                          
                          function HandleScreensaver(): void {
                              SendToPanel({ payload: "pageType~screensaver"})
                              UnsubscribeWatcher();
                              HandleScreensaverUpdate();
                          }
                          
                          function HandleScreensaverUpdate(): void {
                              if (screensaverEnabled && config.weatherEntity != null && existsObject(config.weatherEntity)) {
                                  var icon = getState(config.weatherEntity + ".ICON").val;
                           
                                  let temperature: string =
                                      existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
                                          existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
                           
                                  let payloadString =
                                      "weatherUpdate~" + Icons.GetIcon(GetAccuWeatherIcon(parseInt(icon))) + "~"
                                      + temperature + " " + config.temperatureUnit + "~"
                           
                          /*-------------------------------------------------------------------------------------------------------------------------------------*/
                                  if (weatherForecast == true) {
                                      // Accu-Weather Forecast Tag 2 - Tag 5 -- Wenn weatherForecast = true
                                      for (let i = 2; i < 6; i++) {
                                          let TempMax = getState("accuweather.0.Summary.TempMax_d" + i).val;
                                          let DayOfWeek = getState("accuweather.0.Summary.DayOfWeek_d" + i).val;
                                          let WeatherIcon = GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                                          payloadString += DayOfWeek + "~" + Icons.GetIcon(WeatherIcon) + "~" + TempMax + " °C~";
                                      }
                                  } 
                                  else {
                                      //In Config definierte Zustände wenn weatherForecast = false
                                      payloadString += GetScreenSaverEntityString(config.firstScreensaverEntity);
                                      payloadString += GetScreenSaverEntityString(config.secondScreensaverEntity);
                                      payloadString += GetScreenSaverEntityString(config.thirdScreensaverEntity);
                                      payloadString += GetScreenSaverEntityString(config.fourthScreensaverEntity);
                                  }
                          /*-------------------------------------------------------------------------------------------------------------------------------------*/
                           
                                  SendToPanel(<Payload>{ payload: payloadString });
                              }
                          }
                          
                          function GetScreenSaverEntityString(configElement: ScreenSaverElement | null): string {
                              if (configElement != null && configElement.ScreensaverEntity != null && existsState(configElement.ScreensaverEntity)) {
                                  let u1 = getState(configElement.ScreensaverEntity).val;
                                  return configElement.ScreensaverEntityText + "~" + Icons.GetIcon(configElement.ScreensaverEntityIcon) + "~" + u1 + " " + configElement.ScreensaverEntityUnitText + "~";
                              }
                              else {
                                  return "~~~";
                              }
                          }
                          
                          function GetAccuWeatherIcon(icon: number): string {
                              switch (icon) {
                                  case 24:        // Ice        
                                  case 30:        // Hot    
                                  case 31:        // Cold    
                                      return "window-open";  // exceptional
                          
                                  case 7:         // Cloudy
                                  case 8:         // Dreary (Overcast)        
                                  case 38:        // Mostly Cloudy
                                      return "weather-cloudy";  // cloudy
                          
                                  case 11:        // fog
                                      return "weather-fog";  // fog
                          
                                  case 25:        // Sleet    
                                      return "weather-hail";  // Hail
                          
                                  case 15:        // T-Storms    
                                      return "weather-lightning";  // lightning
                          
                                  case 16:        // Mostly Cloudy w/ T-Storms
                                  case 17:        // Partly Sunny w/ T-Storms
                                  case 41:        // Partly Cloudy w/ T-Storms       
                                  case 42:        // Mostly Cloudy w/ T-Storms
                                      return "weather-lightning-rainy";  // lightning-rainy
                          
                                  case 33:        // Clear
                                  case 34:        // Mostly Clear
                                  case 37:        // Hazy Moonlight
                                      return "weather-night";
                          
                                  case 3:         // Partly Sunny
                                  case 4:         // Intermittent Clouds
                                  case 6:         // Mostly Cloudy
                                  case 35: 	    // Partly Cloudy
                                  case 36: 	    // Intermittent Clouds
                                      return "weather-partly-cloudy";  // partlycloudy 
                          
                                  case 18:        // pouring
                                      return "weather-pouring";  // pouring
                          
                                  case 12:        // Showers
                                  case 13:        // Mostly Cloudy w/ Showers
                                  case 14:        // Partly Sunny w/ Showers      
                                  case 26:        // Freezing Rain
                                  case 39:        // Partly Cloudy w/ Showers
                                  case 40:        // Mostly Cloudy w/ Showers
                                      return "weather-rainy";  // rainy
                          
                                  case 19:        // Flurries
                                  case 20:        // Mostly Cloudy w/ Flurries
                                  case 21:        // Partly Sunny w/ Flurries
                                  case 22:        // Snow
                                  case 23:        // Mostly Cloudy w/ Snow
                                  case 43:        // Mostly Cloudy w/ Flurries
                                  case 44:        // Mostly Cloudy w/ Snow
                                      return "weather-snowy";  // snowy
                          
                                  case 29:        // Rain and Snow
                                      return "weather-snowy-rainy";  // snowy-rainy
                          
                                  case 1:         // Sunny
                                  case 2: 	    // Mostly Sunny
                                  case 5:         // Hazy Sunshine
                                      return "weather-sunny";  // sunny
                          
                                  case 32:        // windy
                                      return "weather-windy";  // windy
                          
                                  default:
                                      return "alert-circle-outline";
                              }
                          }
                          
                          function GetBlendedColor(percentage: number): RGB {
                              if (percentage < 50)
                                  return Interpolate(config.defaultOffColor, config.defaultOnColor, percentage / 50.0);
                              return Interpolate(Red, White, (percentage - 50) / 50.0);
                          }
                          
                          function Interpolate(color1: RGB, color2: RGB, fraction: number): RGB {
                              var r: number = InterpolateNum(color1.red, color2.red, fraction);
                              var g: number = InterpolateNum(color1.green, color2.green, fraction);
                              var b: number = InterpolateNum(color1.blue, color2.blue, fraction);
                              return <RGB>{ red: Math.round(r), green: Math.round(g), blue: Math.round(b) };
                          }
                          
                          function InterpolateNum(d1: number, d2: number, fraction: number): number {
                              return d1 + (d2 - d1) * fraction;
                          }
                          
                          function rgb_dec565(rgb: RGB): number {
                              return ((Math.floor(rgb.red / 255 * 31) << 11) | (Math.floor(rgb.green / 255 * 63) << 5) | (Math.floor(rgb.blue / 255 * 31)));
                          }
                          
                          type RGB = {
                              red: number,
                              green: number,
                              blue: number
                          };
                          
                          type Payload = {
                              payload: string;
                          };
                          
                          type Page = {
                              type: string,
                              heading: string,
                              items: PageItem[],
                              useColor: boolean
                          };
                          
                          interface PageEntities extends Page {
                              type: "cardEntities",
                              items: PageItem[],
                          
                          };
                          interface PageGrid extends Page {
                              type: "cardGrid",
                              items: PageItem[],
                          };
                          
                          interface PageThermo extends Page {
                              type: "cardThermo",
                              items: PageItem[],
                          };
                          
                          interface PageMedia extends Page {
                              type: "cardMedia",
                              items: PageItem[],
                          };
                          
                          interface PageAlarm extends Page {
                              type: "cardAlarm",
                              items: PageItem[],
                          };
                          
                          type PageItem = {
                              id: string,
                              icon: (string | undefined),
                              onColor: (RGB | undefined),
                              offColor: (RGB | undefined),
                              useColor: (boolean | undefined),
                              interpolateColor: (boolean | undefined),
                              minValue: (number | undefined),
                              maxValue: (number | undefined),
                              name: (string | undefined)
                          }
                          
                          type Config = {
                              panelRecvTopic: string,
                              panelSendTopic: string,
                              timeoutScreensaver: number,
                              dimmode: number,
                              //brightnessScreensaver:
                              locale: string,
                              timeFormat: string,
                              dateFormat: string,
                              weatherEntity: string | null,
                              screenSaverDoubleClick: boolean,
                              temperatureUnit: string,
                              firstScreensaverEntity: ScreenSaverElement | null,
                              secondScreensaverEntity: ScreenSaverElement | null,
                              thirdScreensaverEntity: ScreenSaverElement | null,
                              fourthScreensaverEntity: ScreenSaverElement | null,
                              defaultColor: RGB,
                              defaultOnColor: RGB,
                              defaultOffColor: RGB,
                              pages: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid)[],
                              button1Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                              button2Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                          };
                          
                          type ScreenSaverElement = {
                              ScreensaverEntity: string | null,
                              ScreensaverEntityIcon: string | null,
                              ScreensaverEntityText: string | null,
                              ScreensaverEntityUnitText: string | null,
                          }
                          
                          
                          • Unter ioBroker/Skripte weiteres Type-Script unter global !!!! (nicht common, etc) anlegen (Name: Blabla oder NSPanel_icon_mapping, etc)

                          • Inhalt aus Datei icon_mapping.ts von Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker (nicht wundern, wenn die etwas zerrissen aussieht - Fragezeichen, etc.)

                          • Beide Skripte starten nicht vergessen

                          Ab jetzt holt sich das Hauptscript (Inhalt der NsPanelTs.ts) die Icons aus der Mapping-Datei.

                          Jetzt noch NSPanel-Parameter (ALIASE, MQTT-anpassen, Datenpunkte) anpassen oder weitere Seiten gestalten und einfügen
                          Sollten weitere oder andere Icons gewünscht sein dann auf https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html nachsehen und den Namen entsprechend an der Stelle des Icons im TypeScript "NSPanelTs" tauschen.

                          Noch ein kleiner Hinweis. Der MQTT-Adpter benötigt noch den Datenpunkt "CustomSend". Einfach in der Tasmota-Konsole folgende Zeile absenden. Danach sollte der MQTT-Adapter den Datenpunkt anlegen und abonieren.

                          CustomSend time~15:42
                          

                          Ich hoffe das hilft :+1:

                          ArmilarA Offline
                          ArmilarA Offline
                          Armilar
                          Most Active Forum Testing
                          schrieb am zuletzt editiert von Armilar
                          #214

                          @armilar sagte in Sonoff NSPanel:

                          @mikewolf sagte in Sonoff NSPanel:

                          Hallo wenn ich ts script starte kommt

                          Javascript.0 (1002) script.js.HPCLTEST.Skript_3NS: TypeScript compilation failed: var Icons = new IconsSelector(); ^ ERROR: Cannot find name 'IconsSelector'.
                          
                          

                          Gibts eine step by step anleitung ?? probiere seit über einer Woche das zum laufen zu bekommen,
                          und dieser Thread ist etwas unübersichtlich geworden ..Speziell für nen neuanfang !

                          Mit freundlichen Grüßen
                          mikewolf

                          Ich versuche es mal:

                          • Tasmota flashen (analog Anleitung @haus-automatisierung) Die ist schon echt super erklärt! - Vielleicht macht er ja hierzu auch ein Video ;-)
                          • autoexec.be in Tasmota Konsole/Verwalte Dateisystem anlegen
                          • Nachfolgenden Befehl in Tasmota-Konsole ausführen
                          Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
                          
                          • NSPanel TFT Flashen mit (aktuelle Version 2.0.7):
                          FlashNextion http://nspanel.pky.eu/lui-release.tft
                          

                          Das NSPanel kurz rebooten - kann nicht schaden - Danach wartet es auf Infos von ioBroker

                          • TypeScript unter ioBroker/Skripte anlegen analog Britzelpuf auf Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker Inhalt aus der NsPanelTs.ts übernehmen oder mein Script verwenden:

                          (@britzelpuf hat eine Anpassung auf das letzte Release 1.9.1 auf 2.0.7 von @joBr99 gemacht. Daher dringend das neueste TS-Script verwenden, sonst läuft es nicht)

                          var Icons = new IconsSelector();
                          
                          const Months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
                          const Days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
                          const Red: RGB = { red: 255, green: 0, blue: 0 };
                          const White: RGB = { red: 255, green: 255, blue: 255 };
                          const Off: RGB = { red: 68, green: 115, blue: 158 };
                          const On: RGB = { red: 253, green: 216, blue: 53 };
                          const BatteryFull: RGB = { red: 96, green: 176, blue: 62 }
                          const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 }
                          
                          //----Möglichkeit, im Screensaver zwischen Accu-Weather Forcast oder selbstdefinierten Werten zu wählen---------------------------------
                          var weatherForecast = true; //true = WheatherForecast 5 Days --- false = Config --> firstScreensaverEntity - fourthScreensaverEntity ...
                          //Spotify Instanz
                          var spotifyInstanz = "spotify-premium.0"
                          
                          var Buero_Seite_1: PageEntities =
                          {
                              "type": "cardEntities",
                              "heading": "Büro",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.MyTestbutton", icon: "lightbulb", offColor: Off, onColor: On, name: "Taster"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power" }
                              ]
                          };
                          
                          var Buero_Seite_2: PageGrid =
                          {
                              "type": "cardGrid",
                              "heading": "Büro",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", name: "Schreibtisch"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", name: "Deckenlampe"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power"},
                                  <PageItem>{ id: "alias.0.NSPanel_1.Radio.TuneIn", icon: "play"}
                              ]
                          };
                          
                          var Spotify: PageMedia = 
                          {
                              "type": "cardMedia",
                              "heading": "Spotify",
                              "useColor": false,
                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Spotify" }]
                          };
                          
                          var Buero_Themostat: PageThermo = 
                          {
                              "type": "cardThermo",
                              "heading": "Thermostat",
                              "useColor": true,
                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Thermostat_Büro" }]
                          };
                          
                          var Buero_Alarm: PageAlarm = 
                          {
                              "type": "cardAlarm",
                              "heading": "Alarm",
                              "useColor": true,
                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alarm" }]
                          };
                          
                          var button1Page: PageGrid =
                          {
                              "type": "cardGrid",
                              "heading": "Radio",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.Radio.NJoy" },
                                  <PageItem>{ id: "alias.0.Radio.Delta_Radio" },
                                  <PageItem>{ id: "alias.0.Radio.NDR2" },
                              ]
                          };
                          
                          var button2Page: PageEntities =
                          {
                              "type": "cardEntities",
                              "heading": "Knopf2",
                              "useColor": true,
                              "items": [
                                  <PageItem>{ id: "alias.0.Schlafen" },
                                  <PageItem>{ id: "alias.0.Stern" }
                              ]
                          };
                          
                          export const config: Config = {
                              panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //anpassen
                              panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //anpassen
                              firstScreensaverEntity: { ScreensaverEntity: "hmip.0.devices.3014F711A000185BE9922BCF.channels.1.humidity", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
                              secondScreensaverEntity: { ScreensaverEntity: "accuweather.0.Daily.Day1.Day.PrecipitationProbability", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" },
                              thirdScreensaverEntity: { ScreensaverEntity: "0_userdata.0.Wetter.Windstaerke_homaticIP", ScreensaverEntityIcon: "weather-windy", ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: "bft" },
                              fourthScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.UVIndex", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "UV", ScreensaverEntityUnitText: "" },
                              timeoutScreensaver: 15,
                              dimmode: 8,
                              screenSaverDoubleClick: false,
                              locale: "de_DE",
                              timeFormat: "%H:%M",
                              dateFormat: "%A, %d. %B %Y",
                              weatherEntity: "alias.0.Wetter.Wetter",
                              defaultOffColor: Off,
                              defaultOnColor: On,
                              defaultColor: Off,
                              temperatureUnit: "°C",
                              pages: [Buero_Seite_1, 
                                      Buero_Seite_2, 
                                      Spotify,
                                      Buero_Themostat,
                                      Buero_Alarm
                              ],
                              button1Page: button1Page,
                              button2Page: button2Page
                          };
                          
                          
                          // _________________________________ Ab hier keine Konfiguration mehr _____________________________________
                          
                          var subscriptions: any = {};
                          var screensaverEnabled : boolean = false;
                          var pageId = 0;
                          
                          schedule("* * * * *", function () {
                              SendTime();
                          });
                          schedule("0 * * * *", function () {
                              SendDate();
                          });
                          
                          
                          // Only monitor the extra nodes if present
                          var updateArray: string[] = [];
                          if (config.firstScreensaverEntity !== null && config.firstScreensaverEntity.ScreensaverEntity != null && existsState(config.firstScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.firstScreensaverEntity.ScreensaverEntity)
                          }
                          if (config.secondScreensaverEntity !== null && config.secondScreensaverEntity.ScreensaverEntity != null && existsState(config.secondScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.secondScreensaverEntity.ScreensaverEntity)
                          }
                          if (config.thirdScreensaverEntity !== null && config.thirdScreensaverEntity.ScreensaverEntity != null && existsState(config.thirdScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.thirdScreensaverEntity.ScreensaverEntity)
                          }
                          if (config.fourthScreensaverEntity !== null && config.fourthScreensaverEntity.ScreensaverEntity != null && existsState(config.fourthScreensaverEntity.ScreensaverEntity)) {
                              updateArray.push(config.fourthScreensaverEntity.ScreensaverEntity)
                          }
                          
                          if (updateArray.length > 0) {
                              on(updateArray, function () {
                                  HandleScreensaverUpdate();
                              })
                          }
                          on({ id: config.panelRecvTopic }, function (obj) {
                              if (obj.state.val.startsWith('\{"CustomRecv":')) {
                                  var json = JSON.parse(obj.state.val);
                          
                                  var split = json.CustomRecv.split(",");
                                  HandleMessage(split[0], split[1], parseInt(split[2]), split);
                              }
                          });
                          
                          function SendToPanel(val: Payload | Payload[]): void {
                              if (Array.isArray(val)) {
                                  val.forEach(function (id, i) {
                                      setState(config.panelSendTopic, id.payload);
                                  });
                              }
                              else
                                  setState(config.panelSendTopic, val.payload);
                          }
                          
                          function HandleMessage(typ: string, method: string, page: number, words: Array<string>): void {
                              if (typ == "event") {
                                  switch (method) {
                                      case "startup":
                                          screensaverEnabled = false;
                                          UnsubscribeWatcher();
                                          HandleStartupProcess();
                                          pageId = 0;
                                          GeneratePage(config.pages[0]);
                                          break;
                                      case "sleepReached":
                                          screensaverEnabled = true;
                                          HandleScreensaver();
                                          break;
                                      case "pageOpenDetail":
                                          screensaverEnabled = false;
                                          UnsubscribeWatcher();
                                          let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
                                          if (pageItem !== undefined)
                                              SendToPanel(GenerateDetailPage(words[2], pageItem));
                                      case "buttonPress2":
                                          screensaverEnabled = false;
                                          HandleButtonEvent(words);
                                          break;
                                      case "button1":
                                      case "button2":
                                          screensaverEnabled = false;
                                          HandleHardwareButton(method);
                                      default:
                                          break;
                                  }
                              }
                          }
                          
                          function GeneratePage(page: Page): void {
                              switch (page.type) {
                                  case "cardEntities":
                                      SendToPanel(GenerateEntitiesPage(<PageEntities>page));
                                      break;
                                  case "cardThermo":
                                      SendToPanel(GenerateThermoPage(<PageThermo>page));
                                      break;
                                  case "cardGrid":
                                      SendToPanel(GenerateGridPage(<PageGrid>page));
                                      break;
                                  case "cardMedia":
                                      SendToPanel(GenerateMediaPage(<PageMedia>page));
                                      break;
                                  case "cardAlarm":
                                      SendToPanel(GenerateAlarmPage(<PageAlarm>page));
                                      break;
                              }
                          }
                          
                          function HandleHardwareButton(method: string): void {
                              let page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid);
                              if (config.button1Page !== null && method == "button1") {
                                  page = config.button1Page;
                              }
                              else if (config.button2Page !== null && method == "button2") {
                                  page = config.button2Page;
                              }
                              else {
                                  return;
                              }
                          
                              // Set pageId to -1, because of the navigation arrows
                              let tempPageId = pageId;
                              pageId = -1;
                              GeneratePage(page);
                              pageId = tempPageId;
                          }
                          
                          function HandleStartupProcess(): void {
                              SendDate();
                              SendTime();
                              SendToPanel({ payload: "timeout~" + config.timeoutScreensaver });
                              SendToPanel({ payload: "dimmode~" + config.dimmode });
                          }
                          
                          function SendDate(): void {
                              var d = new Date();
                              var day = Days[d.getDay()];
                              var date = d.getDate();
                              var month = Months[d.getMonth()];
                              var year = d.getFullYear();
                              var _sendDate = "date~" + day + " " + date + " " + month + " " + year;
                              SendToPanel(<Payload>{ payload: _sendDate });
                          }
                          
                          function SendTime(): void {
                              var d = new Date();
                              var hr = d.getHours().toString();
                              var min = d.getMinutes().toString();
                          
                              if (d.getHours() < 10) {
                                  hr = "0" + d.getHours().toString();
                              }
                              if (d.getMinutes() < 10) {
                                  min = "0" + d.getMinutes().toString();
                              }
                              SendToPanel(<Payload>{ payload: "time~" + hr + ":" + min });
                          }
                          
                          function GenerateEntitiesPage(page: PageEntities): Payload[] {
                              var out_msgs: Array<Payload> = [];
                              out_msgs = [{ payload: "pageType~cardEntities" }]
                              out_msgs.push({ payload: GeneratePageElements(page) });
                              return out_msgs
                          }
                          
                          function GenerateGridPage(page: PageGrid): Payload[] {
                              var out_msgs: Array<Payload> = [];
                              out_msgs = [{ payload: "pageType~cardGrid" }]
                              out_msgs.push({ payload: GeneratePageElements(page) });
                              return out_msgs
                          }
                          
                          function GeneratePageElements(page: Page): string {
                              let maxItems = 0;
                              switch (page.type) {
                                  case "cardThermo":
                                      maxItems = 1;
                                      break;
                                  case "cardAlarm":
                                      maxItems = 1;
                                      break;
                                  case "cardMedia":
                                      maxItems = 1;
                                      break;
                                  case "cardEntities":
                                      maxItems = 4;
                                      break;
                                  case "cardGrid":
                                      maxItems = 6;
                                      break;
                              }
                              let pageData = "entityUpd~" + page.heading + "~" + GetNavigationString(pageId)
                              for (let index = 0; index < maxItems; index++) {
                                  if (page.items[index] !== undefined) {
                                      pageData += CreateEntity(page.items[index], index + 1, page.useColor);
                                  }
                                  else {
                                      pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1);
                                  }
                              }
                              return pageData;
                          }
                          
                          function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
                              var iconId = "0"
                              if (pageItem.id == "delete") {
                                  return "~delete~~~~~"
                              }
                              var name: string;
                              var type: string;
                              // ioBroker
                              if (existsObject(pageItem.id)) {
                                  let o = getObject(pageItem.id)
                                  var val = null;
                                  name = pageItem.name !== undefined ? pageItem.name : o.common.name.de
                          
                                  if (existsState(pageItem.id + ".GET")) {
                                      val = getState(pageItem.id + ".GET").val;
                                      RegisterEntityWatcher(pageItem.id + ".GET");
                                  }
                                  else if (existsState(pageItem.id + ".SET")) {
                                      val = getState(pageItem.id + ".SET").val;
                                      RegisterEntityWatcher(pageItem.id + ".SET");
                                  }
                                  var iconColor = rgb_dec565(config.defaultColor);
                          
                                  switch (o.common.role) {
                                      case "light":
                                          type = "light"
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                          var optVal = "0"
                          
                                          if (val === true || val === "true") {
                                              optVal = "1"
                                              iconColor = GetIconColor(pageItem, true, useColors);
                                          }
                          
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                          
                                      case "dimmer":
                                          type = "light"
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                          var optVal = "0"
                                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                              val = getState(pageItem.id + ".ON_ACTUAL").val;
                                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                          }
                                          else if (existsState(pageItem.id + ".ON_SET")) {
                                              val = getState(pageItem.id + ".ON_SET").val;
                                              RegisterEntityWatcher(pageItem.id + ".ON_SET");
                                          }
                                          if (val === true || val === "true") {
                                              optVal = "1"
                                              iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                          }
                          
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                          
                                      case "blind":
                                          type = "shutter"
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("window-open");
                                          iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~"
                          
                                      case "info":
                                      case "value.temperature":
                                      case "thermostat":
                                          type = "text";
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == "value.temperature" || o.common.role == "thermostat" ? Icons.GetIcon("thermometer") : Icons.GetIcon("information-outline");
                                          let unit = "";
                                          var optVal = "0"
                                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                              optVal = getState(pageItem.id + ".ON_ACTUAL").val;
                                              unit = GetUnitOfMeasurement(pageItem.id + ".ON_ACTUAL");
                                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                          }
                                          else if (existsState(pageItem.id + ".ACTUAL")) {
                                              optVal = getState(pageItem.id + ".ACTUAL").val;
                                              unit = GetUnitOfMeasurement(pageItem.id + ".ACTUAL");
                                              RegisterEntityWatcher(pageItem.id + ".ACTUAL");
                                          }
                          
                                          if (o.common.role == "value.temperature") {
                                              iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("thermometer");
                                          }
                          
                                          iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);
                          
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal + " " + unit;
                          
                                      case "button":
                                          type = "button";
                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("gesture-tap-button");
                                          let buttonText = pageItem.name !== undefined ? pageItem.name : "PRESS";
                                          iconColor = GetIconColor(pageItem, true, useColors);
                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + + iconColor + "~" + name + "~" + buttonText;
                          
                                      default:
                                          return "~delete~~~~~";
                                  }
                              }
                          
                              return "~delete~~~~~"
                          }
                          
                          function GetIconColor(pageItem: PageItem, value: (boolean | number), useColors: boolean): number {
                              // dimmer
                              if ((pageItem.useColor || useColors) && pageItem.interpolateColor && typeof (value) === "number") {
                                  let maxValue = pageItem.maxValue !== undefined ? pageItem.maxValue : 100;
                                  let minValue = pageItem.minValue !== undefined ? pageItem.minValue : 0;
                                  value = value > maxValue ? maxValue : value;
                                  value = value < minValue ? minValue : value;
                                  return rgb_dec565(
                                      Interpolate(
                                          pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor,
                                          pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor,
                                          scale(value, minValue, maxValue, 0, 1)
                                      ));
                              }
                          
                              if ((pageItem.useColor || useColors) && ((typeof (value) === "boolean" && value) || value > (pageItem.minValue !== undefined ? pageItem.minValue : 0))) {
                                  return rgb_dec565(pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor)
                              }
                          
                              return rgb_dec565(pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor);
                          }
                          
                          function RegisterEntityWatcher(id: string): void {
                              if (subscriptions.hasOwnProperty(id)) {
                                  return;
                              }
                              subscriptions[id] = (on({ id: id, change: 'any' }, function (data) {
                                  SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });
                              }))
                          }
                          
                          function RegisterDetailEntityWatcher(id: string, pageItem: PageItem, type: string): void {
                              if (subscriptions.hasOwnProperty(id)) {
                                  return;
                              }
                              subscriptions[id] = (on({ id: id, change: 'any' }, function () {
                                  SendToPanel(GenerateDetailPage(type, pageItem));
                              }))
                          }
                          
                          function GetUnitOfMeasurement(id: string): string {
                              if (!existsObject(id))
                                  return "";
                          
                              let obj = getObject(id);
                              if (typeof obj.common.unit !== 'undefined') {
                                  return obj.common.unit
                              }
                          
                              if (typeof obj.common.alias !== 'undefined' && typeof obj.common.alias.id !== 'undefined') {
                                  return GetUnitOfMeasurement(obj.common.alias.id);
                              }
                              return "";
                          }
                          
                          function GenerateThermoPage(page: PageThermo): Payload[] {
                              var id = page.items[0].id
                              var out_msgs: Array<Payload> = [];
                              out_msgs.push({ payload: "pageType~cardThermo" });
                          
                              // ioBroker
                              if (existsObject(id)) {
                                  let o = getObject(id)
                                  let name = page.items[0].name !== undefined ? page.items[0].name : o.common.name.de
                                  let currentTemp = 0;
                                  if (existsState(id + ".ACTUAL"))
                                      currentTemp = (Math.round(parseFloat(getState(id + ".ACTUAL").val) * 10)/10)*10;
                          
                                  let destTemp = 0;
                                  if (existsState(id + ".SET")) {
                                      destTemp = getState(id + ".SET").val.toFixed(2) * 10;
                                      log(id + ".SET " + destTemp)
                                  }
                          
                                  let status = ""
                                  if (existsState(id + ".MODE"))
                                      status = getState(id + ".MODE").val;
                                  let minTemp = 50 //Min Temp 5°C
                                  let maxTemp = 300 //Max Temp 30°C
                                  let stepTemp = 5
                          
                                  //0-4 verwendet bei ungerader Anzahl Parametern
                                  let bt0 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt1 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt2 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt3 = "~~~~"; //verwendet bei ungleichen Parametern
                                  let bt4 = "~~~~"; //verwendet bei ungleichen Parametern
                                  //5-8 verwendet bei gerader Anzahl Parametern
                                  let bt5 = Icons.GetIcon("water-percent") + "~0~1~~";    
                                  let bt6 = Icons.GetIcon("fire") + "~0~1~~";             
                                  let bt7 = Icons.GetIcon("wifi") + "~0~1~~";             
                                  let bt8 = Icons.GetIcon("battery-high") + "~0~1~~";     
                          
                                  if (existsState(id + ".HUMIDITY")){
                                      console.log(parseInt(getState(id + ".HUMIDITY").val));
                                      bt5 =  Icons.GetIcon("water-percent") + "~2016~1~bt8~";
                                      if (parseInt(getState(id + ".HUMIDITY").val) < 40) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                      } else if (parseInt(getState(id + ".HUMIDITY").val) < 30) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 65) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 75) {
                                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                      }
                                  }
                          
                                  if (existsState(id + ".MAINTAIN")){
                                      if (getState(id + ".MAINTAIN").val >> .1) {
                                          bt6 =  Icons.GetIcon("fire") + "~60897~1~bt8~";
                                      } else {
                                          bt6 =  Icons.GetIcon("fire") + "~33840~0~bt8~";
                                      }
                                  }
                          
                                  if (existsState(id + ".UNREACH")){
                                      if (getState(id + ".UNREACH").val) {
                                          bt7 =  Icons.GetIcon("wifi-off") + "~63488~1~bt8~";
                                      } else {
                                          bt7 =  Icons.GetIcon("wifi") + "~2016~1~bt8~";
                                      }
                                  }
                          
                                  if (existsState(id + ".LOWBAT")){
                                      if (getState(id + ".LOWBAT").val) {
                                          bt8 =  Icons.GetIcon("battery-low") + "~63488~1~bt8~";
                                      } else {
                                          bt8 =  Icons.GetIcon("battery-high") + "~2016~1~bt8~";
                                      }
                                  }
                          
                                  let icon_res = bt0 + bt1 + bt2 + bt3 + bt4 + bt5 + bt6 + bt7 + bt8;
                          
                                  out_msgs.push({ payload: "entityUpd~" + name + "~" + GetNavigationString(pageId) + "~" + id + "~" + currentTemp + "~" + destTemp + "~" + status + "~" + minTemp + "~" + maxTemp + "~" + stepTemp + "~" +icon_res})
                              }
                          
                              return out_msgs
                          }
                          
                          function GenerateMediaPage(page: PageMedia): Payload[] {
                              var id = page.items[0].id
                              var out_msgs: Array<Payload> = [];
                              out_msgs.push({ payload: "pageType~cardMedia" });
                          
                              if (existsObject(id)) {
                                  let o = getObject(id);
                                  //let name = o.common.name.de;
                                  let name = getState(spotifyInstanz + ".player.contextDescription").val;
                                  let media_icon = Icons.GetIcon("spotify");
                                  let title = getState(spotifyInstanz + ".player.trackName").val;
                                  let author = getState(spotifyInstanz + ".player.artistName").val
                                  let volume = getState(spotifyInstanz + ".player.volume").val;
                                  var iconplaypause = Icons.GetIcon("pause"); //pause
                                  if (getState(spotifyInstanz + ".player.isPlaying").val) {
                                      iconplaypause = Icons.GetIcon("pause"); //pause
                                  } else {
                                      iconplaypause = Icons.GetIcon("play"); //play
                                  }
                                  let currentSpeaker = getState(spotifyInstanz + ".player.device.name").val
                                  let speakerlist = getState(spotifyInstanz + ".devices.deviceListString").val.replace(/;/g,"?");
                                  let onoffbutton = 1;
                          
                                  out_msgs.push({ payload: "entityUpd~" + 
                                                            name + "~" +
                                                            id + "~" +
                                                            "~" +         //????
                                                            media_icon + "~" +
                                                            title + "~" +
                                                            author + "~" +
                                                            volume + "~" +
                                                            iconplaypause + "~" +
                                                            currentSpeaker + "~" +
                                                            speakerlist + "~" +
                                                            onoffbutton});
                              }
                          
                              return out_msgs
                          }
                          
                          function GenerateAlarmPage(page: PageAlarm): Payload[] {
                              var id = page.items[0].id
                              var out_msgs: Array<Payload> = [];
                              out_msgs.push({ payload: "pageType~cardAlarm" });
                          
                              var armed: boolean = false;
                              
                              if (armed) {
                                  var arm1 = "Deaktivieren";                  //arm1*~*
                                  var arm1ActionName = "D1";                  //arm1ActionName*~*
                                  var arm2 = "";                              //arm2*~*
                                  var arm2ActionName = "";                    //arm2ActionName*~*
                                  var arm3 = "";                              //arm3*~*
                                  var arm3ActionName = "";                    //arm3ActionName*~*
                                  var arm4 = "";                              //arm4*~*
                                  var arm4ActionName = "";                    //arm4ActionName*~*
                                  var icon = Icons.GetIcon("shield-home");    //icon*~*
                                  var iconcolor = 63488;                      //iconcolor*~*
                                  var numpadStatus = 1;                       //numpadStatus*~*
                                  var flashing = 1;                           //flashing*
                              } 
                              else {
                                  var arm1 = "Alarm 1";                       //arm1*~*
                                  var arm1ActionName = "A1";                  //arm1ActionName*~*
                                  var arm2 = "Alarm 2";                       //arm2*~*
                                  var arm2ActionName = "A2";                  //arm2ActionName*~*
                                  var arm3 = "Alarm 3";                       //arm3*~*
                                  var arm3ActionName = "A3";                  //arm3ActionName*~*
                                  var arm4 = "Alarm 4";                       //arm4*~*
                                  var arm4ActionName = "A4";                  //arm4ActionName*~*
                                  var icon = Icons.GetIcon("shield-off");     //icon*~*
                                  var iconcolor = 2016;                       //iconcolor*~*
                                  var numpadStatus = 1;                       //numpadStatus*~*
                                  var flashing = 1;                           //flashing*        
                              }
                                  
                              out_msgs.push({ payload:    "entityUpd~" +             //entityUpd~*
                                                          id + "~" +                 //internalNameEntity*~* //navigation*~*
                                                          "~" +                      //???
                                                          arm1 + "~" +               //arm1*~*
                                                          arm1ActionName + "~" +     //arm1ActionName*~*
                                                          arm2 + "~" +               //arm2*~*
                                                          arm2ActionName + "~" +     //arm2ActionName*~*
                                                          arm3 + "~" +               //arm3*~*
                                                          arm3ActionName + "~" +     //arm3ActionName*~*
                                                          arm4 + "~" +               //arm4*~*
                                                          arm4ActionName + "~" +     //arm4ActionName*~*
                                                          icon + "~" +               //icon*~* 39=Disarmed 35=Shield_Home, 40
                                                          iconcolor + "~" +          //iconcolor*~* 2016=green  63488=red
                                                          numpadStatus + "~" +       //numpadStatus*~*
                                                          flashing});                //flashing*
                          
                              return out_msgs
                          }
                          
                          function setIfExists(id: string, value: any, type: string | null = null): boolean {
                              if (type === null) {
                                  if (existsState(id)) {
                                      setState(id, value);
                                      return true;
                                  }
                              }
                              else {
                                  let obj = getObject(id);
                                  if (existsState(id) && obj.common.type !== undefined && obj.common.type === type) {
                                      setState(id, value);
                                      return true;
                                  }
                              }
                              return false;
                          }
                          
                          function toggleState(id: string): boolean {
                              let obj = getObject(id);
                              if (existsState(id) && obj.common.type !== undefined && obj.common.type === "boolean") {
                                  setState(id, !getState(id).val);
                                  return true;
                              }
                              return false;
                          }
                          
                          function HandleButtonEvent(words): void {
                              let id = words[2]
                              let buttonAction = words[3];
                          
                              switch (buttonAction) {
                                  case "bNext":
                                      var pageNum = ((pageId + 1) % config.pages.length);
                                      pageId = Math.abs(pageNum);
                                      UnsubscribeWatcher();
                                      GeneratePage(config.pages[pageId]);
                                      break;
                                  case "bPrev":
                                      var pageNum = ((pageId - 1) % config.pages.length);
                                      pageId = Math.abs(pageNum);
                                      UnsubscribeWatcher();
                                      GeneratePage(config.pages[pageId]);
                                      break;
                                  case "bExit":
                                      if (config.screenSaverDoubleClick) {
                                          if (words[4] == 2)
                                              GeneratePage(config.pages[pageId]);
                                      }
                                      else
                                          GeneratePage(config.pages[pageId]);
                                      break;
                                  case "OnOff":
                                      if (existsObject(id)) {
                                          var action = false
                                          if (words[4] == "1")
                                              action = true
                                          let o = getObject(id)
                                          switch (o.common.role) {
                                              case "light":
                                                  setIfExists(id + ".SET", action);
                                                  break;
                                              case "dimmer":
                                                  setIfExists(id + ".ON_SET", action) ? true : setIfExists(id + ".ON_ACTUAL", action);
                                          }
                                      }
                                      break;
                                  case "up":
                                      setIfExists(id + ".OPEN", true)
                                      break;
                                  case "stop":
                                      setIfExists(id + ".STOP", true)
                                      break;
                                  case "down":
                                      setIfExists(id + ".CLOSE", true)
                                      break;
                                  case "button":
                                      toggleState(id + ".SET") ? true : toggleState(id + ".ON_SET")
                                      break;
                                  case "positionSlider":
                                  case "brightnessSlider":
                                      setIfExists(id + ".SET", parseInt(words[4])) ? true : setIfExists(id + ".ACTUAL", parseInt(words[4]));
                                      break;
                                  case "tempUpd":
                                      setIfExists(id + ".SET", parseInt(words[4]) / 10)
                                      break;
                                  case "media-back":
                                      setIfExists(spotifyInstanz + ".player.skipMinus", true)
                                      break;
                                  case "media-pause":
                                      if (getState(spotifyInstanz + ".player.isPlaying").val === true) {
                                          setIfExists(spotifyInstanz + ".player.pause", true)
                                      } else {
                                          setIfExists(spotifyInstanz + ".player.play", true)
                                      }
                                      break;
                                  case "media-next":
                                      setIfExists(spotifyInstanz + ".player.skipPlus", true)
                                      break;
                                  case "volumeSlider":
                                      setIfExists(spotifyInstanz + ".player.volume", parseInt(words[4]))
                                      break;
                                  case "speaker-sel":
                                      console.log("auf mediaCard - speaker-sel - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;
                                  case "A1": //Alarm-Page Alarm 1 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;
                                  case "A2": //Alarm-Page Alarm 2 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;  
                                  case "A3": //Alarm-Page Alarm 3 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;  
                                  case "A4": //Alarm-Page Alarm 4 aktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;         
                                  case "D1": //Alarm-Page Alarm Deaktivieren
                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                      break;  
                                  default:
                                      break;
                              }
                          }
                          
                          function GetNavigationString(pageId: number): string {
                              switch (pageId) {
                                  case 0:
                                      return "0|1";
                                  case config.pages.length - 1:
                                      return "1|0";
                                  case -1:
                                      return "0|0";
                                  default:
                                      return "1|1";
                              }
                          }
                          
                          function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
                          
                              var out_msgs: Array<Payload> = [];
                              let id = pageItem.id
                              if (existsObject(id)) {
                                  var o = getObject(id)
                                  var val: (boolean | number) = 0;
                                  let icon = Icons.GetIcon("lightbulb");
                                  var iconColor = rgb_dec565(config.defaultColor);
                                  if (type == "popupLight") {
                                      let switchVal = "0"
                                      if (o.common.role == "light") {
                                          if (existsState(id + ".GET")) {
                                              val = getState(id + ".GET").val;
                                              RegisterDetailEntityWatcher(id + ".GET", pageItem, type);
                                          }
                                          else if (existsState(id + ".SET")) {
                                              val = getState(id + ".SET").val;
                                              RegisterDetailEntityWatcher(id + ".SET", pageItem, type);
                                          }
                          
                                          if (val) {
                                              switchVal = "1";
                                              iconColor = GetIconColor(pageItem, true, false);
                                          }
                          
                                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + + iconColor + "~" + switchVal + ",disable,disable,disable" })
                                      }
                          
                                      if (o.common.role == "dimmer") {
                                          if (existsState(id + ".ON_ACTUAL")) {
                                              val = getState(id + ".ON_ACTUAL").val;
                                              RegisterDetailEntityWatcher(id + ".ON_ACTUAL", pageItem, type);
                                          }
                          
                                          else if (existsState(id + ".ON_SET")) {
                                              val = getState(id + ".ON_SET").val;
                                              RegisterDetailEntityWatcher(id + ".ON_SET", pageItem, type);
                                          }
                          
                                          if (val === true) {
                                              var iconColor = GetIconColor(pageItem, val, false);
                                              switchVal = "1"
                                          }
                                          let brightness = 0;
                                          if (existsState(id + ".ACTUAL")) {
                                              brightness = Math.trunc(scale(getState(id + ".ACTUAL").val, 0, 100, 0, 100))
                                              iconColor = GetIconColor(pageItem, brightness, false);
                                              RegisterDetailEntityWatcher(id + ".ACTUAL", pageItem, type);
                                          }
                                          let colorTemp = "disable"
                                          let colorMode = "disable"
                                          //let attr_support_color = attr.supported_color_modes
                                          //if (attr_support_color.includes("color_temp"))
                                          // colortemp = Math.trunc(scale(attr.color_temp, attr.min_mireds, attr.max_mireds, 0, 100))
                          
                                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + iconColor + "~" + switchVal + "~" + brightness + "~" + colorTemp + "~" + colorMode })
                                      }
                          
                                  }
                          
                                  if (type == "popupShutter") {
                                      if (existsState(id + ".ACTUAL"))
                                          val = getState(id + ".ACTUAL").val;
                                      else if (existsState(id + ".SET"))
                                          val = getState(id + ".SET").val;
                                      out_msgs.push({ payload: "entityUpdateDetail," + val })
                                  }
                              }
                              return out_msgs
                          }
                          
                          function scale(number: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
                              return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
                          }
                          
                          function UnsubscribeWatcher(): void {
                              for (const [key, value] of Object.entries(subscriptions)) {
                                  unsubscribe(value);
                                  delete subscriptions[key]
                              }
                          }
                          
                          function HandleScreensaver(): void {
                              SendToPanel({ payload: "pageType~screensaver"})
                              UnsubscribeWatcher();
                              HandleScreensaverUpdate();
                          }
                          
                          function HandleScreensaverUpdate(): void {
                              if (screensaverEnabled && config.weatherEntity != null && existsObject(config.weatherEntity)) {
                                  var icon = getState(config.weatherEntity + ".ICON").val;
                           
                                  let temperature: string =
                                      existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
                                          existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
                           
                                  let payloadString =
                                      "weatherUpdate~" + Icons.GetIcon(GetAccuWeatherIcon(parseInt(icon))) + "~"
                                      + temperature + " " + config.temperatureUnit + "~"
                           
                          /*-------------------------------------------------------------------------------------------------------------------------------------*/
                                  if (weatherForecast == true) {
                                      // Accu-Weather Forecast Tag 2 - Tag 5 -- Wenn weatherForecast = true
                                      for (let i = 2; i < 6; i++) {
                                          let TempMax = getState("accuweather.0.Summary.TempMax_d" + i).val;
                                          let DayOfWeek = getState("accuweather.0.Summary.DayOfWeek_d" + i).val;
                                          let WeatherIcon = GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                                          payloadString += DayOfWeek + "~" + Icons.GetIcon(WeatherIcon) + "~" + TempMax + " °C~";
                                      }
                                  } 
                                  else {
                                      //In Config definierte Zustände wenn weatherForecast = false
                                      payloadString += GetScreenSaverEntityString(config.firstScreensaverEntity);
                                      payloadString += GetScreenSaverEntityString(config.secondScreensaverEntity);
                                      payloadString += GetScreenSaverEntityString(config.thirdScreensaverEntity);
                                      payloadString += GetScreenSaverEntityString(config.fourthScreensaverEntity);
                                  }
                          /*-------------------------------------------------------------------------------------------------------------------------------------*/
                           
                                  SendToPanel(<Payload>{ payload: payloadString });
                              }
                          }
                          
                          function GetScreenSaverEntityString(configElement: ScreenSaverElement | null): string {
                              if (configElement != null && configElement.ScreensaverEntity != null && existsState(configElement.ScreensaverEntity)) {
                                  let u1 = getState(configElement.ScreensaverEntity).val;
                                  return configElement.ScreensaverEntityText + "~" + Icons.GetIcon(configElement.ScreensaverEntityIcon) + "~" + u1 + " " + configElement.ScreensaverEntityUnitText + "~";
                              }
                              else {
                                  return "~~~";
                              }
                          }
                          
                          function GetAccuWeatherIcon(icon: number): string {
                              switch (icon) {
                                  case 24:        // Ice        
                                  case 30:        // Hot    
                                  case 31:        // Cold    
                                      return "window-open";  // exceptional
                          
                                  case 7:         // Cloudy
                                  case 8:         // Dreary (Overcast)        
                                  case 38:        // Mostly Cloudy
                                      return "weather-cloudy";  // cloudy
                          
                                  case 11:        // fog
                                      return "weather-fog";  // fog
                          
                                  case 25:        // Sleet    
                                      return "weather-hail";  // Hail
                          
                                  case 15:        // T-Storms    
                                      return "weather-lightning";  // lightning
                          
                                  case 16:        // Mostly Cloudy w/ T-Storms
                                  case 17:        // Partly Sunny w/ T-Storms
                                  case 41:        // Partly Cloudy w/ T-Storms       
                                  case 42:        // Mostly Cloudy w/ T-Storms
                                      return "weather-lightning-rainy";  // lightning-rainy
                          
                                  case 33:        // Clear
                                  case 34:        // Mostly Clear
                                  case 37:        // Hazy Moonlight
                                      return "weather-night";
                          
                                  case 3:         // Partly Sunny
                                  case 4:         // Intermittent Clouds
                                  case 6:         // Mostly Cloudy
                                  case 35: 	    // Partly Cloudy
                                  case 36: 	    // Intermittent Clouds
                                      return "weather-partly-cloudy";  // partlycloudy 
                          
                                  case 18:        // pouring
                                      return "weather-pouring";  // pouring
                          
                                  case 12:        // Showers
                                  case 13:        // Mostly Cloudy w/ Showers
                                  case 14:        // Partly Sunny w/ Showers      
                                  case 26:        // Freezing Rain
                                  case 39:        // Partly Cloudy w/ Showers
                                  case 40:        // Mostly Cloudy w/ Showers
                                      return "weather-rainy";  // rainy
                          
                                  case 19:        // Flurries
                                  case 20:        // Mostly Cloudy w/ Flurries
                                  case 21:        // Partly Sunny w/ Flurries
                                  case 22:        // Snow
                                  case 23:        // Mostly Cloudy w/ Snow
                                  case 43:        // Mostly Cloudy w/ Flurries
                                  case 44:        // Mostly Cloudy w/ Snow
                                      return "weather-snowy";  // snowy
                          
                                  case 29:        // Rain and Snow
                                      return "weather-snowy-rainy";  // snowy-rainy
                          
                                  case 1:         // Sunny
                                  case 2: 	    // Mostly Sunny
                                  case 5:         // Hazy Sunshine
                                      return "weather-sunny";  // sunny
                          
                                  case 32:        // windy
                                      return "weather-windy";  // windy
                          
                                  default:
                                      return "alert-circle-outline";
                              }
                          }
                          
                          function GetBlendedColor(percentage: number): RGB {
                              if (percentage < 50)
                                  return Interpolate(config.defaultOffColor, config.defaultOnColor, percentage / 50.0);
                              return Interpolate(Red, White, (percentage - 50) / 50.0);
                          }
                          
                          function Interpolate(color1: RGB, color2: RGB, fraction: number): RGB {
                              var r: number = InterpolateNum(color1.red, color2.red, fraction);
                              var g: number = InterpolateNum(color1.green, color2.green, fraction);
                              var b: number = InterpolateNum(color1.blue, color2.blue, fraction);
                              return <RGB>{ red: Math.round(r), green: Math.round(g), blue: Math.round(b) };
                          }
                          
                          function InterpolateNum(d1: number, d2: number, fraction: number): number {
                              return d1 + (d2 - d1) * fraction;
                          }
                          
                          function rgb_dec565(rgb: RGB): number {
                              return ((Math.floor(rgb.red / 255 * 31) << 11) | (Math.floor(rgb.green / 255 * 63) << 5) | (Math.floor(rgb.blue / 255 * 31)));
                          }
                          
                          type RGB = {
                              red: number,
                              green: number,
                              blue: number
                          };
                          
                          type Payload = {
                              payload: string;
                          };
                          
                          type Page = {
                              type: string,
                              heading: string,
                              items: PageItem[],
                              useColor: boolean
                          };
                          
                          interface PageEntities extends Page {
                              type: "cardEntities",
                              items: PageItem[],
                          
                          };
                          interface PageGrid extends Page {
                              type: "cardGrid",
                              items: PageItem[],
                          };
                          
                          interface PageThermo extends Page {
                              type: "cardThermo",
                              items: PageItem[],
                          };
                          
                          interface PageMedia extends Page {
                              type: "cardMedia",
                              items: PageItem[],
                          };
                          
                          interface PageAlarm extends Page {
                              type: "cardAlarm",
                              items: PageItem[],
                          };
                          
                          type PageItem = {
                              id: string,
                              icon: (string | undefined),
                              onColor: (RGB | undefined),
                              offColor: (RGB | undefined),
                              useColor: (boolean | undefined),
                              interpolateColor: (boolean | undefined),
                              minValue: (number | undefined),
                              maxValue: (number | undefined),
                              name: (string | undefined)
                          }
                          
                          type Config = {
                              panelRecvTopic: string,
                              panelSendTopic: string,
                              timeoutScreensaver: number,
                              dimmode: number,
                              //brightnessScreensaver:
                              locale: string,
                              timeFormat: string,
                              dateFormat: string,
                              weatherEntity: string | null,
                              screenSaverDoubleClick: boolean,
                              temperatureUnit: string,
                              firstScreensaverEntity: ScreenSaverElement | null,
                              secondScreensaverEntity: ScreenSaverElement | null,
                              thirdScreensaverEntity: ScreenSaverElement | null,
                              fourthScreensaverEntity: ScreenSaverElement | null,
                              defaultColor: RGB,
                              defaultOnColor: RGB,
                              defaultOffColor: RGB,
                              pages: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid)[],
                              button1Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                              button2Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                          };
                          
                          type ScreenSaverElement = {
                              ScreensaverEntity: string | null,
                              ScreensaverEntityIcon: string | null,
                              ScreensaverEntityText: string | null,
                              ScreensaverEntityUnitText: string | null,
                          }
                          
                          
                          • Unter ioBroker/Skripte weiteres Type-Script unter global !!!! (nicht common, etc) anlegen (Name: Blabla oder NSPanel_icon_mapping, etc)

                          • Inhalt aus Datei icon_mapping.ts von Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker (nicht wundern, wenn die etwas zerrissen aussieht - Fragezeichen, etc.) einfügen und speichern

                          • Beide Skripte starten nicht vergessen

                          Ab jetzt holt sich das Hauptscript (Inhalt der NsPanelTs.ts) die Icons aus der Mapping-Datei.

                          Jetzt noch NSPanel-Parameter (ALIASE, MQTT-anpassen, Datenpunkte) anpassen oder weitere Seiten gestalten und einfügen
                          Sollten weitere oder andere Icons gewünscht sein dann auf https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html nachsehen und den Namen entsprechend an der Stelle des Icons im Script tauschen.

                          Ich hoffe das hilft :+1:

                          Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                          https://github.com/joBr99/nspanel-lovelace-ui/wiki

                          Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                          MikewolfM 1 Antwort Letzte Antwort
                          0
                          • britzelpufB britzelpuf

                            @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
                            Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

                            Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

                            Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

                            Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

                            ArmilarA Offline
                            ArmilarA Offline
                            Armilar
                            Most Active Forum Testing
                            schrieb am zuletzt editiert von Armilar
                            #215

                            @britzelpuf sagte in Sonoff NSPanel:

                            @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
                            Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

                            Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

                            Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

                            Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

                            Die Seitengestaltung für cardMedia mit Alexa wäre übrigens folgende:

                            Statt der Spotify-Instanz

                            var alexaInstanz = "alexa2.0"
                            var alexaDevice = "G0XXXXXXXXXXXXXXX"; //Primär zu steuerndes Device (serialNumber)
                            

                            und die Funktion:

                            function GenerateMediaPage(page: PageMedia): Payload[] {
                                var id = page.items[0].id
                                var out_msgs: Array<Payload> = [];
                                out_msgs.push({ payload: "pageType~cardMedia" });
                                if (existsObject(id)) {
                            
                                    let name = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentAlbum'].join(''))).val;     
                                    let media_icon = Icons.GetIcon("amazon-alexa");
                                    let title = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentTitle'].join(''))).val;
                                    let author = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentArtist'].join(''))).val;
                                    let volume = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.volume'].join(''))).val;
                                    var iconplaypause = Icons.GetIcon("pause"); //pause
                                    if (getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentState'].join(''))).val) {
                                        iconplaypause = Icons.GetIcon("pause"); //pause
                                    } else {
                                        iconplaypause = Icons.GetIcon("play"); //play
                                    }
                                    let currentSpeaker = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Info.name'].join(''))).val;
                                    let speakerlist = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Info.name'].join(''))).val;
                                    let onoffbutton = 1;
                            
                                    out_msgs.push({ payload: "entityUpd~" + 
                                                              name + "~" +
                                                              id + "~" +
                                                              "~" +         //????
                                                              media_icon + "~" +
                                                              title + "~" +
                                                              author + "~" +
                                                              volume + "~" +
                                                              iconplaypause + "~" +
                                                              currentSpeaker + "~" +
                                                              speakerlist + "~" +
                                                              onoffbutton});
                                }
                            
                                return out_msgs
                            }
                            

                            78f62cfe-a996-4e3f-9aeb-004450fb2f88-image.png

                            Vielleicht wäre das der bessere Ansatz, da spotify-premium ohnehin auch im Alexa-Adapter mitläuft. Oder hättest du eine Idee für die Player-Auswahl?

                            Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                            https://github.com/joBr99/nspanel-lovelace-ui/wiki

                            Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                            R 1 Antwort Letzte Antwort
                            0
                            • ArmilarA Armilar

                              @britzelpuf sagte in Sonoff NSPanel:

                              @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
                              Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

                              Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

                              Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

                              Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

                              Die Seitengestaltung für cardMedia mit Alexa wäre übrigens folgende:

                              Statt der Spotify-Instanz

                              var alexaInstanz = "alexa2.0"
                              var alexaDevice = "G0XXXXXXXXXXXXXXX"; //Primär zu steuerndes Device (serialNumber)
                              

                              und die Funktion:

                              function GenerateMediaPage(page: PageMedia): Payload[] {
                                  var id = page.items[0].id
                                  var out_msgs: Array<Payload> = [];
                                  out_msgs.push({ payload: "pageType~cardMedia" });
                                  if (existsObject(id)) {
                              
                                      let name = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentAlbum'].join(''))).val;     
                                      let media_icon = Icons.GetIcon("amazon-alexa");
                                      let title = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentTitle'].join(''))).val;
                                      let author = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentArtist'].join(''))).val;
                                      let volume = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.volume'].join(''))).val;
                                      var iconplaypause = Icons.GetIcon("pause"); //pause
                                      if (getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentState'].join(''))).val) {
                                          iconplaypause = Icons.GetIcon("pause"); //pause
                                      } else {
                                          iconplaypause = Icons.GetIcon("play"); //play
                                      }
                                      let currentSpeaker = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Info.name'].join(''))).val;
                                      let speakerlist = getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Info.name'].join(''))).val;
                                      let onoffbutton = 1;
                              
                                      out_msgs.push({ payload: "entityUpd~" + 
                                                                name + "~" +
                                                                id + "~" +
                                                                "~" +         //????
                                                                media_icon + "~" +
                                                                title + "~" +
                                                                author + "~" +
                                                                volume + "~" +
                                                                iconplaypause + "~" +
                                                                currentSpeaker + "~" +
                                                                speakerlist + "~" +
                                                                onoffbutton});
                                  }
                              
                                  return out_msgs
                              }
                              

                              78f62cfe-a996-4e3f-9aeb-004450fb2f88-image.png

                              Vielleicht wäre das der bessere Ansatz, da spotify-premium ohnehin auch im Alexa-Adapter mitläuft. Oder hättest du eine Idee für die Player-Auswahl?

                              R Offline
                              R Offline
                              ronny130286
                              schrieb am zuletzt editiert von
                              #216

                              @armilar

                              Sehr nice mit der A..... :) aber muss man dann nicht noch mehr anpassen? Gerade in der Function

                              function HandleButtonEvent(words): void
                              
                              ArmilarA 2 Antworten Letzte Antwort
                              0
                              • R ronny130286

                                @armilar

                                Sehr nice mit der A..... :) aber muss man dann nicht noch mehr anpassen? Gerade in der Function

                                function HandleButtonEvent(words): void
                                
                                ArmilarA Offline
                                ArmilarA Offline
                                Armilar
                                Most Active Forum Testing
                                schrieb am zuletzt editiert von Armilar
                                #217

                                @ronny130286 sagte in Sonoff NSPanel:

                                @armilar

                                Sehr nice mit der A..... :) aber muss man dann nicht noch mehr anpassen? Gerade in der Function

                                function HandleButtonEvent(words): void
                                

                                Einfach austauschen

                                        case "media-back":
                                            setIfExists(alexaInstanz + ".Echo-Devices." + alexaDevice + ".Player.controlPrevious", true)
                                            break;
                                        case "media-pause":
                                            if (getState(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Player.currentState'].join(''))).val === true) {
                                                setIfExists(alexaInstanz + ".Echo-Devices." + alexaDevice + ".Player.controlPause", true)
                                            } else {
                                                setIfExists(alexaInstanz + ".Echo-Devices." + alexaDevice + ".Player.controlPlay", true)
                                            }
                                            break;
                                        case "media-next":
                                            setIfExists(alexaInstanz + ".Echo-Devices." + alexaDevice + ".Player.controlNext", true)
                                            break;
                                        case "volumeSlider":
                                            setIfExists(alexaInstanz + ".Echo-Devices." + alexaDevice + ".Player.volume", parseInt(words[4]))
                                            break;
                                        case "speaker-sel":
                                            console.log("auf mediaCard - speaker-sel - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                            break;
                                

                                Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                1 Antwort Letzte Antwort
                                0
                                • R ronny130286

                                  @armilar

                                  Sehr nice mit der A..... :) aber muss man dann nicht noch mehr anpassen? Gerade in der Function

                                  function HandleButtonEvent(words): void
                                  
                                  ArmilarA Offline
                                  ArmilarA Offline
                                  Armilar
                                  Most Active Forum Testing
                                  schrieb am zuletzt editiert von
                                  #218

                                  @ronny130286 sagte in Sonoff NSPanel:

                                  @armilar

                                  Sehr nice mit der A..... :) aber muss man dann nicht noch mehr anpassen? Gerade in der Function

                                  function HandleButtonEvent(words): void
                                  

                                  hab oben nochmal controlPlay und controlPause ausgetauscht - war noch spotify drin...

                                  Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                  https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                  Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                  R 1 Antwort Letzte Antwort
                                  0
                                  • ArmilarA Armilar

                                    @ronny130286 sagte in Sonoff NSPanel:

                                    @armilar

                                    Sehr nice mit der A..... :) aber muss man dann nicht noch mehr anpassen? Gerade in der Function

                                    function HandleButtonEvent(words): void
                                    

                                    hab oben nochmal controlPlay und controlPause ausgetauscht - war noch spotify drin...

                                    R Offline
                                    R Offline
                                    ronny130286
                                    schrieb am zuletzt editiert von
                                    #219

                                    @armilar
                                    ich haben mal noch ein Event erweitert ;)

                                    case "media-OnOff":
                                                setIfExists(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Commands.deviceStop'].join('')), true)
                                                break;
                                    

                                    Damit kann man dann die Gute wieder ausschalten ;)

                                    ArmilarA 2 Antworten Letzte Antwort
                                    0
                                    • R ronny130286

                                      @armilar
                                      ich haben mal noch ein Event erweitert ;)

                                      case "media-OnOff":
                                                  setIfExists(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Commands.deviceStop'].join('')), true)
                                                  break;
                                      

                                      Damit kann man dann die Gute wieder ausschalten ;)

                                      ArmilarA Offline
                                      ArmilarA Offline
                                      Armilar
                                      Most Active Forum Testing
                                      schrieb am zuletzt editiert von
                                      #220

                                      @ronny130286 sagte in Sonoff NSPanel:

                                      case "media-OnOff":
                                      setIfExists(([alexaInstanz,'.Echo-Devices.',alexaDevice,'.Commands.deviceStop'].join('')), true)
                                      break;

                                      ja stimmt - da war doch noch der Button, der seine Farbe einfach nicht ändern will aber doch da ist ;-)

                                      Hab ich jetzt auch so übernommen

                                      Installationsanleitung, Tipps, Alias-Definitionen, FAQ für das Sonoff NSPanel mit lovelace UI unter ioBroker
                                      https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                      Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                      1 Antwort Letzte Antwort
                                      0
                                      • britzelpufB britzelpuf

                                        @armilar 659c2d52-8178-470b-815e-731f9e35a050-image.png
                                        Das ist einfach nur ein Alias welches der netten Dame vom großen Onlinekaufhaus sagt, starte mal den Stream xyz auf Tunein und dann spielt es.

                                        Was hast du denn hinter der Alarm Page, eine echte Alarmanlage oder eher sowas wie eine Kindersicherung ;-) mir fehlt da immer noch der Anwendungsfall.

                                        Ich finde das für den Spotify Adapter gut gelöst, allerdings hatte ich mich bewusst für die Aliase entschieden, damit es kompatibel für alle ist und es den Charme hat, dass man so ziemlich alle Infos immer an immer der gleichen Stelle findet und man da nichts mehr konfigurieren muss. Schade ist nur, dass man derzeit keine Media Aliase anlegen kann oder ich zu unfähig bin, aber sobald das geht kann man dann aber alles recyclen von dir, ein paar States umschreiben, und ist dann fertig, von daher Daumen hoch :)

                                        Ich habe noch ein Bug gefunden, aber ich weiß noch nicht ob er am Skript liegt oder an der Firmware. Manchmal schaltet er nicht mehr auf den Screensaver, aber dimmt. Im MQTT kommt auch kein SleepReached. Jetzt ist nur die Frage, schickt das Skript etwas, was das Display ins trudeln bringt oder hat die FW was und da JoBr99 das Problem noch nicht hatte, gehe ich erstmal vom Skript aus.

                                        R Offline
                                        R Offline
                                        ronny130286
                                        schrieb am zuletzt editiert von
                                        #221

                                        @britzelpuf

                                        Ich habe nach den Update den Bug ebenfalls, das Panel senden dann, wie beschrieben, den sleepReached Befehl nicht mehr. Erst nach einem Neustart funktioniert alles wieder.

                                        Ich habe mal versuchte bewusst darauf zu achten wann es eintritt, aber genau dann tritt es natürlich nicht mehr auf :D

                                        1 Antwort Letzte Antwort
                                        0
                                        • ArmilarA Armilar

                                          @armilar sagte in Sonoff NSPanel:

                                          @mikewolf sagte in Sonoff NSPanel:

                                          Hallo wenn ich ts script starte kommt

                                          Javascript.0 (1002) script.js.HPCLTEST.Skript_3NS: TypeScript compilation failed: var Icons = new IconsSelector(); ^ ERROR: Cannot find name 'IconsSelector'.
                                          
                                          

                                          Gibts eine step by step anleitung ?? probiere seit über einer Woche das zum laufen zu bekommen,
                                          und dieser Thread ist etwas unübersichtlich geworden ..Speziell für nen neuanfang !

                                          Mit freundlichen Grüßen
                                          mikewolf

                                          Ich versuche es mal:

                                          • Tasmota flashen (analog Anleitung @haus-automatisierung) Die ist schon echt super erklärt! - Vielleicht macht er ja hierzu auch ein Video ;-)
                                          • autoexec.be in Tasmota Konsole/Verwalte Dateisystem anlegen
                                          • Nachfolgenden Befehl in Tasmota-Konsole ausführen
                                          Backlog UpdateDriverVersion https://raw.githubusercontent.com/joBr99/nspanel-lovelace-ui/main/tasmota/autoexec.be; Restart 1
                                          
                                          • NSPanel TFT Flashen mit (aktuelle Version 2.0.7):
                                          FlashNextion http://nspanel.pky.eu/lui-release.tft
                                          

                                          Das NSPanel kurz rebooten - kann nicht schaden - Danach wartet es auf Infos von ioBroker

                                          • TypeScript unter ioBroker/Skripte anlegen analog Britzelpuf auf Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker Inhalt aus der NsPanelTs.ts übernehmen oder mein Script verwenden:

                                          (@britzelpuf hat eine Anpassung auf das letzte Release 1.9.1 auf 2.0.7 von @joBr99 gemacht. Daher dringend das neueste TS-Script verwenden, sonst läuft es nicht)

                                          var Icons = new IconsSelector();
                                          
                                          const Months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
                                          const Days = ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"];
                                          const Red: RGB = { red: 255, green: 0, blue: 0 };
                                          const White: RGB = { red: 255, green: 255, blue: 255 };
                                          const Off: RGB = { red: 68, green: 115, blue: 158 };
                                          const On: RGB = { red: 253, green: 216, blue: 53 };
                                          const BatteryFull: RGB = { red: 96, green: 176, blue: 62 }
                                          const BatteryEmpty: RGB = { red: 179, green: 45, blue: 25 }
                                          
                                          //----Möglichkeit, im Screensaver zwischen Accu-Weather Forcast oder selbstdefinierten Werten zu wählen---------------------------------
                                          var weatherForecast = true; //true = WheatherForecast 5 Days --- false = Config --> firstScreensaverEntity - fourthScreensaverEntity ...
                                          //Spotify Instanz
                                          var spotifyInstanz = "spotify-premium.0"
                                          
                                          var Buero_Seite_1: PageEntities =
                                          {
                                              "type": "cardEntities",
                                              "heading": "Büro",
                                              "useColor": true,
                                              "items": [
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.MyTestbutton", icon: "lightbulb", offColor: Off, onColor: On, name: "Taster"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power" }
                                              ]
                                          };
                                          
                                          var Buero_Seite_2: PageGrid =
                                          {
                                              "type": "cardGrid",
                                              "heading": "Büro",
                                              "useColor": true,
                                              "items": [
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Schreibtischlampe", name: "Schreibtisch"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Deckenbeleuchtung", name: "Deckenlampe"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Testlampe2"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Luftreiniger", icon: "power"},
                                                  <PageItem>{ id: "alias.0.NSPanel_1.Radio.TuneIn", icon: "play"}
                                              ]
                                          };
                                          
                                          var Spotify: PageMedia = 
                                          {
                                              "type": "cardMedia",
                                              "heading": "Spotify",
                                              "useColor": false,
                                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Spotify" }]
                                          };
                                          
                                          var Buero_Themostat: PageThermo = 
                                          {
                                              "type": "cardThermo",
                                              "heading": "Thermostat",
                                              "useColor": true,
                                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Thermostat_Büro" }]
                                          };
                                          
                                          var Buero_Alarm: PageAlarm = 
                                          {
                                              "type": "cardAlarm",
                                              "heading": "Alarm",
                                              "useColor": true,
                                              "items": [<PageItem>{ id: "alias.0.NSPanel_1.Alarm" }]
                                          };
                                          
                                          var button1Page: PageGrid =
                                          {
                                              "type": "cardGrid",
                                              "heading": "Radio",
                                              "useColor": true,
                                              "items": [
                                                  <PageItem>{ id: "alias.0.Radio.NJoy" },
                                                  <PageItem>{ id: "alias.0.Radio.Delta_Radio" },
                                                  <PageItem>{ id: "alias.0.Radio.NDR2" },
                                              ]
                                          };
                                          
                                          var button2Page: PageEntities =
                                          {
                                              "type": "cardEntities",
                                              "heading": "Knopf2",
                                              "useColor": true,
                                              "items": [
                                                  <PageItem>{ id: "alias.0.Schlafen" },
                                                  <PageItem>{ id: "alias.0.Stern" }
                                              ]
                                          };
                                          
                                          export const config: Config = {
                                              panelRecvTopic: "mqtt.0.SmartHome.NSPanel_1.tele.RESULT",       //anpassen
                                              panelSendTopic: "mqtt.0.SmartHome.NSPanel_1.cmnd.CustomSend",   //anpassen
                                              firstScreensaverEntity: { ScreensaverEntity: "hmip.0.devices.3014F711A000185BE9922BCF.channels.1.humidity", ScreensaverEntityIcon: "water-percent", ScreensaverEntityText: "Luft", ScreensaverEntityUnitText: "%" },
                                              secondScreensaverEntity: { ScreensaverEntity: "accuweather.0.Daily.Day1.Day.PrecipitationProbability", ScreensaverEntityIcon: "weather-pouring", ScreensaverEntityText: "Regen", ScreensaverEntityUnitText: "%" },
                                              thirdScreensaverEntity: { ScreensaverEntity: "0_userdata.0.Wetter.Windstaerke_homaticIP", ScreensaverEntityIcon: "weather-windy", ScreensaverEntityText: "Wind", ScreensaverEntityUnitText: "bft" },
                                              fourthScreensaverEntity: { ScreensaverEntity: "accuweather.0.Current.UVIndex", ScreensaverEntityIcon: "solar-power", ScreensaverEntityText: "UV", ScreensaverEntityUnitText: "" },
                                              timeoutScreensaver: 15,
                                              dimmode: 8,
                                              screenSaverDoubleClick: false,
                                              locale: "de_DE",
                                              timeFormat: "%H:%M",
                                              dateFormat: "%A, %d. %B %Y",
                                              weatherEntity: "alias.0.Wetter.Wetter",
                                              defaultOffColor: Off,
                                              defaultOnColor: On,
                                              defaultColor: Off,
                                              temperatureUnit: "°C",
                                              pages: [Buero_Seite_1, 
                                                      Buero_Seite_2, 
                                                      Spotify,
                                                      Buero_Themostat,
                                                      Buero_Alarm
                                              ],
                                              button1Page: button1Page,
                                              button2Page: button2Page
                                          };
                                          
                                          
                                          // _________________________________ Ab hier keine Konfiguration mehr _____________________________________
                                          
                                          var subscriptions: any = {};
                                          var screensaverEnabled : boolean = false;
                                          var pageId = 0;
                                          
                                          schedule("* * * * *", function () {
                                              SendTime();
                                          });
                                          schedule("0 * * * *", function () {
                                              SendDate();
                                          });
                                          
                                          
                                          // Only monitor the extra nodes if present
                                          var updateArray: string[] = [];
                                          if (config.firstScreensaverEntity !== null && config.firstScreensaverEntity.ScreensaverEntity != null && existsState(config.firstScreensaverEntity.ScreensaverEntity)) {
                                              updateArray.push(config.firstScreensaverEntity.ScreensaverEntity)
                                          }
                                          if (config.secondScreensaverEntity !== null && config.secondScreensaverEntity.ScreensaverEntity != null && existsState(config.secondScreensaverEntity.ScreensaverEntity)) {
                                              updateArray.push(config.secondScreensaverEntity.ScreensaverEntity)
                                          }
                                          if (config.thirdScreensaverEntity !== null && config.thirdScreensaverEntity.ScreensaverEntity != null && existsState(config.thirdScreensaverEntity.ScreensaverEntity)) {
                                              updateArray.push(config.thirdScreensaverEntity.ScreensaverEntity)
                                          }
                                          if (config.fourthScreensaverEntity !== null && config.fourthScreensaverEntity.ScreensaverEntity != null && existsState(config.fourthScreensaverEntity.ScreensaverEntity)) {
                                              updateArray.push(config.fourthScreensaverEntity.ScreensaverEntity)
                                          }
                                          
                                          if (updateArray.length > 0) {
                                              on(updateArray, function () {
                                                  HandleScreensaverUpdate();
                                              })
                                          }
                                          on({ id: config.panelRecvTopic }, function (obj) {
                                              if (obj.state.val.startsWith('\{"CustomRecv":')) {
                                                  var json = JSON.parse(obj.state.val);
                                          
                                                  var split = json.CustomRecv.split(",");
                                                  HandleMessage(split[0], split[1], parseInt(split[2]), split);
                                              }
                                          });
                                          
                                          function SendToPanel(val: Payload | Payload[]): void {
                                              if (Array.isArray(val)) {
                                                  val.forEach(function (id, i) {
                                                      setState(config.panelSendTopic, id.payload);
                                                  });
                                              }
                                              else
                                                  setState(config.panelSendTopic, val.payload);
                                          }
                                          
                                          function HandleMessage(typ: string, method: string, page: number, words: Array<string>): void {
                                              if (typ == "event") {
                                                  switch (method) {
                                                      case "startup":
                                                          screensaverEnabled = false;
                                                          UnsubscribeWatcher();
                                                          HandleStartupProcess();
                                                          pageId = 0;
                                                          GeneratePage(config.pages[0]);
                                                          break;
                                                      case "sleepReached":
                                                          screensaverEnabled = true;
                                                          HandleScreensaver();
                                                          break;
                                                      case "pageOpenDetail":
                                                          screensaverEnabled = false;
                                                          UnsubscribeWatcher();
                                                          let pageItem = config.pages[pageId].items.find(e => e.id === words[3]);
                                                          if (pageItem !== undefined)
                                                              SendToPanel(GenerateDetailPage(words[2], pageItem));
                                                      case "buttonPress2":
                                                          screensaverEnabled = false;
                                                          HandleButtonEvent(words);
                                                          break;
                                                      case "button1":
                                                      case "button2":
                                                          screensaverEnabled = false;
                                                          HandleHardwareButton(method);
                                                      default:
                                                          break;
                                                  }
                                              }
                                          }
                                          
                                          function GeneratePage(page: Page): void {
                                              switch (page.type) {
                                                  case "cardEntities":
                                                      SendToPanel(GenerateEntitiesPage(<PageEntities>page));
                                                      break;
                                                  case "cardThermo":
                                                      SendToPanel(GenerateThermoPage(<PageThermo>page));
                                                      break;
                                                  case "cardGrid":
                                                      SendToPanel(GenerateGridPage(<PageGrid>page));
                                                      break;
                                                  case "cardMedia":
                                                      SendToPanel(GenerateMediaPage(<PageMedia>page));
                                                      break;
                                                  case "cardAlarm":
                                                      SendToPanel(GenerateAlarmPage(<PageAlarm>page));
                                                      break;
                                              }
                                          }
                                          
                                          function HandleHardwareButton(method: string): void {
                                              let page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid);
                                              if (config.button1Page !== null && method == "button1") {
                                                  page = config.button1Page;
                                              }
                                              else if (config.button2Page !== null && method == "button2") {
                                                  page = config.button2Page;
                                              }
                                              else {
                                                  return;
                                              }
                                          
                                              // Set pageId to -1, because of the navigation arrows
                                              let tempPageId = pageId;
                                              pageId = -1;
                                              GeneratePage(page);
                                              pageId = tempPageId;
                                          }
                                          
                                          function HandleStartupProcess(): void {
                                              SendDate();
                                              SendTime();
                                              SendToPanel({ payload: "timeout~" + config.timeoutScreensaver });
                                              SendToPanel({ payload: "dimmode~" + config.dimmode });
                                          }
                                          
                                          function SendDate(): void {
                                              var d = new Date();
                                              var day = Days[d.getDay()];
                                              var date = d.getDate();
                                              var month = Months[d.getMonth()];
                                              var year = d.getFullYear();
                                              var _sendDate = "date~" + day + " " + date + " " + month + " " + year;
                                              SendToPanel(<Payload>{ payload: _sendDate });
                                          }
                                          
                                          function SendTime(): void {
                                              var d = new Date();
                                              var hr = d.getHours().toString();
                                              var min = d.getMinutes().toString();
                                          
                                              if (d.getHours() < 10) {
                                                  hr = "0" + d.getHours().toString();
                                              }
                                              if (d.getMinutes() < 10) {
                                                  min = "0" + d.getMinutes().toString();
                                              }
                                              SendToPanel(<Payload>{ payload: "time~" + hr + ":" + min });
                                          }
                                          
                                          function GenerateEntitiesPage(page: PageEntities): Payload[] {
                                              var out_msgs: Array<Payload> = [];
                                              out_msgs = [{ payload: "pageType~cardEntities" }]
                                              out_msgs.push({ payload: GeneratePageElements(page) });
                                              return out_msgs
                                          }
                                          
                                          function GenerateGridPage(page: PageGrid): Payload[] {
                                              var out_msgs: Array<Payload> = [];
                                              out_msgs = [{ payload: "pageType~cardGrid" }]
                                              out_msgs.push({ payload: GeneratePageElements(page) });
                                              return out_msgs
                                          }
                                          
                                          function GeneratePageElements(page: Page): string {
                                              let maxItems = 0;
                                              switch (page.type) {
                                                  case "cardThermo":
                                                      maxItems = 1;
                                                      break;
                                                  case "cardAlarm":
                                                      maxItems = 1;
                                                      break;
                                                  case "cardMedia":
                                                      maxItems = 1;
                                                      break;
                                                  case "cardEntities":
                                                      maxItems = 4;
                                                      break;
                                                  case "cardGrid":
                                                      maxItems = 6;
                                                      break;
                                              }
                                              let pageData = "entityUpd~" + page.heading + "~" + GetNavigationString(pageId)
                                              for (let index = 0; index < maxItems; index++) {
                                                  if (page.items[index] !== undefined) {
                                                      pageData += CreateEntity(page.items[index], index + 1, page.useColor);
                                                  }
                                                  else {
                                                      pageData += CreateEntity(<PageItem>{ id: "delete" }, index + 1);
                                                  }
                                              }
                                              return pageData;
                                          }
                                          
                                          function CreateEntity(pageItem: PageItem, placeId: number, useColors: boolean = false): string {
                                              var iconId = "0"
                                              if (pageItem.id == "delete") {
                                                  return "~delete~~~~~"
                                              }
                                              var name: string;
                                              var type: string;
                                              // ioBroker
                                              if (existsObject(pageItem.id)) {
                                                  let o = getObject(pageItem.id)
                                                  var val = null;
                                                  name = pageItem.name !== undefined ? pageItem.name : o.common.name.de
                                          
                                                  if (existsState(pageItem.id + ".GET")) {
                                                      val = getState(pageItem.id + ".GET").val;
                                                      RegisterEntityWatcher(pageItem.id + ".GET");
                                                  }
                                                  else if (existsState(pageItem.id + ".SET")) {
                                                      val = getState(pageItem.id + ".SET").val;
                                                      RegisterEntityWatcher(pageItem.id + ".SET");
                                                  }
                                                  var iconColor = rgb_dec565(config.defaultColor);
                                          
                                                  switch (o.common.role) {
                                                      case "light":
                                                          type = "light"
                                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                                          var optVal = "0"
                                          
                                                          if (val === true || val === "true") {
                                                              optVal = "1"
                                                              iconColor = GetIconColor(pageItem, true, useColors);
                                                          }
                                          
                                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                                          
                                                      case "dimmer":
                                                          type = "light"
                                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("lightbulb");
                                                          var optVal = "0"
                                                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                                              val = getState(pageItem.id + ".ON_ACTUAL").val;
                                                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                                          }
                                                          else if (existsState(pageItem.id + ".ON_SET")) {
                                                              val = getState(pageItem.id + ".ON_SET").val;
                                                              RegisterEntityWatcher(pageItem.id + ".ON_SET");
                                                          }
                                                          if (val === true || val === "true") {
                                                              optVal = "1"
                                                              iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                                          }
                                          
                                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal;
                                          
                                                      case "blind":
                                                          type = "shutter"
                                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("window-open");
                                                          iconColor = GetIconColor(pageItem, existsState(pageItem.id + ".ACTUAL") ? getState(pageItem.id + ".ACTUAL").val : true, useColors);
                                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~"
                                          
                                                      case "info":
                                                      case "value.temperature":
                                                      case "thermostat":
                                                          type = "text";
                                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : o.common.role == "value.temperature" || o.common.role == "thermostat" ? Icons.GetIcon("thermometer") : Icons.GetIcon("information-outline");
                                                          let unit = "";
                                                          var optVal = "0"
                                                          if (existsState(pageItem.id + ".ON_ACTUAL")) {
                                                              optVal = getState(pageItem.id + ".ON_ACTUAL").val;
                                                              unit = GetUnitOfMeasurement(pageItem.id + ".ON_ACTUAL");
                                                              RegisterEntityWatcher(pageItem.id + ".ON_ACTUAL");
                                                          }
                                                          else if (existsState(pageItem.id + ".ACTUAL")) {
                                                              optVal = getState(pageItem.id + ".ACTUAL").val;
                                                              unit = GetUnitOfMeasurement(pageItem.id + ".ACTUAL");
                                                              RegisterEntityWatcher(pageItem.id + ".ACTUAL");
                                                          }
                                          
                                                          if (o.common.role == "value.temperature") {
                                                              iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("thermometer");
                                                          }
                                          
                                                          iconColor = GetIconColor(pageItem, parseInt(optVal), useColors);
                                          
                                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + iconColor + "~" + name + "~" + optVal + " " + unit;
                                          
                                                      case "button":
                                                          type = "button";
                                                          iconId = pageItem.icon !== undefined ? Icons.GetIcon(pageItem.icon) : Icons.GetIcon("gesture-tap-button");
                                                          let buttonText = pageItem.name !== undefined ? pageItem.name : "PRESS";
                                                          iconColor = GetIconColor(pageItem, true, useColors);
                                                          return "~" + type + "~" + pageItem.id + "~" + iconId + "~" + + iconColor + "~" + name + "~" + buttonText;
                                          
                                                      default:
                                                          return "~delete~~~~~";
                                                  }
                                              }
                                          
                                              return "~delete~~~~~"
                                          }
                                          
                                          function GetIconColor(pageItem: PageItem, value: (boolean | number), useColors: boolean): number {
                                              // dimmer
                                              if ((pageItem.useColor || useColors) && pageItem.interpolateColor && typeof (value) === "number") {
                                                  let maxValue = pageItem.maxValue !== undefined ? pageItem.maxValue : 100;
                                                  let minValue = pageItem.minValue !== undefined ? pageItem.minValue : 0;
                                                  value = value > maxValue ? maxValue : value;
                                                  value = value < minValue ? minValue : value;
                                                  return rgb_dec565(
                                                      Interpolate(
                                                          pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor,
                                                          pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor,
                                                          scale(value, minValue, maxValue, 0, 1)
                                                      ));
                                              }
                                          
                                              if ((pageItem.useColor || useColors) && ((typeof (value) === "boolean" && value) || value > (pageItem.minValue !== undefined ? pageItem.minValue : 0))) {
                                                  return rgb_dec565(pageItem.onColor !== undefined ? pageItem.onColor : config.defaultOnColor)
                                              }
                                          
                                              return rgb_dec565(pageItem.offColor !== undefined ? pageItem.offColor : config.defaultOffColor);
                                          }
                                          
                                          function RegisterEntityWatcher(id: string): void {
                                              if (subscriptions.hasOwnProperty(id)) {
                                                  return;
                                              }
                                              subscriptions[id] = (on({ id: id, change: 'any' }, function (data) {
                                                  SendToPanel({ payload: GeneratePageElements(config.pages[pageId]) });
                                              }))
                                          }
                                          
                                          function RegisterDetailEntityWatcher(id: string, pageItem: PageItem, type: string): void {
                                              if (subscriptions.hasOwnProperty(id)) {
                                                  return;
                                              }
                                              subscriptions[id] = (on({ id: id, change: 'any' }, function () {
                                                  SendToPanel(GenerateDetailPage(type, pageItem));
                                              }))
                                          }
                                          
                                          function GetUnitOfMeasurement(id: string): string {
                                              if (!existsObject(id))
                                                  return "";
                                          
                                              let obj = getObject(id);
                                              if (typeof obj.common.unit !== 'undefined') {
                                                  return obj.common.unit
                                              }
                                          
                                              if (typeof obj.common.alias !== 'undefined' && typeof obj.common.alias.id !== 'undefined') {
                                                  return GetUnitOfMeasurement(obj.common.alias.id);
                                              }
                                              return "";
                                          }
                                          
                                          function GenerateThermoPage(page: PageThermo): Payload[] {
                                              var id = page.items[0].id
                                              var out_msgs: Array<Payload> = [];
                                              out_msgs.push({ payload: "pageType~cardThermo" });
                                          
                                              // ioBroker
                                              if (existsObject(id)) {
                                                  let o = getObject(id)
                                                  let name = page.items[0].name !== undefined ? page.items[0].name : o.common.name.de
                                                  let currentTemp = 0;
                                                  if (existsState(id + ".ACTUAL"))
                                                      currentTemp = (Math.round(parseFloat(getState(id + ".ACTUAL").val) * 10)/10)*10;
                                          
                                                  let destTemp = 0;
                                                  if (existsState(id + ".SET")) {
                                                      destTemp = getState(id + ".SET").val.toFixed(2) * 10;
                                                      log(id + ".SET " + destTemp)
                                                  }
                                          
                                                  let status = ""
                                                  if (existsState(id + ".MODE"))
                                                      status = getState(id + ".MODE").val;
                                                  let minTemp = 50 //Min Temp 5°C
                                                  let maxTemp = 300 //Max Temp 30°C
                                                  let stepTemp = 5
                                          
                                                  //0-4 verwendet bei ungerader Anzahl Parametern
                                                  let bt0 = "~~~~"; //verwendet bei ungleichen Parametern
                                                  let bt1 = "~~~~"; //verwendet bei ungleichen Parametern
                                                  let bt2 = "~~~~"; //verwendet bei ungleichen Parametern
                                                  let bt3 = "~~~~"; //verwendet bei ungleichen Parametern
                                                  let bt4 = "~~~~"; //verwendet bei ungleichen Parametern
                                                  //5-8 verwendet bei gerader Anzahl Parametern
                                                  let bt5 = Icons.GetIcon("water-percent") + "~0~1~~";    
                                                  let bt6 = Icons.GetIcon("fire") + "~0~1~~";             
                                                  let bt7 = Icons.GetIcon("wifi") + "~0~1~~";             
                                                  let bt8 = Icons.GetIcon("battery-high") + "~0~1~~";     
                                          
                                                  if (existsState(id + ".HUMIDITY")){
                                                      console.log(parseInt(getState(id + ".HUMIDITY").val));
                                                      bt5 =  Icons.GetIcon("water-percent") + "~2016~1~bt8~";
                                                      if (parseInt(getState(id + ".HUMIDITY").val) < 40) {
                                                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                                      } else if (parseInt(getState(id + ".HUMIDITY").val) < 30) {
                                                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 65) {
                                                          bt5 =  Icons.GetIcon("water-percent") + "~65504~1~bt8~";
                                                      } else if (parseInt(getState(id + ".HUMIDITY").val) > 75) {
                                                          bt5 =  Icons.GetIcon("water-percent") + "~63488~1~bt8~";
                                                      }
                                                  }
                                          
                                                  if (existsState(id + ".MAINTAIN")){
                                                      if (getState(id + ".MAINTAIN").val >> .1) {
                                                          bt6 =  Icons.GetIcon("fire") + "~60897~1~bt8~";
                                                      } else {
                                                          bt6 =  Icons.GetIcon("fire") + "~33840~0~bt8~";
                                                      }
                                                  }
                                          
                                                  if (existsState(id + ".UNREACH")){
                                                      if (getState(id + ".UNREACH").val) {
                                                          bt7 =  Icons.GetIcon("wifi-off") + "~63488~1~bt8~";
                                                      } else {
                                                          bt7 =  Icons.GetIcon("wifi") + "~2016~1~bt8~";
                                                      }
                                                  }
                                          
                                                  if (existsState(id + ".LOWBAT")){
                                                      if (getState(id + ".LOWBAT").val) {
                                                          bt8 =  Icons.GetIcon("battery-low") + "~63488~1~bt8~";
                                                      } else {
                                                          bt8 =  Icons.GetIcon("battery-high") + "~2016~1~bt8~";
                                                      }
                                                  }
                                          
                                                  let icon_res = bt0 + bt1 + bt2 + bt3 + bt4 + bt5 + bt6 + bt7 + bt8;
                                          
                                                  out_msgs.push({ payload: "entityUpd~" + name + "~" + GetNavigationString(pageId) + "~" + id + "~" + currentTemp + "~" + destTemp + "~" + status + "~" + minTemp + "~" + maxTemp + "~" + stepTemp + "~" +icon_res})
                                              }
                                          
                                              return out_msgs
                                          }
                                          
                                          function GenerateMediaPage(page: PageMedia): Payload[] {
                                              var id = page.items[0].id
                                              var out_msgs: Array<Payload> = [];
                                              out_msgs.push({ payload: "pageType~cardMedia" });
                                          
                                              if (existsObject(id)) {
                                                  let o = getObject(id);
                                                  //let name = o.common.name.de;
                                                  let name = getState(spotifyInstanz + ".player.contextDescription").val;
                                                  let media_icon = Icons.GetIcon("spotify");
                                                  let title = getState(spotifyInstanz + ".player.trackName").val;
                                                  let author = getState(spotifyInstanz + ".player.artistName").val
                                                  let volume = getState(spotifyInstanz + ".player.volume").val;
                                                  var iconplaypause = Icons.GetIcon("pause"); //pause
                                                  if (getState(spotifyInstanz + ".player.isPlaying").val) {
                                                      iconplaypause = Icons.GetIcon("pause"); //pause
                                                  } else {
                                                      iconplaypause = Icons.GetIcon("play"); //play
                                                  }
                                                  let currentSpeaker = getState(spotifyInstanz + ".player.device.name").val
                                                  let speakerlist = getState(spotifyInstanz + ".devices.deviceListString").val.replace(/;/g,"?");
                                                  let onoffbutton = 1;
                                          
                                                  out_msgs.push({ payload: "entityUpd~" + 
                                                                            name + "~" +
                                                                            id + "~" +
                                                                            "~" +         //????
                                                                            media_icon + "~" +
                                                                            title + "~" +
                                                                            author + "~" +
                                                                            volume + "~" +
                                                                            iconplaypause + "~" +
                                                                            currentSpeaker + "~" +
                                                                            speakerlist + "~" +
                                                                            onoffbutton});
                                              }
                                          
                                              return out_msgs
                                          }
                                          
                                          function GenerateAlarmPage(page: PageAlarm): Payload[] {
                                              var id = page.items[0].id
                                              var out_msgs: Array<Payload> = [];
                                              out_msgs.push({ payload: "pageType~cardAlarm" });
                                          
                                              var armed: boolean = false;
                                              
                                              if (armed) {
                                                  var arm1 = "Deaktivieren";                  //arm1*~*
                                                  var arm1ActionName = "D1";                  //arm1ActionName*~*
                                                  var arm2 = "";                              //arm2*~*
                                                  var arm2ActionName = "";                    //arm2ActionName*~*
                                                  var arm3 = "";                              //arm3*~*
                                                  var arm3ActionName = "";                    //arm3ActionName*~*
                                                  var arm4 = "";                              //arm4*~*
                                                  var arm4ActionName = "";                    //arm4ActionName*~*
                                                  var icon = Icons.GetIcon("shield-home");    //icon*~*
                                                  var iconcolor = 63488;                      //iconcolor*~*
                                                  var numpadStatus = 1;                       //numpadStatus*~*
                                                  var flashing = 1;                           //flashing*
                                              } 
                                              else {
                                                  var arm1 = "Alarm 1";                       //arm1*~*
                                                  var arm1ActionName = "A1";                  //arm1ActionName*~*
                                                  var arm2 = "Alarm 2";                       //arm2*~*
                                                  var arm2ActionName = "A2";                  //arm2ActionName*~*
                                                  var arm3 = "Alarm 3";                       //arm3*~*
                                                  var arm3ActionName = "A3";                  //arm3ActionName*~*
                                                  var arm4 = "Alarm 4";                       //arm4*~*
                                                  var arm4ActionName = "A4";                  //arm4ActionName*~*
                                                  var icon = Icons.GetIcon("shield-off");     //icon*~*
                                                  var iconcolor = 2016;                       //iconcolor*~*
                                                  var numpadStatus = 1;                       //numpadStatus*~*
                                                  var flashing = 1;                           //flashing*        
                                              }
                                                  
                                              out_msgs.push({ payload:    "entityUpd~" +             //entityUpd~*
                                                                          id + "~" +                 //internalNameEntity*~* //navigation*~*
                                                                          "~" +                      //???
                                                                          arm1 + "~" +               //arm1*~*
                                                                          arm1ActionName + "~" +     //arm1ActionName*~*
                                                                          arm2 + "~" +               //arm2*~*
                                                                          arm2ActionName + "~" +     //arm2ActionName*~*
                                                                          arm3 + "~" +               //arm3*~*
                                                                          arm3ActionName + "~" +     //arm3ActionName*~*
                                                                          arm4 + "~" +               //arm4*~*
                                                                          arm4ActionName + "~" +     //arm4ActionName*~*
                                                                          icon + "~" +               //icon*~* 39=Disarmed 35=Shield_Home, 40
                                                                          iconcolor + "~" +          //iconcolor*~* 2016=green  63488=red
                                                                          numpadStatus + "~" +       //numpadStatus*~*
                                                                          flashing});                //flashing*
                                          
                                              return out_msgs
                                          }
                                          
                                          function setIfExists(id: string, value: any, type: string | null = null): boolean {
                                              if (type === null) {
                                                  if (existsState(id)) {
                                                      setState(id, value);
                                                      return true;
                                                  }
                                              }
                                              else {
                                                  let obj = getObject(id);
                                                  if (existsState(id) && obj.common.type !== undefined && obj.common.type === type) {
                                                      setState(id, value);
                                                      return true;
                                                  }
                                              }
                                              return false;
                                          }
                                          
                                          function toggleState(id: string): boolean {
                                              let obj = getObject(id);
                                              if (existsState(id) && obj.common.type !== undefined && obj.common.type === "boolean") {
                                                  setState(id, !getState(id).val);
                                                  return true;
                                              }
                                              return false;
                                          }
                                          
                                          function HandleButtonEvent(words): void {
                                              let id = words[2]
                                              let buttonAction = words[3];
                                          
                                              switch (buttonAction) {
                                                  case "bNext":
                                                      var pageNum = ((pageId + 1) % config.pages.length);
                                                      pageId = Math.abs(pageNum);
                                                      UnsubscribeWatcher();
                                                      GeneratePage(config.pages[pageId]);
                                                      break;
                                                  case "bPrev":
                                                      var pageNum = ((pageId - 1) % config.pages.length);
                                                      pageId = Math.abs(pageNum);
                                                      UnsubscribeWatcher();
                                                      GeneratePage(config.pages[pageId]);
                                                      break;
                                                  case "bExit":
                                                      if (config.screenSaverDoubleClick) {
                                                          if (words[4] == 2)
                                                              GeneratePage(config.pages[pageId]);
                                                      }
                                                      else
                                                          GeneratePage(config.pages[pageId]);
                                                      break;
                                                  case "OnOff":
                                                      if (existsObject(id)) {
                                                          var action = false
                                                          if (words[4] == "1")
                                                              action = true
                                                          let o = getObject(id)
                                                          switch (o.common.role) {
                                                              case "light":
                                                                  setIfExists(id + ".SET", action);
                                                                  break;
                                                              case "dimmer":
                                                                  setIfExists(id + ".ON_SET", action) ? true : setIfExists(id + ".ON_ACTUAL", action);
                                                          }
                                                      }
                                                      break;
                                                  case "up":
                                                      setIfExists(id + ".OPEN", true)
                                                      break;
                                                  case "stop":
                                                      setIfExists(id + ".STOP", true)
                                                      break;
                                                  case "down":
                                                      setIfExists(id + ".CLOSE", true)
                                                      break;
                                                  case "button":
                                                      toggleState(id + ".SET") ? true : toggleState(id + ".ON_SET")
                                                      break;
                                                  case "positionSlider":
                                                  case "brightnessSlider":
                                                      setIfExists(id + ".SET", parseInt(words[4])) ? true : setIfExists(id + ".ACTUAL", parseInt(words[4]));
                                                      break;
                                                  case "tempUpd":
                                                      setIfExists(id + ".SET", parseInt(words[4]) / 10)
                                                      break;
                                                  case "media-back":
                                                      setIfExists(spotifyInstanz + ".player.skipMinus", true)
                                                      break;
                                                  case "media-pause":
                                                      if (getState(spotifyInstanz + ".player.isPlaying").val === true) {
                                                          setIfExists(spotifyInstanz + ".player.pause", true)
                                                      } else {
                                                          setIfExists(spotifyInstanz + ".player.play", true)
                                                      }
                                                      break;
                                                  case "media-next":
                                                      setIfExists(spotifyInstanz + ".player.skipPlus", true)
                                                      break;
                                                  case "volumeSlider":
                                                      setIfExists(spotifyInstanz + ".player.volume", parseInt(words[4]))
                                                      break;
                                                  case "speaker-sel":
                                                      console.log("auf mediaCard - speaker-sel - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                                      break;
                                                  case "A1": //Alarm-Page Alarm 1 aktivieren
                                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                                      break;
                                                  case "A2": //Alarm-Page Alarm 2 aktivieren
                                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                                      break;  
                                                  case "A3": //Alarm-Page Alarm 3 aktivieren
                                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                                      break;  
                                                  case "A4": //Alarm-Page Alarm 4 aktivieren
                                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                                      break;         
                                                  case "D1": //Alarm-Page Alarm Deaktivieren
                                                      console.log("auf mediaAlarm - Alarm 1 - Wert: " + words[4] + " - reagieren - noch nicht implementiert");
                                                      break;  
                                                  default:
                                                      break;
                                              }
                                          }
                                          
                                          function GetNavigationString(pageId: number): string {
                                              switch (pageId) {
                                                  case 0:
                                                      return "0|1";
                                                  case config.pages.length - 1:
                                                      return "1|0";
                                                  case -1:
                                                      return "0|0";
                                                  default:
                                                      return "1|1";
                                              }
                                          }
                                          
                                          function GenerateDetailPage(type: string, pageItem: PageItem): Payload[] {
                                          
                                              var out_msgs: Array<Payload> = [];
                                              let id = pageItem.id
                                              if (existsObject(id)) {
                                                  var o = getObject(id)
                                                  var val: (boolean | number) = 0;
                                                  let icon = Icons.GetIcon("lightbulb");
                                                  var iconColor = rgb_dec565(config.defaultColor);
                                                  if (type == "popupLight") {
                                                      let switchVal = "0"
                                                      if (o.common.role == "light") {
                                                          if (existsState(id + ".GET")) {
                                                              val = getState(id + ".GET").val;
                                                              RegisterDetailEntityWatcher(id + ".GET", pageItem, type);
                                                          }
                                                          else if (existsState(id + ".SET")) {
                                                              val = getState(id + ".SET").val;
                                                              RegisterDetailEntityWatcher(id + ".SET", pageItem, type);
                                                          }
                                          
                                                          if (val) {
                                                              switchVal = "1";
                                                              iconColor = GetIconColor(pageItem, true, false);
                                                          }
                                          
                                                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + + iconColor + "~" + switchVal + ",disable,disable,disable" })
                                                      }
                                          
                                                      if (o.common.role == "dimmer") {
                                                          if (existsState(id + ".ON_ACTUAL")) {
                                                              val = getState(id + ".ON_ACTUAL").val;
                                                              RegisterDetailEntityWatcher(id + ".ON_ACTUAL", pageItem, type);
                                                          }
                                          
                                                          else if (existsState(id + ".ON_SET")) {
                                                              val = getState(id + ".ON_SET").val;
                                                              RegisterDetailEntityWatcher(id + ".ON_SET", pageItem, type);
                                                          }
                                          
                                                          if (val === true) {
                                                              var iconColor = GetIconColor(pageItem, val, false);
                                                              switchVal = "1"
                                                          }
                                                          let brightness = 0;
                                                          if (existsState(id + ".ACTUAL")) {
                                                              brightness = Math.trunc(scale(getState(id + ".ACTUAL").val, 0, 100, 0, 100))
                                                              iconColor = GetIconColor(pageItem, brightness, false);
                                                              RegisterDetailEntityWatcher(id + ".ACTUAL", pageItem, type);
                                                          }
                                                          let colorTemp = "disable"
                                                          let colorMode = "disable"
                                                          //let attr_support_color = attr.supported_color_modes
                                                          //if (attr_support_color.includes("color_temp"))
                                                          // colortemp = Math.trunc(scale(attr.color_temp, attr.min_mireds, attr.max_mireds, 0, 100))
                                          
                                                          out_msgs.push({ payload: "entityUpdateDetail~" + icon + "~" + iconColor + "~" + switchVal + "~" + brightness + "~" + colorTemp + "~" + colorMode })
                                                      }
                                          
                                                  }
                                          
                                                  if (type == "popupShutter") {
                                                      if (existsState(id + ".ACTUAL"))
                                                          val = getState(id + ".ACTUAL").val;
                                                      else if (existsState(id + ".SET"))
                                                          val = getState(id + ".SET").val;
                                                      out_msgs.push({ payload: "entityUpdateDetail," + val })
                                                  }
                                              }
                                              return out_msgs
                                          }
                                          
                                          function scale(number: number, inMin: number, inMax: number, outMin: number, outMax: number): number {
                                              return (number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin;
                                          }
                                          
                                          function UnsubscribeWatcher(): void {
                                              for (const [key, value] of Object.entries(subscriptions)) {
                                                  unsubscribe(value);
                                                  delete subscriptions[key]
                                              }
                                          }
                                          
                                          function HandleScreensaver(): void {
                                              SendToPanel({ payload: "pageType~screensaver"})
                                              UnsubscribeWatcher();
                                              HandleScreensaverUpdate();
                                          }
                                          
                                          function HandleScreensaverUpdate(): void {
                                              if (screensaverEnabled && config.weatherEntity != null && existsObject(config.weatherEntity)) {
                                                  var icon = getState(config.weatherEntity + ".ICON").val;
                                           
                                                  let temperature: string =
                                                      existsState(config.weatherEntity + ".ACTUAL") ? getState(config.weatherEntity + ".ACTUAL").val :
                                                          existsState(config.weatherEntity + ".TEMP") ? getState(config.weatherEntity + ".TEMP").val : "null";
                                           
                                                  let payloadString =
                                                      "weatherUpdate~" + Icons.GetIcon(GetAccuWeatherIcon(parseInt(icon))) + "~"
                                                      + temperature + " " + config.temperatureUnit + "~"
                                           
                                          /*-------------------------------------------------------------------------------------------------------------------------------------*/
                                                  if (weatherForecast == true) {
                                                      // Accu-Weather Forecast Tag 2 - Tag 5 -- Wenn weatherForecast = true
                                                      for (let i = 2; i < 6; i++) {
                                                          let TempMax = getState("accuweather.0.Summary.TempMax_d" + i).val;
                                                          let DayOfWeek = getState("accuweather.0.Summary.DayOfWeek_d" + i).val;
                                                          let WeatherIcon = GetAccuWeatherIcon(getState("accuweather.0.Summary.WeatherIcon_d" + i).val);
                                                          payloadString += DayOfWeek + "~" + Icons.GetIcon(WeatherIcon) + "~" + TempMax + " °C~";
                                                      }
                                                  } 
                                                  else {
                                                      //In Config definierte Zustände wenn weatherForecast = false
                                                      payloadString += GetScreenSaverEntityString(config.firstScreensaverEntity);
                                                      payloadString += GetScreenSaverEntityString(config.secondScreensaverEntity);
                                                      payloadString += GetScreenSaverEntityString(config.thirdScreensaverEntity);
                                                      payloadString += GetScreenSaverEntityString(config.fourthScreensaverEntity);
                                                  }
                                          /*-------------------------------------------------------------------------------------------------------------------------------------*/
                                           
                                                  SendToPanel(<Payload>{ payload: payloadString });
                                              }
                                          }
                                          
                                          function GetScreenSaverEntityString(configElement: ScreenSaverElement | null): string {
                                              if (configElement != null && configElement.ScreensaverEntity != null && existsState(configElement.ScreensaverEntity)) {
                                                  let u1 = getState(configElement.ScreensaverEntity).val;
                                                  return configElement.ScreensaverEntityText + "~" + Icons.GetIcon(configElement.ScreensaverEntityIcon) + "~" + u1 + " " + configElement.ScreensaverEntityUnitText + "~";
                                              }
                                              else {
                                                  return "~~~";
                                              }
                                          }
                                          
                                          function GetAccuWeatherIcon(icon: number): string {
                                              switch (icon) {
                                                  case 24:        // Ice        
                                                  case 30:        // Hot    
                                                  case 31:        // Cold    
                                                      return "window-open";  // exceptional
                                          
                                                  case 7:         // Cloudy
                                                  case 8:         // Dreary (Overcast)        
                                                  case 38:        // Mostly Cloudy
                                                      return "weather-cloudy";  // cloudy
                                          
                                                  case 11:        // fog
                                                      return "weather-fog";  // fog
                                          
                                                  case 25:        // Sleet    
                                                      return "weather-hail";  // Hail
                                          
                                                  case 15:        // T-Storms    
                                                      return "weather-lightning";  // lightning
                                          
                                                  case 16:        // Mostly Cloudy w/ T-Storms
                                                  case 17:        // Partly Sunny w/ T-Storms
                                                  case 41:        // Partly Cloudy w/ T-Storms       
                                                  case 42:        // Mostly Cloudy w/ T-Storms
                                                      return "weather-lightning-rainy";  // lightning-rainy
                                          
                                                  case 33:        // Clear
                                                  case 34:        // Mostly Clear
                                                  case 37:        // Hazy Moonlight
                                                      return "weather-night";
                                          
                                                  case 3:         // Partly Sunny
                                                  case 4:         // Intermittent Clouds
                                                  case 6:         // Mostly Cloudy
                                                  case 35: 	    // Partly Cloudy
                                                  case 36: 	    // Intermittent Clouds
                                                      return "weather-partly-cloudy";  // partlycloudy 
                                          
                                                  case 18:        // pouring
                                                      return "weather-pouring";  // pouring
                                          
                                                  case 12:        // Showers
                                                  case 13:        // Mostly Cloudy w/ Showers
                                                  case 14:        // Partly Sunny w/ Showers      
                                                  case 26:        // Freezing Rain
                                                  case 39:        // Partly Cloudy w/ Showers
                                                  case 40:        // Mostly Cloudy w/ Showers
                                                      return "weather-rainy";  // rainy
                                          
                                                  case 19:        // Flurries
                                                  case 20:        // Mostly Cloudy w/ Flurries
                                                  case 21:        // Partly Sunny w/ Flurries
                                                  case 22:        // Snow
                                                  case 23:        // Mostly Cloudy w/ Snow
                                                  case 43:        // Mostly Cloudy w/ Flurries
                                                  case 44:        // Mostly Cloudy w/ Snow
                                                      return "weather-snowy";  // snowy
                                          
                                                  case 29:        // Rain and Snow
                                                      return "weather-snowy-rainy";  // snowy-rainy
                                          
                                                  case 1:         // Sunny
                                                  case 2: 	    // Mostly Sunny
                                                  case 5:         // Hazy Sunshine
                                                      return "weather-sunny";  // sunny
                                          
                                                  case 32:        // windy
                                                      return "weather-windy";  // windy
                                          
                                                  default:
                                                      return "alert-circle-outline";
                                              }
                                          }
                                          
                                          function GetBlendedColor(percentage: number): RGB {
                                              if (percentage < 50)
                                                  return Interpolate(config.defaultOffColor, config.defaultOnColor, percentage / 50.0);
                                              return Interpolate(Red, White, (percentage - 50) / 50.0);
                                          }
                                          
                                          function Interpolate(color1: RGB, color2: RGB, fraction: number): RGB {
                                              var r: number = InterpolateNum(color1.red, color2.red, fraction);
                                              var g: number = InterpolateNum(color1.green, color2.green, fraction);
                                              var b: number = InterpolateNum(color1.blue, color2.blue, fraction);
                                              return <RGB>{ red: Math.round(r), green: Math.round(g), blue: Math.round(b) };
                                          }
                                          
                                          function InterpolateNum(d1: number, d2: number, fraction: number): number {
                                              return d1 + (d2 - d1) * fraction;
                                          }
                                          
                                          function rgb_dec565(rgb: RGB): number {
                                              return ((Math.floor(rgb.red / 255 * 31) << 11) | (Math.floor(rgb.green / 255 * 63) << 5) | (Math.floor(rgb.blue / 255 * 31)));
                                          }
                                          
                                          type RGB = {
                                              red: number,
                                              green: number,
                                              blue: number
                                          };
                                          
                                          type Payload = {
                                              payload: string;
                                          };
                                          
                                          type Page = {
                                              type: string,
                                              heading: string,
                                              items: PageItem[],
                                              useColor: boolean
                                          };
                                          
                                          interface PageEntities extends Page {
                                              type: "cardEntities",
                                              items: PageItem[],
                                          
                                          };
                                          interface PageGrid extends Page {
                                              type: "cardGrid",
                                              items: PageItem[],
                                          };
                                          
                                          interface PageThermo extends Page {
                                              type: "cardThermo",
                                              items: PageItem[],
                                          };
                                          
                                          interface PageMedia extends Page {
                                              type: "cardMedia",
                                              items: PageItem[],
                                          };
                                          
                                          interface PageAlarm extends Page {
                                              type: "cardAlarm",
                                              items: PageItem[],
                                          };
                                          
                                          type PageItem = {
                                              id: string,
                                              icon: (string | undefined),
                                              onColor: (RGB | undefined),
                                              offColor: (RGB | undefined),
                                              useColor: (boolean | undefined),
                                              interpolateColor: (boolean | undefined),
                                              minValue: (number | undefined),
                                              maxValue: (number | undefined),
                                              name: (string | undefined)
                                          }
                                          
                                          type Config = {
                                              panelRecvTopic: string,
                                              panelSendTopic: string,
                                              timeoutScreensaver: number,
                                              dimmode: number,
                                              //brightnessScreensaver:
                                              locale: string,
                                              timeFormat: string,
                                              dateFormat: string,
                                              weatherEntity: string | null,
                                              screenSaverDoubleClick: boolean,
                                              temperatureUnit: string,
                                              firstScreensaverEntity: ScreenSaverElement | null,
                                              secondScreensaverEntity: ScreenSaverElement | null,
                                              thirdScreensaverEntity: ScreenSaverElement | null,
                                              fourthScreensaverEntity: ScreenSaverElement | null,
                                              defaultColor: RGB,
                                              defaultOnColor: RGB,
                                              defaultOffColor: RGB,
                                              pages: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid)[],
                                              button1Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                                              button2Page: (PageThermo | PageMedia | PageAlarm | PageEntities | PageGrid | null),
                                          };
                                          
                                          type ScreenSaverElement = {
                                              ScreensaverEntity: string | null,
                                              ScreensaverEntityIcon: string | null,
                                              ScreensaverEntityText: string | null,
                                              ScreensaverEntityUnitText: string | null,
                                          }
                                          
                                          
                                          • Unter ioBroker/Skripte weiteres Type-Script unter global !!!! (nicht common, etc) anlegen (Name: Blabla oder NSPanel_icon_mapping, etc)

                                          • Inhalt aus Datei icon_mapping.ts von Github https://github.com/joBr99/nspanel-lovelace-ui/tree/main/ioBroker (nicht wundern, wenn die etwas zerrissen aussieht - Fragezeichen, etc.) einfügen und speichern

                                          • Beide Skripte starten nicht vergessen

                                          Ab jetzt holt sich das Hauptscript (Inhalt der NsPanelTs.ts) die Icons aus der Mapping-Datei.

                                          Jetzt noch NSPanel-Parameter (ALIASE, MQTT-anpassen, Datenpunkte) anpassen oder weitere Seiten gestalten und einfügen
                                          Sollten weitere oder andere Icons gewünscht sein dann auf https://htmlpreview.github.io/?https://github.com/joBr99/nspanel-lovelace-ui/blob/main/HMI/icon-cheatsheet.html nachsehen und den Namen entsprechend an der Stelle des Icons im Script tauschen.

                                          Ich hoffe das hilft :+1:

                                          MikewolfM Offline
                                          MikewolfM Offline
                                          Mikewolf
                                          schrieb am zuletzt editiert von
                                          #222

                                          @armilar
                                          Soweit alles gemacht im Display (konsole kommt )

                                          mqtt.0.panel1.cmnd.CustomSend10:11:24.683 MQT: panel1/STATE = {"Time":"2022-04-14T10:11:24","Uptime":"0T00:05:10","UptimeSec":310,"Heap":169,"SleepMode":"Dynamic","Sleep":0,"LoadAvg":999,"MqttCount":1,"Berry":{"HeapUsed":14,"Objects":220},"POWER1":"ON","POWER2":"OFF","Wifi":{"AP":1,"SSId":"UbiNes1","BSSId":"E0:63:DA:BA:48:54","Channel":13,"Mode":"11n","RSSI":82,"Signal":-59,"LinkCount":1,"Downtime":"0T00:00:04"}}
                                          10:11:24.744 MQT: panel1/SENSOR = {"Time":"2022-04-14T10:11:24","ANALOG":{"Temperature1":23.6},"ESP32":{"Temperature":46.7},"TempUnit":"C"}
                                          10:11:28.326 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:11:28.828 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:11:28.876 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:11:28.919 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:11:28.975 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:11:29.024 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:11:29.078 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:11:29.126 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:11:34.731 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          

                                          Im Display steht waiting for Content
                                          This take longer ...
                                          Mit freundlichen Grüßen
                                          mikewolf

                                          Homematic (ca450 Rf komponenten), FS20,Alexas,Sonoff,ESP,Arduino,Lightly,Milight,NEEO,Harmony,Synology,HP-Gen8

                                          RF-link,Dreamboxen,Raspi,Cubie,Odroid,Fritz,Xiaomi-Vaccum,

                                          H 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          880

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe