Wled Grafiganzeige auf state

[matze55]

hallo liebe communty.....auch an die denkenden Leute die so tolle arbeit hier tun. Aber meine Frage ist kann man bei wled dem preset eine grafik zuweisen?
man kann es steuern aber in der App kann man ja den Peek einschalten somit sieht man eine gewisse vorschau. kann amn es auf den ,,state,, realiesieren.

danke erst mal für eure mühe..lg matze55
Vor einer gewissen Zeit habe ich diesen Code gefunden:

//##########################################################################
// WLED-Steuerung / Hex to RGB
//##########################################################################
var WLED_ID = 'MEINE ID VON WLED'; // Hinweis: die Zeichenfolge "a020a61bbd2c" muss durch die eigene WLED-ID ersetzt werden!
//____________________________
createState('javascript.0.wled.effekt', { name: 'WLED Effekt', desc: 'Effektauswahl', type: 'number', def: 9 });
createState('javascript.0.wled.farbe',  { name: 'WLED Farbauswahl', desc: 'Farbwahl', type: 'string', def: '#6a6cf6' });
createState('javascript.0.wled.speed',  { name: 'Effekt Geschwindigkeit', desc: 'Geschwindkeitseinstellung', type: 'number', def: 200 });
createState('javascript.0.wled.intensity', { name: 'Effekt Intensität', desc: 'Intensität der Effekte', type: 'number', def: 128 });
createState('javascript.0.wled.brightness', { name: 'Helligkeit', desc: 'Einstellung Helligkeit', type: 'number', def: 128 });
createState('javascript.0.wled.toggle', { name: 'An / Aus', desc: 'Aus und Einschalten von WLED-APP', type: 'boolean', def: true });
createState('javascript.0.wled.peek', { name: 'WLED Grafik', desc: 'Anzeige einer Grafik', type:  'string : Solid',  def: '' });
//createState('javascript.0.wled.peek', { name: 'WLED Grafik', desc: 'Anzeige einer Grafik', type: 'mixed', read: true,  write: false  });

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;
}
// Hilfsvariable wird durch den Vis Color Picker überwacht, dann wird WLED-Farbe als HEX-Wert gesetzt
on({id: "javascript.0.wled.farbe", change: "ne"}, function (obj) {
   setState("wled.0." + WLED_ID + ".seg.0.col.0",
   hexToRgb(getState("javascript.0.wled.farbe").val).r + ',' +
   hexToRgb(getState("javascript.0.wled.farbe").val).g + ',' +
   hexToRgb(getState("javascript.0.wled.farbe").val).b);
});
// Hilfsvariable wird durch VIS jqui - SelectValueList überwacht, bei Änderung wird WLED-Effekt gesetzt.
on({id: "javascript.0.wled.effekt", change: "any"}, function (obj) {
    var effekt = getState("javascript.0.wled.effekt").val ;  
    setState("wled.0." + WLED_ID + ".seg.0.fx", effekt);
});
// Hilfsvariable wird durch VIS metro Slider horizontal überwacht, bei Änderung wird Geschwindigkeit gesetzt.
on({id: "javascript.0.wled.speed", change: "any"}, function (obj) {
    var speed = getState("javascript.0.wled.speed").val ;
    setState("wled.0." + WLED_ID + ".seg.0.sx", speed);
});
// Hilfsvariable wird durch VIS metro Slider horizontal überwacht, bei Änderung wird Effekt-Intensität gesetzt.
on({id: "javascript.0.wled.intensity", change: "any"}, function (obj) {
    var intens = getState("javascript.0.wled.intensity").val ;
    setState("wled.0." + WLED_ID + ".seg.0.ix", intens);
});
// Hilfsvariable wird durch VIS metro Slider horizontal überwacht, bei Änderung wird Helligkeit gesetzt.
on({id: "javascript.0.wled.brightness", change: "any"}, function (obj) {
    var bright = getState("javascript.0.wled.brightness").val ;
    setState("wled.0." + WLED_ID + ".bri", bright);
});
// Hilfsvariable wird durch VIS fancyswitch überwacht, bei Änderung wird An/Aus geschaltet.
on({id: "javascript.0.wled.toggle", change: "any"}, function (obj) {
    var on = getState("javascript.0.wled.toggle").val ;
    setState("wled.0." + WLED_ID + ".on", on);
});
//Hilfsvariable dabei werden die Presets einer Grafik zugeordnet
/*const effectsList = ['Solid', 'Android', 'Aurora', 'Blends', 'Blink', 'Blink Rainbow', 'Bouncing Balls','Bpm', 'Breathe', 'Candle', 'Candle Multi', 
'Candy Cane', 'Chase', 'Chase 1', 'Chase 2', 'Chase 3', 'Chase Flash', 'Chase Flash Rnd', 'Chase Rainbow', 'Chase Random', 
'Chunchun', 'Colorful', 'Colorloop', 'Colortwinkles', 'Colorwaves', 'Dancing Shadows', 'etc'];
// Trigger auf NSPanel Effekte
on({id: userdataPath + 'Effects', change: "ne"}, async function (obj) {
let wledObj = getObject(wledPath + 'seg.0.fx');
let tempStringEffect = effectsList[obj.state.val]
for (let i = 0; i < 118; i++) {
if (wledObj.common.states[i] == undefined) {
break;
}
if (wledObj.common.states[i] == tempStringEffect) {
console.log(i + ' - ' + wledObj.common.states[i]);
setState(wledPath + 'seg.0.fx', i)
break;
}
}
});*/

/*on({id: 'javascript.0.wled.peek', change: "any"}, function (obj) {
    var image = getState("javascript.0.wled.peek").val ;
    setState("wled.0." + WLED_ID + ".image", image);
});*/

...

[MCU]

@matze55
Grundsätzliches

• In WLED gibt es Presets, die über JSON-„States“ gespeichert werden (z. B. mit Effekten, Farben, Geschwindigkeit, Helligkeit usw.).

• Diese Presets können auch über den „state“ im JSON (API) gesetzt oder ausgelesen werden.

• Eine Grafik oder ein Vorschaubild (z. B. Icon, Thumbnail, oder Peek) kann man einem Preset nicht direkt im JSON zuweisen, da der „state“ nur numerische und logische Parameter enthält (Farben, Effekte, Paletten, etc.).

Peek / Vorschau in der App

• Die Peek-Funktion in der WLED-App zeigt nur eine Vorschau des aktuellen Zustands (Effekt, Farben, Helligkeit usw.).

• Diese Vorschau wird automatisch generiert anhand der Parameter und nicht als eigene Grafik gespeichert.

• Das bedeutet: du kannst sie nicht manuell mit einem Bild ersetzen oder einem Preset ein eigenes Icon zuweisen.

Kannst du mal ein Beispiel-Bild von Deinem "Peek" zeigen, bzw. was dort bei Dir angezeigt wird.
Ich bekomme nur eine Linie angezeigt

Soll die Linie als HTML angezeigt werden?