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:
Interfacing with OUTPUT device (OLED display):
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:
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!
Interfacing with INPUT device (Hall effect sensor):
We decided to use our old Hall Effect sensor fidget spinner board for this procedure of getting data from an external 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. However for now the spinner is not actually spinning.
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: