Using Arduino to change CSS values on a website

Hello,

I need to control the background color of a website using a rotary control with Arduino Uno. I mostly understand HTML and CSS, and I can work with teh Arduino IDE, but I have no idea how to connect the two.

I haven't had much luck googling the problem, so I'm hoping you can give me a simple answer or point me to a tutorial that a newbie can understand.

Thank you!

greg

CSS is can be either embedded in an HTML file or included.

Either way, you would need to overwrite a file.

Your server needs to have code to select the appropriate CSS when it receives a message. Then your Arduino, or any browser can send that message.

...R

Ok, so I guess HTML5 cannot read serial messages (that's what I was hoping for), but can JavaScript? How? I can't seem to figure out how to interface it with Arduino....

How will serial messages get to the web server? is the Arduino connected to the server PC by a USB cable?

I have used that system very effectively. I use Python Bottle to host the web server and the Python code can easily communicate with the Arduino.

Javascript normally runs on the browser PC rather than the server PC and it cannot access the browser PC hardware (I hope).

...R

Robin2:
How will serial messages get to the web server? is the Arduino connected to the server PC by a USB cable?

I have used that system very effectively. I use Python Bottle to host the web server and the Python code can easily communicate with the Arduino.

Javascript normally runs on the browser PC rather than the server PC and it cannot access the browser PC hardware (I hope).

...R

Yes, sorry, I wasn't clear about that, the Arduino is indeed connected to the server by USB cable, so I just need it to work locally, not over the internet. I just want to build a sort of GUI in HTML.

Thank you, I'm going to try this next.

benyig:
I just want to build a sort of GUI in HTML.

You may get some ideas from my EzScrn demo

That demo is not a GUI - it is just for display. However I do use Python and Bottle to create browser based GUIs to control a small lathe and my model trains.

...R

the Arduino is indeed connected to the server by USB cable, so I just need it to work locally, not over the internet. I just want to build a sort of GUI in HTML.

Let me see if I understand the situation. The Arduino is connected to a serial port on the PC. The browser, which knows nothing about the serial port, makes a request to a server (some other machine, typically) for some data. The data that the server sends back contains links to another file (the CSS), which the browser then requests, from wherever the CSS file is located (could be a third machine).

Just how is the Arduino supposed to play a role?

PaulS:
The browser, which knows nothing about the serial port, makes a request to a server (some other machine, typically) for some data.

I think the browser and server are on the same machine - the one the Arduino is connected to. That's how I use a browser to implement a GUI.

...R

I think the browser and server are on the same machine

Maybe. But Firefox and Internet Explorer can't access the serial port. I doubt that other browsers can. So, how is the browser going to get data from the Arduino?

PaulS:
But Firefox and Internet Explorer can't access the serial port. I doubt that other browsers can. So, how is the browser going to get data from the Arduino?

That's true. So I would go via keystrokes (Leonardo / Micro) and JavaScript to change CSS.

PaulS:
So, how is the browser going to get data from the Arduino?

That's very simple. The browser sends data to the server and the server sends the data to the Arduino. The server can also send back to the browser data that it received from the Arduino.

...R