After some sleep and more searching and trialing, I have finally cracked it and can save the colour hex code to local storage.
Why does the mouse icon change its appearance on mouseover between the selected-color-text element and the selected-color element? What determines this? I assume they have different properties but I can’t see where they come from.  
Don’t think I have mastered pastebin yet !? Looks OK there but not here??
const selColtxt = this.root.querySelector(“.selected-color-text”);
selColtxt.addEventListener(‘mouseup’, (e) => {
if (e.button == 0) {
localStorage.setItem(“colorpicker-text-selected”, JSON.stringify(this.selectedColor));
}
});
 

Hi.
To understand why that happens, check which HTML elements you have and what are they’re default properties.
 
I’m sorry, but I didn’t understand… Did you solve the problem?
Regards,
Sara

Thanks Sara. I’ll look into the ‘default’ properties.
I thought the pastebin processed code should have shown up formatted etc in the forum but its not. Should I have clicked embed in pastebin and pasted the link here instead?
<script src=”https://pastebin.com/embed_js/u4sQGsBm”></script&gt;
 
 

Hi Sara

Why does the pastebin link get changed when submitted in the forum and then not work?

<script src=”https://pastebin.com/embed_js/u4sQGsBm”></script&gt;

It is a valid link so what should I be doing differently with these so that they work in the forum?

I need help please. I’m still struggling.
I have added a colour picker to an RNT Lab ESP8266  webserver page I have built and I am wanting to send the color picker’s currently selected colour to an attached Arduino Mega2560, which my application is already exchanging data with successfully. This is to control the colour of my nixie clock LED backlights. The nixie clock is driven by an Arduino Mega2560.
The colour picker I am using is based on the https://github.com/bebraw/colorjoe library, that I learned about from https://www.youtube.com/watch?v=eGth988Sm8w The HTML used to implement this in the YouTube guide is here: https://github.com/dcode-youtube/color-picker-with-local-storage
I have the color picker integrated and working fine on my webserver project page and I can capture and save the hex code of the currently selected-color div element to js local storage with a mouse click, but I can’t figure out how to get that data item into my ESP8266 c++ main() program, so that I can send it to the Mega2560 via the serial port. I need this to control the colour of LED backlights.
Can I access js local storage from my c++ main() src or how else can I pass this information out of the colour picker js container to c++ so that I can send it via the serial port to control my nixie clock LED backlights?
 

Hi.
I’m sorry for taking so long to get back to you.
I’ve been out of the office with little access to the internet.
 
I’m not familiar with the color picker you’re using, but if you can save the data in a javascript variable, you can send it to the ESP8266 using websocket protocol, for example. 
 
This is the simplest websocekt tutorial we have: https://randomnerdtutorials.com/esp8266-nodemcu-websocket-server-arduino/
 
Take a look at the javascript functions we use there. You can see that after initializing the WebSocket, we simply use websocket.send(YOUR_VARIABLE_HERE).
 
Then, look at the other websocket functions on the rest of the code. You get the message on the handleWebSocketMessage() function.
 
 
If you want a more simple solution, we have this tutorial that is a web server color picker: https://randomnerdtutorials.com/esp32-esp8266-rgb-led-strip-web-server/
 
We created that project some time ago, but I believe it is still working.
 
I hope this helps.
Regards,
Sara
 
 

Thank you Sara. No apology needed. I think you do an amazing job helping people and I am always very grateful to be able to seek your help. I did finally realise that a websocket message was the way to go, and just a few minutes ago I managed to get that working. The webserver I am using was already websocket based so I should have realised thst sooner. i understand a lot more about how it works now. I am now just sorting out the message handling as I have several other messages coming in too. As I can now see the selected-color information I wanted, on the server side through my sketch main() function on the ESP8226, I think my question is now resolved. No doubt I’ll encounter a few more hurdles before I am done. Again thanks for your guidance.

Great.
I’m glad you were able to fix the issue.
I’ll mark this issue as resolved. If you need further help, you just need to open a new question in our forum.
Regards,
Sara