Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Hardware
  4. SONOFF NSPanel mit Lovelace UI (TypeScript Version)

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    16
    1
    331

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    4.8k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.3k

SONOFF NSPanel mit Lovelace UI (TypeScript Version)

Scheduled Pinned Locked Moved Hardware
lovelace uinspanelsonoff
8.0k Posts 277 Posters 7.2m Views 262 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • patricknitschP patricknitsch

    @armilar Dann funktioniert die Anleitung Rule 1 mit den Hardware Buttons gar nicht mehr?

    ArmilarA Offline
    ArmilarA Offline
    Armilar
    Most Active Forum Testing
    wrote on last edited by Armilar
    #5610

    @patricknitsch

    Doch klar funktioniert die noch... ist nur ein Fehler drin.

    dürfte eher so aussehen:

    Rule1 on Button1#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bUp"} endon on Button2#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bHome"} endon
    Rule1 1
    

    EDIT: Habe es im Wiki ebenfalls korrigiert.

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

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

    patricknitschP 1 Reply Last reply
    1
    • ArmilarA Armilar

      @patricknitsch

      Doch klar funktioniert die noch... ist nur ein Fehler drin.

      dürfte eher so aussehen:

      Rule1 on Button1#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bUp"} endon on Button2#state do Publish %topic%/tele/RESULT {"CustomRecv":"event,buttonPress2,hwbtn,bHome"} endon
      Rule1 1
      

      EDIT: Habe es im Wiki ebenfalls korrigiert.

      patricknitschP Online
      patricknitschP Online
      patricknitsch
      wrote on last edited by
      #5611

      @armilar Funktioniert! Danke :)

      1 Reply Last reply
      1
      • M Offline
        M Offline
        maik5066
        wrote on last edited by
        #5612

        Hallo Leute, ich würde gern WLED nutzen, ich habe mir alle Anleitungen durchgelesen leider funktioniert es bei mir nicht.

        Wenn es jemand, funktionierend umgesetzt hat, könnt ihr mir das Skript und die CARD zuschicken oder am besten posten.
        Vielen Dank

        1 Reply Last reply
        0
        • T Offline
          T Offline
          TT-Tom
          wrote on last edited by
          #5613

          @maik5066

          Was funktioniert denn nicht bei dir??

          Welche Fehlermeldungen hast du bekommen??

          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

          M 1 Reply Last reply
          0
          • T TT-Tom

            @maik5066

            Was funktioniert denn nicht bei dir??

            Welche Fehlermeldungen hast du bekommen??

            M Offline
            M Offline
            maik5066
            wrote on last edited by
            #5614

            @TT-Tom , danke für deine Rückmeldung. Ich habe das js Skript genutzt und die drei hilfsdatenpunkte angelegt. Wenn ich, wie in der Anleitung das Card Grip kopiere findet er die variable index01 nicht.

            Wäre es nicht möglich, direkt die Effekte datenpunkte des WLED Adapter zu nutzen z. Bsp. fx.

            Habt ihr ein funktionierendes bespiel was ich mir kopieren kann.

            T 1 Reply Last reply
            0
            • N Offline
              N Offline
              nono87
              wrote on last edited by
              #5615

              Guten Morgen,

              ich habe meine Mähroboter wieder aus dem Winterschlaf geholt und wollte diesen gleich einbinden.
              Bisher klappt auch alles wie gewünscht nur leider stoße ich jetzt an meine Grenzen.
              Der Worx gibt als Status eine Zahl mit den States dahinter mit. Diese Zahlen kann ich mittels Info Alias anzeigen. Schöner wäre es natürlich wenn dort als Text steht was gerade passiert. Sei es als Wert oder als Text unter dem Wert.

              Ich hoffe dazu gibt es bereits eine Lösung

              ArmilarA 1 Reply Last reply
              0
              • M maik5066

                @TT-Tom , danke für deine Rückmeldung. Ich habe das js Skript genutzt und die drei hilfsdatenpunkte angelegt. Wenn ich, wie in der Anleitung das Card Grip kopiere findet er die variable index01 nicht.

                Wäre es nicht möglich, direkt die Effekte datenpunkte des WLED Adapter zu nutzen z. Bsp. fx.

                Habt ihr ein funktionierendes bespiel was ich mir kopieren kann.

                T Offline
                T Offline
                TT-Tom
                wrote on last edited by
                #5616

                @maik5066 sagte in SONOFF NSPanel mit Lovelace UI:

                @TT-Tom , danke für deine Rückmeldung. Ich habe das js Skript genutzt und die drei hilfsdatenpunkte angelegt. Wenn ich, wie in der Anleitung das Card Grip kopiere findet er die variable index01 nicht.

                Das "parent": Index01, kannst du weglassen. Wenn deine Seite eine SubPage ist, dann solltest du folgende Parameter setzen

                'subPage': true,
                    'parent': Seite von wo du gesprungen bist ,
                    'home': 'Startseite',
                

                Wäre es nicht möglich, direkt die Effekte datenpunkte des WLED Adapter zu nutzen z. Bsp. fx.

                Das Zusatzscript nutzt die Effekte auf dem Datenpunkt, leider kann das Panel nur einen Index aus der Liste zurücksenden. Deswegen dieser Umweg mit den Hilfsdatenpunkten und Script.

                Habt ihr ein funktionierendes bespiel was ich mir kopieren kann.

                Das Beispiel aus dem Wiki läuft, wenn sich der Adapter/WLED nicht so stark geändert hat.

                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

                M 2 Replies Last reply
                1
                • N nono87

                  Guten Morgen,

                  ich habe meine Mähroboter wieder aus dem Winterschlaf geholt und wollte diesen gleich einbinden.
                  Bisher klappt auch alles wie gewünscht nur leider stoße ich jetzt an meine Grenzen.
                  Der Worx gibt als Status eine Zahl mit den States dahinter mit. Diese Zahlen kann ich mittels Info Alias anzeigen. Schöner wäre es natürlich wenn dort als Text steht was gerade passiert. Sei es als Wert oder als Text unter dem Wert.

                  Ich hoffe dazu gibt es bereits eine Lösung

                  ArmilarA Offline
                  ArmilarA Offline
                  Armilar
                  Most Active Forum Testing
                  wrote on last edited by
                  #5617

                  @nono87

                  42becf05-8fde-4625-9cbf-1ad9222dcbae-image.png

                  Habe da ein paar Datenpunkte angelegt, weil ich den Landroid ausschließlich per Script steuere und lasse u.a. die Texte von Status und Error ebenfalls einfließen. Man könnte jetzt einfach die Objektdaten nehmen, die sind aber lediglich in englisch und ich wollte die in deutsch. Somit habe ich die übersetzt.

                  let serial = '2021302673020008XXXX'
                  
                  //Datenpunkte anlegen
                  createState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode');
                  createState('0_userdata.0.WorxLandroid.' + serial + '.Status');
                  createState('0_userdata.0.WorxLandroid.' + serial + '.Betriebsstunden_Maeher');
                  createState('0_userdata.0.WorxLandroid.' + serial + '.Betriebszeit_Maeher');
                  createState('0_userdata.0.WorxLandroid.' + serial + '.Betriebsstunden_Klingen');
                  createState('0_userdata.0.WorxLandroid.' + serial + '.Betriebszeit_Klingen');
                  createState('0_userdata.0.WorxLandroid.' + serial + '.Betriebsstrecke_km');
                  
                  on({id: [].concat(['worx.0.' + serial + '.mower.error']), change: "any"}, async function (obj) {
                    switch (obj.state.val) {
                        case 0:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Kein Fehler');
                          break;
                        case 1:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Gefangen');
                          break;
                        case 2:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Angehoben');
                          break;
                        case 3:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Draht nicht angeschlossen');
                          break;
                        case 4:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Außerhalb der Begrenzung');
                          break;
                        case 5:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Regen');
                          break;
                        case 6:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Schließe Akku-Klappe');
                          break;
                        case 7:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Akku-Klappe offen');
                          break;
                        case 8:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Klingen-Motor blockiert');
                          break;
                        case 9:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Antrieb blockiert');
                          break;
                        case 10:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Eingeschlossen Timeout');
                          break;
                        case 11:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Upside down');
                          break;
                        case 12:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Akku niedrig');
                          break;
                        case 13:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Drahtpolung falsch');
                          break;
                        case 14:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Ladefehler');
                          break;
                        case 15:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Timeout finding home');
                          break;
                        case 16:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Mower locked');
                          break;
                        case 17:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Akku zu heiß');
                          break;
                        case 18:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Dummy Model');
                          break;
                        case 19:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'Akku-Klappe Timeout');
                          break;
                        case 20:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'wire sync');
                          break;
                        case 21:
                          setState('0_userdata.0.WorxLandroid.' + serial + '.ErrorCode', 'msg num');
                          break;
                    }
                  });
                  
                  on({id: [].concat(['worx.0.' + serial + '.mower.batteryState']), change: "any"}, async function (obj) {
                      console.log("Batteriestatus: " + obj.state.val + "%");
                      console.log("Status: " + getState('worx.0.' + serial + '.mower.status').val);
                      if (obj.state.val < 100 && parseInt(getState('worx.0.' + serial + '.mower.status').val) == 1) {
                          setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Akku wird aufgeladen');
                      }
                      if (obj.state.val = 100 && parseInt(getState('worx.0.' + serial + '.mower.status').val) == 1) {
                          setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Ausgangsposition');
                      }
                  });
                  
                  on({id: [].concat(['worx.0.' + serial + '.mower.status']), change: "any"}, async function (obj) {
                      switch (obj.state.val) {
                          case 0:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Leerlauf');
                              break;
                          case 1:
                              if (getState('worx.0.' + serial + '.mower.batteryState').val <= 10) {
                                  setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Ladestation');
                              } else {
                                  setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Ausgangsposition');
                              }
                              break;
                          case 2:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Start Sequence');
                              break;
                          case 3:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Verlasse Ladestation');
                              break;
                          case 4:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Folge Draht');
                              break;
                          case 5:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Suche Ladestation');
                              break;
                          case 6:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Suche Draht');
                              break;
                          case 7:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Mähen');
                              break;
                          case 8:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Angehoben');
                              break;
                          case 9:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Eingeschlossen');
                              break;
                          case 10:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Messer blockiert');
                              break;
                          case 11:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Debug');
                              break;
                          case 12:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Remote control');
                              break;
                          case 13:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'escape from off limits');
                              break;
                          case 30:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Fahrt zur Ladestation');
                              break;
                          case 30:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Zonen Training');
                              break;
                          case 30:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Rasenkantenschnitt');
                              break;
                          case 30:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Suche Zone');
                              break;
                          case 30:
                              setState('0_userdata.0.WorxLandroid.' + serial + '.Status', 'Pause');
                              break;
                      }
                  });
                  
                  on({id: [].concat(['worx.0.' + serial + '.mower.totalTime']), change: "any"}, async function (obj) {
                      setState('0_userdata.0.WorxLandroid.' + serial + '.Betriebsstunden_Maeher', Math.round((parseFloat((obj.state ? obj.state.val : "")) / 60)*100)/100);
                  
                      let diff = obj.state.val;
                      console.log("Minuten gesamt: " + diff); 
                      
                      let days = Math.floor(diff / 60 / 24);
                      diff = diff - (days * 60 * 24)
                  
                      let hours = Math.floor(diff / 60)
                      diff = diff - (hours * 60)
                    
                      console.log("Betriebszeit Mäher: " + days + " Tage, " +  hours + " Stunden, " + diff + " Minuten")
                      
                      setState('0_userdata.0.WorxLandroid.' + serial + '.Betriebszeit_Maeher', days + " T. " +  hours + " Std. " + diff + " Min.");
                  });
                  
                  on({id: [].concat(['worx.0.' + serial + '.mower.totalBladeTime']), change: "any"}, async function (obj) {
                      setState('0_userdata.0.WorxLandroid.' + serial + '.Betriebsstunden_Klingen', Math.round((parseFloat((obj.state ? obj.state.val : "")) / 60)*100)/100);
                      
                      let diff = obj.state.val;
                      console.log("Minuten Klingen: " + diff); 
                      
                      let days = Math.floor(diff / 60 / 24);
                      diff = diff - (days * 60 * 24)
                  
                      let hours = Math.floor(diff / 60)
                      diff = diff - (hours * 60)
                    
                      console.log("Betriebszeit Klingen: " + days + " Tage, " +  hours + " Stunden, " + diff + " Minuten")
                      
                      setState('0_userdata.0.WorxLandroid.' + serial + '.Betriebszeit_Klingen', days + " T. " +  hours + " Std. " + diff + " Min.");
                  });
                  
                  on({id: [].concat(['worx.0.' + serial + '.mower.totalDistance']), change: "any"}, async function (obj) {
                    setState('0_userdata.0.WorxLandroid.' + serial + '.Betriebsstrecke_km', (parseFloat((obj.state ? obj.state.val : "")) / 1000));
                  });
                  

                  Falls du das Script im Spoiler gebrauchen kannst? Ein JS-Script anlegen, die Seriennummer aus dem Worx Adapter einfügen und starten.

                  Die Infos kannst du dann per Alias info in die Card bringen :blush:

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

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

                  1 Reply Last reply
                  0
                  • N Offline
                    N Offline
                    nono87
                    wrote on last edited by
                    #5618

                    @armilar said in SONOFF NSPanel mit Lovelace UI:

                    Die Infos kannst du dann per Alias info in die Card bringen

                    Die Daten habe ich soweit schon aufbereitet, aber mir fehlt es dann noch das ich diese im Panel anzeigen lassen kann.

                    Ich versuche es mal anders.

                    zM_7kxKp.jpeg

                    Wie in dem Bild zu sehen werden die Zustände nur als Zahlen dargestellt. Da hätte ich gern das es in Wörtern steht :blush:
                    oder von mir aus auch unter der Zahl.

                    ArmilarA 1 Reply Last reply
                    0
                    • N nono87

                      @armilar said in SONOFF NSPanel mit Lovelace UI:

                      Die Infos kannst du dann per Alias info in die Card bringen

                      Die Daten habe ich soweit schon aufbereitet, aber mir fehlt es dann noch das ich diese im Panel anzeigen lassen kann.

                      Ich versuche es mal anders.

                      zM_7kxKp.jpeg

                      Wie in dem Bild zu sehen werden die Zustände nur als Zahlen dargestellt. Da hätte ich gern das es in Wörtern steht :blush:
                      oder von mir aus auch unter der Zahl.

                      ArmilarA Offline
                      ArmilarA Offline
                      Armilar
                      Most Active Forum Testing
                      wrote on last edited by Armilar
                      #5619

                      @nono87

                      Hast du das JS-Script im Spoiler nicht gesehen?

                      Das macht exakt das was du brauchst...

                      39115ef1-f479-4bf7-8587-ee0cc65fa795-image.png

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

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

                      N 1 Reply Last reply
                      0
                      • ArmilarA Armilar

                        @nono87

                        Hast du das JS-Script im Spoiler nicht gesehen?

                        Das macht exakt das was du brauchst...

                        39115ef1-f479-4bf7-8587-ee0cc65fa795-image.png

                        N Offline
                        N Offline
                        nono87
                        wrote on last edited by
                        #5620

                        @armilar

                        Ich habe immer gedacht das nur Zahlen angezeigt werden können und keine Texte drum habe ich es auch nicht probiert, weil ich sonst immer nur die States der Geräte genommen habe und dort eben Zahlen waren.

                        Super. Auf jeden fall vielen Dank für den Gedankenanstoss :blush:

                        ArmilarA 1 Reply Last reply
                        1
                        • N nono87

                          @armilar

                          Ich habe immer gedacht das nur Zahlen angezeigt werden können und keine Texte drum habe ich es auch nicht probiert, weil ich sonst immer nur die States der Geräte genommen habe und dort eben Zahlen waren.

                          Super. Auf jeden fall vielen Dank für den Gedankenanstoss :blush:

                          ArmilarA Offline
                          ArmilarA Offline
                          Armilar
                          Most Active Forum Testing
                          wrote on last edited by
                          #5621

                          @nono87

                          Das NSPanel kennt nur Text... Zahlen und Icons sind ebenfalls Strings ;-)

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

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

                          N patricknitschP 2 Replies Last reply
                          1
                          • ArmilarA Armilar

                            @nono87

                            Das NSPanel kennt nur Text... Zahlen und Icons sind ebenfalls Strings ;-)

                            N Offline
                            N Offline
                            nono87
                            wrote on last edited by
                            #5622

                            @armilar

                            Okay jetzt klappt es schonmal, aber einen Schönheitsfehler hat es dann noch.
                            Benutze ja CardGrid und wenn der Text länger wird, wird kein Zeilenumbruch gemacht und der Text wird wieder groß. Gibt es da auch noch einen Kniff?

                            { id: 'alias.0.Mähroboter.status', name: 'Status',  useValue: true, fontSize: 1},
                            
                            ArmilarA 1 Reply Last reply
                            0
                            • ArmilarA Armilar

                              @nono87

                              Das NSPanel kennt nur Text... Zahlen und Icons sind ebenfalls Strings ;-)

                              patricknitschP Online
                              patricknitschP Online
                              patricknitsch
                              wrote on last edited by
                              #5623

                              Ich habe mal eine Frage zu den Icon Farben. Ich habe mir ein Script geschrieben, in dem ich Variablen die Farbe rot für Heizen, blau für Leerlauf und grau für Aus zuweise. Das Script funktioniert auch und die Variablen werden beschrieben.

                              // Geräte definieren
                              const Device = ['esphome.0.483FDA2070A9.Climate.329270204.action', //Wohnzimmer
                              'esphome.0.98CDAC37D313.Climate.3279165939.action', //Esszimmer
                              'esphome.0.483FDA2076E4.Climate.3032879289.action', //Küche
                              'esphome.0.E09806905957.Climate.1839574523.action', //Gast WC
                              'esphome.0.483FDA207820.Climate.2073136155.action', //Kinderzimmer
                              'esphome.0.483FDA207895.Climate.2981622931.action', //Schlafzimmer
                              'esphome.0.349454627592.Climate.1371366485.action', //Gästezimmer
                              'esphome.0.3494546271EB.Climate.4002998739.action', //Ankleidezimmer
                              'esphome.0.ECFABC3EA728.Climate.4217826977.action', //Einlieger vorne
                              'esphome.0.483FDA206B25.Climate.2503850967.action', //Einlieger hinten
                              'esphome.0.D8BFC0D9C11F.Climate.1081499580.action'];//Büro
                              
                              const Alias = ['Wohnzimmer_heat', 
                              'Esszimmer_heat', 
                              'Kueche_heat', 
                              'GastWC_heat', 
                              'Kinderzimmer_heat', 
                              'Schlafzimmer_heat', 
                              'Gaestezimmer_heat', 
                              'Ankleidezimmer_heat', 
                              'EV_heat', 
                              'EH_heat', 
                              'Buero_heat'];
                              
                              // Trigger wenn Geräte den Wert ändern
                              on({ id: [].concat([Device]), change: 'ne' }, async () => {
                              
                                  // Schleife für Geräte
                                  for (const [i_index, i_Device] of Device.entries()) {
                              
                                      //Pfad verbinden
                                      let i_Alias = '0_userdata.0.Heizungen.' + Alias[i_index];
                              
                                      // Gerät heizt, Leerlauf, aus?
                                      if ((getState(i_Device).val ? getState(i_Device).val : '') == 3) {
                                          //setStateDelayed(i_Alias, { red: 255, green:   0, blue:   0 }, false, parseInt(((0) || '').toString(), 10), false);
                                          setStateDelayed(i_Alias, "Red");
                                      } else if ((getState(i_Device).val ? getState(i_Device).val : '') == 4) {
                                          //setStateDelayed(i_Alias, { red: 0, green:   0, blue:   255 }, false, parseInt(((0) || '').toString(), 10), false);
                                          setStateDelayed(i_Alias, "Blue");
                                      } else {
                                          //setStateDelayed(i_Alias, "Gray", false, parseInt(((0) || '').toString(), 10), false);
                                          setStateDelayed(i_Alias, "Gray");
                                      }
                                  }
                              });
                              

                              Für onColor und offColor möchte ich dann den Wert abfragen und die jeweilige Farbe auslösen.

                              let Thermostat_Subpage1: PageType =
                                          {
                                              'type': 'cardGrid',
                                              'heading': 'Heizung Menü EG',
                                              'subPage': true,
                                              'useColor': true,
                                              'parent': Thermostat_Subpage0,
                                              'prev': undefined,
                                              'next': 'Thermostat_Subpage2',
                                              'home': undefined,
                                              'items': [ 
                                                  { navigate: true, id: null, targetPage: 'Wohnzimmer_Thermostat', name: "Wohnen", icon: 'thermostat',offColor: getState('alias.0.Heizungen.Colors.Wohnzimmer_Color.ACTUAL').val, onColor: getState('alias.0.Heizungen.Colors.Wohnzimmer_Color.ACTUAL').val },
                                                  { navigate: true, id: null, targetPage: 'Esszimmer_Thermostat', name: "Essen", icon: 'thermostat', onColor: getState('0_userdata.0.Heizungen.Esszimmer_heat').val},
                                                  { navigate: true, id: null, targetPage: 'Kueche_Thermostat', name: "Kueche", icon: 'thermostat', onColor: getState('0_userdata.0.Heizungen.Kueche_heat').val},
                                                  { navigate: true, id: null, targetPage: 'GastWC_Thermostat', name: "Gast WC", icon: 'thermostat', onColor: getState('0_userdata.0.Heizungen.GastWC_heat').val},
                                                  //{ navigate: true, id: null, targetPage: 'Bad_Thermostat', name: "Bad", icon: 'thermostat', offColor: getState('0_userdata.0.Heizungen.Bad_heat').val},
                                                  { navigate: true, id: null, targetPage: 'Kinderzimmer_Thermostat', name: "Kind", icon: 'thermostat', onColor: { red: 255, green:   0, blue: 255 }},],
                                          };
                              

                              Alle Icons werden aber nur schwarz angezeigt. Eine Fehlermeldung im Log entsteht nicht.
                              Kann ich die Farben so überhaupt ändern? Oder habe ich irgendwo einen Denkfehler?

                              ArmilarA 1 Reply Last reply
                              0
                              • patricknitschP patricknitsch

                                Ich habe mal eine Frage zu den Icon Farben. Ich habe mir ein Script geschrieben, in dem ich Variablen die Farbe rot für Heizen, blau für Leerlauf und grau für Aus zuweise. Das Script funktioniert auch und die Variablen werden beschrieben.

                                // Geräte definieren
                                const Device = ['esphome.0.483FDA2070A9.Climate.329270204.action', //Wohnzimmer
                                'esphome.0.98CDAC37D313.Climate.3279165939.action', //Esszimmer
                                'esphome.0.483FDA2076E4.Climate.3032879289.action', //Küche
                                'esphome.0.E09806905957.Climate.1839574523.action', //Gast WC
                                'esphome.0.483FDA207820.Climate.2073136155.action', //Kinderzimmer
                                'esphome.0.483FDA207895.Climate.2981622931.action', //Schlafzimmer
                                'esphome.0.349454627592.Climate.1371366485.action', //Gästezimmer
                                'esphome.0.3494546271EB.Climate.4002998739.action', //Ankleidezimmer
                                'esphome.0.ECFABC3EA728.Climate.4217826977.action', //Einlieger vorne
                                'esphome.0.483FDA206B25.Climate.2503850967.action', //Einlieger hinten
                                'esphome.0.D8BFC0D9C11F.Climate.1081499580.action'];//Büro
                                
                                const Alias = ['Wohnzimmer_heat', 
                                'Esszimmer_heat', 
                                'Kueche_heat', 
                                'GastWC_heat', 
                                'Kinderzimmer_heat', 
                                'Schlafzimmer_heat', 
                                'Gaestezimmer_heat', 
                                'Ankleidezimmer_heat', 
                                'EV_heat', 
                                'EH_heat', 
                                'Buero_heat'];
                                
                                // Trigger wenn Geräte den Wert ändern
                                on({ id: [].concat([Device]), change: 'ne' }, async () => {
                                
                                    // Schleife für Geräte
                                    for (const [i_index, i_Device] of Device.entries()) {
                                
                                        //Pfad verbinden
                                        let i_Alias = '0_userdata.0.Heizungen.' + Alias[i_index];
                                
                                        // Gerät heizt, Leerlauf, aus?
                                        if ((getState(i_Device).val ? getState(i_Device).val : '') == 3) {
                                            //setStateDelayed(i_Alias, { red: 255, green:   0, blue:   0 }, false, parseInt(((0) || '').toString(), 10), false);
                                            setStateDelayed(i_Alias, "Red");
                                        } else if ((getState(i_Device).val ? getState(i_Device).val : '') == 4) {
                                            //setStateDelayed(i_Alias, { red: 0, green:   0, blue:   255 }, false, parseInt(((0) || '').toString(), 10), false);
                                            setStateDelayed(i_Alias, "Blue");
                                        } else {
                                            //setStateDelayed(i_Alias, "Gray", false, parseInt(((0) || '').toString(), 10), false);
                                            setStateDelayed(i_Alias, "Gray");
                                        }
                                    }
                                });
                                

                                Für onColor und offColor möchte ich dann den Wert abfragen und die jeweilige Farbe auslösen.

                                let Thermostat_Subpage1: PageType =
                                            {
                                                'type': 'cardGrid',
                                                'heading': 'Heizung Menü EG',
                                                'subPage': true,
                                                'useColor': true,
                                                'parent': Thermostat_Subpage0,
                                                'prev': undefined,
                                                'next': 'Thermostat_Subpage2',
                                                'home': undefined,
                                                'items': [ 
                                                    { navigate: true, id: null, targetPage: 'Wohnzimmer_Thermostat', name: "Wohnen", icon: 'thermostat',offColor: getState('alias.0.Heizungen.Colors.Wohnzimmer_Color.ACTUAL').val, onColor: getState('alias.0.Heizungen.Colors.Wohnzimmer_Color.ACTUAL').val },
                                                    { navigate: true, id: null, targetPage: 'Esszimmer_Thermostat', name: "Essen", icon: 'thermostat', onColor: getState('0_userdata.0.Heizungen.Esszimmer_heat').val},
                                                    { navigate: true, id: null, targetPage: 'Kueche_Thermostat', name: "Kueche", icon: 'thermostat', onColor: getState('0_userdata.0.Heizungen.Kueche_heat').val},
                                                    { navigate: true, id: null, targetPage: 'GastWC_Thermostat', name: "Gast WC", icon: 'thermostat', onColor: getState('0_userdata.0.Heizungen.GastWC_heat').val},
                                                    //{ navigate: true, id: null, targetPage: 'Bad_Thermostat', name: "Bad", icon: 'thermostat', offColor: getState('0_userdata.0.Heizungen.Bad_heat').val},
                                                    { navigate: true, id: null, targetPage: 'Kinderzimmer_Thermostat', name: "Kind", icon: 'thermostat', onColor: { red: 255, green:   0, blue: 255 }},],
                                            };
                                

                                Alle Icons werden aber nur schwarz angezeigt. Eine Fehlermeldung im Log entsteht nicht.
                                Kann ich die Farben so überhaupt ändern? Oder habe ich irgendwo einen Denkfehler?

                                ArmilarA Offline
                                ArmilarA Offline
                                Armilar
                                Most Active Forum Testing
                                wrote on last edited by
                                #5624

                                @patricknitsch

                                So wie du das machen möchtest (also mit getState....) funktioniert das nicht.

                                @TT-Tom hat vor einiger Zeit die Navigation allerdings um COLORDEC erweitert...

                                Habe mal den Text aus der Wiki kopiert. Da ist auch ein Tool für die DEC565 Farbangabe

                                https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation

                                dc71ff8b-495a-49f6-a7ce-c7569d85faaa-image.png

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

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

                                patricknitschP 1 Reply Last reply
                                2
                                • N nono87

                                  @armilar

                                  Okay jetzt klappt es schonmal, aber einen Schönheitsfehler hat es dann noch.
                                  Benutze ja CardGrid und wenn der Text länger wird, wird kein Zeilenumbruch gemacht und der Text wird wieder groß. Gibt es da auch noch einen Kniff?

                                  { id: 'alias.0.Mähroboter.status', name: 'Status',  useValue: true, fontSize: 1},
                                  
                                  ArmilarA Offline
                                  ArmilarA Offline
                                  Armilar
                                  Most Active Forum Testing
                                  wrote on last edited by
                                  #5625

                                  @nono87

                                  Im Icon-Feld funktionieren keine Umbrüche... Versuche die Texte abzukürzen...

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

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

                                  1 Reply Last reply
                                  0
                                  • ArmilarA Armilar

                                    @patricknitsch

                                    So wie du das machen möchtest (also mit getState....) funktioniert das nicht.

                                    @TT-Tom hat vor einiger Zeit die Navigation allerdings um COLORDEC erweitert...

                                    Habe mal den Text aus der Wiki kopiert. Da ist auch ein Tool für die DEC565 Farbangabe

                                    https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Navigation

                                    dc71ff8b-495a-49f6-a7ce-c7569d85faaa-image.png

                                    patricknitschP Online
                                    patricknitschP Online
                                    patricknitsch
                                    wrote on last edited by
                                    #5626

                                    @armilar Funktioniert nach der Doku super. Danke!

                                    1 Reply Last reply
                                    2
                                    • T TT-Tom

                                      @maik5066 sagte in SONOFF NSPanel mit Lovelace UI:

                                      @TT-Tom , danke für deine Rückmeldung. Ich habe das js Skript genutzt und die drei hilfsdatenpunkte angelegt. Wenn ich, wie in der Anleitung das Card Grip kopiere findet er die variable index01 nicht.

                                      Das "parent": Index01, kannst du weglassen. Wenn deine Seite eine SubPage ist, dann solltest du folgende Parameter setzen

                                      'subPage': true,
                                          'parent': Seite von wo du gesprungen bist ,
                                          'home': 'Startseite',
                                      

                                      Wäre es nicht möglich, direkt die Effekte datenpunkte des WLED Adapter zu nutzen z. Bsp. fx.

                                      Das Zusatzscript nutzt die Effekte auf dem Datenpunkt, leider kann das Panel nur einen Index aus der Liste zurücksenden. Deswegen dieser Umweg mit den Hilfsdatenpunkten und Script.

                                      Habt ihr ein funktionierendes bespiel was ich mir kopieren kann.

                                      Das Beispiel aus dem Wiki läuft, wenn sich der Adapter/WLED nicht so stark geändert hat.

                                      M Offline
                                      M Offline
                                      maik5066
                                      wrote on last edited by
                                      #5627

                                      @tt-tom said in SONOFF NSPanel mit Lovelace UI:

                                      Danke dir, ich habe jetzt alle Datenpunkte angelegt leider funktioniert es nicht.:
                                      WLED1.JPG WLED2.JPG WLED3.JPG WLED4.JPG

                                      patricknitschP T 2 Replies Last reply
                                      0
                                      • M maik5066

                                        @tt-tom said in SONOFF NSPanel mit Lovelace UI:

                                        Danke dir, ich habe jetzt alle Datenpunkte angelegt leider funktioniert es nicht.:
                                        WLED1.JPG WLED2.JPG WLED3.JPG WLED4.JPG

                                        patricknitschP Online
                                        patricknitschP Online
                                        patricknitsch
                                        wrote on last edited by patricknitsch
                                        #5628

                                        @maik5066 Das Script sucht doch nach einer Variable ON_SET.... die hast du doch gar nicht? Leg die doch auch mal an.

                                        T 1 Reply Last reply
                                        1
                                        • M maik5066

                                          @tt-tom said in SONOFF NSPanel mit Lovelace UI:

                                          Danke dir, ich habe jetzt alle Datenpunkte angelegt leider funktioniert es nicht.:
                                          WLED1.JPG WLED2.JPG WLED3.JPG WLED4.JPG

                                          T Offline
                                          T Offline
                                          TT-Tom
                                          wrote on last edited by TT-Tom
                                          #5629

                                          @maik5066

                                          Du hast zweimal Color in deiner config drin. das zweite muss Effects sein.

                                          { id: "alias.0.NSPanel.WLED.Colors", icon: "palette", name: "Colors", onColor: White,
                                          modeList: ['Default', "* Color 1', '* Color Gradient', "* Colors 182', "* Colors Only', ** Random Cycle', 'Analogus'......
                                          
                                          { id: "alias.0.NSPanel.WLED.Colors", icon: "emoticon-outline", name: "Effects", onColor: White,
                                          
                                          

                                          55efdfbc-e80c-4a6b-bc33-36bd92372074-image.png

                                          so sieht es bei mir aus. Ich habe da kein SET drin. steht auch so in der Beschreibung. (nur VALUE ) und du brauchst Buttonsensor und nicht Button als Channel

                                          Auszug aus dem WIKI

                                          Aliase:

                                          Die drei Hilfs-Datenpunkte werden mit einem Alias Tastensensor wie hier beschrieben verknüpft
                                          Für Power, Timer und Synch nutzen wir jeweils einen Alias Licht und verknüpfen ACTUAL und SET jeweils mit den zugehörigen WLED Objekten:
                                          Power --> wled.0.2cf43212d23c.on
                                          Timer --> wled.0.2cf43212d23c.nl.on
                                          Synch --> wled.0.2cf43212d23c.udpn.send

                                          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 Reply Last reply
                                          1
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          581

                                          Online

                                          32.7k

                                          Users

                                          82.5k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe