Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Hardware
    4. SONOFF NSPanel mit Lovelace UI

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    SONOFF NSPanel mit Lovelace UI

    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      TT-Tom @Rene55 last edited by

      @rene55
      Viele User fehlt das Verständnis für die Scripte, das ist unsere Erfahrung über die Zeit. Es gibt immer etwas zu optimieren, es soll aber auch einfach zu bedienen und verständlich sein. Darum immer der Versuch die Einstellmöglichkeiten so gering wie möglich und verständlich zu halten.

      Wie geschrieben werde ich die optimierte Variante mit erwähnen und verlinken.

      1 Reply Last reply Reply Quote 1
      • Rene55
        Rene55 @Armilar last edited by

        @armilar Naja, fliegen wollte ich nicht. Ich suche eigentlich nur nach einer einfachen, benutzerfreundlichen Lösung. Aber wir kommen der Sache näher.

        Was macht eigentlich triggeredSensor ?

        Armilar 1 Reply Last reply Reply Quote 0
        • Armilar
          Armilar Most Active Forum Testing @Rene55 last edited by Armilar

          @rene55 sagte in SONOFF NSPanel mit Lovelace UI:

          Was macht eigentlich triggeredSensor ?

          Speicher verbrauchen, da ungenutzt... 😉

          obj.id hat ja die Infos

          Mache mir bei den funktionalen Scripten nicht immer die Arbeit alles überflüssige zu entfernen... Ist ja nur ein Beispiel - nicht das Bestreben damit einen Preis zu gewinnen 😊

          Rene55 3 Replies Last reply Reply Quote 0
          • Rene55
            Rene55 @Armilar last edited by

            @armilar Mercy, ich versuche nur, alles zu verstehen 😳

            T 1 Reply Last reply Reply Quote 0
            • T
              ticaki Developer @Rene55 last edited by ticaki

              @rene55
              Ich denke so alt wird keiner 🙂 aber versuchen kann mans ja.

              1 Reply Last reply Reply Quote 0
              • Rene55
                Rene55 @Armilar last edited by Rene55

                @armilar @theknut @ticaki Um dieses Thema abzuschließen habe ich das Script jetzt soweit angepasst, dass es für mich passt. Es wäre schön, wenn einer von Euch mal drübergucken könnte.

                /*
                   *   Grundgedanke von //https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/Blockly/CardLChart_Influx2.ts
                   *   Anpassungen für InfluxDB-Aliase by Rene55 [02.02.2024]
                   *
                */
                const Debug = false;
                //
                const NSPanel_Path = '0_userdata.0.NSPanel.';
                const Path = NSPanel_Path + 'Influx2NSPanel.cardLChart.';
                const InfluxInstance = 'influxdb.0';
                const influxDbBucket = 'storage_short';
                const numberOfHoursAgo = 24;
                const xAxisTicksEveryM = 60;
                const xAxisLabelEveryM = 240;
                //
                
                const sensors : Record<string, Record<string,string>> = {};
                /*      ↓ Id of the sensor     ↓ Id of the data source for the charts  [↓ Alias for measurement]  */
                sensors['mqtt.0.arexx.bad'] = {'target':'EG.Bad_Temperatur'}
                sensors['mqtt.0.arexx.badH'] = {'target':'EG.Bad_Luftfeuchte'}
                sensors['mqtt.0.arexx.vorne'] = {'target':'aussen_temperature', 'dbAlias':'Temperatur_vorne'}
                
                //  #####   ab hier keine Änderungen mehr nötig   #####
                
                //___________________________
                // Beschreibe diese Funktion: create data source for NsPanel on script startup
                Object.keys(sensors).forEach(async id => {
                   await generateDateAsync(id);
                });
                
                //___________________________
                // Beschreibe diese Funktion: listen to the sensors and update the data source states accordingly
                on({ id: Object.keys(sensors), change: 'any' }, async function (obj) {
                   if (!obj.id) {
                       return;
                   }
                   await generateDateAsync(obj.id);
                });
                
                //___________________________
                // Beschreibe diese Funktion: Daten generieren
                async function generateDateAsync(sensorId: string) {
                   let measurement:string = sensors[sensorId].dbAlias
                   if (measurement =='' ||measurement == undefined) {measurement = sensorId}
                   const dataPointId:string = Path + sensors[sensorId].target +'.ACTUAL'
                   if (Debug) log(`(f) generateDateAsync: ${sensorId} ${dataPointId} > ${measurement}`)
                   
                   const query =[
                       'from(bucket: "' + influxDbBucket + '")',
                       '|> range(start: -' + numberOfHoursAgo + 'h)',
                       '|> filter(fn: (r) => r["_measurement"] == "' + measurement + '")',
                       '|> filter(fn: (r) => r["_field"] == "value")',
                       '|> drop(columns: ["from", "ack", "q"])',
                       '|> aggregateWindow(every: 1h, fn: last, createEmpty: false)',
                       '|> map(fn: (r) => ({ r with _rtime: int(v: r._time) - int(v: r._start)}))',
                       '|> yield(name: "_result")'].join('');
                
                   if (Debug) console.log('Query: ' + query);
                
                   const result : any = await sendToAsync(InfluxInstance, 'query', query);
                   if (result.error) {
                       console.error(result.error);
                       return;
                   }
                   if (Debug) console.log(result);
                   const numResults = result.result.length;
                   let coordinates : string = '';
                   for (let r = 0; r < numResults; r++) 
                   {
                       const list : string[] = []
                       const numValues = result.result[r].length;
                
                       for (let i = 0; i < numValues; i++) 
                       {
                           const time = Math.round(result.result[r][i]._rtime/1000/1000/1000/60);
                           const value = Math.round(result.result[r][i]._value * 10);
                           list.push(time + ":" + value);
                       }
                
                       coordinates = list.join("~");
                       if (Debug) console.log(coordinates);
                   }
                
                   const ticksAndLabelsList : string[] = []
                   const date = new Date();
                   date.setMinutes(0, 0, 0);
                   const ts = Math.round(date.getTime() / 1000) 
                   const tsYesterday = ts - (numberOfHoursAgo * 3600)
                   if (Debug) console.log('Iterate from ' + tsYesterday + ' to ' + ts + ' stepsize=' + (xAxisTicksEveryM * 60));
                   for (let x = tsYesterday, i = 0; x < ts; x += (xAxisTicksEveryM * 60), i += xAxisTicksEveryM)
                   {
                       if ((i % xAxisLabelEveryM))
                           ticksAndLabelsList.push('' + i);
                       else
                       {
                           const currentDate = new Date(x * 1000);
                           // Hours part from the timestamp
                           const hours = "0" + String(currentDate.getHours());
                           // Minutes part from the timestamp
                           const minutes = "0" + String(currentDate.getMinutes());
                           const formattedTime = hours.slice(-2) + ':' + minutes.slice(-2);
                
                           ticksAndLabelsList.push(String(i) + "^" + formattedTime);
                       }
                   }
                   if (Debug) console.log('Ticks & Label: ' + ticksAndLabelsList);
                   if (Debug) console.log('Coordinates: ' + coordinates);
                   await setOrCreate(dataPointId, ticksAndLabelsList.join("+") + '~' + coordinates, true);
                }
                
                //___________________________
                // Beschreibe diese Funktion: Datenpunkte anlegen bzw. schreiben
                async function setOrCreate(id : string, value : any, ack : boolean) {
                   if (!(await existsStateAsync(id))) {
                        await createStateAsync(id, value, {
                           name: id.split('.').reverse()[0],
                           desc: 'Sensor Values [~<time>:<value>]*',
                           type: 'string',
                           role: 'value',
                       });
                   } else {
                       await setStateAsync(id, value, ack);
                   }
                }
                //
                //   E N D E
                //
                


                Das mit const sensors : Record<string, string> passt dann bei mir nicht so richtig. Ich hoffe, es ist trotzdem noch TS-Konform.

                T 1 Reply Last reply Reply Quote 0
                • T
                  ticaki Developer @Rene55 last edited by ticaki

                  @rene55
                  alles geschriebene von mir ist unnötig. Mit record gehts auch - zumindest in vscode. Wieder was gelernt.

                  Ok nach genauerem Hinsehen müsste das wohl so ausssehen:

                  Record<string, Record<string,string>>
                  
                  Rene55 1 Reply Last reply Reply Quote 0
                  • icebear
                    icebear last edited by

                    Hallo zusammen

                    Ich hab grad auf die V4.3.3.39 das update gemacht (vorher v4.3.3.31), jetzt bekomm ich beim Start folgenden Fehler:

                    
                    javascript.0
                    2024-02-02 13:32:47.495	error	script.js.NSPanel.NSPanelTS_1_v4_3_3_39: TypeScript compilation failed:let WLAN: PageType = { ^ERROR: Type '{ type: "cardQR"; heading: string; subPage: true; prev: string; home: string; homeIcon: string; items: [{ id: string; hidePassword: true; autoCreateALias: true; }, { id: string; }]; }' is not assignable to type 'PageType'. Types of property ''items'' are incompatible. Type '[{ id: string; hidePassword: true; autoCreateALias: true; }, { id: string; }]' is not assignable to type '[PageItem] & PageItem[]'. Type '[{ id: string; hidePassword: true; autoCreateALias: true; }, { id: string; }]' is not assignable to type '[PageItem]'. Source has 2 element(s) but target allows only 1
                    

                    Hab ich irgendwas verpasst?

                    T T 2 Replies Last reply Reply Quote 0
                    • T
                      TT-Tom @icebear last edited by TT-Tom

                      @icebear

                      zeige mal die config von der Page.

                      sieht aus als ob due 2 pageItem hast

                      icebear 1 Reply Last reply Reply Quote 0
                      • icebear
                        icebear @TT-Tom last edited by

                        @tt-tom

                        let WLAN: PageType = 
                        {
                            'type': 'cardQR',
                            'heading': 'Gäste WLAN',
                            'subPage': true,
                        	'prev': 'Abfall',
                        	'home': 'Grundstueck',
                        	'homeIcon': 'home-roof',
                            'items': [
                        		{ id: 'alias.0.NSPanel.GuestWifi', hidePassword: true, autoCreateALias: true },
                                { id: 'alias.0.NSPanel.GuestWifi.SWITCH'},
                        	
                        	]
                        };
                        
                        T 1 Reply Last reply Reply Quote 0
                        • T
                          ticaki Developer @icebear last edited by

                          @icebear sagte in SONOFF NSPanel mit Lovelace UI:

                          Source has 2 element(s) but target allows only 1

                          Denke mal 1 Pageitem zuviel angegeben -> [{ id: string; hidePassword: true; autoCreateALias: true; }, { id: string; }]

                          1 Reply Last reply Reply Quote 2
                          • T
                            TT-Tom @icebear last edited by

                            @icebear sagte in SONOFF NSPanel mit Lovelace UI:

                            { id: 'alias.0.NSPanel.GuestWifi.SWITCH'},

                            der kann weg. den Switch sucht er sich alleine.

                            icebear 1 Reply Last reply Reply Quote 2
                            • icebear
                              icebear @TT-Tom last edited by

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

                              @icebear sagte in SONOFF NSPanel mit Lovelace UI:

                              { id: 'alias.0.NSPanel.GuestWifi.SWITCH'},

                              der kann weg. den Switch sucht er sich alleine.

                              Ich danke dir, das wars.

                              1 Reply Last reply Reply Quote 0
                              • Rene55
                                Rene55 @ticaki last edited by

                                @ticaki Jepp, det funzt. Ich muss mich noch schwer in TS reinfuchsen. Danke.

                                1 Reply Last reply Reply Quote 3
                                • Rene55
                                  Rene55 @Armilar last edited by

                                  @armilar Gibt es für cardChart auch ein Script für die Aufbereitung der Daten? Ich wollte auch so etwas umsetzen wie 'ChartsDemo' für Gas oder 'Stromzähler L1+L2+L3'.

                                  Armilar T 2 Replies Last reply Reply Quote 0
                                  • Armilar
                                    Armilar Most Active Forum Testing @Rene55 last edited by Armilar

                                    @rene55

                                    https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardchart-ab-ts-script-v370

                                    etwas unterhalb ist ein abgebildetes Blockly für influxDB2

                                    darunter der Link zum Blockly

                                    yAxisTicks sind im Gegensatz zur cardLChart nicht automatisiert und müssen definiert werden.

                                    Der Daten-String ist anders aufgebaut, da er keine Koordinaten, sondern Werte zum Zeitpunkt X enthält...

                                    theknut 1 Reply Last reply Reply Quote 1
                                    • T
                                      TT-Tom @Rene55 last edited by

                                      @rene55
                                      offiziell im Wiki für Influx nur als Blockly. BalkenChart oder auf meinem git als TypeScript.

                                      Rene55 1 Reply Last reply Reply Quote 1
                                      • Rene55
                                        Rene55 @TT-Tom last edited by

                                        @tt-tom Oh, sehr gut - schau ich mir sofort an.

                                        1 Reply Last reply Reply Quote 0
                                        • theknut
                                          theknut @Armilar last edited by theknut

                                          @armilar said in SONOFF NSPanel mit Lovelace UI:

                                          @rene55

                                          https://github.com/joBr99/nspanel-lovelace-ui/wiki/ioBroker-Card-Definitionen-(Seiten)#cardchart-ab-ts-script-v370

                                          etwas unterhalb ist ein abgebildetes Blockly für influxDB2

                                          darunter der Link zum Blockly

                                          yAxisTicks sind im Gegensatz zur cardLChart nicht automatisiert und müssen definiert werden.

                                          Der Daten-String ist anders aufgebaut, da er keine Koordinaten, sondern Werte zum Zeitpunkt X enthält...

                                          gäbe es einen Grund, dass man/ich das nicht noch so umschreiben könnte, dass es auch berechnet wird?

                                          Rene55 T 2 Replies Last reply Reply Quote 0
                                          • Rene55
                                            Rene55 @theknut last edited by

                                            @theknut Das würde ich auch gerne in Anspruch nehmen. Meine aktuell generierten Balken zeigen alle ins Minus! 🤕 . Vielleicht hab ich auch noch nicht gerafft, welchen Datenpunkt ich nehmen muss.

                                            T 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            926
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            lovelace ui nspanel sonoff
                                            261
                                            7179
                                            4905695
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo