Skip to content
  • 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
  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

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 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 Online
                    Rene55R Online
                    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

                      719

                      Online

                      32.4k

                      Benutzer

                      81.4k

                      Themen

                      1.3m

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

                      • Du hast noch kein Konto? Registrieren

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