Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • 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

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. Tutorial: Vis-colorpicker CIE Color (x,y)

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.2k

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.5k

Tutorial: Vis-colorpicker CIE Color (x,y)

Scheduled Pinned Locked Moved Visualisierung
vismaterial ui
53 Posts 15 Posters 13.3k Views 26 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ? Offline
    ? Offline
    A Former User
    wrote on last edited by A Former User
    #1

    Vorstellung:

    Nach langer Suche habe ich den vis-colorpicker umgeändert,
    damit dieser auch DeConz Geräte per CIE-Farbraum (x,y) steuern kann.

    Problem: Meine Mueller Licht Tint Serie unterstützt keinen RGB/HUE Wert.
    Mit einem einfachen Handgriff könnt ihr den HUE Colorpicker demnächst auch im Kombination mit CIE Lampen nutzen.

    Workaround:

    1. Öffnet die Datei: /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html

    Ersetzt Zeile 483 mit folgender:

    var cmd = picker.xy[0] + ',' + picker.xy[1];
    

    Hier einmal der Vergleich alt gegen neu:

    handler.push(function () {
                        if (cmd_id !== 'nothing_selected') {
                            // ALTE ZEILE
                            // var cmd = '{"transitiontime":' + data.transitionTime + ',"xy":"' + picker.xy[0] + ',' + picker.xy[1] + '",' + '"level":' + Math.round(picker.xy[2] * 100) + '}';
                            // NEUE ZEILE
    			var cmd = picker.xy[0] + ',' + picker.xy[1];
                            vis.setValue(cmd_id, cmd);
                        }
                    });
    
    1. Startet die Instanz "vis.x" (zb: vis.0) neu.

    2. Konfiguriert den Hue ColorPicker folgendermaßen:

    huecolorpicker.PNG

    Und fertig ist der neue Colorpicker.

    Viel Spaß

    curryhoden

    D Tom JonesT 2 Replies Last reply
    3
    • Stefan GlückS Offline
      Stefan GlückS Offline
      Stefan Glück
      wrote on last edited by
      #2

      danke,
      das habe ich jetzt 3 tage lang gesucht nachdem ich meine hue Bridge entsorgen will und auf deconz umstelle.
      jetzt bräuchte ich nur noch die Helligkeit in %, aber da werde ich wohl selber scripten (für alexa)

      1 Reply Last reply
      0
      • L Offline
        L Offline
        LoxDUS
        wrote on last edited by
        #3

        Das war es auch was ich gesucht habe. Hat super funktioniert. Ich habe noch den Helligkeitsregler mit eingefügt:

                        handler.push(function () {
                            if (cmd_id !== 'nothing_selected') {
                                // var cmd = '{"transitiontime":' + data.transitionTime + ',"xy":"' + picker.xy[0] + ',' + picker.xy[1] + '",' + '"level":' + Math.round(picker.xy[2] * 100) + '}';
        			var cmd = picker.xy[0] + ',' + picker.xy[1];
                                vis.setValue(cmd_id, cmd);
        			vis.setValue(level_id, Math.round(picker.xy[2] * 254));
                            }
                        });
        

        Vielen Dank,
        Artur

        1 Reply Last reply
        0
        • ? A Former User

          Vorstellung:

          Nach langer Suche habe ich den vis-colorpicker umgeändert,
          damit dieser auch DeConz Geräte per CIE-Farbraum (x,y) steuern kann.

          Problem: Meine Mueller Licht Tint Serie unterstützt keinen RGB/HUE Wert.
          Mit einem einfachen Handgriff könnt ihr den HUE Colorpicker demnächst auch im Kombination mit CIE Lampen nutzen.

          Workaround:

          1. Öffnet die Datei: /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html

          Ersetzt Zeile 483 mit folgender:

          var cmd = picker.xy[0] + ',' + picker.xy[1];
          

          Hier einmal der Vergleich alt gegen neu:

          handler.push(function () {
                              if (cmd_id !== 'nothing_selected') {
                                  // ALTE ZEILE
                                  // var cmd = '{"transitiontime":' + data.transitionTime + ',"xy":"' + picker.xy[0] + ',' + picker.xy[1] + '",' + '"level":' + Math.round(picker.xy[2] * 100) + '}';
                                  // NEUE ZEILE
          			var cmd = picker.xy[0] + ',' + picker.xy[1];
                                  vis.setValue(cmd_id, cmd);
                              }
                          });
          
          1. Startet die Instanz "vis.x" (zb: vis.0) neu.

          2. Konfiguriert den Hue ColorPicker folgendermaßen:

          huecolorpicker.PNG

          Und fertig ist der neue Colorpicker.

          Viel Spaß

          curryhoden

          D Offline
          D Offline
          dibide
          wrote on last edited by
          #4

          @curryhoden said in Tutorial: Vis-colorpicker CIE Color (x,y):

          Öffnet die Datei: /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html

          Ersetzt Zeile 483 mit folgender:

          Hi,

          kannst Du einem DAU wie mir mal genauer erzählen was Du mit

          Öffnet die Datei: /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html
          

          meinst? :grinning:

          Wie/wo kann ich die Datei öffnen?

          crunchipC 1 Reply Last reply
          0
          • D dibide

            @curryhoden said in Tutorial: Vis-colorpicker CIE Color (x,y):

            Öffnet die Datei: /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html

            Ersetzt Zeile 483 mit folgender:

            Hi,

            kannst Du einem DAU wie mir mal genauer erzählen was Du mit

            Öffnet die Datei: /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html
            

            meinst? :grinning:

            Wie/wo kann ich die Datei öffnen?

            crunchipC Away
            crunchipC Away
            crunchip
            Forum Testing Most Active
            wrote on last edited by
            #5

            @dibide

            • du loggst dich z.b. mit WinSCP auf deinen IoBroker,
              gehst in das entsprechende Verzeichnis und kannst dann die Datei editieren(gegebenenfalls noch Nodepad++ installieren).
            • oder einfach im Terminal mit
            nano /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html
            

            jedoch werden dir da keine Zeilennummern angezeigt

            umgestiegen von Proxmox auf Unraid

            D 1 Reply Last reply
            0
            • crunchipC crunchip

              @dibide

              • du loggst dich z.b. mit WinSCP auf deinen IoBroker,
                gehst in das entsprechende Verzeichnis und kannst dann die Datei editieren(gegebenenfalls noch Nodepad++ installieren).
              • oder einfach im Terminal mit
              nano /opt/iobroker/node_modules/iobroker.vis-colorpicker/widgets/colorpicker.html
              

              jedoch werden dir da keine Zeilennummern angezeigt

              D Offline
              D Offline
              dibide
              wrote on last edited by
              #6

              @crunchip
              Vielen Dank! Das hat mir sehr geholfen!:handshake:

              1 Reply Last reply
              0
              • X Offline
                X Offline
                xbow42
                wrote on last edited by
                #7

                Hallo,
                ich habe eine HueGo am Deconzstick angelernt und colorpicker.html angepasst.
                So ganz zufrieden bin ich damit aber noch nicht.

                • Wenn das Widget mal ein Update bekommen sollte, wird vermutlich die eigenen Anpassung wieder gelöscht.
                • ich kann jetzt einen Farbwert auswählen, und die Lampe schaltet auf diesen Wert immer mit voller Helligkeit um. Komisch, das Fadenkreuz spring im Auswahlfeld immer auf die Stelle s. Bild Der Helligkeitregler dimmt dann zwar aber eben nur gelb.
                  iobroker-huego1.png
                  DP hue kann ich manuell setzen ohne dass die Helligkeit bri verstellt wird. Welches colorWidget könnte man dafür nehmen und wie ist das einzustellen?

                An der HueGo kann ich durch drücken des Tasters die Farbmodi durchschalten leider bekomme ich außer den geänderten Werten in den Objekten nicht die Modus angezeigt. Hatte gehofft das der DB effect(string) dafür da ist.
                Hab auch schon mal ein paar Texte bei effect eingetragen aber keine Reaktion an der Lampe.


                müssten diese Farbmodi sein: getestet "Daylight" "daylight" leider ohne Erfolg.
                Daylight - Bright white.
                Soft white - Pinkish-yellow light, dimmer than Daylight but still bright enough to light a dark room.
                Cozy Candle - Dynamic dim orange hues that flicker.
                Sunday Coffee - Dynamic pink and orange hues that change every few seconds.
                Meditation - Dynamic blue hues that subtly change to blue-green.
                Enchanted Forest - Dynamic green hues that subtly change to yellow-green.
                Night Adventure - Dynamic purple and pink hues that change every few seconds.

                hier mal die DP:
                iobroker-huego2.png
                Wie geht das mit dem ansteuern der Farbmodi?

                1 Reply Last reply
                0
                • A Offline
                  A Offline
                  a_m_n_l
                  wrote on last edited by
                  #8

                  Hi,

                  das mit dem Springen des Helligkeitsreglers liegt an einem Umrechnungsfehler, ein paar Zeilen weiter unten. Nachdem ich Zeile 497 folgendermaßen angepasst habe, hat es bei mir funktioniert:

                  picker.fromXY(parseFloat(xy[0]), parseFloat(xy[1]), parseInt(level) / 254);

                  1 Reply Last reply
                  0
                  • X Offline
                    X Offline
                    xbow42
                    wrote on last edited by
                    #9

                    schon besser, aber es spring bei mir immer noch zum gelben Punkt.
                    könnte mit vorstellen das es mit dem dimspeed oder colorloopspeed zusammenhängt.

                    1 Reply Last reply
                    0
                    • E Offline
                      E Offline
                      exico66
                      wrote on last edited by
                      #10

                      Bei mir das Gleiche. Kreuz springt auf Gelb und ich kann nur die Helligkeit regeln. Habt Ihr eine Lösung gefunden?

                      NUC5i5RYH 12GB Ram, 120GB SSD, 1TB Sata, Conbee 3
                      Debian 10.2.0 amd64, Proxmox 6.1-1,

                      diverse Hue, Osram smart, alles was Zigbee kann und ein paar Groove

                      Für jede Hilfe dankbar

                      T 1 Reply Last reply
                      0
                      • E exico66

                        Bei mir das Gleiche. Kreuz springt auf Gelb und ich kann nur die Helligkeit regeln. Habt Ihr eine Lösung gefunden?

                        T Offline
                        T Offline
                        Tirador
                        wrote on last edited by
                        #11

                        @exico66 hast du alle Änderungen in der Datei durchgeführt die vorher gepostet würden? Bei mir läuft es damit einwandfrei. Müsste nur iobroker neustarten, damit die Änderungen greifen.

                        E 1 Reply Last reply
                        0
                        • T Tirador

                          @exico66 hast du alle Änderungen in der Datei durchgeführt die vorher gepostet würden? Bei mir läuft es damit einwandfrei. Müsste nur iobroker neustarten, damit die Änderungen greifen.

                          E Offline
                          E Offline
                          exico66
                          wrote on last edited by
                          #12

                          @Tirador ja, alle Änderungen durchgeführt und auch iobroker neu gestartet.

                          NUC5i5RYH 12GB Ram, 120GB SSD, 1TB Sata, Conbee 3
                          Debian 10.2.0 amd64, Proxmox 6.1-1,

                          diverse Hue, Osram smart, alles was Zigbee kann und ein paar Groove

                          Für jede Hilfe dankbar

                          T 1 Reply Last reply
                          0
                          • E exico66

                            @Tirador ja, alle Änderungen durchgeführt und auch iobroker neu gestartet.

                            T Offline
                            T Offline
                            Tirador
                            wrote on last edited by
                            #13

                            @exico66 ich habe das Verhalten bei mir noch einmal beobachtet. Generell funktioniert es gut bei mir, wenn man gezielt nur einen Datenpunkt für die Farbauswahl wählt. Ich habe auch das springen wenn man im colorpicker wischt, mit dem Finger auf dem Tablet. Ich denke das ist erklärbar, da dann wahrscheinlich kontinuierlich Werte gesendet und wieder durch das Widget empfangen werden. Dabei kommt es zu einer Verzögerung denke ich.

                            E 1 Reply Last reply
                            0
                            • T Tirador

                              @exico66 ich habe das Verhalten bei mir noch einmal beobachtet. Generell funktioniert es gut bei mir, wenn man gezielt nur einen Datenpunkt für die Farbauswahl wählt. Ich habe auch das springen wenn man im colorpicker wischt, mit dem Finger auf dem Tablet. Ich denke das ist erklärbar, da dann wahrscheinlich kontinuierlich Werte gesendet und wieder durch das Widget empfangen werden. Dabei kommt es zu einer Verzögerung denke ich.

                              E Offline
                              E Offline
                              exico66
                              wrote on last edited by
                              #14

                              @Tirador bei mir stellt es sich anders dar. wenn ich mit der mouse gezielt einen farbpunkt auswähle, dann ist es genau so. die lampe wird keine sichtbare ms mit der gewählten farbe geschaltet, sie wird sofort gelb. nur dimmen geht.

                              NUC5i5RYH 12GB Ram, 120GB SSD, 1TB Sata, Conbee 3
                              Debian 10.2.0 amd64, Proxmox 6.1-1,

                              diverse Hue, Osram smart, alles was Zigbee kann und ein paar Groove

                              Für jede Hilfe dankbar

                              T 1 Reply Last reply
                              0
                              • E exico66

                                @Tirador bei mir stellt es sich anders dar. wenn ich mit der mouse gezielt einen farbpunkt auswähle, dann ist es genau so. die lampe wird keine sichtbare ms mit der gewählten farbe geschaltet, sie wird sofort gelb. nur dimmen geht.

                                T Offline
                                T Offline
                                Tirador
                                wrote on last edited by
                                #15

                                @exico66
                                Ich habe das Verhalten nochmal beobachtet. Ich habe es nur beim ersten Mal das das Kreuz kurz auf gelb springt, aber im Anschluss auf den richtigen Farbwert.

                                Was für eine Lampe hast du denn? Ich nutze die Philips Hue Birnen.
                                Ich habe deconz in Version 1.2.6 im Einsatz. Ich bin außerdem auf der letzten Deconz Version 2.0.5.74.

                                1 Reply Last reply
                                0
                                • E Offline
                                  E Offline
                                  exico66
                                  wrote on last edited by
                                  #16

                                  Du hast Recht, mit einer Hue hat es funktioniert. Bei Osram ging es nicht, teste aber weiter

                                  NUC5i5RYH 12GB Ram, 120GB SSD, 1TB Sata, Conbee 3
                                  Debian 10.2.0 amd64, Proxmox 6.1-1,

                                  diverse Hue, Osram smart, alles was Zigbee kann und ein paar Groove

                                  Für jede Hilfe dankbar

                                  1 Reply Last reply
                                  0
                                  • E Offline
                                    E Offline
                                    exico66
                                    wrote on last edited by
                                    #17

                                    bei Osram sprimgt es, manchmal erst nach paar sekunden, immer zurück auf gelb. wenn du das noch fixen könntest ;-)
                                    danke

                                    NUC5i5RYH 12GB Ram, 120GB SSD, 1TB Sata, Conbee 3
                                    Debian 10.2.0 amd64, Proxmox 6.1-1,

                                    diverse Hue, Osram smart, alles was Zigbee kann und ein paar Groove

                                    Für jede Hilfe dankbar

                                    1 Reply Last reply
                                    0
                                    • B Offline
                                      B Offline
                                      BigStephan
                                      wrote on last edited by BigStephan
                                      #18

                                      Hey,

                                      meiner Meinung nach muss der Block so aussehen:

                                                      handler.push(function () {
                                                          if (cmd_id !== 'nothing_selected') {
                                                              
                                                              /*var cmd = picker.xy[0] + ',' + picker.xy[1]; (EDIT BEITRAG: Diese Zeile kann noch weg!)*/
                                                              vis.setValue(xy_id, picker.xy[0] + ',' + picker.xy[1]);
                                                              vis.setValue(level_id, Math.round(picker.xy[2] * 254));
                                                          }
                                                      });
                                      
                                                      var onChange = function () {
                                                          var xy = vis.states[xy_id + '.val'].toString();
                                                          var level = vis.states[level_id + '.val'] || 0;
                                                          xy = xy.split(',');
                                                          if (xy.length === 2) {
                                                              picker.fromXY(parseFloat(xy[0]), parseFloat(xy[1]), parseInt(level) / 254);
                                      
                                                          }
                                                      };
                                      
                                      
                                                      vis.states.bind(xy_id    + '.val', onChange);
                                                      vis.states.bind(level_id + '.val', onChange);
                                                      onChange();
                                      
                                      
                                      

                                      Scheinbar bekommt er bei der Abfrage des IST-Wertes aus Deconz nicht immer einen String sondern irgendetwas undefiniertes zurück und setzt deshalb zwischenzeitlich immer wieder auf "0.5,0.5" zurück. Wenn man das zwangscasted, gehts (zumindest bei mir springt er nun nicht mehr hin und her).

                                      Grüße

                                      Stephan

                                      T E 3 Replies Last reply
                                      2
                                      • B BigStephan

                                        Hey,

                                        meiner Meinung nach muss der Block so aussehen:

                                                        handler.push(function () {
                                                            if (cmd_id !== 'nothing_selected') {
                                                                
                                                                /*var cmd = picker.xy[0] + ',' + picker.xy[1]; (EDIT BEITRAG: Diese Zeile kann noch weg!)*/
                                                                vis.setValue(xy_id, picker.xy[0] + ',' + picker.xy[1]);
                                                                vis.setValue(level_id, Math.round(picker.xy[2] * 254));
                                                            }
                                                        });
                                        
                                                        var onChange = function () {
                                                            var xy = vis.states[xy_id + '.val'].toString();
                                                            var level = vis.states[level_id + '.val'] || 0;
                                                            xy = xy.split(',');
                                                            if (xy.length === 2) {
                                                                picker.fromXY(parseFloat(xy[0]), parseFloat(xy[1]), parseInt(level) / 254);
                                        
                                                            }
                                                        };
                                        
                                        
                                                        vis.states.bind(xy_id    + '.val', onChange);
                                                        vis.states.bind(level_id + '.val', onChange);
                                                        onChange();
                                        
                                        
                                        

                                        Scheinbar bekommt er bei der Abfrage des IST-Wertes aus Deconz nicht immer einen String sondern irgendetwas undefiniertes zurück und setzt deshalb zwischenzeitlich immer wieder auf "0.5,0.5" zurück. Wenn man das zwangscasted, gehts (zumindest bei mir springt er nun nicht mehr hin und her).

                                        Grüße

                                        Stephan

                                        T Offline
                                        T Offline
                                        Tirador
                                        wrote on last edited by Tirador
                                        #19

                                        @BigStephan Danke für deine Änderung. Ich habe den Code mal übernommen. ich hatte nur initial manchmal, dass der Wert gesprungen ist. Ich werde berichten.

                                        1 Reply Last reply
                                        0
                                        • B Offline
                                          B Offline
                                          BigStephan
                                          wrote on last edited by
                                          #20

                                          Was mir aber absolut unlogisch vorkommt:

                                          Mache ich den Picker im Editor der Visu zum ersten mal auf, passt die aktuell real an der Lampe eingestellte Farbe und die Helligkeit mit dem Picker zusammen. Egal ob Seite neu geladen oder komplett neu gestartet.

                                          In der Visu später selbst, passt das beim ersten Öffnen des Pickers nicht....hier steht der Picker bei mir immer auf Blau (ganz unten links) und 100% Helligkeit. Schließe ich diesen und öffne ihn erneut oder wechsle die View zwischendurch behält er die Werte allerdings. Nur beim Neuladen der Seite fehlen sie.

                                          Im Code wird das onChange() einmal beim Scriptstart aufgerufen und sorgt dann dafür, dass offenbar beim ersten Öffnen im Editor die Werte aus Deconz geladen werden und der Picker gleich richtige Werte zeigt.
                                          Das wird aber in der Visu selbst nicht gemacht....

                                          Mir ist der Code an dieser Stelle zu hoch....hier müßten sich die Autoren mal zu äußern (@hobbyquaker, @Bluefox ) :-)

                                          Grüße

                                          Stephan

                                          E D 2 Replies Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          756

                                          Online

                                          32.5k

                                          Users

                                          81.7k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe