SONOFF NSPanel mit Lovelace UI

[Rene55]

@armilar Mercy, ich versuche nur, alles zu verstehen

[ticaki]

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

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

Spoiler

/*
   *   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.

[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>>

[icebear]

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?

[TT-Tom]

@icebear

zeige mal die config von der Page.

sieht aus als ob due 2 pageItem hast

[icebear]

@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'},
	
	]
};

[ticaki]

@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; }]

[TT-Tom]

@icebear sagte in SONOFF NSPanel mit Lovelace UI:

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

der kann weg. den Switch sucht er sich alleine.

[icebear]

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

[Rene55]

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

[Rene55]

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

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

[TT-Tom]

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

[Rene55]

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

[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]

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

[TT-Tom]

@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

[TT-Tom]

@theknut

kannst du gerne machen.

[Rene55]

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