As a quick little proof of concept today I created a web app where the user can turn a physical dial and control the cross fading between two images on the website.
Doing this was mostly just about connecting the dots. All the individual tasks like reading a dial or fading between two images are trivial. Here is the setup:
- The dial is connected to an Adafruit Trinket Pro (basically just a smaller cheaper Arduino) on an analog pin.
- The trinket is connected to a computer via a FTDI cable. Data is passed to the computer using a serial connection
- The computer is running a lightweight NodeJS script that setups a web server with a web socket and monitors the serial connection to the trinket.
- Data received on the serial connection is immediately written to the web socket connection
- When the webpage loads it establishes a web socket connection back to the server. Whenever a message is received it maps the numeric value to the opacity css of the top image
There really isn’t much too it, but the cool thing is that since this is running an actual web server this sort of control could run an actual web site serving content tons of people. Imagine being able to have visitors to your business lobby be able to interact with your public website through tangible controls like this.
If you are interested in the source code you can find it here: