Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Hardware
    4. Sonoff NSPanel

    NEWS

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    • Save The Date: ioBroker@Smart Living Forum Solingen, 14.06.

    Sonoff NSPanel

    This topic has been deleted. Only users with topic management privileges can see it.
    • britzelpuf
      britzelpuf @Armilar last edited by

      @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.

      Armilar R 5 Replies Last reply Reply Quote 0
      • Armilar
        Armilar Most Active Forum Testing @britzelpuf last edited by Armilar

        @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

        1 Reply Last reply Reply Quote 0
        • J
          joBr99 @britzelpuf last edited by 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

          Armilar Mikewolf 2 Replies Last reply Reply Quote 0
          • Armilar
            Armilar Most Active Forum Testing @britzelpuf last edited by

            @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ß... 😉

            1 Reply Last reply Reply Quote 0
            • Armilar
              Armilar Most Active Forum Testing @joBr99 last edited by

              @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 Reply Last reply Reply Quote 0
              • Mikewolf
                Mikewolf @joBr99 last edited by 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 Armilar 2 Replies Last reply Reply Quote 0
                • R
                  ronny130286 @Mikewolf last edited by

                  @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 Reply Last reply Reply Quote 0
                  • Armilar
                    Armilar Most Active Forum Testing @Mikewolf last edited by 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 👍

                    Armilar M 2 Replies Last reply Reply Quote 2
                    • Armilar
                      Armilar Most Active Forum Testing @Armilar last edited by 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 👍

                      Mikewolf 1 Reply Last reply Reply Quote 0
                      • Armilar
                        Armilar Most Active Forum Testing @britzelpuf last edited by 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 1 Reply Last reply Reply Quote 0
                        • R
                          ronny130286 @Armilar last edited by

                          @armilar

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

                          function HandleButtonEvent(words): void
                          
                          Armilar 2 Replies Last reply Reply Quote 0
                          • Armilar
                            Armilar Most Active Forum Testing @ronny130286 last edited by 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
                            

                            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;
                            
                            1 Reply Last reply Reply Quote 0
                            • Armilar
                              Armilar Most Active Forum Testing @ronny130286 last edited by

                              @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 1 Reply Last reply Reply Quote 0
                              • R
                                ronny130286 @Armilar last edited by

                                @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 😉

                                Armilar 2 Replies Last reply Reply Quote 0
                                • Armilar
                                  Armilar Most Active Forum Testing @ronny130286 last edited by

                                  @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

                                  1 Reply Last reply Reply Quote 0
                                  • R
                                    ronny130286 @britzelpuf last edited by

                                    @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 😄

                                    1 Reply Last reply Reply Quote 0
                                    • Mikewolf
                                      Mikewolf @Armilar last edited by

                                      @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

                                      H 1 Reply Last reply Reply Quote 0
                                      • H
                                        holgerwolf @Mikewolf last edited by

                                        @mikewolf Hast du den MQTT Explorer laufen?

                                        Dann setze mal unter CustomSend z Bsp den Topic "time, 10:32" ab.

                                        Mikewolf 1 Reply Last reply Reply Quote 0
                                        • Mikewolf
                                          Mikewolf @holgerwolf last edited by

                                          @holgerwolf said in Sonoff NSPanel:

                                          "time, 10:32"

                                          hallo habe mit Mqtt Explorer gesendet

                                          10:41:56.641 MQT: panel1/STATE = {"Time":"2022-04-14T10:41:56","Uptime":"0T00:15:10","UptimeSec":910,"Heap":168,"SleepMode":"Dynamic","Sleep":0,"LoadAvg":999,"MqttCount":2,"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":86,"Signal":-57,"LinkCount":1,"Downtime":"0T00:00:04"}}
                                          10:41:56.675 MQT: panel1/SENSOR = {"Time":"2022-04-14T10:41:56","ANALOG":{"Temperature1":27.5},"ESP32":{"Temperature":51.7},"TempUnit":"C"}
                                          10:42:00.422 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:42:06.319 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:42:08.464 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:42:11.666 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:42:12.317 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:42:17.115 MQT: panel1/RESULT = {"Command":"Unknown"}
                                          10:42:18.217 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:42:21.131 MQT: panel1/RESULT = {"CustomSend":"Done"}
                                          10:42:24.116 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:42:25.332 MQT: panel1/RESULT = {"CustomSend":"Done"}
                                          10:42:28.830 MQT: panel1/RESULT = {"CustomSend":"Done"}
                                          10:42:30.122 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:42:36.030 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          10:42:41.919 MQT: panel1/RESULT = {"CustomRecv":"event,startup,31,eu"}
                                          

                                          mein Panel heißt panel1
                                          habe alle namen auch in Mqtt und Tasmota auf panel1 gesetzt um irrtümer zu vermeiden

                                          H Armilar 2 Replies Last reply Reply Quote 0
                                          • H
                                            holgerwolf @Mikewolf last edited by

                                            @mikewolf Also das muss im MQTT Explorer so aussehen:

                                            fa183acb-d8ea-4a92-84ef-5984f3b47468-grafik.png

                                            Und dann unter "CustomSend" mal einen beliebigen time Befehl abgeben.
                                            Der sollte in der Tasmota Console dann auch auftauchen.

                                            Mikewolf H 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            925
                                            Online

                                            31.6k
                                            Users

                                            79.4k
                                            Topics

                                            1.3m
                                            Posts

                                            78
                                            1548
                                            392106
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo