Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Skripten / Logik
  4. JavaScript
  5. Wled Grafiganzeige auf state

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.9k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.4k

Wled Grafiganzeige auf state

Geplant Angeheftet Gesperrt Verschoben JavaScript
3 Beiträge 2 Kommentatoren 146 Aufrufe 2 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • matze55M Offline
    matze55M Offline
    matze55
    schrieb am zuletzt editiert von matze55
    #1

    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);
    });*/
    
    ...

    Homematic CCU3,-Synology NAS 4TB,- 2 Sonos One,- Gigabyte N4500 8GB DDR4 2TB
    Tapo C210 Cam
    WLED Steuerung über lcdwiki

    M 1 Antwort Letzte Antwort
    0
    • matze55M 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);
      });*/
      
      ...
      M Online
      M Online
      MCU
      schrieb am zuletzt editiert von MCU
      #2

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

      NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

      matze55M 1 Antwort Letzte Antwort
      0
      • M 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?

        matze55M Offline
        matze55M Offline
        matze55
        schrieb am zuletzt editiert von
        #3

        @mcu
        Den oben geposteten Code habe ich nicht mehr in Nutzung. Ich habe aus einem Beitrag von hier den View auf die Datenpunkte vom Adapter ,,wled,, abgestimmt. Ich wollte es versuchen Grafiken auf die ID der Effekte die man auswählen kann zu definieren. Das hat auch mit dem Widget Image 8 gut funktioniert , aber ein aussehen in der View sah nicht so gut aus deshalb habe ich das weg gelassen.

        Aber danke noch mal für deine Antwort...lg matze

        Homematic CCU3,-Synology NAS 4TB,- 2 Sonos One,- Gigabyte N4500 8GB DDR4 2TB
        Tapo C210 Cam
        WLED Steuerung über lcdwiki

        1 Antwort Letzte Antwort
        0
        Antworten
        • In einem neuen Thema antworten
        Anmelden zum Antworten
        • Älteste zuerst
        • Neuste zuerst
        • Meiste Stimmen


        Support us

        ioBroker
        Community Adapters
        Donate

        720

        Online

        32.4k

        Benutzer

        81.5k

        Themen

        1.3m

        Beiträge
        Community
        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
        ioBroker Community 2014-2025
        logo
        • Anmelden

        • Du hast noch kein Konto? Registrieren

        • Anmelden oder registrieren, um zu suchen
        • Erster Beitrag
          Letzter Beitrag
        0
        • Home
        • Aktuell
        • Tags
        • Ungelesen 0
        • Kategorien
        • Unreplied
        • Beliebt
        • GitHub
        • Docu
        • Hilfe