SONOFF NSPanel mit Lovelace UI

[Futty]

Guten Abend,

ich hätte mal wieder ein Problem mit der ThermoCard.
Der Alias bzw. Button Power funktioniert nicht so wie erwartet / erhofft.

Folgende Objekte habe ich:

Der Alias dazu sieht so aus, Power wird mir (warum auch immer) nach dem erstellen nicht mehr angezeigt:

Definition NSPanel-Skript:

let Thermostat_Wohnzimmer = <PageThermo>
    {
        "type": "cardThermo",
        "heading": "Thermostat",
        "useColor": true,
        "subPage": false,
        "items": [<PageItem>{ id: AliasPath + 'ThermostatWohnbereich', minValue: 50, maxValue: 300 }]
    };

AliasManager:

Debug beim Drücken des Powerbuttons links unten im Display:

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

Der Powerbutton erscheint, allerdings kann ich hiermit bei Betätigung das Objekt nicht steuern, Quasi nur eine Anzeige.
Wenn ich das Objekt manuell auf Toogle, verändert sich die Farbe.
Drücke ich auf den Button baut sich die Seite erneut auf, sonst passiert nichts.

Ich hab testweise mal AUTOMATIC und MANUAL als Alias hinzugefügt, diese Buttons kann ich wie erwartet auch steuern.
Ideen? Danke!

[TT-Tom]

@futty

Hast du beim Test den Alias geändert oder den Datenpunkt unter 0_userdata.0 ?

[danny_v1]

Hi, hab eine kurze Frage, aufgrund der vielen Abstürze von Accuweather wollte ich dasWetter verwenden. Da werden allerdings keine Icons im Screensaver angezeigt (oben das große Icon ist zb ein Ausrufezeichen in einem Kreis).

Wie bekomme ich das hin?

[lesiflo]

Moin, gibt es die Möglichkeit bei Typ "cardGrid" oder "cardGrid2" das Icon eines PageItems in Abhängigkeit vom Status zu ändern? Im Moment benutze ich dafür 2 Items die ich wechselweise ein und ausschalte.

        <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-1-circle', name: "Phasen", onColor: MSGreen, offColor: Gray},
        <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-3-circle', name: "Phasen", onColor: Gray, offColor: MSGreen},

[TT-Tom]

@danny_v1
im Script richtig angepasst? Du musst auch die bottomScreensaverEntity ggf. anpassen.

const weatherAdapterInstance: string = 'accuweather.0.';    // Möglich 'accuweather.0.' oder 'daswetter.0.'

[Futty]

@tt-tom
Im Test habe ich den Alias geändert. Habe es gerade noch mal mit Datenpunkt 0_userdata.0 geprüft, dort ist das gleiche Verhalten. Die Datenpunkte sind auch verbunden, ändern also unabhängig ob ich im Alias oder im Datenpunkt 0_userdata.0 manuell den Wert über den Objektbaum ändere den Zustand mit.

Es sieht so aus das der Zugriff nur lesend erfolgt bzw. erfolgen kann.
Der angelegte Datenpunkt hat aber auch Schreibberechtigung:

[TT-Tom]

@lesiflo

Es gibt mehrere Möglichkeiten, entscheidend ist die Art des Datenpunkt. Der Channel alias.0.Auto.Phasen ist was für ein Typ und welche die Datenpunkte darunter => boolean , number?

[TT-Tom]

@Futty

was ich so am Handy sehen konnte ist vermutlich ein Bug im Script. Sehe ich mir heute Abend genauer an.

[niiccooo1]

Hallo Zusammen,

ich habe eine Frage bezüglich WLED. Auf der UI ist folgender Slider vorhanden:

Bei Änderung des Sliders ändern sich folgende Datenpunkte im WLED-Adapter:

Besteht die Möglichkeit diesen Slider im NSPanel abzubilden? Ich vermute das im NSPanel der Alias Farbtemperatur verwendet wird. Der Datenpunkt TEMPERATURE ist ein Wert zwischen 0 und 255 oder?

Vielen Dank!

[lesiflo]

@tt-tom Der Datenpunkt "Phasen" ist ursprünglich vom Typ number (1 oder 3). Für das Panel habe ich noch einen weiteren vom Typ boolean angelegt und das mit den zwei Schaltern zu realisieren. Am liebsten hätte ich einen Taster den man zwischen "1" und "3" umschalten kann.

[TT-Tom]

@lesiflo

Wenn boolean dann nimm die Parameter icon und icon2 und weißt diesen die entsprechenden Symbole zu. Hat der Channel Phasen die Rolle Info?

[Vocaris]

Hallo Gemeinde. Ich habe lange nichts mehr mit dem NS Panel gemacht. Er lag jetzt lange hier nur rum.
Ich habe jetzt einen kleinen Notfall und muss das Panel in die Küche setzen, da der dortige WLAN Schalter kaputt ist.
Nun ist das Panel ja via MQTT verbunden, damit auf dem Display der Inhalt meines alten Scriptes angezeigt wird.
Wenn ich im NSPanel den MQTT Server auf den Sonoff Server umstelle, habe ich das Gerät auch in Alexa. Aber dann nix auf dem Display. Also muss er mit dem MQTT Server verbunden bleiben. Aber wie bekomme ich eine MQTT Gerät in Alexa als Gerät angezeigt, damit ich damit die beiden Hardwaretasten steuern kann.
Danke für die Hilfe
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.

[lesiflo]

@tt-tom Hab's gerade gefunden. Danke klappt!

[danny_v1]

@tt-tom Danke werd ich heute Abend mal prüfen

[TT-Tom]

@niiccooo1

schau dir mal das im WIKI an.

[danny_v1]

@lesiflo said in SONOFF NSPanel mit Lovelace UI:

Moin, gibt es die Möglichkeit bei Typ "cardGrid" oder "cardGrid2" das Icon eines PageItems in Abhängigkeit vom Status zu ändern? Im Moment benutze ich dafür 2 Items die ich wechselweise ein und ausschalte.

        <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-1-circle', name: "Phasen", onColor: MSGreen, offColor: Gray},
        <PageItem>{ id: "alias.0.Auto.Phasen", icon: 'numeric-3-circle', name: "Phasen", onColor: Gray, offColor: MSGreen},

Genau die Funktion hätte ich auch gern, enbenso das zb. nur Elemente mit dem Status "on" angezeigt werden.

[TT-Tom]

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

[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));
}