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

    • 15. 05. Wartungsarbeiten am ioBroker Forum

    • Monatsrückblick - April 2025

    • Minor js-controller 7.0.7 Update in latest repo

    SONOFF NSPanel mit Lovelace UI

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

      @tt-tom Ich kenne nicht alle eurer Ideen. Sicher kann ein Chart nur die Daten eines Messwertes anzeigen. Es ist aber auch ein bisschen bescheiden, wenn ein User 3 verschiedene Charts haben möchte und dafür drei Scripte laufen lassen muss. Oder habe ich deinen Einwurf falsch verstanden?

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

        @rene55

        Jo, warum 3 unterschiedliche Scripte?

        Macht die Sache nicht so wissenschaftlich und setzt alle Sensoren in ein Script:

        Beispiel (läuft bei mir genau so und nicht anders - und das seit Monaten):

        const Debug = false;
        
        const NSPanel_Path = '0_userdata.0.NSPanel.';
        const Path = NSPanel_Path + 'Influx2NSPanel.cardLChart.';
        let   PathSensor = '';
        
        let SensorName = ['EG.Buero.Temperatur',
                          'EG.Gaeste_WC.Temperatur',
                          'EG.Wohnzimmer.Temperatur',
                          'EG.Hauswirtschaftsraum.Temperatur',
                          'EG.Flur_vorne.Temperatur',
                          'EG.Flur_hinten.Temperatur',
                          'EG.Esszimmer.Temperatur',
                          'EG.Kaminzimmer.Temperatur',
                          'EG.Badezimmer.Temperatur',
                          'EG.Kueche.Temperatur',
                          'OG.Schlafzimmer_1.Temperatur',
                          'OG.Gaestezimmer.Temperatur',
                          'OG.Hobbyraum.Temperatur',
                          'Gartenhaus.Temperatur'];
        
        const Sensor = [].concat('deconz.0.Sensors.5.temperature')  // EG.Buero.Temperatur
                         .concat('deconz.0.Sensors.12.temperature')  // EG.Gaeste_WC.Temperatur
                         .concat('deconz.0.Sensors.53.temperature')  // EG.Wohnzimmer.Temperatur
                         .concat('deconz.0.Sensors.19.temperature')  // EG.Hauswirtschaftsraum.Temperatur
                         .concat('deconz.0.Sensors.9.temperature')   // EG.Flur_vorne.Temperatur
                         .concat('deconz.0.Sensors.27.temperature')  // EG.Flur_hinten.Temperatur
                         .concat('deconz.0.Sensors.40.temperature')  // EG.Esszimmer.Temperatur
                         .concat('deconz.0.Sensors.37.temperature')  // EG.Kaminzimmer.Temperatur
                         .concat('deconz.0.Sensors.45.temperature')  // EG.Badezimmer.Temperatur
                         .concat('deconz.0.Sensors.25.temperature')  // EG.Kueche.Temperature
                         .concat('deconz.0.Sensors.57.temperature')  // OG.Schlafzimmer_1.Temperatur
                         .concat('deconz.0.Sensors.60.temperature')  // OG.Gaestezimmer.Temperatur
                         .concat('deconz.0.Sensors.63.temperature')  // OG.Hobbyraum.Temperatur
                         .concat('deconz.0.Sensors.30.temperature'); // Gartenhaus.Temperatur
                         
        let   triggeredSensor = 0;
        
        const numberOfHoursAgo = 24;
        const xAxisTicksEveryM = 60;
        const xAxisLabelEveryM = 240;
        
        const InfluxInstance = 'influxdb.1';
        
        // Ab hier keine Ändeungen
        
        let coordinates = ''; 
        
        on({ id: Sensor, change: 'any' }, async function (obj) {
            
            if (Debug) log(obj.id, 'info');
            if (Debug) log(SensorName[Sensor.indexOf(obj.id)], 'info')
        
            PathSensor = Path + SensorName[Sensor.indexOf(obj.id)]
        
            if (existsObject(PathSensor) == false) {
                createState(PathSensor, 0, {
                    name: 'SensorGrid',
                    desc: 'Sensor Values [~<time>:<value>]*',
                    type: 'string',
                    role: 'value',
                });
            }
        
            let query =[
                'from(bucket: "iobroker")',
                '|> range(start: -' + numberOfHoursAgo + 'h)',
                '|> filter(fn: (r) => r["_measurement"] == "' + obj.id + '")',
                '|> 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) log('Query: ' + query, 'info');
        
            sendTo(InfluxInstance, 'query', query, function (result) {
                if (result.error) {
                    console.error(result.error);
                } else {
                    // show result
                    if (Debug) log(result, 'info');
                    let numResults = result.result.length;
                    for (let r = 0; r < numResults; r++) 
                    {
                        let list = []
                        let numValues = result.result[r].length;
        
                        for (let i = 0; i < numValues; i++) 
                        {
                            let time = Math.round(result.result[r][i]._rtime/1000/1000/1000/60);
                            let value = Math.round(result.result[r][i]._value * 10);
                            list.push(time + ":" + value);
                        }
        
                        coordinates = list.join("~");
        
                        if (Debug) log(coordinates, 'info');
                    }
                }
            });
        
            let timeOut = setTimeout (
                function () {
                    let ticksAndLabelsList = []
                    let date = new Date();
                    date.setMinutes(0, 0, 0);
                    let ts = Math.round(date.getTime() / 1000);
                    let tsYesterday = ts - (numberOfHoursAgo * 3600);
                    if (Debug) log('Iterate from ' + tsYesterday + ' to ' + ts + ' stepsize=' + (xAxisTicksEveryM * 60), 'info');
                    for (let x = tsYesterday, i = 0; x < ts; x += (xAxisTicksEveryM * 60), i += xAxisTicksEveryM)
                    {
                        if ((i % xAxisLabelEveryM))
                            ticksAndLabelsList.push(i);
                        else
                        {
                            let currentDate = new Date(x * 1000);
                            // Hours part from the timestamp
                            let hours = '0' + String(currentDate.getHours());
                            // Minutes part from the timestamp
                            let minutes = '0' + String(currentDate.getMinutes());
                            let formattedTime = hours.slice(-2) + ':' + minutes.slice(-2);
        
                            ticksAndLabelsList.push(String(i) + '^' + formattedTime);
                        }
                    }
                    if (Debug) log('Ticks & Label: ' + ticksAndLabelsList, 'info');
                    if (Debug) log('Coordinates: ' + coordinates, 'info');
                    setState(PathSensor, ticksAndLabelsList.join('+') + '~' + coordinates, true);
                }, 
            1500
            ) ;
        });
        

        Und wie immer sind eurer Phantasie keine Grenzen gesetzt, daraus ein Flugzeug zu bauen...

        Rene55 1 Reply Last reply Reply Quote 1
        • 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
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            602
                                            Online

                                            31.6k
                                            Users

                                            79.5k
                                            Topics

                                            1.3m
                                            Posts

                                            lovelace ui nspanel sonoff
                                            260
                                            7128
                                            4362794
                                            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