Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

User avatar
By Dietmar273
#79107 Hello,

I'd like to use the jscolor Color Picker in a Webserver to set the color of my Neopixels => http://jscolor.com/
I found a tutorial on this, but it's written in LUA => https://randomnerdtutorials.com/esp8266-rgb-color-picker/

How do I embed the Color Picker into my code?
Where do I put the javascript file "jscolor.js"?
How do I retrieve the selected color?

Thanks,
Dietmar
User avatar
By Dietmar273
#79162 I found a solution by myself.
The key was this tutorial: https://www.esp8266.com/viewtopic.php?f=32&t=18738
Chapter 12 explains how to "Wirelessly controlling your RGB lighting".
In this example, the author uses javascript code, which is stored in the SPIFFS.
So I simply added the file "jscolor.js" to the sketch data folder.
And then I changed the index.hml file, I added the color picker and a change listener:
Code: Select all       <div>
            <input id="picker_id" class="jscolor {onFineChange:'update(this)'}" value="ffcc00">
        </div>
        <script>
            /* event listener */
            document.getElementById("picker_id").addEventListener('change', sendRGB);
        </script>

Works like a charm :-)
User avatar
By RichardS
#79166 Nice job, I am sure lots of people will like it!

RichardS
User avatar
By pfeerick
#83335 I came across this topic because I'm trying to do the same thing, but I noticed the link is incorrect.

The library in question is jscolor, and has also been forked and minified on github. As my code has facilty for transparently using gzip, I instead gzip'ed the stock version of jscolor.js and used that instead... a 12kb instead of 52kb transfer... which works a treat controlling a 508 long string of WS2818s using FastLED... thanks for the pointer to the existence of the library! :D :D