SONOFF NSPanel mit Lovelace UI - Zeigt her Eure Cards

Kuckuckmann

Block for future

Kuckuckmann

Block for future

Armilar

@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

Armilar

@kuckuckmann

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

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

Armilar

@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:

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:

Aber eigentlich ist es nur ein Lichtschalter

Armilar

@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...

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

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

Armilar

@Kuckuckmann

Habe jetzt einen vereinfachten Szenenwähler über:

einen Datenpunkt (numerisch) unter 0_userdata
6 Aliasse vom Geräte-Typ "Taste" (button)

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:

nimmt Werte von 1-6 entgegen, welche über das NSPanel geschrieben werden

Die 6 Aliasse vom Geräte-Typ "Taste" (channel = button)

Blick in die Konvertierung des Alias (Beispiel für Szene_1):

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:

<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

Rene55

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

Armilar

@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

NEWS

SONOFF NSPanel mit Lovelace UI - Zeigt her Eure Cards

Support us

724
Online

30.6k
Users

77.2k
Topics

1.2m
Posts

NEWS

SONOFF NSPanel mit Lovelace UI - Zeigt her Eure Cards

Support us

724Online

30.6kUsers

77.2kTopics

1.2mPosts

724
Online

30.6k
Users

77.2k
Topics

1.2m
Posts