SONOFF NSPanel mit Lovelace UI

[TT-Tom]

@danny_v1

zeige mal die Datenpunkte die du anzeigen möchtest

[niiccooo1]

@tt-tom Danke für die Verknüpfung.

Ich hätte erwähnen sollen, dass der WLED-Adapter den Datenpunkt Temperatur nicht direkt darstellt.
Über den Slider werden lediglich die Farbcodierung RGB oder HEX geändert.
Im Prinzip bräuchte eine Umrechnung von Kelvin nach RGB.

Hat das jemand schon mal gemacht?

[TT-Tom]

@niiccooo1

ich hatte mal dieses Script genutzt und als Typ dann Hue. Es legt dir Datenpunkte unter 0_userdata an, die musst du dann mit dem Alias verknüpfen.
teste mal

Code

// ##############################
// ######### DutchmanNL #########
// ###### HSV Color to HEX ######
// ############ V1.0 ############
// ##############################

// Add the state containing HEX values here :
const colorSourceHex = [
       // Beispiel Zigbee 'zigbee.0.group_2.color', 
       'wled.0.4c11ae0dce1e.seg.0.col.0_HEX', //  WLED_TV
       'wled.0.4c11ae0dd3ac.seg.0.col.0_HEX', //  WLED_links
       'wled.0.4c11ae0dd0a3.seg.0.col.0_HEX'  //  WLED_Mitte 
];

// #####################################
// ## Don't change anything from here ##
// #####################################

// Prepare variables
const mySubscription = {}, debounceTimer = {};

// Create Folder structure
extendObjectAsync(`0_userdata.0.HEXtoHSL` , {
   "type": "folder",
   "common": {
   "name": 'Convert HEX to HSL color',
       "role": "",
       "icon": "",
},
   "native": {},
});

// Read all array objects, create new state in javascript instance and subscribe on changes
for (const device in colorSourceHex) {

   // Define folder structure in userdata directory
   const statePrepare = colorSourceHex[device].split('.');
   const deviceName = `0_userdata.0.HEXtoHSL.${statePrepare[0]}_${statePrepare[1]}_${statePrepare[2]}`

   // Create Device Structure
   extendObjectAsync(deviceName , {
       "type": "device",
       "common": {
       "name": statePrepare[2],
           "role": "",
           "icon": "",
   },
       "native": {},
   });

   // States to cover Hue and Sat values
   createState(`${deviceName}.hue` , {
   	'name': `Hue of ${statePrepare[2]}`,
   	'role': 'level.color.hue',
   	'type': 'number'
   });
   // @ts-ignore
   createState(`${deviceName}.sat`, {
   	'name': `Sat of ${statePrepare[2]}`,
   	'role': 'level.color.sat',
   	'type': 'number'
   });

   // Subscribe on state changes for HUE and Saturation
   // @ts-ignore
   mySubscription[`${deviceName}.hue`] = on(
       [`${deviceName}.hue`, 
       `${deviceName}.sat`
       ], (data) => {

       // DebounceTimer
       // Reset timer (if running) and start new one for next watchdog interval
   	if (debounceTimer[colorSourceHex[device]]) {
   		clearTimeout(debounceTimer[colorSourceHex[device]]);
   		debounceTimer[colorSourceHex[device]] = null;
   	}
   	debounceTimer[colorSourceHex[device]] = setTimeout(() => {

           if (!data.state.ack){
               const h = getState(`${deviceName}.hue`).val / 360;
               const s = getState(`${deviceName}.sat`).val / 100;
               const v = 1;
               const colorRGB = hsvTOrgb(h,s,v)
               const colorHEX = rgbTOhex(colorRGB)
               // console.log(`HSV value : ${h}, ${s}, ${v}`);
               setState(`${colorSourceHex[device]}`, colorHEX);
           }
       
       }, (500));
   });

   // Subscribe on state changes for HEX surce
   mySubscription[`${deviceName}.hue`] = on(
       [
       `${colorSourceHex[device]}`,
       ], (data) => {
       // DebounceTimer
   	if (debounceTimer[colorSourceHex[device]]) {
   		clearTimeout(debounceTimer[colorSourceHex[device]]);
   		debounceTimer[colorSourceHex[device]] = null;
   	}
   	debounceTimer[colorSourceHex[device]] = setTimeout(() => {
           
               // console.log(`Device change detected : ${JSON.stringify(data.id)} value : ${data.state.val} | ack : ${data.state.ack}`);
               const colorHEX = data.state.val;
               const colorRGB = hexTOrgb(colorHEX)
               const colorHSV = rgbTOhsv(colorRGB)
               const h = roundDigit(colorHSV[0]);
               console.log(colorHSV);
               const s = roundDigit(colorHSV[1]);
               setState(`${deviceName}.sat`, s, true);
               setState(`${deviceName}.hue`, h, true);
           

       }, (500));

   });
}

