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

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

Community Forum

  1. ioBroker Community Home
  2. Deutsch
  3. Hardware
  4. SONOFF NSPanel mit Lovelace UI

NEWS

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

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

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

SONOFF NSPanel mit Lovelace UI

Geplant Angeheftet Gesperrt Verschoben Hardware
lovelace uinspanelsonoff
7.8k Beiträge 272 Kommentatoren 6.7m Aufrufe 254 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • F Offline
    F Offline
    Futty
    schrieb am zuletzt editiert von Futty
    #3665

    Guten Abend,

    ich hätte mal wieder ein Problem mit der ThermoCard.
    Der Alias bzw. Button Power funktioniert nicht so wie erwartet / erhofft.

    Folgende Objekte habe ich:
    aa2e8ac7-2fdd-4079-a2b6-5560ee801039-image.png

    Der Alias dazu sieht so aus, Power wird mir (warum auch immer) nach dem erstellen nicht mehr angezeigt:
    88b3c6b3-5390-4393-8b6d-107d9f2500a6-image.png

    Definition NSPanel-Skript:

    let Thermostat_Wohnzimmer = <PageThermo>
        {
            "type": "cardThermo",
            "heading": "Thermostat",
            "useColor": true,
            "subPage": false,
            "items": [<PageItem>{ id: AliasPath + 'ThermostatWohnbereich', minValue: 50, maxValue: 300 }]
        };
    

    AliasManager:
    bfe9d183-97ec-4894-9d85-6696a7e3af37-image.png

    Debug beim Drücken des Powerbuttons links unten im Display:

    6.9.2023, 00:20:44.967	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleButtonEvent übergebene Werte event - buttonPress2 - alias.0.NSPanel.1.ThermostatWohnbereich - hvac_action - POW - PageId: 1
    6.9.2023, 00:20:44.968	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleButtonEvent buttonAction: hvac_action
    6.9.2023, 00:20:44.979	[info ]: javascript.0 (2440423) script.js.common.NSPanel: GetNavigationString Übergabe pageId: 1
    6.9.2023, 00:20:44.980	[info ]: javascript.0 (2440423) script.js.common.NSPanel: thermostat - Currently
    6.9.2023, 00:20:44.985	[info ]: javascript.0 (2440423) script.js.common.NSPanel: thermostat - State
    6.9.2023, 00:20:44.989	[info ]: javascript.0 (2440423) script.js.common.NSPanel: GenerateThermoPage payload: [object Object],[object Object]
    6.9.2023, 00:20:44.991	[info ]: javascript.0 (2440423) script.js.common.NSPanel: function SendToPanel payload: pageType~cardThermo
    6.9.2023, 00:20:44.992	[info ]: javascript.0 (2440423) script.js.common.NSPanel: function SendToPanel payload: entityUpd~Thermostat~button~bPrev~~65535~~~button~bNext~~65535~~~alias.0.NSPanel.1.ThermostatWohnbereich~22.4°C~220~MANU~50~300~5~~2016~1~POW~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Aktuell~Zustand~~°C~~1
    6.9.2023, 00:20:44.992	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleMessage -> buttonPress2 event - buttonPress2 - alias.0.NSPanel.1.ThermostatWohnbereich - hvac_action - POW
    

    Der Powerbutton erscheint, allerdings kann ich hiermit bei Betätigung das Objekt nicht steuern, Quasi nur eine Anzeige.
    Wenn ich das Objekt manuell auf Toogle, verändert sich die Farbe.
    Drücke ich auf den Button baut sich die Seite erneut auf, sonst passiert nichts.

    Ich hab testweise mal AUTOMATIC und MANUAL als Alias hinzugefügt, diese Buttons kann ich wie erwartet auch steuern.
    Ideen? Danke!

    T 1 Antwort Letzte Antwort
    0
    • F Futty

      Guten Abend,

      ich hätte mal wieder ein Problem mit der ThermoCard.
      Der Alias bzw. Button Power funktioniert nicht so wie erwartet / erhofft.

      Folgende Objekte habe ich:
      aa2e8ac7-2fdd-4079-a2b6-5560ee801039-image.png

      Der Alias dazu sieht so aus, Power wird mir (warum auch immer) nach dem erstellen nicht mehr angezeigt:
      88b3c6b3-5390-4393-8b6d-107d9f2500a6-image.png

      Definition NSPanel-Skript:

      let Thermostat_Wohnzimmer = <PageThermo>
          {
              "type": "cardThermo",
              "heading": "Thermostat",
              "useColor": true,
              "subPage": false,
              "items": [<PageItem>{ id: AliasPath + 'ThermostatWohnbereich', minValue: 50, maxValue: 300 }]
          };
      

      AliasManager:
      bfe9d183-97ec-4894-9d85-6696a7e3af37-image.png

      Debug beim Drücken des Powerbuttons links unten im Display:

      6.9.2023, 00:20:44.967	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleButtonEvent übergebene Werte event - buttonPress2 - alias.0.NSPanel.1.ThermostatWohnbereich - hvac_action - POW - PageId: 1
      6.9.2023, 00:20:44.968	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleButtonEvent buttonAction: hvac_action
      6.9.2023, 00:20:44.979	[info ]: javascript.0 (2440423) script.js.common.NSPanel: GetNavigationString Übergabe pageId: 1
      6.9.2023, 00:20:44.980	[info ]: javascript.0 (2440423) script.js.common.NSPanel: thermostat - Currently
      6.9.2023, 00:20:44.985	[info ]: javascript.0 (2440423) script.js.common.NSPanel: thermostat - State
      6.9.2023, 00:20:44.989	[info ]: javascript.0 (2440423) script.js.common.NSPanel: GenerateThermoPage payload: [object Object],[object Object]
      6.9.2023, 00:20:44.991	[info ]: javascript.0 (2440423) script.js.common.NSPanel: function SendToPanel payload: pageType~cardThermo
      6.9.2023, 00:20:44.992	[info ]: javascript.0 (2440423) script.js.common.NSPanel: function SendToPanel payload: entityUpd~Thermostat~button~bPrev~~65535~~~button~bNext~~65535~~~alias.0.NSPanel.1.ThermostatWohnbereich~22.4°C~220~MANU~50~300~5~~2016~1~POW~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Aktuell~Zustand~~°C~~1
      6.9.2023, 00:20:44.992	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleMessage -> buttonPress2 event - buttonPress2 - alias.0.NSPanel.1.ThermostatWohnbereich - hvac_action - POW
      

      Der Powerbutton erscheint, allerdings kann ich hiermit bei Betätigung das Objekt nicht steuern, Quasi nur eine Anzeige.
      Wenn ich das Objekt manuell auf Toogle, verändert sich die Farbe.
      Drücke ich auf den Button baut sich die Seite erneut auf, sonst passiert nichts.

      Ich hab testweise mal AUTOMATIC und MANUAL als Alias hinzugefügt, diese Buttons kann ich wie erwartet auch steuern.
      Ideen? Danke!

      T Offline
      T Offline
      TT-Tom
      schrieb am zuletzt editiert von
      #3666

      @futty

      Hast du beim Test den Alias geändert oder den Datenpunkt unter 0_userdata.0 ?

      Gruß Tom
      https://github.com/tt-tom17
      Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

      NSPanel Script Wiki
      https://github.com/joBr99/nspanel-lovelace-ui/wiki

      NSPanel Adapter Wiki
      https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

      D F 2 Antworten Letzte Antwort
      0
      • T TT-Tom

        @futty

        Hast du beim Test den Alias geändert oder den Datenpunkt unter 0_userdata.0 ?

        D Offline
        D Offline
        danny_v1
        schrieb am zuletzt editiert von
        #3667

        Hi, hab eine kurze Frage, aufgrund der vielen Abstürze von Accuweather wollte ich dasWetter verwenden. Da werden allerdings keine Icons im Screensaver angezeigt (oben das große Icon ist zb ein Ausrufezeichen in einem Kreis).

        Wie bekomme ich das hin?

        T 1 Antwort Letzte Antwort
        0
        • L Offline
          L Offline
          lesiflo
          Most Active
          schrieb am zuletzt editiert von lesiflo
          #3668

          Moin, gibt es die Möglichkeit bei Typ "cardGrid" oder "cardGrid2" das Icon eines PageItems in Abhängigkeit vom Status zu ändern? Im Moment benutze ich dafür 2 Items die ich wechselweise ein und ausschalte.

                  <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-1-circle', name: "Phasen", onColor: MSGreen, offColor: Gray},
                  <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-3-circle', name: "Phasen", onColor: Gray, offColor: MSGreen},
          
          

          1693987904594.jpg

          T D 2 Antworten Letzte Antwort
          0
          • D danny_v1

            Hi, hab eine kurze Frage, aufgrund der vielen Abstürze von Accuweather wollte ich dasWetter verwenden. Da werden allerdings keine Icons im Screensaver angezeigt (oben das große Icon ist zb ein Ausrufezeichen in einem Kreis).

            Wie bekomme ich das hin?

            T Offline
            T Offline
            TT-Tom
            schrieb am zuletzt editiert von
            #3669

            @danny_v1
            im Script richtig angepasst? Du musst auch die bottomScreensaverEntity ggf. anpassen.

            const weatherAdapterInstance: string = 'accuweather.0.';    // Möglich 'accuweather.0.' oder 'daswetter.0.'
            

            Gruß Tom
            https://github.com/tt-tom17
            Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

            NSPanel Script Wiki
            https://github.com/joBr99/nspanel-lovelace-ui/wiki

            NSPanel Adapter Wiki
            https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

            1 Antwort Letzte Antwort
            0
            • T TT-Tom

              @futty

              Hast du beim Test den Alias geändert oder den Datenpunkt unter 0_userdata.0 ?

              F Offline
              F Offline
              Futty
              schrieb am zuletzt editiert von Futty
              #3670

              @tt-tom
              Im Test habe ich den Alias geändert. Habe es gerade noch mal mit Datenpunkt 0_userdata.0 geprüft, dort ist das gleiche Verhalten. Die Datenpunkte sind auch verbunden, ändern also unabhängig ob ich im Alias oder im Datenpunkt 0_userdata.0 manuell den Wert über den Objektbaum ändere den Zustand mit.

              Es sieht so aus das der Zugriff nur lesend erfolgt bzw. erfolgen kann.
              Der angelegte Datenpunkt hat aber auch Schreibberechtigung:
              2422619b-a2cc-4e9e-a844-9859082f7905-image.png
              6ab3cda3-1d2f-4ec9-a43c-fd595c6b06b7-image.png
              3f8492fa-f23f-4a7e-8559-38e5652a2f0d-image.png
              bd54bcf3-bec9-4081-8272-65b820132054-image.png

              T 2 Antworten Letzte Antwort
              0
              • L lesiflo

                Moin, gibt es die Möglichkeit bei Typ "cardGrid" oder "cardGrid2" das Icon eines PageItems in Abhängigkeit vom Status zu ändern? Im Moment benutze ich dafür 2 Items die ich wechselweise ein und ausschalte.

                        <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-1-circle', name: "Phasen", onColor: MSGreen, offColor: Gray},
                        <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-3-circle', name: "Phasen", onColor: Gray, offColor: MSGreen},
                
                

                1693987904594.jpg

                T Offline
                T Offline
                TT-Tom
                schrieb am zuletzt editiert von
                #3671

                @lesiflo

                Es gibt mehrere Möglichkeiten, entscheidend ist die Art des Datenpunkt. Der Channel alias.0.Auto.Phasen ist was für ein Typ und welche die Datenpunkte darunter => boolean , number?

                Gruß Tom
                https://github.com/tt-tom17
                Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

                NSPanel Script Wiki
                https://github.com/joBr99/nspanel-lovelace-ui/wiki

                NSPanel Adapter Wiki
                https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

                L 1 Antwort Letzte Antwort
                0
                • F Futty

                  @tt-tom
                  Im Test habe ich den Alias geändert. Habe es gerade noch mal mit Datenpunkt 0_userdata.0 geprüft, dort ist das gleiche Verhalten. Die Datenpunkte sind auch verbunden, ändern also unabhängig ob ich im Alias oder im Datenpunkt 0_userdata.0 manuell den Wert über den Objektbaum ändere den Zustand mit.

                  Es sieht so aus das der Zugriff nur lesend erfolgt bzw. erfolgen kann.
                  Der angelegte Datenpunkt hat aber auch Schreibberechtigung:
                  2422619b-a2cc-4e9e-a844-9859082f7905-image.png
                  6ab3cda3-1d2f-4ec9-a43c-fd595c6b06b7-image.png
                  3f8492fa-f23f-4a7e-8559-38e5652a2f0d-image.png
                  bd54bcf3-bec9-4081-8272-65b820132054-image.png

                  T Offline
                  T Offline
                  TT-Tom
                  schrieb am zuletzt editiert von
                  #3672

                  @Futty

                  was ich so am Handy sehen konnte ist vermutlich ein Bug im Script. Sehe ich mir heute Abend genauer an.

                  Gruß Tom
                  https://github.com/tt-tom17
                  Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

                  NSPanel Script Wiki
                  https://github.com/joBr99/nspanel-lovelace-ui/wiki

                  NSPanel Adapter Wiki
                  https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

                  1 Antwort Letzte Antwort
                  0
                  • N Offline
                    N Offline
                    niiccooo1
                    schrieb am zuletzt editiert von
                    #3673

                    Hallo Zusammen,

                    ich habe eine Frage bezüglich WLED. Auf der UI ist folgender Slider vorhanden:
                    529a1c0c-e835-4b0d-bfc6-5ec23782d4ce-image.png

                    Bei Änderung des Sliders ändern sich folgende Datenpunkte im WLED-Adapter:
                    c39df8bc-87fe-48ad-b374-34ef725ab6d8-image.png

                    Besteht die Möglichkeit diesen Slider im NSPanel abzubilden? Ich vermute das im NSPanel der Alias Farbtemperatur verwendet wird. Der Datenpunkt TEMPERATURE ist ein Wert zwischen 0 und 255 oder?

                    Vielen Dank!

                    T 1 Antwort Letzte Antwort
                    0
                    • T TT-Tom

                      @lesiflo

                      Es gibt mehrere Möglichkeiten, entscheidend ist die Art des Datenpunkt. Der Channel alias.0.Auto.Phasen ist was für ein Typ und welche die Datenpunkte darunter => boolean , number?

                      L Offline
                      L Offline
                      lesiflo
                      Most Active
                      schrieb am zuletzt editiert von
                      #3674

                      @tt-tom Der Datenpunkt "Phasen" ist ursprünglich vom Typ number (1 oder 3). Für das Panel habe ich noch einen weiteren vom Typ boolean angelegt und das mit den zwei Schaltern zu realisieren. Am liebsten hätte ich einen Taster den man zwischen "1" und "3" umschalten kann.

                      T 1 Antwort Letzte Antwort
                      0
                      • L lesiflo

                        @tt-tom Der Datenpunkt "Phasen" ist ursprünglich vom Typ number (1 oder 3). Für das Panel habe ich noch einen weiteren vom Typ boolean angelegt und das mit den zwei Schaltern zu realisieren. Am liebsten hätte ich einen Taster den man zwischen "1" und "3" umschalten kann.

                        T Offline
                        T Offline
                        TT-Tom
                        schrieb am zuletzt editiert von
                        #3675

                        @lesiflo

                        Wenn boolean dann nimm die Parameter icon und icon2 und weißt diesen die entsprechenden Symbole zu. Hat der Channel Phasen die Rolle Info?

                        Gruß Tom
                        https://github.com/tt-tom17
                        Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

                        NSPanel Script Wiki
                        https://github.com/joBr99/nspanel-lovelace-ui/wiki

                        NSPanel Adapter Wiki
                        https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

                        L 1 Antwort Letzte Antwort
                        0
                        • V Offline
                          V Offline
                          Vocaris
                          schrieb am zuletzt editiert von Vocaris
                          #3676

                          Hallo Gemeinde. Ich habe lange nichts mehr mit dem NS Panel gemacht. Er lag jetzt lange hier nur rum.
                          Ich habe jetzt einen kleinen Notfall und muss das Panel in die Küche setzen, da der dortige WLAN Schalter kaputt ist.
                          Nun ist das Panel ja via MQTT verbunden, damit auf dem Display der Inhalt meines alten Scriptes angezeigt wird.
                          Wenn ich im NSPanel den MQTT Server auf den Sonoff Server umstelle, habe ich das Gerät auch in Alexa. Aber dann nix auf dem Display. Also muss er mit dem MQTT Server verbunden bleiben. Aber wie bekomme ich eine MQTT Gerät in Alexa als Gerät angezeigt, damit ich damit die beiden Hardwaretasten steuern kann.
                          Danke für die Hilfe
                          PS: wenn ich über den IOT Adapter eine Alexa Gerät erstelle und auf den MQTT Punkt Power1 und Power2 verweise, dann schaltet Alexa die Befehle zwar. Aber sie setzt TRUE und FALSE anstatt ON und OFF. Und eine Änderung der Werte im MQTT Baum löst an der Hardware leider nichts aus. Auch wenn ich im MQTT manuell ON oder OFF eingebe, passiert am Panel nix.

                          T 1 Antwort Letzte Antwort
                          0
                          • T TT-Tom

                            @lesiflo

                            Wenn boolean dann nimm die Parameter icon und icon2 und weißt diesen die entsprechenden Symbole zu. Hat der Channel Phasen die Rolle Info?

                            L Offline
                            L Offline
                            lesiflo
                            Most Active
                            schrieb am zuletzt editiert von
                            #3677

                            @tt-tom Hab's gerade gefunden. Danke klappt!

                            1 Antwort Letzte Antwort
                            0
                            • D Offline
                              D Offline
                              danny_v1
                              schrieb am zuletzt editiert von
                              #3678

                              @tt-tom Danke werd ich heute Abend mal prüfen

                              T 1 Antwort Letzte Antwort
                              0
                              • N niiccooo1

                                Hallo Zusammen,

                                ich habe eine Frage bezüglich WLED. Auf der UI ist folgender Slider vorhanden:
                                529a1c0c-e835-4b0d-bfc6-5ec23782d4ce-image.png

                                Bei Änderung des Sliders ändern sich folgende Datenpunkte im WLED-Adapter:
                                c39df8bc-87fe-48ad-b374-34ef725ab6d8-image.png

                                Besteht die Möglichkeit diesen Slider im NSPanel abzubilden? Ich vermute das im NSPanel der Alias Farbtemperatur verwendet wird. Der Datenpunkt TEMPERATURE ist ein Wert zwischen 0 und 255 oder?

                                Vielen Dank!

                                T Offline
                                T Offline
                                TT-Tom
                                schrieb am zuletzt editiert von
                                #3679

                                @niiccooo1

                                schau dir mal das im WIKI an.

                                Gruß Tom
                                https://github.com/tt-tom17
                                Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

                                NSPanel Script Wiki
                                https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                NSPanel Adapter Wiki
                                https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

                                1 Antwort Letzte Antwort
                                0
                                • L lesiflo

                                  Moin, gibt es die Möglichkeit bei Typ "cardGrid" oder "cardGrid2" das Icon eines PageItems in Abhängigkeit vom Status zu ändern? Im Moment benutze ich dafür 2 Items die ich wechselweise ein und ausschalte.

                                          <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-1-circle', name: "Phasen", onColor: MSGreen, offColor: Gray},
                                          <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-3-circle', name: "Phasen", onColor: Gray, offColor: MSGreen},
                                  
                                  

                                  1693987904594.jpg

                                  D Offline
                                  D Offline
                                  danny_v1
                                  schrieb am zuletzt editiert von
                                  #3680

                                  @lesiflo said in SONOFF NSPanel mit Lovelace UI:

                                  Moin, gibt es die Möglichkeit bei Typ "cardGrid" oder "cardGrid2" das Icon eines PageItems in Abhängigkeit vom Status zu ändern? Im Moment benutze ich dafür 2 Items die ich wechselweise ein und ausschalte.

                                          <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-1-circle', name: "Phasen", onColor: MSGreen, offColor: Gray},
                                          <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-3-circle', name: "Phasen", onColor: Gray, offColor: MSGreen},
                                  
                                  

                                  1693987904594.jpg

                                  Genau die Funktion hätte ich auch gern, enbenso das zb. nur Elemente mit dem Status "on" angezeigt werden.

                                  T L 2 Antworten Letzte Antwort
                                  0
                                  • D danny_v1

                                    @tt-tom Danke werd ich heute Abend mal prüfen

                                    T Offline
                                    T Offline
                                    TT-Tom
                                    schrieb am zuletzt editiert von
                                    #3681

                                    @danny_v1
                                    warum stürzt bei dir Accuweather ab. Läuft bei mir problemlos. Du darfst mit dem API Schlüssel nur eine Instanz laufen lassen.

                                    Gruß Tom
                                    https://github.com/tt-tom17
                                    Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

                                    NSPanel Script Wiki
                                    https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                    NSPanel Adapter Wiki
                                    https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

                                    D 1 Antwort Letzte Antwort
                                    0
                                    • D danny_v1

                                      @lesiflo said in SONOFF NSPanel mit Lovelace UI:

                                      Moin, gibt es die Möglichkeit bei Typ "cardGrid" oder "cardGrid2" das Icon eines PageItems in Abhängigkeit vom Status zu ändern? Im Moment benutze ich dafür 2 Items die ich wechselweise ein und ausschalte.

                                              <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-1-circle', name: "Phasen", onColor: MSGreen, offColor: Gray},
                                              <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-3-circle', name: "Phasen", onColor: Gray, offColor: MSGreen},
                                      
                                      

                                      1693987904594.jpg

                                      Genau die Funktion hätte ich auch gern, enbenso das zb. nur Elemente mit dem Status "on" angezeigt werden.

                                      T Offline
                                      T Offline
                                      TT-Tom
                                      schrieb am zuletzt editiert von
                                      #3682

                                      @danny_v1

                                      zeige mal die Datenpunkte die du anzeigen möchtest

                                      Gruß Tom
                                      https://github.com/tt-tom17
                                      Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

                                      NSPanel Script Wiki
                                      https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                      NSPanel Adapter Wiki
                                      https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

                                      D 1 Antwort Letzte Antwort
                                      0
                                      • N Offline
                                        N Offline
                                        niiccooo1
                                        schrieb am zuletzt editiert von
                                        #3683

                                        @tt-tom Danke für die Verknüpfung.

                                        Ich hätte erwähnen sollen, dass der WLED-Adapter den Datenpunkt Temperatur nicht direkt darstellt.
                                        Über den Slider werden lediglich die Farbcodierung RGB oder HEX geändert.
                                        Im Prinzip bräuchte eine Umrechnung von Kelvin nach RGB.

                                        Hat das jemand schon mal gemacht?

                                        T 1 Antwort Letzte Antwort
                                        0
                                        • N niiccooo1

                                          @tt-tom Danke für die Verknüpfung.

                                          Ich hätte erwähnen sollen, dass der WLED-Adapter den Datenpunkt Temperatur nicht direkt darstellt.
                                          Über den Slider werden lediglich die Farbcodierung RGB oder HEX geändert.
                                          Im Prinzip bräuchte eine Umrechnung von Kelvin nach RGB.

                                          Hat das jemand schon mal gemacht?

                                          T Offline
                                          T Offline
                                          TT-Tom
                                          schrieb am zuletzt editiert von
                                          #3684

                                          @niiccooo1

                                          ich hatte mal dieses Script genutzt und als Typ dann Hue. Es legt dir Datenpunkte unter 0_userdata an, die musst du dann mit dem Alias verknüpfen.
                                          teste mal

                                          // ##############################
                                          // ######### DutchmanNL #########
                                          // ###### HSV Color to HEX ######
                                          // ############ V1.0 ############
                                          // ##############################
                                          
                                          // Add the state containing HEX values here :
                                          const colorSourceHex = [
                                                 // Beispiel Zigbee 'zigbee.0.group_2.color', 
                                                 'wled.0.4c11ae0dce1e.seg.0.col.0_HEX', //  WLED_TV
                                                 'wled.0.4c11ae0dd3ac.seg.0.col.0_HEX', //  WLED_links
                                                 'wled.0.4c11ae0dd0a3.seg.0.col.0_HEX'  //  WLED_Mitte 
                                          ];
                                          
                                          // #####################################
                                          // ## Don't change anything from here ##
                                          // #####################################
                                          
                                          // Prepare variables
                                          const mySubscription = {}, debounceTimer = {};
                                          
                                          // Create Folder structure
                                          extendObjectAsync(`0_userdata.0.HEXtoHSL` , {
                                             "type": "folder",
                                             "common": {
                                             "name": 'Convert HEX to HSL color',
                                                 "role": "",
                                                 "icon": "",
                                          },
                                             "native": {},
                                          });
                                          
                                          // Read all array objects, create new state in javascript instance and subscribe on changes
                                          for (const device in colorSourceHex) {
                                          
                                             // Define folder structure in userdata directory
                                             const statePrepare = colorSourceHex[device].split('.');
                                             const deviceName = `0_userdata.0.HEXtoHSL.${statePrepare[0]}_${statePrepare[1]}_${statePrepare[2]}`
                                          
                                             // Create Device Structure
                                             extendObjectAsync(deviceName , {
                                                 "type": "device",
                                                 "common": {
                                                 "name": statePrepare[2],
                                                     "role": "",
                                                     "icon": "",
                                             },
                                                 "native": {},
                                             });
                                          
                                             // States to cover Hue and Sat values
                                             createState(`${deviceName}.hue` , {
                                             	'name': `Hue of ${statePrepare[2]}`,
                                             	'role': 'level.color.hue',
                                             	'type': 'number'
                                             });
                                             // @ts-ignore
                                             createState(`${deviceName}.sat`, {
                                             	'name': `Sat of ${statePrepare[2]}`,
                                             	'role': 'level.color.sat',
                                             	'type': 'number'
                                             });
                                          
                                             // Subscribe on state changes for HUE and Saturation
                                             // @ts-ignore
                                             mySubscription[`${deviceName}.hue`] = on(
                                                 [`${deviceName}.hue`, 
                                                 `${deviceName}.sat`
                                                 ], (data) => {
                                          
                                                 // DebounceTimer
                                                 // Reset timer (if running) and start new one for next watchdog interval
                                             	if (debounceTimer[colorSourceHex[device]]) {
                                             		clearTimeout(debounceTimer[colorSourceHex[device]]);
                                             		debounceTimer[colorSourceHex[device]] = null;
                                             	}
                                             	debounceTimer[colorSourceHex[device]] = setTimeout(() => {
                                          
                                                     if (!data.state.ack){
                                                         const h = getState(`${deviceName}.hue`).val / 360;
                                                         const s = getState(`${deviceName}.sat`).val / 100;
                                                         const v = 1;
                                                         const colorRGB = hsvTOrgb(h,s,v)
                                                         const colorHEX = rgbTOhex(colorRGB)
                                                         // console.log(`HSV value : ${h}, ${s}, ${v}`);
                                                         setState(`${colorSourceHex[device]}`, colorHEX);
                                                     }
                                                 
                                                 }, (500));
                                             });
                                          
                                             // Subscribe on state changes for HEX surce
                                             mySubscription[`${deviceName}.hue`] = on(
                                                 [
                                                 `${colorSourceHex[device]}`,
                                                 ], (data) => {
                                                 // DebounceTimer
                                             	if (debounceTimer[colorSourceHex[device]]) {
                                             		clearTimeout(debounceTimer[colorSourceHex[device]]);
                                             		debounceTimer[colorSourceHex[device]] = null;
                                             	}
                                             	debounceTimer[colorSourceHex[device]] = setTimeout(() => {
                                                     
                                                         // console.log(`Device change detected : ${JSON.stringify(data.id)} value : ${data.state.val} | ack : ${data.state.ack}`);
                                                         const colorHEX = data.state.val;
                                                         const colorRGB = hexTOrgb(colorHEX)
                                                         const colorHSV = rgbTOhsv(colorRGB)
                                                         const h = roundDigit(colorHSV[0]);
                                                         console.log(colorHSV);
                                                         const s = roundDigit(colorHSV[1]);
                                                         setState(`${deviceName}.sat`, s, true);
                                                         setState(`${deviceName}.hue`, h, true);
                                                     
                                          
                                                 }, (500));
                                          
                                             });
                                          }
                                          
                                          ////////////////Funktionen////////////////
                                          /**
                                          * Coonvert HSV to RGB
                                          * @param {number} h - HUE value 
                                          * @param {number} s - Saturation value 
                                          * @param {number} v - Brightness value 
                                          */
                                          function hsvTOrgb(h, s, v) {
                                                     var r, g, b, i, f, p, q, t;
                                                     i = Math.floor(h * 6);
                                                     f = h * 6 - i;
                                                     p = v * (1 - s);
                                                     q = v * (1 - f * s);
                                                     t = v * (1 - (1 - f) * s);
                                                     switch (i % 6) {
                                                         case 0: r = v, g = t, b = p; break;
                                                         case 1: r = q, g = v, b = p; break;
                                                         case 2: r = p, g = v, b = t; break;
                                                         case 3: r = p, g = q, b = v; break;
                                                         case 4: r = t, g = p, b = v; break;
                                                         case 5: r = v, g = p, b = q; break;
                                                     }
                                                     console.log(`${r} ${g} ${b}`)
                                                     r=Math.round(255 * r);
                                                     g=Math.round(255 * g);
                                                     b=Math.round(255 * b);
                                                     return [r,g,b];
                                          };
                                          
                                          function rgbTOhsv(rgb) {
                                             let rdif;
                                             let gdif;
                                             let bdif;
                                             let h;
                                             let s;
                                          
                                             const r = rgb[0] / 255;
                                             const g = rgb[1] / 255;
                                             const b = rgb[2] / 255;
                                             const v = Math.max(r, g, b);
                                             const diff = v - Math.min(r, g, b);
                                             const diffc = function (c) {
                                             	return (v - c) / 6 / diff + 1 / 2;
                                             };
                                          
                                             if (diff === 0) {
                                             	h = 0;
                                             	s = 0;
                                             } else {
                                             	s = diff / v;
                                             	rdif = diffc(r);
                                             	gdif = diffc(g);
                                             	bdif = diffc(b);
                                          
                                             	if (r === v) {
                                             		h = bdif - gdif;
                                             	} else if (g === v) {
                                             		h = (1 / 3) + rdif - bdif;
                                             	} else if (b === v) {
                                             		h = (2 / 3) + gdif - rdif;
                                             	}
                                          
                                             	if (h < 0) {
                                             		h += 1;
                                             	} else if (h > 1) {
                                             		h -= 1;
                                             	}
                                             }
                                          
                                             return [
                                             	h * 360,
                                             	s * 100,
                                             	v * 100
                                             ];
                                          };
                                          
                                          function rgbTOhex (args) {
                                             const integer = ((Math.round(args[0]) & 0xFF) << 16)
                                             	+ ((Math.round(args[1]) & 0xFF) << 8)
                                             	+ (Math.round(args[2]) & 0xFF);
                                          
                                             const string = integer.toString(16).toUpperCase();
                                             return '000000'.substring(string.length) + string;
                                          };
                                          
                                          //In HEX konvertieren
                                          function toHex(number) {
                                             if (number < 0) number = 0xFFFFFFFF + number + 1;
                                             var n = number.toString(16).toUpperCase();
                                             if (n.length == 1) {
                                                 n = '0' + n;
                                             }
                                             return n;
                                          }
                                          
                                          // Function to convert HEX to RGB 
                                          function hexTOrgb(args) {
                                             const match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
                                          
                                             if (!match) {
                                                 return [0, 0, 0];
                                             }
                                          
                                             let colorString = match[0];
                                          
                                             if (match[0].length === 3) {
                                                 colorString = colorString.split('').map(char => {
                                                     return char + char;
                                                 }).join('');
                                             }
                                          
                                             const integer = parseInt(colorString, 16);
                                             const r = (integer >> 16) & 0xFF;
                                             const g = (integer >> 8) & 0xFF;
                                             const b = integer & 0xFF;
                                             return [r, g, b];
                                          };
                                          
                                          // Function to convert RGB to HSL
                                          function rgbTOhsl (rgb) {
                                             const r = rgb[0] / 255;
                                             const g = rgb[1] / 255;
                                             const b = rgb[2] / 255;
                                             const min = Math.min(r, g, b);
                                             const max = Math.max(r, g, b);
                                             const delta = max - min;
                                             let h;
                                             let s;
                                          
                                             if (max === min) {
                                             	h = 0;
                                             } else if (r === max) {
                                             	h = (g - b) / delta;
                                             } else if (g === max) {
                                             	h = 2 + (b - r) / delta;
                                             } else if (b === max) {
                                             	h = 4 + (r - g) / delta;
                                             }
                                          
                                             h = Math.min(h * 60, 360);
                                          
                                             if (h < 0) {
                                             	h += 360;
                                             }
                                          
                                             const l = (min + max) / 2;
                                          
                                             if (max === min) {
                                             	s = 0;
                                             } else if (l <= 0.5) {
                                             	s = delta / (max + min);
                                             } else {
                                             	s = delta / (2 - max - min);
                                             }
                                          
                                             return [h, s * 100, l * 100];
                                          };
                                          
                                          // Funtion to round digits properly
                                          function roundDigit(num){
                                             // return Math.round((num + Number.EPSILON) * 100) / 100
                                             return Math.round((num + Number.EPSILON));
                                          }
                                          
                                          

                                          Gruß Tom
                                          https://github.com/tt-tom17
                                          Wenn meine Hilfe erfolgreich war, benutze bitte das Voting unten rechts im Beitrag

                                          NSPanel Script Wiki
                                          https://github.com/joBr99/nspanel-lovelace-ui/wiki

                                          NSPanel Adapter Wiki
                                          https://github.com/ticaki/ioBroker.nspanel-lovelace-ui/wiki

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          313

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          Themen

                                          1.3m

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

                                          • Du hast noch kein Konto? Registrieren

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