This week I was tasked to generate a web application to interact with a built device of mine.

I had already stated to make my camera and was in the process of finalizing it. The physical design of the PCB, which I had already finalized had resulted in the buttons being uncomfortably placed and would eventually become redundant perhaps.

I thought it good therefore that the web application might supplement this functionality and allow for changing of the colour pallete and physically taking the image via serial means. Although the device is wifi capable I thought it to be better to function over serial usb cable. I started by adapting the code in the Arduino module to recognize commands from the serial usb and then top function accordingly.

Then I wrote a python script which allows me to interface between the webapp and the device.

I ran into recurring problems but was more capable of addressing them now as opposed to earlier. Common occurrences is that the python script might not find the COM3 port to communicate with the device. A reset would resolve this. Other times the _flask_ a (a phyton web framework) would auto reload and then this would result in COM3 being used by the application already, which would cause an “permission denied” error. I also had to make sure that the Arduino application wasn’t using the serial monitor or busy uploading anything using COM3 because that causes a similar error.

I would also run into a 404 error which meant that the route for the image would not be defined correctly in the python script. I had previously worked in Google Collab with python and working in VS code I learnt a lot. The installation of libraries was one of them as I had to reinstall the correct libraries in the terminal.

The code is outlined as follows.

1. The necessary imports are made.
2. The configuration of the communication between the computer and the device is delineated. (Where the files are to be saved, which port to be used, which web app to be used, and what the output dimensions of the image would be.)
3. The serial connection is defined in an if statement. The serial is initially set to None, and only when something happens is further action taken.
4. A read_frame function is defined so that the correct image is captured at the correct time. This happens when the serial is interrupted.
5. Saving the image involves the save_image function, which is further defined through the selected colour palette. This is also where the imported matplotlib library is used to “colour in” the thermal data. The camera sends numerical values corresponding to each pixel — it does not send an image directly. The computer constructs the image from these values using matplotlib.
6. The app routes are defined to specify what actions the server should take when different buttons are pressed on the website.

This python script opens a IP address to a webpage which is the interface between the user and the device. The user orders the device through the webpage and through the python code This website can also be custom designed to be independent of my main site. I added 5 images of each pallet picturing a hot coffee mug and a capture image section in addition to a area showing the latest image.

Steps to make the site work:

Run python script

Follow link to the site

Select pallet

Capture image

Push the latest image

Refresh the page so as to show the latest image (These last 2 steps and the first step can perhaps be streamlined in the future)

Python Code

Web App HTML Code