////////////////Funktionen////////////////
/**
* Coonvert HSV to RGB
* @param {number} h - HUE value 
* @param {number} s - Saturation value 
* @param {number} v - Brightness value 
*/
function hsvTOrgb(h, s, v) {
           var r, g, b, i, f, p, q, t;
           i = Math.floor(h * 6);
           f = h * 6 - i;
           p = v * (1 - s);
           q = v * (1 - f * s);
           t = v * (1 - (1 - f) * s);
           switch (i % 6) {
               case 0: r = v, g = t, b = p; break;
               case 1: r = q, g = v, b = p; break;
               case 2: r = p, g = v, b = t; break;
               case 3: r = p, g = q, b = v; break;
               case 4: r = t, g = p, b = v; break;
               case 5: r = v, g = p, b = q; break;
           }
           console.log(`${r} ${g} ${b}`)
           r=Math.round(255 * r);
           g=Math.round(255 * g);
           b=Math.round(255 * b);
           return [r,g,b];
};

function rgbTOhsv(rgb) {
   let rdif;
   let gdif;
   let bdif;
   let h;
   let s;

   const r = rgb[0] / 255;
   const g = rgb[1] / 255;
   const b = rgb[2] / 255;
   const v = Math.max(r, g, b);
   const diff = v - Math.min(r, g, b);
   const diffc = function (c) {
   	return (v - c) / 6 / diff + 1 / 2;
   };

   if (diff === 0) {
   	h = 0;
   	s = 0;
   } else {
   	s = diff / v;
   	rdif = diffc(r);
   	gdif = diffc(g);
   	bdif = diffc(b);

   	if (r === v) {
   		h = bdif - gdif;
   	} else if (g === v) {
   		h = (1 / 3) + rdif - bdif;
   	} else if (b === v) {
   		h = (2 / 3) + gdif - rdif;
   	}

   	if (h < 0) {
   		h += 1;
   	} else if (h > 1) {
   		h -= 1;
   	}
   }

   return [
   	h * 360,
   	s * 100,
   	v * 100
   ];
};

function rgbTOhex (args) {
   const integer = ((Math.round(args[0]) & 0xFF) << 16)
   	+ ((Math.round(args[1]) & 0xFF) << 8)
   	+ (Math.round(args[2]) & 0xFF);

   const string = integer.toString(16).toUpperCase();
   return '000000'.substring(string.length) + string;
};

//In HEX konvertieren
function toHex(number) {
   if (number < 0) number = 0xFFFFFFFF + number + 1;
   var n = number.toString(16).toUpperCase();
   if (n.length == 1) {
       n = '0' + n;
   }
   return n;
}

// Function to convert HEX to RGB 
function hexTOrgb(args) {
   const match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);

   if (!match) {
       return [0, 0, 0];
   }

   let colorString = match[0];

   if (match[0].length === 3) {
       colorString = colorString.split('').map(char => {
           return char + char;
       }).join('');
   }

   const integer = parseInt(colorString, 16);
   const r = (integer >> 16) & 0xFF;
   const g = (integer >> 8) & 0xFF;
   const b = integer & 0xFF;
   return [r, g, b];
};

