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 - Zeigt her Eure Cards

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 - Zeigt her Eure Cards

Geplant Angeheftet Gesperrt Verschoben Hardware
13 Beiträge 3 Kommentatoren 2.9k Aufrufe 6 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.
  • K Offline
    K Offline
    Kuckuckmann
    schrieb am zuletzt editiert von
    #3

    Block for future

    NSPanel Dokumentation im GitHub Wiki:

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

    1 Antwort Letzte Antwort
    0
    • K Kuckuckmann

      Hallo Community,

      mittlerweile haben wir im Bereich "SONOFF NSPanel mit Lovelace UI" eine Menge an Möglichkeiten geschaffen und Ihr habt fleißig gebaut und Euch eingebracht.

      In diesem Thread wollen wir Euch die Möglichkeit geben, eure Seiten / Cards zu präsentieren und für andere zur Verfügung zu stellen.

      Bitte beachtet, dies ist kein Support Thread. Dafür bitte >>HIER<< melden.

      Zu den Spielregeln hier:

      • Bitte postet mindestens einen Screenshot und eine kurze Beschreibung Eurer Seite
      • Die Variable im TS-Skript
      • Alias(e) und die Konfiguration
      • Blockly's oder Skripte aus dem IoBroker
      • Alles was sonst noch interessant ist

      Wir freuen uns auf Eure Anregungen.

      LG

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

      @kuckuckmann

      Nachdem eine Menge Arbeit in die aktuelle Wiki geflossen ist, freue ich mich über eine positive Resonanz...

      Vielen Dank @Kuckuckmann

      LG Armilar

      PS: Meine Cards kennen die meisten bereits 😉

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

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

      1 Antwort Letzte Antwort
      2
      • K Kuckuckmann

        Hallo Community,

        mittlerweile haben wir im Bereich "SONOFF NSPanel mit Lovelace UI" eine Menge an Möglichkeiten geschaffen und Ihr habt fleißig gebaut und Euch eingebracht.

        In diesem Thread wollen wir Euch die Möglichkeit geben, eure Seiten / Cards zu präsentieren und für andere zur Verfügung zu stellen.

        Bitte beachtet, dies ist kein Support Thread. Dafür bitte >>HIER<< melden.

        Zu den Spielregeln hier:

        • Bitte postet mindestens einen Screenshot und eine kurze Beschreibung Eurer Seite
        • Die Variable im TS-Skript
        • Alias(e) und die Konfiguration
        • Blockly's oder Skripte aus dem IoBroker
        • Alles was sonst noch interessant ist

        Wir freuen uns auf Eure Anregungen.

        LG

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

        @kuckuckmann

        Bekommst dann doch mal ein NSPanel in weiß mit dem Advanced-Screensaver von mir

        8e0012c5-e528-48a3-ad90-b638a806bd74-NSPanel_weiss.png

        Hatte es dann wohl mit dem Datum etwas ausgereizt... Fehlt eine 3 beim wahrscheinlich längsten Datum des Jahres... 😉

        Habe es mal schnell im Service-Menü geändert:
        18a7cda1-efa2-4c02-b3dc-976fdc0172ae-Nextion_Editor_sHHmV1PlxG.gif

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

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

        1 Antwort Letzte Antwort
        0
        • K Kuckuckmann

          Hallo Community,

          mittlerweile haben wir im Bereich "SONOFF NSPanel mit Lovelace UI" eine Menge an Möglichkeiten geschaffen und Ihr habt fleißig gebaut und Euch eingebracht.

          In diesem Thread wollen wir Euch die Möglichkeit geben, eure Seiten / Cards zu präsentieren und für andere zur Verfügung zu stellen.

          Bitte beachtet, dies ist kein Support Thread. Dafür bitte >>HIER<< melden.

          Zu den Spielregeln hier:

          • Bitte postet mindestens einen Screenshot und eine kurze Beschreibung Eurer Seite
          • Die Variable im TS-Skript
          • Alias(e) und die Konfiguration
          • Blockly's oder Skripte aus dem IoBroker
          • Alles was sonst noch interessant ist

          Wir freuen uns auf Eure Anregungen.

          LG

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

          @kuckuckmann

          Und noch einen kleinen Blick auf meinen Spotify-Player im Büro-NSPanel

          65ea022c-b68f-40bd-9aad-b18df651b7b1-Nextion_Editor_XPcuYHZGuE.gif

          Die Seite ist wie folgt konfiguriert:

          let SpotifyPremium = <PageMedia>
          {
              'type': 'cardMedia',
              'heading': 'Spotify-Premium',
              'useColor': true,
              'items': [<PageItem>{ 
                          id: AliasPath + 'Media.PlayerSpotifyPremium', 
                          adapterPlayerInstance: "spotify-premium.0.",
                          speakerList: ['Terrasse','Überall','Gartenhaus','Esszimmer','Heimkino','Echo Dot Küche',
                                        'Echo Spot Buero'],
                          playList: ['PartyPlaylist','Sabaton Radio','Rock Party','This Is Nightwish','Metal Christmas'],
                          repeatList: ['off','context','track'],
                          equalizerList: ['Bassboost','Klassik','Dance', 'Deep', 'Electronic', 'Flat', 'Hip-Hop', 'Rock', 
                                          'Metal', 'Jazz', 'Latin', 'Tonstärke', 'Lounge', 'Piano'],
                          colorMediaIcon: colorSpotify,
                          colorMediaArtist: Yellow,
                          colorMediaTitle: Yellow,
                          autoCreateALias : true
                       }]
          };
          

          Es werden Spotify-Premium und der Alexa2-Adapter genutzt...

          Der Alexa Adapter kommt allerdings bei diesem Player nur bei der Einstellung des Equalizer (Schnittstelle zu einem Blockly) zum Einsatz und verändert dann diese Parameter:

          ca92d0aa-1677-4537-befe-eb91f1efcc09-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.

          1 Antwort Letzte Antwort
          0
          • K Kuckuckmann

            Hallo Community,

            mittlerweile haben wir im Bereich "SONOFF NSPanel mit Lovelace UI" eine Menge an Möglichkeiten geschaffen und Ihr habt fleißig gebaut und Euch eingebracht.

            In diesem Thread wollen wir Euch die Möglichkeit geben, eure Seiten / Cards zu präsentieren und für andere zur Verfügung zu stellen.

            Bitte beachtet, dies ist kein Support Thread. Dafür bitte >>HIER<< melden.

            Zu den Spielregeln hier:

            • Bitte postet mindestens einen Screenshot und eine kurze Beschreibung Eurer Seite
            • Die Variable im TS-Skript
            • Alias(e) und die Konfiguration
            • Blockly's oder Skripte aus dem IoBroker
            • Alles was sonst noch interessant ist

            Wir freuen uns auf Eure Anregungen.

            LG

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

            @kuckuckmann

            Habe dann nochmal eine kurze Aufzeichnung für das Menü zur Steuerung des gesamten Grundstücks gemacht (Ausflug auf die cards ins Büro):

            35c8771a-202e-47ab-b98c-6b976fb4fb1e-Nextion_Editor_g7XHhPLrET.gif

            Dieses Menü habe ich auf jedem NSPanel und kann somit an jedem Ort das gesamte Smart Home steuern.

            Die roten Icons signalisieren übrigens offene Fenster und sind als Indikatoren (externes Blockly mit entsprechenden Datenpunkten unter 0_userdata) angelegt.

            Nachfolgend ein Ausschnitt, wie das Gebäude-Menü von der Struktur angelegt ist...

            // **********************************************************
            // **          Navigationsstruktur für Gebäude             **
            // **********************************************************
            
            let Level_0_Grundstueck = <PageGrid>
            {
                'type': "cardGrid",
                'heading': "Grundstück",
                'useColor': true,
                'items': [
                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Indikator', targetPage: 'Level_1_Haus', name: 'Haus' ,icon: 'home', offColor: MenuHighInd, onColor: Menu},
                    <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Gartenhaus', name: 'Gartenhaus' ,icon: 'storefront-outline', onColor: Menu},
                    <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Aussen', name: 'Aussen' ,icon: 'tree-outline', onColor: Menu},
                    <PageItem>{ navigate: true, id: 'alias.0.Garage.Indikator', targetPage: 'Level_1_Garage', name: 'Garage' ,icon: 'garage-variant', offColor: MenuHighInd, onColor: Menu},
                    <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Fahrzeuge_1', name: 'Fahrzeuge' ,icon: 'car-info', offColor: Menu, onColor: Menu},
                ]
            };
            
                    let Level_1_Haus = <PageGrid>
                    {
                        'type': 'cardGrid',
                        'heading': 'Haus',
                        'useColor': true,
                        'subPage': true,
                        'parent': Level_0_Grundstueck,
                        'home': 'Level_0_Grundstueck', 
                        'items': [
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Indikator', targetPage: 'Level_2_Erdgeschoss_1', name: 'Erdgeschoss' , icon: 'home-floor-0', offColor: MenuHighInd, onColor: Menu},
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Obergeschoss.Indikator', targetPage: 'Level_2_Obergeschoss_1', name: 'Obergeschoss' , icon: 'home-floor-1', offColor: MenuHighInd, onColor: Menu},
                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Dachgeschoss.Indikator', targetPage: 'Level_2_Dachgeschoss', name: 'Dachgeschoss' , icon: 'home-floor-2', offColor: MenuHighInd, onColor: Menu},
                        ]
                    };
            
                            let Level_2_Erdgeschoss_1 = <PageGrid>
                            {
                                'type': 'cardGrid',
                                'heading': 'Erdgeschoss (1)',
                                'useColor': true,
                                'subPage': true,
                                'parent': Level_1_Haus,
                                'next': 'Level_2_Erdgeschoss_2',
                                'home': 'Level_1_Haus',
                                'items': [
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Indikator', targetPage: 'Level_3_Wohnzimmer', name: 'Wohnzimmer' , icon: 'sofa-outline', offColor: MenuHighInd, onColor: Menu},
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Esszimmer.Indikator', targetPage: 'Level_3_Esszimmer', name: 'Esszimmer' , icon: 'table-chair', offColor: MenuHighInd, onColor: Menu},
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Buero.Indikator', targetPage: 'Level_3_Buero', name: 'Büro' , icon: 'desk', offColor: MenuHighInd, onColor: Menu},
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Kueche.Indikator', targetPage: 'Level_3_Kueche', name: 'Küche' , icon: 'silverware-variant', offColor: MenuHighInd, onColor: Menu},
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Bad.Indikator', targetPage: 'Level_3_EG_Bad', name: 'Bad' , icon: 'bathtub-outline', offColor: MenuHighInd, onColor: Menu},
                                    <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Kaminzimmer.Indikator', targetPage: 'Level_3_Kaminzimmer', name: "Kaminzimmer" , icon: "fireplace", offColor: MenuHighInd, onColor: Menu},
                                ]
                            };
            
                                    let Level_3_Wohnzimmer = <PageGrid>
                                    {
                                        'type': 'cardGrid',
                                        'heading': 'EG Wohnzimmer',
                                        'useColor': true,
                                        'subPage': true,
                                        'parent': Level_2_Erdgeschoss_1,
                                        'home': 'Level_1_Haus',
                                        'items': [
                                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Indikator', targetPage: 'Level_4_Wohnzimmer_Licht_1', name: 'Licht' , icon: 'lightbulb', offColor: MenuHighInd, onColor: Menu},
                                            <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Sensoren.Indikator', targetPage: 'Level_4_Wohnzimmer_Sensoren_1', name: 'Sensoren' , icon: 'sync-alert', offColor: MenuHighInd, onColor: Menu},
                                            <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Aktoren', name: 'Aktoren' , icon: 'gesture-tap', onColor: Menu},
                                            <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Thermostat', name: 'Thermostat' , icon: 'thermostat', onColor: Menu},
                                            <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Charts_Temperatur', name: "Charts" , icon: "chart-line", onColor: Menu},
                                        ]
                                    };
            
                                            let Level_4_Wohnzimmer_Licht_1 = <PageEntities>
                                            {
                                                'type': 'cardEntities',
                                                'heading': 'WZ Licht (1)',
                                                'useColor': true,
                                                'subPage': true,
                                                'parent': Level_3_Wohnzimmer,
                                                'next': 'Level_4_Wohnzimmer_Licht_2',
                                                'home': 'Level_1_Haus',
                                                'items': [
                                                    <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Couchtischlampe', name: 'Couchtisch', useColor: true},
                                                    <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Deckenlampe_Esstisch', name: 'Esstisch', interpolateColor: true},
                                                    <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Vitrine', name: 'Vitrine', interpolateColor: true},
                                                    <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Stehlampe', name: 'Stehlampe', interpolateColor: true},
                                                ]
                                            };
            

            usw...

            So sieht das dann unter 0_userdata mit den Indikatoren aus:
            647e4619-5dfa-4a30-900c-c67b533185e0-image.png

            Aber eigentlich ist es nur ein Lichtschalter 😁

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

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

            ArmilarA 1 Antwort Letzte Antwort
            4
            • ArmilarA Armilar

              @kuckuckmann

              Habe dann nochmal eine kurze Aufzeichnung für das Menü zur Steuerung des gesamten Grundstücks gemacht (Ausflug auf die cards ins Büro):

              35c8771a-202e-47ab-b98c-6b976fb4fb1e-Nextion_Editor_g7XHhPLrET.gif

              Dieses Menü habe ich auf jedem NSPanel und kann somit an jedem Ort das gesamte Smart Home steuern.

              Die roten Icons signalisieren übrigens offene Fenster und sind als Indikatoren (externes Blockly mit entsprechenden Datenpunkten unter 0_userdata) angelegt.

              Nachfolgend ein Ausschnitt, wie das Gebäude-Menü von der Struktur angelegt ist...

              // **********************************************************
              // **          Navigationsstruktur für Gebäude             **
              // **********************************************************
              
              let Level_0_Grundstueck = <PageGrid>
              {
                  'type': "cardGrid",
                  'heading': "Grundstück",
                  'useColor': true,
                  'items': [
                      <PageItem>{ navigate: true, id: 'alias.0.Haus.Indikator', targetPage: 'Level_1_Haus', name: 'Haus' ,icon: 'home', offColor: MenuHighInd, onColor: Menu},
                      <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Gartenhaus', name: 'Gartenhaus' ,icon: 'storefront-outline', onColor: Menu},
                      <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Aussen', name: 'Aussen' ,icon: 'tree-outline', onColor: Menu},
                      <PageItem>{ navigate: true, id: 'alias.0.Garage.Indikator', targetPage: 'Level_1_Garage', name: 'Garage' ,icon: 'garage-variant', offColor: MenuHighInd, onColor: Menu},
                      <PageItem>{ navigate: true, id: null, targetPage: 'Level_1_Fahrzeuge_1', name: 'Fahrzeuge' ,icon: 'car-info', offColor: Menu, onColor: Menu},
                  ]
              };
              
                      let Level_1_Haus = <PageGrid>
                      {
                          'type': 'cardGrid',
                          'heading': 'Haus',
                          'useColor': true,
                          'subPage': true,
                          'parent': Level_0_Grundstueck,
                          'home': 'Level_0_Grundstueck', 
                          'items': [
                              <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Indikator', targetPage: 'Level_2_Erdgeschoss_1', name: 'Erdgeschoss' , icon: 'home-floor-0', offColor: MenuHighInd, onColor: Menu},
                              <PageItem>{ navigate: true, id: 'alias.0.Haus.Obergeschoss.Indikator', targetPage: 'Level_2_Obergeschoss_1', name: 'Obergeschoss' , icon: 'home-floor-1', offColor: MenuHighInd, onColor: Menu},
                              <PageItem>{ navigate: true, id: 'alias.0.Haus.Dachgeschoss.Indikator', targetPage: 'Level_2_Dachgeschoss', name: 'Dachgeschoss' , icon: 'home-floor-2', offColor: MenuHighInd, onColor: Menu},
                          ]
                      };
              
                              let Level_2_Erdgeschoss_1 = <PageGrid>
                              {
                                  'type': 'cardGrid',
                                  'heading': 'Erdgeschoss (1)',
                                  'useColor': true,
                                  'subPage': true,
                                  'parent': Level_1_Haus,
                                  'next': 'Level_2_Erdgeschoss_2',
                                  'home': 'Level_1_Haus',
                                  'items': [
                                      <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Indikator', targetPage: 'Level_3_Wohnzimmer', name: 'Wohnzimmer' , icon: 'sofa-outline', offColor: MenuHighInd, onColor: Menu},
                                      <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Esszimmer.Indikator', targetPage: 'Level_3_Esszimmer', name: 'Esszimmer' , icon: 'table-chair', offColor: MenuHighInd, onColor: Menu},
                                      <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Buero.Indikator', targetPage: 'Level_3_Buero', name: 'Büro' , icon: 'desk', offColor: MenuHighInd, onColor: Menu},
                                      <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Kueche.Indikator', targetPage: 'Level_3_Kueche', name: 'Küche' , icon: 'silverware-variant', offColor: MenuHighInd, onColor: Menu},
                                      <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Bad.Indikator', targetPage: 'Level_3_EG_Bad', name: 'Bad' , icon: 'bathtub-outline', offColor: MenuHighInd, onColor: Menu},
                                      <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Kaminzimmer.Indikator', targetPage: 'Level_3_Kaminzimmer', name: "Kaminzimmer" , icon: "fireplace", offColor: MenuHighInd, onColor: Menu},
                                  ]
                              };
              
                                      let Level_3_Wohnzimmer = <PageGrid>
                                      {
                                          'type': 'cardGrid',
                                          'heading': 'EG Wohnzimmer',
                                          'useColor': true,
                                          'subPage': true,
                                          'parent': Level_2_Erdgeschoss_1,
                                          'home': 'Level_1_Haus',
                                          'items': [
                                              <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Indikator', targetPage: 'Level_4_Wohnzimmer_Licht_1', name: 'Licht' , icon: 'lightbulb', offColor: MenuHighInd, onColor: Menu},
                                              <PageItem>{ navigate: true, id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Sensoren.Indikator', targetPage: 'Level_4_Wohnzimmer_Sensoren_1', name: 'Sensoren' , icon: 'sync-alert', offColor: MenuHighInd, onColor: Menu},
                                              <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Aktoren', name: 'Aktoren' , icon: 'gesture-tap', onColor: Menu},
                                              <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Thermostat', name: 'Thermostat' , icon: 'thermostat', onColor: Menu},
                                              <PageItem>{ navigate: true, id: null, targetPage: 'Level_4_Wohnzimmer_Charts_Temperatur', name: "Charts" , icon: "chart-line", onColor: Menu},
                                          ]
                                      };
              
                                              let Level_4_Wohnzimmer_Licht_1 = <PageEntities>
                                              {
                                                  'type': 'cardEntities',
                                                  'heading': 'WZ Licht (1)',
                                                  'useColor': true,
                                                  'subPage': true,
                                                  'parent': Level_3_Wohnzimmer,
                                                  'next': 'Level_4_Wohnzimmer_Licht_2',
                                                  'home': 'Level_1_Haus',
                                                  'items': [
                                                      <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Couchtischlampe', name: 'Couchtisch', useColor: true},
                                                      <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Deckenlampe_Esstisch', name: 'Esstisch', interpolateColor: true},
                                                      <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Vitrine', name: 'Vitrine', interpolateColor: true},
                                                      <PageItem>{ id: 'alias.0.Haus.Erdgeschoss.Wohnzimmer.Licht.Stehlampe', name: 'Stehlampe', interpolateColor: true},
                                                  ]
                                              };
              

              usw...

              So sieht das dann unter 0_userdata mit den Indikatoren aus:
              647e4619-5dfa-4a30-900c-c67b533185e0-image.png

              Aber eigentlich ist es nur ein Lichtschalter 😁

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

              @armilar

              Irgendwie bin ich der einzige der etwas postet, oder? 😀

              Na was solls 😊

              Der neue Sonos-Media-Player
              c5e43fbb-6e58-4e9e-b2dc-af62a544e44d-Nextion_Editor_6v4qx82CDO.gif

              Suche noch Tester mit NSPanel und Sonos...
              Beschreibung siehe Update v4.3.3.14 : https://forum.iobroker.net/post/1087343 (hier verwendet mit Favoritenliste)

              Wenn man erstmal durch die TuneIn-Werbung durch ist, kommen natürlich bei den Radiosendern auch die gespielten Song-Infos mit...
              9fd205f1-036f-4faf-9ae5-ec8f6cfcc136-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.

              1 Antwort Letzte Antwort
              4
              • K Kuckuckmann

                Hallo Community,

                mittlerweile haben wir im Bereich "SONOFF NSPanel mit Lovelace UI" eine Menge an Möglichkeiten geschaffen und Ihr habt fleißig gebaut und Euch eingebracht.

                In diesem Thread wollen wir Euch die Möglichkeit geben, eure Seiten / Cards zu präsentieren und für andere zur Verfügung zu stellen.

                Bitte beachtet, dies ist kein Support Thread. Dafür bitte >>HIER<< melden.

                Zu den Spielregeln hier:

                • Bitte postet mindestens einen Screenshot und eine kurze Beschreibung Eurer Seite
                • Die Variable im TS-Skript
                • Alias(e) und die Konfiguration
                • Blockly's oder Skripte aus dem IoBroker
                • Alles was sonst noch interessant ist

                Wir freuen uns auf Eure Anregungen.

                LG

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

                @kuckuckmann

                Habe mal den Status eines Druckers in eine cardGrid2 gesetzt:

                0e10accc-aeae-4351-b29e-0946e863f312-Nextion_Editor_iLfSp9r40Z.gif

                Die Werte kommen über den SNMP-Adapter

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

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

                ArmilarA 1 Antwort Letzte Antwort
                3
                • ArmilarA Armilar

                  @kuckuckmann

                  Habe mal den Status eines Druckers in eine cardGrid2 gesetzt:

                  0e10accc-aeae-4351-b29e-0946e863f312-Nextion_Editor_iLfSp9r40Z.gif

                  Die Werte kommen über den SNMP-Adapter

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

                  @Kuckuckmann

                  Oder eine Übersicht über NAS Daten:

                  2215cb31-b47f-4d3e-999a-071188020960-Nextion_Editor_34Dm181VIp.gif

                  Daten ebenfalls mittels SNMP-Adapter in den ioBroker - Kann natürlich beliebig erweitert werden.

                  Bin ja immer noch der einzige 😊

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

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

                  ArmilarA 1 Antwort Letzte Antwort
                  4
                  • ArmilarA Armilar

                    @Kuckuckmann

                    Oder eine Übersicht über NAS Daten:

                    2215cb31-b47f-4d3e-999a-071188020960-Nextion_Editor_34Dm181VIp.gif

                    Daten ebenfalls mittels SNMP-Adapter in den ioBroker - Kann natürlich beliebig erweitert werden.

                    Bin ja immer noch der einzige 😊

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

                    @Kuckuckmann

                    Habe jetzt einen vereinfachten Szenenwähler über:

                    • einen Datenpunkt (numerisch) unter 0_userdata

                    • 6 Aliasse vom Geräte-Typ "Taste" (button)

                      51a3f0b2-49fa-4ec4-a1c7-5f4b8301cfb0-Nextion_Editor_0ACPU7NMCp.gif
                      realisiert.

                    Einleitung

                    • ab der v4.3.3.24 des NSPanelTs.ts ist es möglich einen boolschen Wert im Alias vom Gerätetyp "Taste" auszuwerten und als onColor oder offColor im PageItem zu definieren. Somit kann die Buttonfarbe bei der Auswahl ebenfalls gesetzt werden
                    • Jeder der 6 Aliasse wird beim lesen einen boolschen Zustand interpretieren und einen numerischen Wert schreiben
                    • Falls Fragen vorhanden sind, bitte nicht hier, sondern im Haupt-Thread stellen:
                      https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui/6000

                    Der Datenpunkt:
                    60985bc1-8a7b-424d-a9d4-b1380d38d391-image.png
                    nimmt Werte von 1-6 entgegen, welche über das NSPanel geschrieben werden

                    Die 6 Aliasse vom Geräte-Typ "Taste" (channel = button)
                    2a783b62-dd72-4ade-8f8a-9884bff5cd6e-image.png

                    Blick in die Konvertierung des Alias (Beispiel für Szene_1):
                    0acda048-9a35-41d6-8eee-df4b0bc2b76a-image.png
                    Ebenfalls für die Aliasse "Szene_2" - "Szene_6" die Konvertierung anpassen.

                    Die Seitenvariable mit den 6 PageItem's der soeben beschriebenen Aliasse

                    let Szenenwaehler = <PageGrid>
                    {
                        'type': 'cardGrid',
                        'heading': 'Szenen',
                        'useColor': true,
                        'items': [
                            <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_1', name: 'An', icon: 'lightbulb-on', onColor: MSYellow, offColor: HMIOff},
                            <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_2', name: 'Hell', icon:'lightbulb-multiple', onColor: MSYellow, offColor: HMIOff},
                            <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_3', name: 'Heimkino', icon: 'theater', onColor: MSYellow, offColor: HMIOff},
                            <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_4', name: 'Aus', icon: 'lightbulb-off', onColor: MSYellow, offColor: HMIOff},
                            <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_5', name: 'Normal', icon: 'theme-light-dark', onColor: MSYellow, offColor: HMIOff},
                            <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_6', name: 'Esszimmer', icon: 'vanity-light', onColor: MSYellow, offColor: HMIOff}
                        ]
                    };
                    

                    Das Mini-Script (JS) zur Steuerung der Szenen:

                    on({ id: [].concat(['0_userdata.0.Test.Szenen.Szenentrigger']), change: 'ne' }, async (obj) => {
                        switch ((obj.state ? obj.state.val : '')) {
                            case 1:
                                // Schalte Aktoren für Szene 1
                                break;
                      	case 2:
                                // Schalte Aktoren für Szene 2
                      	    break;
                      	case 3:
                                // Schalte Aktoren für Szene 3
                      	    break;
                      	case 4:
                                // Schalte Aktoren für Szene 4
                      	    break;
                      	case 5:
                    	    // Schalte Aktoren für Szene 5
                                break;
                      	case 6:
                    	    // Schalte Aktoren für Szene 6
                      	    break;
                        }
                    });
                    

                    oder alternativ Blockly:

                    9425619b-da34-4f54-b4cc-f1493c844891-image.png

                    <xml xmlns="https://developers.google.com/blockly/xml">
                     <block type="on_ext" id="p#k98vY-8v9}KqHq+RcB" x="138" y="62">
                       <mutation xmlns="http://www.w3.org/1999/xhtml" items="1"></mutation>
                       <field name="CONDITION">ne</field>
                       <field name="ACK_CONDITION"></field>
                       <value name="OID0">
                         <shadow type="field_oid" id="}Ye-PZb`:Q|Js#/]kBXd">
                           <field name="oid">default</field>
                         </shadow>
                         <block type="text" id="s-rNGWsQ@R*8bh6[rusK">
                           <field name="TEXT">0_userdata.0.Test.Szenen.Szenentrigger</field>
                         </block>
                       </value>
                       <statement name="STATEMENT">
                         <block type="logic_switch_case" id="X=;.Tc2ogXe!Q~i}7Aq?">
                           <mutation xmlns="http://www.w3.org/1999/xhtml" case="5"></mutation>
                           <value name="CONDITION">
                             <block type="on_source" id="3Y@=$4dwXQ24r~`Tn}$%">
                               <field name="ATTR">state.val</field>
                             </block>
                           </value>
                           <value name="CASECONDITION0">
                             <block type="math_number" id="qA1.b6NwJ~5@@N$Fr{5W">
                               <field name="NUM">1</field>
                             </block>
                           </value>
                           <statement name="CASE0">
                             <block type="comment" id="A.V{CZ(rM:[@_y7!h6uS">
                               <field name="COMMENT">Schalte hier etwas zur Szene 1 an oder aus</field>
                             </block>
                           </statement>
                           <value name="CASECONDITION1">
                             <block type="math_number" id="bLx11]Htq1V|plirP9{Z">
                               <field name="NUM">2</field>
                             </block>
                           </value>
                           <statement name="CASE1">
                             <block type="comment" id="b=b]))d9Co_M=zIu,3qZ">
                               <field name="COMMENT">Schalte hier etwas zur Szene 2 an oder aus</field>
                             </block>
                           </statement>
                           <value name="CASECONDITION2">
                             <block type="math_number" id="O]0oCOU{C=z]!o).|LKd">
                               <field name="NUM">3</field>
                             </block>
                           </value>
                           <statement name="CASE2">
                             <block type="comment" id="!Z2t%HN0!|[1]UB^*bze">
                               <field name="COMMENT">Schalte hier etwas zur Szene 3 an oder aus</field>
                             </block>
                           </statement>
                           <value name="CASECONDITION3">
                             <block type="math_number" id="U-5$JbiOqixAJT,U][Qd">
                               <field name="NUM">4</field>
                             </block>
                           </value>
                           <statement name="CASE3">
                             <block type="comment" id="LVrTW#JblT3RV7q]X9~L">
                               <field name="COMMENT">Schalte hier etwas zur Szene 4 an oder aus</field>
                             </block>
                           </statement>
                           <value name="CASECONDITION4">
                             <block type="math_number" id="2-tAmwBk,+_%44CR}[wy">
                               <field name="NUM">5</field>
                             </block>
                           </value>
                           <statement name="CASE4">
                             <block type="comment" id="zgB+cGF!QP4^4=Hev*~4">
                               <field name="COMMENT">Schalte hier etwas zur Szene 5 an oder aus</field>
                             </block>
                           </statement>
                           <value name="CASECONDITION5">
                             <block type="math_number" id="x7%+^[WS7sB]s,+?:73N">
                               <field name="NUM">6</field>
                             </block>
                           </value>
                           <statement name="CASE5">
                             <block type="comment" id="9)ADi6*pzcOJ06.j[u0c">
                               <field name="COMMENT">Schalte hier etwas zur Szene 6 an oder aus</field>
                             </block>
                           </statement>
                         </block>
                       </statement>
                     </block>
                    </xml>
                    

                    Viel Spaß beim ausprobieren und nachbauen

                    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.

                    Rene55R 1 Antwort Letzte Antwort
                    4
                    • ArmilarA Armilar

                      @Kuckuckmann

                      Habe jetzt einen vereinfachten Szenenwähler über:

                      • einen Datenpunkt (numerisch) unter 0_userdata

                      • 6 Aliasse vom Geräte-Typ "Taste" (button)

                        51a3f0b2-49fa-4ec4-a1c7-5f4b8301cfb0-Nextion_Editor_0ACPU7NMCp.gif
                        realisiert.

                      Einleitung

                      • ab der v4.3.3.24 des NSPanelTs.ts ist es möglich einen boolschen Wert im Alias vom Gerätetyp "Taste" auszuwerten und als onColor oder offColor im PageItem zu definieren. Somit kann die Buttonfarbe bei der Auswahl ebenfalls gesetzt werden
                      • Jeder der 6 Aliasse wird beim lesen einen boolschen Zustand interpretieren und einen numerischen Wert schreiben
                      • Falls Fragen vorhanden sind, bitte nicht hier, sondern im Haupt-Thread stellen:
                        https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui/6000

                      Der Datenpunkt:
                      60985bc1-8a7b-424d-a9d4-b1380d38d391-image.png
                      nimmt Werte von 1-6 entgegen, welche über das NSPanel geschrieben werden

                      Die 6 Aliasse vom Geräte-Typ "Taste" (channel = button)
                      2a783b62-dd72-4ade-8f8a-9884bff5cd6e-image.png

                      Blick in die Konvertierung des Alias (Beispiel für Szene_1):
                      0acda048-9a35-41d6-8eee-df4b0bc2b76a-image.png
                      Ebenfalls für die Aliasse "Szene_2" - "Szene_6" die Konvertierung anpassen.

                      Die Seitenvariable mit den 6 PageItem's der soeben beschriebenen Aliasse

                      let Szenenwaehler = <PageGrid>
                      {
                          'type': 'cardGrid',
                          'heading': 'Szenen',
                          'useColor': true,
                          'items': [
                              <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_1', name: 'An', icon: 'lightbulb-on', onColor: MSYellow, offColor: HMIOff},
                              <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_2', name: 'Hell', icon:'lightbulb-multiple', onColor: MSYellow, offColor: HMIOff},
                              <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_3', name: 'Heimkino', icon: 'theater', onColor: MSYellow, offColor: HMIOff},
                              <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_4', name: 'Aus', icon: 'lightbulb-off', onColor: MSYellow, offColor: HMIOff},
                              <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_5', name: 'Normal', icon: 'theme-light-dark', onColor: MSYellow, offColor: HMIOff},
                              <PageItem>{ id: 'alias.0.Test.Szenenwaehler.Szene_6', name: 'Esszimmer', icon: 'vanity-light', onColor: MSYellow, offColor: HMIOff}
                          ]
                      };
                      

                      Das Mini-Script (JS) zur Steuerung der Szenen:

                      on({ id: [].concat(['0_userdata.0.Test.Szenen.Szenentrigger']), change: 'ne' }, async (obj) => {
                          switch ((obj.state ? obj.state.val : '')) {
                              case 1:
                                  // Schalte Aktoren für Szene 1
                                  break;
                        	case 2:
                                  // Schalte Aktoren für Szene 2
                        	    break;
                        	case 3:
                                  // Schalte Aktoren für Szene 3
                        	    break;
                        	case 4:
                                  // Schalte Aktoren für Szene 4
                        	    break;
                        	case 5:
                      	    // Schalte Aktoren für Szene 5
                                  break;
                        	case 6:
                      	    // Schalte Aktoren für Szene 6
                        	    break;
                          }
                      });
                      

                      oder alternativ Blockly:

                      9425619b-da34-4f54-b4cc-f1493c844891-image.png

                      <xml xmlns="https://developers.google.com/blockly/xml">
                       <block type="on_ext" id="p#k98vY-8v9}KqHq+RcB" x="138" y="62">
                         <mutation xmlns="http://www.w3.org/1999/xhtml" items="1"></mutation>
                         <field name="CONDITION">ne</field>
                         <field name="ACK_CONDITION"></field>
                         <value name="OID0">
                           <shadow type="field_oid" id="}Ye-PZb`:Q|Js#/]kBXd">
                             <field name="oid">default</field>
                           </shadow>
                           <block type="text" id="s-rNGWsQ@R*8bh6[rusK">
                             <field name="TEXT">0_userdata.0.Test.Szenen.Szenentrigger</field>
                           </block>
                         </value>
                         <statement name="STATEMENT">
                           <block type="logic_switch_case" id="X=;.Tc2ogXe!Q~i}7Aq?">
                             <mutation xmlns="http://www.w3.org/1999/xhtml" case="5"></mutation>
                             <value name="CONDITION">
                               <block type="on_source" id="3Y@=$4dwXQ24r~`Tn}$%">
                                 <field name="ATTR">state.val</field>
                               </block>
                             </value>
                             <value name="CASECONDITION0">
                               <block type="math_number" id="qA1.b6NwJ~5@@N$Fr{5W">
                                 <field name="NUM">1</field>
                               </block>
                             </value>
                             <statement name="CASE0">
                               <block type="comment" id="A.V{CZ(rM:[@_y7!h6uS">
                                 <field name="COMMENT">Schalte hier etwas zur Szene 1 an oder aus</field>
                               </block>
                             </statement>
                             <value name="CASECONDITION1">
                               <block type="math_number" id="bLx11]Htq1V|plirP9{Z">
                                 <field name="NUM">2</field>
                               </block>
                             </value>
                             <statement name="CASE1">
                               <block type="comment" id="b=b]))d9Co_M=zIu,3qZ">
                                 <field name="COMMENT">Schalte hier etwas zur Szene 2 an oder aus</field>
                               </block>
                             </statement>
                             <value name="CASECONDITION2">
                               <block type="math_number" id="O]0oCOU{C=z]!o).|LKd">
                                 <field name="NUM">3</field>
                               </block>
                             </value>
                             <statement name="CASE2">
                               <block type="comment" id="!Z2t%HN0!|[1]UB^*bze">
                                 <field name="COMMENT">Schalte hier etwas zur Szene 3 an oder aus</field>
                               </block>
                             </statement>
                             <value name="CASECONDITION3">
                               <block type="math_number" id="U-5$JbiOqixAJT,U][Qd">
                                 <field name="NUM">4</field>
                               </block>
                             </value>
                             <statement name="CASE3">
                               <block type="comment" id="LVrTW#JblT3RV7q]X9~L">
                                 <field name="COMMENT">Schalte hier etwas zur Szene 4 an oder aus</field>
                               </block>
                             </statement>
                             <value name="CASECONDITION4">
                               <block type="math_number" id="2-tAmwBk,+_%44CR}[wy">
                                 <field name="NUM">5</field>
                               </block>
                             </value>
                             <statement name="CASE4">
                               <block type="comment" id="zgB+cGF!QP4^4=Hev*~4">
                                 <field name="COMMENT">Schalte hier etwas zur Szene 5 an oder aus</field>
                               </block>
                             </statement>
                             <value name="CASECONDITION5">
                               <block type="math_number" id="x7%+^[WS7sB]s,+?:73N">
                                 <field name="NUM">6</field>
                               </block>
                             </value>
                             <statement name="CASE5">
                               <block type="comment" id="9)ADi6*pzcOJ06.j[u0c">
                                 <field name="COMMENT">Schalte hier etwas zur Szene 6 an oder aus</field>
                               </block>
                             </statement>
                           </block>
                         </statement>
                       </block>
                      </xml>
                      

                      Viel Spaß beim ausprobieren und nachbauen

                      Rene55R Offline
                      Rene55R Offline
                      Rene55
                      schrieb am zuletzt editiert von Rene55
                      #12

                      @armilar Sorry, ich hatte mich hier 'verlaufen'. (Alter Text gelöscht!)

                      Host: Fujitsu Intel(R) Pentium(R) CPU G4560T, 32 GB RAM, Proxmox 8.x + lxc Ubuntu 22.04
                      ioBroker (8 GB RAM) Node.js: 20.19.1, NPM: 10.8.2, js-Controller: 7.0.6, Admin: 7.6.3
                      Wetterstation: Froggit WH3000SE V1.6.6

                      ArmilarA 1 Antwort Letzte Antwort
                      0
                      • Rene55R Rene55

                        @armilar Sorry, ich hatte mich hier 'verlaufen'. (Alter Text gelöscht!)

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

                        @rene55

                        Irgendwas fehlt mir noch, nur was?

                        Der Link zum Support-Thread... 😉 Du hast eben die Screen-Beispiele gekapert... Ich Antworte gleich kurz vom Support-Thread...

                        https://forum.iobroker.net/topic/58170/sonoff-nspanel-mit-lovelace-ui/5000

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

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

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


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        770

                        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