Week 14: Interface & Application Programming
Group Assignment: compare as many tool options as possible
Individual Assignment: write an application that interfaces a user with an input &/or output device that you made
What is this?
We need to design and program a method to communicate with a device, to send &/or receive, data &/or commands. If our chosen device is output, then we should be able to control it from our application interface, however if the chosen device is input, then we should be able to get data from it.
To start we need an interface. We need an appropriate browser and a program. For the browser we downloaded Opera as we are using a MacBook and unlike Safari, Opera supports serial connections. To create a program we used the following prompt:
"Give a simple web serial program example, connecting a serial device attiny 1614 through a serial converter with web UI in html/css, and don't forget Arduino program for the device."
The program is here, we run it by right-clicking and selecting "Open in Live Server". It opens in safari by default, however we cannot connect there, so we simply copy/paste the address into our Opera browser which as mentioned supports the Web Serial connections.
And now it appears like this in the browser and we can establish the connection:
We first connected it to our OLED display from Week 10: Output Devices.
We also had a simple Arduino program from the aforementioned AI prompt. It looks like this, and simply echoes back:
Displaying text on OLED device:
But what we really want is to enter text and then display it on the OLED. For this we wrote another simple program:
Tested it, and it works!
Receiving data from device:
We've written text to display on the OLED, now we should also find how to take the sensor data from the device.
We decided to use our old Hall Effect sensor fidget spinner board for this. First to test whether we could get data from the device. So we made such a program:
Here's what the output looks like. Actually it was really easy, because the Arduino function "serialPrint" does precisely that and we also had AI to write the script.
Fixing the Fidget; Fidget Spinner 2.0
Small issue with this project is that the spinner will only go around a few times, even if spun ideally. It was suggesteed that counterweights further out on the arms of the spinner would make a better spinner that would spin for a greater number of rotations and making the simulation longer and easier to produce. Enough said, here is the Fidget Spinner 2.0:
Here's the new spinner on the device:
Program and Final Result
Let's discuss the program and our creation of the program for the Web Serial Browser Interface, which by the way may be downloaded from the section final section "files" below. The program was constructed through a diaglogue with perplexity.ai, as I iteratively explained the parameters and requirements.
The program is written in HTML and Javascript. The HTML provides the structure and layout of the page, while Javascript is used for the interactive portions, including for recieving the data and converting it into the spinner. A couple parts of the code are worth noting:
1. The following js code snipet is how the spinner is contructed and animated:
2. The following js code shows the function for processing the incoming data:
Finally, here is a video of the program and simulation in action: