Neues YouTube-Video: Visualisierung im Devices-Adapter

[Garfonso]

@nukleuz said in Test Adapter lovelace v1.2.x:

@garfonso

Das hatten wir bestimmt schon mal... :)

Wenn man in der Phosconoberfläche die Weisswerte ändert, dann springt der colormode um auf ct.
Ändert man die Farbe ändert sich auch der colormode in xy.

Ändert man es über die Datenpunkte scheint das nicht zu funktionieren.

Das was seit heute Nacht funktioniert ist folgendes:

Man legt sich einen Alias (RGB Licht einzeln) an und konfiguriert es wie folgt:

Ahrg. :-/ Da muss mal was in den devices Adapter. Wenn du nur einen ON state hast, reicht es nur den obersten Wert zu befüllen. Das zweite "ON" sollte gar nicht da sein und "ON_ACTUAL" (bzw. alle "ACTUAL") brauchst du nur, wenn der Status an einem anderen State rauskommt (Homematic und KNX z.B.). :-)
Aber sonst sieht das gut aus ;-)

Wichtig ist, dass der Punkt RGB mit einem manuell erstellten Datenpunkt belegt wird.
Denn Lovelace spuckt im im Colorpicker/Farbpalette einen HEX-Wert aus.

Lovelace kann auch hue und saturation steuern (ist im devices adapter ein anderes "Gerät", hue vermutlich), daher ja die Frage, ob du nicht mit hue (0-359) und saturation (0-255) die Farbe einstellen kannst, wenn du colormode auf hs stellst. (z.B. saturation auf 255 und hue mal auf 0 sollte rot ergeben).

Dieser wird dann in den neuen Datenpunkt geschrieben ohne Effekt/Auswirkungen.

Nun gibt es diverse JavaScript Funktionen, die diesen Werte umrechnen.
Bevor ich hier viel erzähle zeige ich dir/euch einfach mein Skript, was bisher sehr gut und vor allem für mich ausreichend gut funktioniert.

Spoiler

//Hier muss der manuell erstellte -Datenpunkt angegeben werden -> wenn der sich ändert, wird umgerechnet und xy gesetzt
on({id: '0_userdata.0.Lovelace.XY-CIE2RGB.hex', change: "any"}, function (obj) {


   let hex = getState('0_userdata.0.Lovelace.XY-CIE2RGB.hex').val;
   //console.log(hex);

   let rgb = hexToRgb(hex);
   //console.log(rgb.r);
   //console.log(rgb.g);
   //console.log(rgb.b);
   //console.log(typeof rgb2);

   let xy = rgb_to_cie(rgb.r, rgb.g, rgb.b);
   //console.log(xy);
   //console.log(Object.values(xy));
   setState('deconz.0.Lights.62.xy', (xy));

});





function hexToRgb(hex) {
 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 return result ? {
   r: parseInt(result[1], 16),
   g: parseInt(result[2], 16),
   b: parseInt(result[3], 16)
 } : null;
}


function hslToRgb (h, s, l) {
 // Achromatic
 if (s === 0) return [l, l, l]
 h /= 360

 var q = l < 0.5 ? l * (1 + s) : l + s - l * s
 var p = 2 * l - q

 return [
   Math.round(hueToRgb(p, q, h + 1/3) * 255),
   Math.round(hueToRgb(p, q, h) * 255),
   Math.round(hueToRgb(p, q, h - 1/3) * 255)
 ]
}

/**
* Helpers
*/

function hueToRgb (p, q, t) {
 if (t < 0) t += 1
 if (t > 1) t -= 1
 if (t < 1/6) return p + (q - p) * 6 * t
 if (t < 1/2) return q
 if (t < 2/3) return p + (q - p) * (2/3 - t) * 6

 return p
}

function hslToHex(h, s, l) {
   l /= 100;
   const a = s * Math.min(l, 1 - l) / 100;
   const f = n => {
       const k = (n + h / 30) % 12;
       const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
       return Math.round(255 * color).toString(16).padStart(2, '0');   // convert to Hex and prefix "0" if needed
   };
   return `#${f(0)}${f(8)}${f(4)}`;
}

/**
*     Umwandeln der RGB-Werte in ein Farbwert des HSV-Farbraum
*        RGB Werte:          0-255, 0-255, 0-255
*        H Wert:                   0-360°
*        Homematic H Wert: 0-199
*/
function RGBtoHSV($R, $G, $B)    
{                                
   let R = ($R / 255);
   let G = ($G / 255);
   let B = ($B / 255);

   let maxRGB = Math.max(R, G, B);
   let minRGB = Math.min(R, G, B);
   let chroma = maxRGB - minRGB;
   let h = 0;
   if (chroma == 0)
       return 0;
   if (R == minRGB){
       h = 3 - ((G - B) / chroma);
   }
   else if (B == minRGB){
       h = 1 - ((R - G) / chroma);
   }
   else{
       h = 5 - ((B - R) / chroma);
   }

   let Hue = (60 * h);
   let HomematicHue = (Hue/1.8);
    
   if (HomematicHue == 200){
       HomematicHue = 199;
   }
   return HomematicHue;
}



/**
* Converts CIE color space to RGB color space
* @param {Number} x
* @param {Number} y
* @param {Number} brightness - Ranges from 1 to 254
* @return {Array} Array that contains the color values for red, green and blue
*/
function cie_to_rgb(x, y, brightness)
{
 //Set to maximum brightness if no custom value was given (Not the slick ECMAScript 6 way for compatibility reasons)
 if (brightness === undefined) {
 	brightness = 254;
 }

 var z = 1.0 - x - y;
 var Y = (brightness / 254).toFixed(2);
 var X = (Y / y) * x;
 var Z = (Y / y) * z;

 //Convert to RGB using Wide RGB D65 conversion
 var red 	=  X * 1.656492 - Y * 0.354851 - Z * 0.255038;
 var green 	= -X * 0.707196 + Y * 1.655397 + Z * 0.036152;
 var blue 	=  X * 0.051713 - Y * 0.121364 + Z * 1.011530;

 //If red, green or blue is larger than 1.0 set it back to the maximum of 1.0
 if (red > blue && red > green && red > 1.0) {

 	green = green / red;
 	blue = blue / red;
 	red = 1.0;
 }
 else if (green > blue && green > red && green > 1.0) {

 	red = red / green;
 	blue = blue / green;
 	green = 1.0;
 }
 else if (blue > red && blue > green && blue > 1.0) {

 	red = red / blue;
 	green = green / blue;
 	blue = 1.0;
 }

 //Reverse gamma correction
 red 	= red <= 0.0031308 ? 12.92 * red : (1.0 + 0.055) * Math.pow(red, (1.0 / 2.4)) - 0.055;
 green 	= green <= 0.0031308 ? 12.92 * green : (1.0 + 0.055) * Math.pow(green, (1.0 / 2.4)) - 0.055;
 blue 	= blue <= 0.0031308 ? 12.92 * blue : (1.0 + 0.055) * Math.pow(blue, (1.0 / 2.4)) - 0.055;


 //Convert normalized decimal to decimal
 red 	= Math.round(red * 255);
 green 	= Math.round(green * 255);
 blue 	= Math.round(blue * 255);

 if (isNaN(red))
 	red = 0;

 if (isNaN(green))
 	green = 0;

 if (isNaN(blue))
 	blue = 0;


 return [red, green, blue];
}


/**
* Converts RGB color space to CIE color space
* @param {Number} red
* @param {Number} green
* @param {Number} blue
* @return {Array} Array that contains the CIE color values for x and y
*/
function rgb_to_cie(red, green, blue)
{
 //Apply a gamma correction to the RGB values, which makes the color more vivid and more the like the color displayed on the screen of your device
 var red 	= (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
 var green 	= (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
 var blue 	= (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92); 

 //RGB values to XYZ using the Wide RGB D65 conversion formula
 var X 		= red * 0.664511 + green * 0.154324 + blue * 0.162028;
 var Y 		= red * 0.283881 + green * 0.668433 + blue * 0.047685;
 var Z 		= red * 0.000088 + green * 0.072310 + blue * 0.986039;

 //Calculate the xy values from the XYZ values
 let x 		= (X / (X + Y + Z)).toFixed(4);
 let y 		= (Y / (X + Y + Z)).toFixed(4);



 if (isNaN(x))
 	x = 0;

 if (isNaN(y))
 	y = 0;	 

   let x2 = parseFloat(x);
   let y2 = parseFloat(y);

 return [x2, y2];
}

Link zu der Seite mit den Funktionen

Sieht gut aus. :-)
Jetzt fehlt nur noch der Weg zurück flöt
Du kannst auch in den state selber ein rgb array schreiben, also [255,0,255]. Ab da sollte lovelace auch rgb arrays schreiben, dann brauchst du das hexToRgb nicht mehr und auch kein rgbToHex, was du noch nicht hast. ;-)

@garfonso: Eine native Unterstützung für xy wäre dennoch von Vorteil :)

Ja.. ich hab nochmal reingeguckt.. müsste ich im Adapter implementieren. Das HomeAssistant unterstützt zwar mittlerweile XY als color mode, aber das Frontend nicht, die Farbe wird dann ignoriert bzw. nicht xy gesetzt. Im Grunde ist das kein Problem im Adapter umzusetzen, aber da muss dann erst nen neuer type in den type-detector und die Role gefällt mir nicht (color.CIE, müsste mindestens level.color.cie sein). Aber ich geh das mal an (wenn ich die Muße dazu finde, ist eigentlich nur Fleißarbeit und ich muss noch gucken, wie das dann im devices-adapter auftaucht und was man da machen müsste -> der ist für mich noch etwas undurchsichtig ;-) ).

[Banis]

@garfonso said in Test Adapter lovelace v1.2.x:

@banis said in Test Adapter lovelace v1.2.x:

In dem Ordner hab ich dann die chart.js abgelegt. Hab auch schon alle restlichen js Dateien der chart-card dort abgelegt.

Hast du das auch über das UI gemacht? (von github installierte Version)

@banis said in Test Adapter lovelace v1.2.x:

Mach ich noch was falsch.

In jedem Fall musst du den Adapter neu starten.
Du kannst auch den debug modus aktivieren, da sagt er irgendwo, welche Karten er gefunden und geladen hat (allerdings auch ziemlich viel anderes ;-) )

Du kannst in der Browser Konsole gucken, ob da Fehlermeldungen kommen bzw. wenn ja, welche.

Vielen Dank für deine Hilfe, hab die Karte jetzt zum laden gebracht. Leider werden aber immer nur drei "Ladepunkte" angezeigt, schein wohl als ob die Karte nicht mir dem Adapter kompatibel ist.

Ich versuche mich dann mit der Apecchart Karte. Die läuft auch bei mir, hier habe ich aber das Problem, dass die Warte in der Chart nur im Editiermodus richtig angezeigt werden. Wenn der Editiermodu beendet ist, werden falsche Werte angezeigt. Ist das ein Problem der Karte oder des Adapters?

Außerdem versuche ich ein Popup abhängig von bestimmten Zusätenden zu realsisieren. So wie es hier dargestellt ist.
https://github.com/thomasloven/lovelace-browser-commander

Lässt sich das mit dem Adapter umsetzen oder geht das nur mit Home Assistant?

[haumichel]

Hallo zusammen,

ich habe eine Lampe, die besteht aus 4 einzelnen Strahlern. Da habe ich jetzt 4 Ikea RGB Strahler verbaut. Ich kann jetzt jede Lampe bzgl. Farbe, Farbtemperatur und Helligkeit ansteuern. Gibt es die Möglichkeit, das alles auf einen Button zu legen? Die Strahler sollen dann jeweils in der gleichen Helligkeit, Farbe und Farbtemperatur leuchten.

Vielen Dank im Voraus

[nukleuz]

@haumichel

Ja, eine Möglichkeit wäre dir eine virtuelle Lampe zu erstellen anhand von eigenen Datenpunkten und ein Skript, welches die Werte aus deinen Datenpunkten rausholt und in die deiner Lampen einträgt - vorhin beim Nachbarn erfolgreich umgesetzt…

[Garfonso]

@banis said in Test Adapter lovelace v1.2.x:

Vielen Dank für deine Hilfe, hab die Karte jetzt zum laden gebracht. Leider werden aber immer nur drei "Ladepunkte" angezeigt, schein wohl als ob die Karte nicht mir dem Adapter kompatibel ist.

Das verstehe ich nicht. Was geht genau nicht?

Dazu immer auch mal gucken, ob es ggf. Probleme / Anpassungen an HomeAssistant Versionen gibt. Wir sind da aktuell bei 20220706.0.

@banis said in Test Adapter lovelace v1.2.x:

Ich versuche mich dann mit der Apecchart Karte. Die läuft auch bei mir, hier habe ich aber das Problem, dass die Warte in der Chart nur im Editiermodus richtig angezeigt werden. Wenn der Editiermodu beendet ist, werden falsche Werte angezeigt. Ist das ein Problem der Karte oder des Adapters?

Hier der gleiche Hinweis auf die Version. Die Karte hat, wenn ich es richtig im Kopf hab @david-g im Einsatz. Oder?

@banis said in Test Adapter lovelace v1.2.x:

Außerdem versuche ich ein Popup abhängig von bestimmten Zusätenden zu realsisieren. So wie es hier dargestellt ist.

Wie da steht, gibt es browser-commander nicht mehr aber browser_mod. Und, wenn du die aktuelle Github Version hast, dann bringt die die browser_mod Karte mittlerweile direkt mit und du müsstest einen Ordner "instances" haben. Darin gibt es für jeden Browser einen Unterordner mit states mit denen man einen Browser gezielt steuern kann und im Ordner direkt states, mit denen man alle (verbundenen) Browser steuern kann.

[nukleuz]

@garfonso

Danke für dein ausführliches Feedback!

Ich werde das mit den Colormodes nochmal testen.

Bei DeConz gibt es meiner Meinung nach einen gravierenden Nachteil: Die Datenpunkte eines Geräts sind teilweise total überflüssig. Bei einem simplen Schaltaktor An/Aus werden im ioBroker Adapter dennoch Datenpunkte erzeugt, die niemand braucht, wie beispielsweise Dimup/Dimdown und weitere. Auf welcher Seite da jetzt der Fehler liegt weiß ich nicht genau. Habe mal gelesen, dass der Adapter-Entwickler keinen Einfluss darauf hat und alles weiter reicht was von DeConz kommt…

@Jey-Cee : stimmt das so in etwa, oder wo liegt hier das Problem? Danke vorab für Feedback!

Das nur mal am Rande. Somit kann es sein, dass bei meinen Exporten Datenpunkte wie Hue etc. zwar da sind, obwohl sie keinen Sinn machen!

Das macht alles nicht einfacher….

Deine weiteren Ideen bestimmte Funktionen des Skripts nicht nutzen zu müssen werde ich in Ruhe mal ausprobieren.

Bin froh, dass dieser Workaround funktioniert und sich die Farben steuern lassen und das sogar ziemlich gut.

Danke für deinen Support.

PS: Mittlerweile läuft in einem Container HomeAssistant OS parallel. Es hat seine Vorteile, aber an ioBroker kommt es einfach nicht vorbei!!!

Das ist meine Meinung 😎

[Jey Cee]

@nukleuz sagte in Test Adapter lovelace v1.2.x:

@Jey-Cee : stimmt das so in etwa, oder wo liegt hier das Problem? Danke vorab für Feedback!

Ja der Adapter reicht das weiter was ankommt, mit Ausnahme von Dimup/Dimdown, das legt der Adapter zusätzlich bei allen Lampen an.
Da deConz keine Geräte sondern nur Lampen und Sensoren kennt ist halt alles was man Schalten kann eine Lampe. Leider.

[haumichel]

@nukleuz
Das hört sich ja schon mal gut an.
Kannst du das Skript, das du bei deinem Nachbarn verwendet hast, hier posten?

Vielen Dank

[nukleuz]

@jey-cee

Danke für deinen Input!

[nukleuz]

@haumichel

Ich sehe zu, dass ich es heute noch poste… 😉

[nukleuz]

@haumichel

Du brauchst in jedem Fall unter Userdata folgende DP-Struktur:

Die role der DP richtet sich nach der Vorgabe des Devices/Geräte-Adapter.

Und dann brauchst du ein JavaScript, welches dir die Werte auf deine richtigen Lampen (1-x) überträgt:

Spoiler

on({id: '0_userdata.0.Lovelace.Test_-_virtuell.on', val: true}, function (obj) {

  //on Datenpunkt aus DeConz
  setState('deconz.0.Lights.21.on', true);
  setState('deconz.0.Lights.32.on', true);
  setState('deconz.0.Lights.35.on', true);

});

on({id: '0_userdata.0.Lovelace.Test_-_virtuell.on', val: false}, function (obj) {

  //on Datenpunkt aus DeConz
  setState('deconz.0.Lights.21.ct', false);
  setState('deconz.0.Lights.32.ct', false);
  setState('deconz.0.Lights.35.ct', false);

});

on({id: '0_userdata.0.Lovelace.Test_-_virtuell.level', change: "any"}, function (obj) {
  // Wert holen von level
  let level = getState('0_userdata.0.Lovelace.Test_-_virtuell.level').val;
  //level Datenpunkt aus DeConz
  setState('deconz.0.Lights.21.level', (level));
  setState('deconz.0.Lights.32.level', (level));
  setState('deconz.0.Lights.35.level', (level));

});

// warmweiss/kaltweiss -> Farbtemperatur
on({id: 'alias.0.Licht.Balkon_-_virtuell.ct', change: "any"}, function (obj) {
  // Wert holen von ct
  let ct = getState('0_userdata.0.Lovelace.Test_-_virtuell.ct').val;
  //ct Datenpunkt aus DeConz
  setState('deconz.0.Lights.21.ct', (ct));
  setState('deconz.0.Lights.32.ct', (ct));
  setState('deconz.0.Lights.35.ct', (ct));

});

// RGB -> Farbe
on({id: 'alias.0.Licht.Balkon_-_virtuell.rgb', change: "any"}, function (obj) {
  // Wert holen von ct
  let rgb = getState('0_userdata.0.Lovelace.Test_-_virtuell.rgb').val;
  //ct Datenpunkt aus DeConz
  setState('deconz.0.Lights.21.rgb', (rgb));
  setState('deconz.0.Lights.32.rgb', (rgb));
  setState('deconz.0.Lights.35.rgb', (rgb));

});

Ich habe das eben ohne zu testen nachgebaut - also bitte schreiben, wenn was nicht laufen sollte.
Natürlich muss das virtuelle Gerät aus dem Devices-Adapter in Lovelace eingebunden werden.

Solltest du keine RGB Lampen haben, sondern z.B. Hue, dann ist entsprechend eine Änderung in den Devices nötig.

Hoffe, du kannst damit was anfangen.

Außerdem kannst du bei den "setStates" weniger oder mehr Datenpunkte = Lampen steuern.

Sollte jemand Verbesserungen haben, dann gerne immer her damit (bin halt kein DEV!). :)

[haumichel]

@nukleuz
Klasse, vielen Dank.
Ich werde das morgen mal ausprobieren und Rückmeldung geben.

[haumichel]

@nukleuz
Ich habe jetzt die DP erstellt.

Unter "Objekte/alias/0" sieht das so aus:

Unter "Geräte" finde ich Folgendes:

Wie kann ich nun diese virtuelle Lampe in Lovelace einbinden. Unter "Entitäten" kann ich die Lampe "alias.0.lampe_wz-tisch" nicht finden.
Das ist alles was ich unter "Lovelace/Entitäten" finde. Ist es normal, dass manchmal der Alias und manchmal der tatsächlich DP angezogen wird?

Vielen Dank

[nukleuz]

@haumichel

Das was ich zuerst sehe, dass du eine Adapterversion 2.0.6 hast - die latest stable aber 2.2.0 ist.

Ansonsten versuche mal die Instanz neu zu starten.

Die Entität heißt bei mir genauso wie das Device…

[haumichel]

@nukleuz
Ja, die Updates...
Ich aktualisiere nicht wenn ich nicht muss. So lange alles läuft, ändere ich nichts.
Jetzt habe ich es aber getan. Geändert hat sich leider nichts.
Habe jetzt mal die einzige alias.0-Entität eingebunden

Für mich als Laien sehen die Attribute eigentlich gut aus. Der Button zum Steuern der Lampe wirkt aber etwas mager. Da fehlen komplett die Einstellunungen für Lichtfarbe und Farbe.

Was mache ich falsch?

Vielleicht kann @garfonso mir einen Tip dazu geben.

Vielen Dank

[David G.]

@haumichel

So wird bei mir die Farbe korrekt erkannt:

Aber so hast du es ja eigentlich...

EDIT:
Hast du irgendwelche zigbee Birnen im Einsatz?

[haumichel]

@nukleuz
@david-g

Erst einmal vielen Dank für eure Hilfe.
Letztlich habe ich es nun anders gelöst. Ich habe im Zigbee-Adapter eine Grupe aus den vier Strahlern erstellt.

Diese habe ich in den Objekten mit Raum und Funktion versehen.

Und wie von Geisterhand ist im Lovelace eine Entität daraus entstanden, die ich dann einfach einbinden konnte. Die Karte mit dem Glühbirnensymbol hatte auf Anhieb alle Funktionen, ein Skript ist nicht notwendig.

Also nochmal, vielen Dank. Natürlich auch an @garfonso. Super Adapter.

[David G.]

@haumichel sagte in Test Adapter lovelace v1.2.x:

Letztlich habe ich es nun anders gelöst. Ich habe im Zigbee-Adapter eine Grupe aus den vier Strahlern erstellt.

Darauf hat meine Frage aus dem letzten Post abgezielt. Wäre dann genau mein Vorschlag gewesen. Der Adapter legt die Farbtemperatur nämlich immer mit an. Selbst wenn die Lampe das nicht hat.

[nukleuz]

@haumichel

Super! Das könnte man auch mal in Phoscon (DeConz) versuchen… Weiß gar nicht, ob hier Szenen mit über die API gesendet werden…

Egal, freut mich, dass du eine Lösung hast! 👍

[nukleuz]

@haumichel

Nur nochmal als Nachtrag:

Erst, wenn die Lampe eingeschaltet ist zeigt sich in Lovelace der Colorpicker…