Skip to content
  • 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
Logo
  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.1k

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

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

SONOFF NSPanel mit Lovelace UI - Zeigt her Eure Cards

Scheduled Pinned Locked Moved Hardware
13 Posts 3 Posters 2.9k Views 6 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.
  • K Offline
    K Offline
    Kuckuckmann
    wrote on last edited by
    #3

    Block for future

    NSPanel Dokumentation im GitHub Wiki:

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

    1 Reply Last reply
    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
      wrote on last edited by 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 Reply Last reply
      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
        wrote on last edited by 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 Reply Last reply
        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
          wrote on last edited by
          #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 Reply Last reply
          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
            wrote on last edited by 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 Reply Last reply
            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
              wrote on last edited by 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 Reply Last reply
              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
                wrote on last edited by
                #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 Reply Last reply
                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
                  wrote on last edited by
                  #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 Reply Last reply
                  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
                    wrote on last edited by 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 Reply Last reply
                    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
                      wrote on last edited by 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 Reply Last reply
                      0
                      • Rene55R Rene55

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

                        ArmilarA Offline
                        ArmilarA Offline
                        Armilar
                        Most Active Forum Testing
                        wrote on last edited by
                        #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 Reply Last reply
                        0
                        Reply
                        • Reply as topic
                        Log in to reply
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes


                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        257

                        Online

                        32.4k

                        Users

                        81.4k

                        Topics

                        1.3m

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

                        • Don't have an account? Register

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