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.
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....
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.
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.
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).
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.