// Function to convert RGB to HSL
function rgbTOhsl (rgb) {
   const r = rgb[0] / 255;
   const g = rgb[1] / 255;
   const b = rgb[2] / 255;
   const min = Math.min(r, g, b);
   const max = Math.max(r, g, b);
   const delta = max - min;
   let h;
   let s;

   if (max === min) {
   	h = 0;
   } else if (r === max) {
   	h = (g - b) / delta;
   } else if (g === max) {
   	h = 2 + (b - r) / delta;
   } else if (b === max) {
   	h = 4 + (r - g) / delta;
   }

   h = Math.min(h * 60, 360);

   if (h < 0) {
   	h += 360;
   }

   const l = (min + max) / 2;

   if (max === min) {
   	s = 0;
   } else if (l <= 0.5) {
   	s = delta / (max + min);
   } else {
   	s = delta / (2 - max - min);
   }

   return [h, s * 100, l * 100];
};

// Funtion to round digits properly
function roundDigit(num){
   // return Math.round((num + Number.EPSILON) * 100) / 100
   return Math.round((num + Number.EPSILON));
}

[TT-Tom]

@futty

ich glaube das Problem gefunden zu haben. Suche bitte im Script in der Funktion "function GenerateThermoPage(page: PageThermo): Payload[] {"
diesen Abschnitt und ändere mal 'POW' in 'POWER'

                                case 'POWER':
                                    if (existsState(id + '.POWER') && getState(id + '.POWER').val != null) {
                                        if (getState(id + '.POWER').val) {
                                            bt[i - 1] = Icons.GetIcon('power-standby') + '~2016~1~' + 'POW' + '~';
                                        } else {
                                            bt[i - 1] = Icons.GetIcon('power-standby') + '~33840~1~' + 'POW' + '~';
                                        }
                                    } else i--;
                                    break;

[TT-Tom]

@vocaris sagte in SONOFF NSPanel mit Lovelace UI:

PS: wenn ich über den IOT Adapter eine Alexa Gerät erstelle und auf den MQTT Punkt Power1 und Power2 verweise, dann schaltet Alexa die Befehle zwar. Aber sie setzt TRUE und FALSE anstatt ON und OFF. Und eine Änderung der Werte im MQTT Baum löst an der Hardware leider nichts aus. Auch wenn ich im MQTT manuell ON oder OFF eingebe, passiert am Panel nix.

hast du alles auf den aktuellen Stand gebracht ? TFT, Script, Tasmota

du musst diese Datenpunkte nutzen 0_userdata.0.NSPanel.1.Relay

[Futty]

@tt-tom
Mit der Info "könnte am Script selbst liegen" hab ich den Script nun auch mal durchforstet und glaube das Case von dir passt und dient lediglich der Anzeige bzw. Initialisierung.

Wenn ich mir den Log noch einmal anschaue:

6.9.2023, 00:20:44.967	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleButtonEvent übergebene Werte event - buttonPress2 - alias.0.NSPanel.1.ThermostatWohnbereich - hvac_action - POW - PageId: 1
6.9.2023, 00:20:44.968	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleButtonEvent buttonAction: hvac_action
6.9.2023, 00:20:44.979	[info ]: javascript.0 (2440423) script.js.common.NSPanel: GetNavigationString Übergabe pageId: 1
6.9.2023, 00:20:44.980	[info ]: javascript.0 (2440423) script.js.common.NSPanel: thermostat - Currently
6.9.2023, 00:20:44.985	[info ]: javascript.0 (2440423) script.js.common.NSPanel: thermostat - State
6.9.2023, 00:20:44.989	[info ]: javascript.0 (2440423) script.js.common.NSPanel: GenerateThermoPage payload: [object Object],[object Object]
6.9.2023, 00:20:44.991	[info ]: javascript.0 (2440423) script.js.common.NSPanel: function SendToPanel payload: pageType~cardThermo
6.9.2023, 00:20:44.992	[info ]: javascript.0 (2440423) script.js.common.NSPanel: function SendToPanel payload: entityUpd~Thermostat~button~bPrev~~65535~~~button~bNext~~65535~~~alias.0.NSPanel.1.ThermostatWohnbereich~22.4°C~220~MANU~50~300~5~~2016~1~POW~~~~~~~~~~~~~~~~~~~~~~~~~~~~~Aktuell~Zustand~~°C~~1
6.9.2023, 00:20:44.992	[info ]: javascript.0 (2440423) script.js.common.NSPanel: HandleMessage -> buttonPress2 event - buttonPress2 - alias.0.NSPanel.1.ThermostatWohnbereich - hvac_action - POW

Dürfte die Action "hvac_action" sein, welche das Bit (nach meinem Verständnis) beschreiben sollte...
Im Script sieht das dann so aus:

switch (buttonAction) {
.
.
.
        case 'hvac_action':
                if (words[4] == 'BOOT' || words[4] == 'PART' || words[4] == 'AUTT' || words[4] == 'MANT' || words[4] == 'VACT') {
                    switch (words[4]) {
                        case 'BOOT':
                            setIfExists(words[2] + '.' + 'BOOST', !getState(words[2] + '.' + 'BOOST').val);
                            break;
                        case 'PART':
                            setIfExists(words[2] + '.' + 'PARTY', !getState(words[2] + '.' + 'PARTY').val);
                            break;
                        case 'AUTT':
                            setIfExists(words[2] + '.' + 'AUTOMATIC', !getState(words[2] + '.' + 'AUTOMATIC').val);
                            break;
                        case 'MANT':
                            setIfExists(words[2] + '.' + 'MANUAL', !getState(words[2] + '.' + 'MANUAL').val);
                            break;
                        case 'VACT':
                            setIfExists(words[2] + '.' + 'VACATION', !getState(words[2] + '.' + 'VACATION').val);
                            break;
                    }
                    let modes = ['BOOT', 'PART', 'AUTT', 'MANT', 'VACT'];
                    let modesDP = ['BOOST', 'PARTY', 'AUTOMATIC', 'MANUAL', 'VACATION'];
                    for (let mode=0; mode < 5; mode++) {
                        if (words[4] != modes[mode]) {
                            setIfExists(words[2] + '.' + modesDP[mode], false);
                        }
                    }
                    GeneratePage(activePage);
                } else {
                    let HVACMode = getState(words[2] + '.MODE').val;

                    // Event ist an ein eigenes Objekt gebunden
                    if(existsObject(words[2] + '.' + words[4])) {
                        switch(words[4]) {
                            case 'SWING':
                                if (getState(words[2] + '.SWING').val == 0) {
                                    setIfExists(words[2] + '.SWING', 1);
                                } else {
                                    setIfExists(words[2] + '.' + 'SWING', 0);
                                }
                                break;
                            default: // Power und Eco koennen einfach getoggelt werden
                                setIfExists(words[2] + '.' + words[4], !getState(words[2] + '.' + words[4]).val);
                                break;
                        }
                    }

                    // Event ist ein Modus der Liste (Moduswechsel)
                    let HVACModeList = getObject(words[2] + '.MODE').common.states;
                    for(const statekey in HVACModeList) {
                        if(HVACModeList[statekey] == words[4]) {
                            HVACMode = parseInt(statekey);
                            break;
                        }
                    }
                    
                    setIfExists(words[2] + '.' + 'MODE', HVACMode);
                    GeneratePage(activePage);
                }
                break;

Meine Vermutung:
POWER oder POW wird hier gar nicht ausgewertet...

Ich versuche mal deine Idee und wenn das nicht klappt versuche ich das an meiner "Fundstelle" im Script zu implementieren.
Danke für den Hinweis

[danny_v1]

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

@danny_v1
warum stürzt bei dir Accuweather ab. Läuft bei mir problemlos. Du darfst mit dem API Schlüssel nur eine Instanz laufen lassen.

Das hab ich noch nicht herausgefunden. Ja hab nur eine Instanz laufen.

[danny_v1]

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

@danny_v1

zeige mal die Datenpunkte die du anzeigen möchtest

Bin gerade nicht an der Anlage. Aber z.B. nur Fenster die offen sind, oder nur Sensoren die nicht erreichbar sind, oder Batterien die unter 10% haben.

[Futty]

@TT-Tom

case 'hvac_action':
                if (words[4] == 'BOOT' || words[4] == 'PART' || words[4] == 'AUTT' || words[4] == 'MANT' || words[4] == 'VACT' || words[4] == 'POW') {

                    switch (words[4]) {
                        case 'BOOT':
                            setIfExists(words[2] + '.' + 'BOOST', !getState(words[2] + '.' + 'BOOST').val);
                            break;
                        case 'PART':
                            setIfExists(words[2] + '.' + 'PARTY', !getState(words[2] + '.' + 'PARTY').val);
                            break;
                        case 'AUTT':
                            setIfExists(words[2] + '.' + 'AUTOMATIC', !getState(words[2] + '.' + 'AUTOMATIC').val);
                            break;
                        case 'MANT':
                            setIfExists(words[2] + '.' + 'MANUAL', !getState(words[2] + '.' + 'MANUAL').val);
                            break;
                        case 'VACT':
                            setIfExists(words[2] + '.' + 'VACATION', !getState(words[2] + '.' + 'VACATION').val);
                            break;
                        case 'POW':
                            setIfExists(words[2] + '.' + 'POWER', !getState(words[2] + '.' + 'POWER').val);
                            break;
                    }

hab es nun so zum laufen bekommen,
also die komplette case 'POW' unten ins switch (words[4]) { und oben in der IF-Abrage noch verodert das words[4] == 'POW' am Ende hinzugefügt.

Danke für den Tipp mit dem Script.

[TT-Tom]

@futty sagte in SONOFF NSPanel mit Lovelace UI:

                            default: // Power und Eco koennen einfach getoggelt werden
                                setIfExists(words[2] + '.' + words[4], !getState(words[2] + '.' + words[4]).val);
                                break;

das Problem liegt eigentlich hier. words[2] ist der Alias Pfad und words[4] der DatenPunkt

HandleButtonEvent übergebene Werte event - buttonPress2 - alias.0.NSPanel.1.ThermostatWohnbereich - hvac_action - ç - PageId: 1

• words[0]=event
• words[1]=buttonPress2
• words[2]=alias.0.NSPanel.1.ThermostatWohnbereich
• words[3]=hvac_action
• words[4]=POW

darum ergibt der Befehl übersetzt

setIfExists('alias.0.NSPanel.1.ThermostatWohnbereich.POW', !getState('alias.0.NSPanel.1.ThermostatWohnbereich.POW').val);

und da es diesen DP nicht gibt, passiert auch nix.

Darum bitte mal meinen Vorschlag testen.

[TT-Tom]

@danny_v1
hast du dir mal einen neuen API Schlüssel erstellt?

[niiccooo1]

@tt-tom

Vielen Dank für das Skript.
Die Datenpunkte wurden angelegt und aktualisieren sich bei Änderung des Sliders.

Brauche ich den Wert "sat" im Alias auch?

[Futty]

@tt-tom
auch deine Lösung geht.

Warum macht man dann bei den anderen Feldern den Umweg über SwitchCase und gibt nicht gleich den richtigen Datenpunktname an?
Das gleiche betrifft ja dann auch
AUTOMATIC -> AUTT
MANUAL -> MANT
PARTY -> PART
VACATION -> VACT
BOOST -> BOOT

Könnte man das nicht auch einfach auf den richtigen Namen an der entsprechenden Stelle (wie bei `POW -> POWER) abändern?

[TT-Tom]

@futty
Werde ich mit @Armilar besprechen; in wie weit wir die Funktion anpassen.

[danny_v1]

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

@danny_v1
hast du dir mal einen neuen API Schlüssel erstellt?

Ja hatte ich vor ca einem Monat mal gemacht da der alte abgelaufen war.

[Futty]

@tt-tom
Ok, ist bestimmt gewachsen bzw. vielleicht hat es ja auch einen Grund, bin sicherlich nicht der Experte auf dem Gebiet...
Für meine Verwendung geht erst einmal alles wie ich mir das vorstelle.

Danke dir für den Austausch

[TT-Tom]

@niiccooo1
Farbsättigung, ne. Nur HUE und ggf. Temperatur

[Frederik Buss]

Mal eine Frag an die Runde:
Ich habe seit gestern endlich das fertige NSPanel mit Lovelace UI zum Laufen gebracht. Erstes Feedback: Mega! Wenn man durch den Javascript Wust einmal durchsteigt, ist es auch mit überschaubarem Aufwand einzurichten. Bislang nur den Screensaver konfiguriert, plus diverse Aktoren angesteuert. Die internen Relais lahmgelegt, die Tasten schalten den Kaller an und die Wohnzimmerbeleuchtung.
Soweit so gut, jetzt mein Thema: Seitdem das Ganze läuft ist der Speicherverbrauch sprunghaft nach oben gesprungen. Ich rede von größer 500MB, so dass HTOP immer über 3GB bis 3,2 GB (von 3,7) anzeigt und SWAP ist auch immer gut gefüllt. Neustart hat auch keine Verbesserung gebracht. Ich habe ca. 80 Homematic Geräte (separat an einer raspi-CCU, aber durch iobroker ausgewertet), >20 Shellys, nochmal so viele Hue Lampen und diverse weitere Spielzeuge wie ESP Verbrauchsmeser, LED Stripes, Haushaltsgeräte, Auto Adapter usw usw. Das System läuft stabil, hat aber nicht übermäßig viel Reserven, daher frage ich mich wie am Besten mit dem Lovelace UI umgehen. Da das Panel hiermit echt klasse ist, werden wohl noch weitere hinzukommen und dann ist meine Sorge, dass der Pi endgültig aussteigt, bzw. lahm wird.
Bevor ich an die Analyse gehe, wollte ich gerne wissen, ob Ihr ähnliche Erfahrungen gemacht habt und wie geht Ihr damit um (Vielleicht ist es ja kein Problem, "richtiger" Server o.ä...).
Vielen Dank vorab!

[Frederik Buss]

@frederik-buss Ich denke ich habe das Problem zumindest eingegrenzt. Scheint eine ungute Mischung aus Sonoff Adapter, MQTT und Node Red zu sein. Hab jetzt den Sonoff Adapter raus und die Gruppenlichtschaltung per Blockly gelöst. Jetzt bin ich wieder bei ca. 2,5G Mem. Mal sehen ob das nachhaltig ist.
Mir ist beim Studieren des Javascript Codes noch ein Schönheitsfehler aufgefallen. Anscheinend wurde im Service Panel was geändert, aber die Navigation nicht angepasst. Bei dem Beispielcode in Zeile 920:

'next': 'NSPanel_ScreensaverOther',

Das Panel gibt es nicht (mehr?), Brigthness, Timeout usw. ist im "Brightness" Panel untergebracht. Entsprechend führt der Pfeil im Dimmode Panel oben rechts ins Leere.
Vielleicht kann man für die nächste Version die Zeilen 916 (Seitenzahl raus) + 920 anpassen...? Falls es einen separaten Ort fürs Bug Melden gibt, bitte um kurze Info Danke

[Kuckuckmann]

@frederik-buss

Willkommen in unserem "kleinen" Bereich

Bugs melden ist aus Dokumentationsgründen immer gut im Git.
Hier ist auch ok, nur besteht je nach Andrang die Gefahr dass es unter geht

Bzgl. der IoB Auslastung: Ich kam irgendwann an den Punkt, dass ein Raspi nicht mehr ausreichte und habe mir einen Mini PC mit anständiger CPU und RAM gegönnt. Wenn man mal schaut, es gibt diverse Thin-Clients von Lenovo/HP, etc. die aktuell für um die 50EUR verkauft werden, meiner hat so 150EUR gekostet. Darauf habe ich dann eine Linux VM aufgesetzt und kann der je nach Bedarf Ressourcen geben. Viele machen das mit Proxmox u.ä.

Beim Raspi, wenn man nicht gerade eine SATA Platte anheftet, stört mich die Unzuverlässigkeit der SD-Karten. Spätestens seid mir da eine Abgeraucht war, gilt mir das nicht mehr als zuverlässig genug (insbesondere wenn man via History Adapter Daten aufzeichnen möchte).

Außerdem, ein IoB mit ausreichend RAM ist im vgl. zum Raspi schon schön schnell

Das nur mal so als Erfahrungswert. Wie und was Du daraus machst liegt letztlich bei Dir.

LG