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.
    • 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
                                  • T
                                    TT-Tom @Rene55 last edited by

                                    @rene55
                                    das kann auch der Bug bei der Card sein.

                                    https://github.com/joBr99/nspanel-lovelace-ui/issues/934

                                    SurfGargano created this issue in joBr99/nspanel-lovelace-ui

                                    open [BUG] cardChart wird nicht richtig angezeigt wenn die Werte größer als 196 sind #934

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

                                      @theknut

                                      kannst du gerne machen.

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

                                        @tt-tom Ich glaube, ich stell meine Balken erstmal zurück. Hab mir das Issue mal angesehen, sagt mir aber nix. Die Werte, die ich gerade zum Panel schicke sehen so aus:
                                        Werte: 4304^3~9475~5080~7928~5684~5661~5531~5711^3~5511~5372~5647~5263~4955~4901~4862^4~4991~4812~4809~4860~4931~5912~9183^4~5116~9032~5595~
                                        Scale: [0,2369,4738,7107,9476]

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

                                          @rene55

                                          Rechne die Werte in kW um - dann sollte es passen... Die Skala schafft da keine W

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

                                            @armilar Nochmals die (dumme) Frage: welche Daten muss ich da nehmen. Ziel ist, dass ich den Verbrauch vom Haus im Stundenraster sehe, damit ich erkennen kann, zu welcher Stunde die meiste Energie verbraten wird.

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            659
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            lovelace ui nspanel sonoff
                                            263
                                            7212
                                            4936194
                                            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