SONOFF NSPanel mit Lovelace UI

[Armilar]

Update v4.3.3.40

Was hast sich geändert?

• Bugfix für den Farbtemperatur max-Wert beim RGB-Alias
• Der Media-Player für den Squeezebox-Adapter hatte im Laufe der Zeit diverse Bugs... Diese sind jetzt behoben. Zusätzlich hat der Player ein Upgrade erhalten:

  • Seek Funktion

  • Elapsed/Duration

  • Vollständige Anzeige von Artist/Album/Titel

  • Always On Display

    

    let SqueezeboxRPC: PageType =
    {
      'type': 'cardMedia',
      'heading': 'SqueezeboxRPC',
      'items': [{ 
              id: AliasPath + 'Media.PlayerSqueezeboxRPC', 
              adapterPlayerInstance: 'squeezeboxrpc.0.',
              speakerList: ['SqueezePlay'],
              mediaDevice: 'SqueezePlay',
              playList: ['Playlist'],
              colorMediaIcon: Green,
              colorMediaArtist: Yellow,
              colorMediaTitle: Yellow,
              alwaysOnDisplay: true,
              autoCreateALias : true
           }]
     };
    

https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts

Das Update ist nur erforderlich, wenn der SqueezeboxRPC - Player oder die RGB-Steuerelemente genutzt werden. Den unteren Teil ab:

// _______________ DE: Ab hier keine Konfiguration mehr ________________

ersetzen. Weitere Update-Infos für ältere Releases unter:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#hilfe-bei-update--upgrade

Viel Spaß mit dem SqueezeboxRPC...

@TT-Tom, @ticaki und @Armilar

P.S.:

• Der Player bekommt noch eine gesonderte Beschreibung im Wiki...
• Da der Media-Alias des SqueezeboxRPC erweitert wurde, sollte dieser vorher gelöscht und neu durch das Script erstellt werden (Alle anderen Player sind unverändert)

[c3b]

Hi Leutz
Da bin ich wieder. Nachdem ich meinen Hausumbau fast fertig habe, komme ich wieder dazu das/die NSPanel zu bearbeiten.
Ist ja ganz schön etwas verändert worden. Dafür erst einmal meinen Dank. Super Sache.
Ich habe Tasmota geuppt, den Berrydriver und das Nextion. Hat alles super geklappt.
Jetzt habe ich mir einmal zwei Pages und zwei SubPages angelegt.
Ich befürchte, ich habe das gleiche oder ein ähnliches Problem wie am 14. Januar 2023.
Alles funktioniert. Nur wenn ich aus einer SubPage mit dem home-Befehl auf meine erste Seite verweise, gibt es ein Problem. Ich komme zwar auf die richtige Seite, wenn ich aber dann nach rechts gehe, überspringt er meine zweite Seite. Gehe ich mit dem Pfeilnach links, baut er die gleiche Seite noch einmal auf. Das Problem gibt es aber nur mit dem home-Befehl. Gehe ich zurück mit dem parent-Befehl funktioniert es. Wenn ich alles einmal durchscrolle, ist es wieder richtig.
Seinerzeit hatte amilar eine Änderung in das Skript gebaut und mir geschrieben, dass es Bestandteil der v3.9.0. Das sollte aber alles Geschichte sein. Ist über ein Jahr her und es hat sich ja einiges getan.
Mache ich wieder etwas falsch?

Hier einmal mein Code für die vier Seiten. In der config stehen sie auch. Licht und Sonstiges unter page und WLAN und Abfall unter subpage.

let Licht: PageType =
{
    'type': 'cardEntities',
    'heading': 'Licht Küche',
    'useColor': true,
    'prev': 'Sonstiges',
    'next': 'Sonstiges',
    'items': []
};  

let Sonstiges: PageType =
{
    'type': 'cardEntities',
    'heading': 'Sonstiges',
    'useColor': true,
    'items': [
        { navigate: true, id: null, targetPage: 'Abfall', onColor: White, name: 'Abfallkalender'},
        { navigate: true, id: null, targetPage: 'WLAN', onColor: White, name: 'Gäste WLAN'},
    ]
};

let Abfall: PageType =
{
	'type': 'cardEntities',
	'heading': 'Abfallkalender',
	'useColor': true,
	'subPage': true,
    'parent': Sonstiges,
    'home': 'Licht',
    'items': [
		{ id: 'alias.0.Abfallkalender.event1',icon: 'trash-can'},
		{ id: 'alias.0.Abfallkalender.event2',icon: 'trash-can'},
		{ id: 'alias.0.Abfallkalender.event3',icon: 'trash-can'},
		{ id: 'alias.0.Abfallkalender.event4',icon: 'trash-can'}
	]
};

let WLAN: PageType =
{
     'type': 'cardQR',
     'heading': 'Gäste WLAN',
     'subPage': true,
     'parent': Sonstiges,
     'home': 'Licht',
     'items': [{ id: 'alias.0.Guest_Wifi.Password', 
                           hidePassword: false, 
                           autoCreateALias: true }]
};

LG aus dem Sauerland
Jörg

[theknut]

@emd Ich hatte damals das gleiche Problem. Bei mir war denke ich 0_userdata.0.NSPanel.1.ScreensaverInfo.activeBrightness auf null gestanden (siehe Post).

[c3b]

@theknut Hi Leutz
Da steht bei mir eine 100 drin.

Jetzt wo ich mir die Datenpunkte angeschaut habe, sehe ich den bExitPage. Da war doch auch etwas mit. Ist halt schon ein Jahr her.
Was steht da bei Dir? Auch eine Null?

LG aus dem Sauerland
Jörg

[ticaki]

@c3b
da darf nirgendwo null stehen. Das für zu "was ist das zum Teufel" Erlebnissen

[c3b]

@ticaki ok. Warum steht dann da eine Null? Was sollte dort stehen und wie bekomme ich es darein? Es hilft vermutlich wenig, wenn ich den Wert von Hand setze.

LG aus dem Sauerland
Jörg

[TT-Tom]

@c3b ist noch ein altes Relikt. Aktuell kommt da -1 rein.

[c3b]

@tt-tom Habe ich mal reingeschrieben. Ändert aber an meinem Problem nichts. Über den Home-Button habe ich immer noch den gleichen effekt.

LG aus dem Sauerland
Jörg

[ticaki]

@c3b

Klar kannst du den Wert da von Hand rein schreiben

[TT-Tom]

@c3b bin an dem Problem dran. kann ich nachvollziehen

Edit: das bHome Event setzt anschein die PageID nicht auf die erstellte Page um

[c3b]

@tt-tom Super. Hab schon gedacht , dass das Problem mal wieder 40cm vor dem Bildschirm sitzt. Ist vermutlich auch so.
LG aus dem Sauerland
Jörg

[c3b]

@tt-tom Hallo
Wenn ich dort eine -1 reinschreibe, startet das NS Panel nicht mit der ersten Seite. In meinem Fall "Licht". Schreibe ich dort wieder eine Null rein, startet er wieder mit der Seite "Licht"
LG aus dem Sauerland
Jörg

[ticaki]

@c3b

0 ist was anderes wie null - ich bezog mich auf das null nicht die 0, die 0 ist richtig.

[eMd]

@theknut
@Armilar

Also da steht wirklich null, habe es auf 100 angepasst und warte ab. Sollte es noch mal auftreten mach ich ein Video von, wenn nicht dann hört ihr nix weiter von mir

Geil wie schnell einem hier immer geholfen wird!

MfG
eMd

[Maragon]

Hallo, nach einiger Zeit habe ich mich endlich mal wieder mit den NSPanels beschäftigen können. Ich habe aktuell nur 1 von 3 in Betrieb und da habe ich das eigenartige Verhalten, dass es nach einiger Zeit bei Berührung nur einen schwarzen Bildschirm bringt. Nehme ich es kurz vom Strom funktioniert es wieder und springt auf die erste Seite. Heute morgen zeigt es wieder nur den black Screen. Berry, tasmota und nexion sind aktuell.

[eMd]

@maragon mach das gleiche wie ich, das sollte helfen. Bisher ist alles gut bei mir!

MfG
eMd

[theknut]

@theknut said in SONOFF NSPanel mit Lovelace UI:

@emd Ich hatte damals das gleiche Problem. Bei mir war denke ich 0_userdata.0.NSPanel.1.ScreensaverInfo.activeBrightness auf null gestanden (siehe Post).

@Maragon ↑

[TT-Tom]

Fix für activeBrightness auf null und bHome verfügbar

v4.3.3.41

Wie funktioniert das Update?

Wenn aktuelle Version ab v4.3.3.30, dann unteren Teil des NSPanelTs.ts ab:

// ________________ DE: Ab hier keine Konfiguration mehr _______________

austauschen

https://github.com/joBr99/nspanel-lovelace-ui/blob/main/ioBroker/NsPanelTs.ts

Wenn aktuelle Version bis v4.3.3.29, dann Updateaneitung befolgen:
https://github.com/joBr99/nspanel-lovelace-ui/wiki/NSPanel-Starthilfe-FAQ#hilfe-bei-update--upgrade

VG
@ticaki , @Armilar & TT-Tom

[Rene55]

@armilar @TT-Tom @ticaki Ich habe mein Script jetzt soweit, dass man das mal zeigen kann. Wäre trotzdem schön, wenn jemand mal drüber schauern könnte.

Spoiler

/*
   *   Grundgedanke von https://github.com/tt-tom17/MyScripts/blob/main/Sonoff_NSPanel/Balkenchart_InfluxDB_to_NSPanel.ts
   *   Anpassungen für InfluxDB-Aliase by Rene55 [06.02.2024]
   *
*/
const logging:boolean = false
const debugging:boolean = false
//
const NSPanel_Path:string = '0_userdata.0.NSPanel.';            // mit Punkt
const Path:string = NSPanel_Path + 'Influx2NSPanel.cardChart.'; // mit Punkt
const InfluxInstance:string = 'influxdb.0';
const influxDbBucket:string = 'storage_short';
const numberOfHoursAgo:number = 24;
const xAxisTicksEvery:number = 4;
//

//___________________________
// Beschreibe diese Funktion:  Start Parameter
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.Transfer.Verbrauch'] = {'target': 'UG.Hausverbrauch', 'dbAlias': 'E-Power'}

//___________________________
//  #####   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 generateCardChartString(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 generateCardChartString(obj.id);
});

//___________________________
// Beschreibe diese Funktion: Daten generieren
async function generateCardChartString(sensorId: string) {
   let measurement:string = sensors[sensorId].dbAlias
   if (measurement =='' || measurement == undefined) {measurement = sensorId}
   const dp_Actual:string = Path + sensors[sensorId].target +'.ACTUAL'
   if (debugging) log(`(f) generatecardChartString: ${sensorId} ${dp_Actual} > ${measurement}`)

   let result:any
   let cardChartString: string = "";

   const query = [
       'from(bucket: "'+ influxDbBucket +'")',
       '|> range(start: -'+ numberOfHoursAgo +'h, stop: now())',
       '|> filter(fn: (r) => r["_measurement"] == "'+ measurement +'")',
       '|> filter(fn: (r) => r["_field"] == "value")',
       '|> drop(columns: ["from", "ack", "q"])',
       '|> aggregateWindow(every: 1h, fn: mean, createEmpty: false)',
       '|> yield(name: "mean")'].join('');
 
   if (debugging) log(`(f) generateCardChartString: Query = ${query}`);

   try {
       result = await sendToAsync(InfluxInstance, 'query', query);
   } catch (error) {
       log (`(f) generateCardChartString: Error=${error}`,'error');
       return
   }   

  let xAxisTicks:boolean = true
   for (let i:number = 1; i <= numberOfHoursAgo; i++) {
       let queryStunde:number = getDateObject(result.result[0][i]._time).getHours();
       const queryValue:number = Math.round(result.result[0][i]._value) /100
       if (debugging) log (`(f) generateCardChartString [${i}] Stunde: ${queryStunde}  Wert: ${queryValue}`)
       if (debugging && xAxisTicks) log (`AxisTicks[${i}]<${xAxisTicks}>`)

       if (i == numberOfHoursAgo) {
           if (xAxisTicks) {
               cardChartString += [queryValue,'^',queryStunde,':00'].join('');
           } else {
               cardChartString += queryValue;
           }
       } else {
           if (xAxisTicks) {
               cardChartString += [queryValue,'^',queryStunde,':00','~'].join('');
           } else {
               cardChartString += [queryValue,'~'].join('');
           }
       }

       if (i == numberOfHoursAgo) queryStunde++
       xAxisTicks = (i % xAxisTicksEvery) ?  false : true
   }

   await setOrCreate(dp_Actual, cardChartString)
   if (logging) log(`(f) generateCardChartString: Ausgabe> ${cardChartString}`);

}
//
//___________________________
// Beschreibe diese Funktion: Datenpunkte schreiben bzw. anlegen
async function setOrCreate(id : string, value : any) {
   if (!(await existsStateAsync(id))) {
        await createStateAsync(id, value, {
           name: id.split('.').reverse()[0],
           desc: 'Sensor Values [~<time>:<value>]*',
           type: 'string',
           role: 'value',
       });
       if (debugging) log(`(f) setOrCreate: ${id} wurde angelegt`)
   } else {
       if (debugging) log(`(f) setOrCreate: ${id} mit ${value}`)
       await setStateAsync(id, value, true);
   }
}
//___________________________
//
//   E N D E
//

Dinge aus dem Originalscript, die ich nicht verstanden habe, sind rausgeflogen. Es funktioniert bei mir so, aber es gibt bestimmt noch die eine oder andere Verbesserung.

[Armilar]

@rene55

Ein wenig geizig mit Semikolons - aber sonst doch absolut okay...

Spoiler

/*
  *   Grundgedanke von https://github.com/tt-tom17/MyScripts/blob/main/Sonoff_NSPanel/Balkenchart_InfluxDB_to_NSPanel.ts
  *   Anpassungen für InfluxDB-Aliase by Rene55 [06.02.2024]
  *
*/
const logging:boolean = false;
const debugging:boolean = false;
//
const NSPanel_Path:string = '0_userdata.0.NSPanel.';            // mit Punkt
const Path:string = NSPanel_Path + 'Influx2NSPanel.cardChart.'; // mit Punkt
const InfluxInstance:string = 'influxdb.0';
const influxDbBucket:string = 'storage_short';
const numberOfHoursAgo:number = 24;
const xAxisTicksEvery:number = 4;
//

//___________________________
// Beschreibe diese Funktion:  Start Parameter
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.Transfer.Verbrauch'] = {'target': 'UG.Hausverbrauch', 'dbAlias': 'E-Power'};

//___________________________
//  #####   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 generateCardChartString(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 generateCardChartString(obj.id);
});

//___________________________
// Beschreibe diese Funktion: Daten generieren
async function generateCardChartString(sensorId: string) {
  let measurement:string = sensors[sensorId].dbAlias;
  if (measurement =='' || measurement == undefined) {measurement = sensorId};
  const dp_Actual:string = Path + sensors[sensorId].target +'.ACTUAL';
  if (debugging) log(`(f) generatecardChartString: ${sensorId} ${dp_Actual} > ${measurement}`);

  let result:any;
  let cardChartString: string = "";

  const query = [
      'from(bucket: "'+ influxDbBucket +'")',
      '|> range(start: -'+ numberOfHoursAgo +'h, stop: now())',
      '|> filter(fn: (r) => r["_measurement"] == "'+ measurement +'")',
      '|> filter(fn: (r) => r["_field"] == "value")',
      '|> drop(columns: ["from", "ack", "q"])',
      '|> aggregateWindow(every: 1h, fn: mean, createEmpty: false)',
      '|> yield(name: "mean")'].join('');

  if (debugging) log(`(f) generateCardChartString: Query = ${query}`);

  try {
      result = await sendToAsync(InfluxInstance, 'query', query);
  } catch (error) {
      log (`(f) generateCardChartString: Error=${error}`,'error');
      return;
  }   

 let xAxisTicks:boolean = true
  for (let i:number = 1; i <= numberOfHoursAgo; i++) {
      let queryStunde:number = getDateObject(result.result[0][i]._time).getHours();
      const queryValue:number = Math.round(result.result[0][i]._value) /100;
      if (debugging) log (`(f) generateCardChartString [${i}] Stunde: ${queryStunde}  Wert: ${queryValue}`);
      if (debugging && xAxisTicks) log (`AxisTicks[${i}]<${xAxisTicks}>`);

      if (i == numberOfHoursAgo) {
          if (xAxisTicks) {
              cardChartString += [queryValue,'^',queryStunde,':00'].join('');
          } else {
              cardChartString += queryValue;
          }
      } else {
          if (xAxisTicks) {
              cardChartString += [queryValue,'^',queryStunde,':00','~'].join('');
          } else {
              cardChartString += [queryValue,'~'].join('');
          }
      }

      if (i == numberOfHoursAgo) queryStunde++;
      xAxisTicks = (i % xAxisTicksEvery) ?  false : true;
  }

  await setOrCreate(dp_Actual, cardChartString)
  if (logging) log(`(f) generateCardChartString: Ausgabe> ${cardChartString}`);

}
//
//___________________________
// Beschreibe diese Funktion: Datenpunkte schreiben bzw. anlegen
async function setOrCreate(id : string, value : any) {
  if (!(await existsStateAsync(id))) {
       await createStateAsync(id, value, {
          name: id.split('.').reverse()[0],
          desc: 'Sensor Values [~<time>:<value>]*',
          type: 'string',
          role: 'value',
      });
      if (debugging) log(`(f) setOrCreate: ${id} wurde angelegt`);
  } else {
      if (debugging) log(`(f) setOrCreate: ${id} mit ${value}`);
      await setStateAsync(id, value, true);
  }
}
//___________________________
//
//   E N D E
//