This week I will be writing an application that interfaces a user with an input and/or output device that I made. I am thinking of using Python for this and looking into websockets. I decided that I wanted to do this for my charlieplexing board from output devices week and thought through how that might work. I started a ChatGPT conversation to help me get this working, instructing it that I would be using the Arduino IDE for uploading the new code to the Seeed Xiao RP2040 and that I wanted to use Python and websockets for the implementation of the locally-hosted web interface. Here is the ChatGPT exchange.
I reprompted ChatGPT several times, recognizing where debugging needed to occur. For instance, the LEDs were initially registered incorrectly such that part of the smily face's mouth was treated as an eye and one pattern treated two of the LEDs as one, leading to five lighting up instead of six. I also needed to change the serial port name and make other small adjustments, such as increasing the LED brightness. I checked that the code ran as expected by trying out all the different modes, which were smiley, chase, and random. After a bit of tweaking, it worked correctly. Then, I switched to VS Code and created a charlie-interface folder. I added two files into it. These were charlie_server.py and charlie_client.html which can be downloaded in the "Download Files" section below. I used a websocket for this.
In order to launch the web app, I entered "python charlie_server.py" into the VS Code terminal, followed by "python -m http.server 8000" for the hosting. Then, I went to http://localhost:8000/charlie_client.html in the browser (which shouldn't work for the computer of the person reading this) to interact with the locally-hosted web app. After realizing that I was using the wrong port, I added the correct one and ran it again. Another issue I encountered came about because I had the Arduino IDE open when I was initially running the Python code. Since the serial port was already connected there and the serial monitor was open, I couldn't connect through the web app at first. Closing the Arduino IDE solved this problem, and things worked as expected.
Here is the web app in action, with me clicking on the buttons to initiate the three different patterns: smiley, chase, and random. It was very fun finally being able to make an interactive web application. I had seen plenty of Neil's and wondered how to get those to work. It was fun getting to try it out.
After I finished the demo, I turned it off in the web app and then went into the VS Code terminal that was running. To stop it, I hit control+c (on a Mac) which released the serial port, making it available the next time I want to use the Arduino IDE for instance. All in all, making this interface was a fun and learning-filled process. I will definitely refer back to this when I next want to make a web interface application.
A few of us from the CBA section compared tool options on our group site for the week. Please refer to that site for more.