Week 15 : Interface and Application Programming

Summary

This week I… wasted a lot of time debugging. But I’ve also learned a lot! I managed to create an html user interface hosted on my gitlab. The interface is coded in html for the layout and in javascript for the user interactions. The interface receives data from my microcontroller and displays them with a dynamic graph! I’ve also added the ability to save measured data to a text file.

I’ll be able to use this for my final project. Here’s a quick video demonstration of the UI.

Assignments

Group Assignment

• Compare as many tool options as possible.

Individual Assignments

• Write an application that interfaces a user with an input &/or output device that you made.

Context of the Week

Link With My Final Project

For this week, I wanted to develop the interface that will be integrated into my final project. Unfortunately, I’m not yet ready to integrate the various functionalities, so I’ve concentrated on receiving data and various interface functions such as displaying data over time (cleanly and efficiently), starting serial communication and stopping communication. Data logging to a downloadable text file. There’s still a lot to integrate, but I’ve found that it’s already a good basis that can be adapted to my final project.

For my project I would like to :

• Have a start button.
• Have a stop button.
• Have a voltage measurement over time.
• Measure the current injected into the reactor.
• Measure the power injected into the reactor, as well as the signal distortion factor.
• Have a visual on the shape of the injected signal.
• Possibility of modifying the injected signal (frequency, signal shape, etc.).
• Measure the generator’s internal temperature.
• Have a measurement of the plasma reactor surface temperature.
• Measure the CO2 concentration at the plasma reactor outlet over time.
• Etc.

Some of these features have already been implemented, the others are waiting for the hardware…

General Idea

For the overall idea, I wanted a page on my website to serve as a user interface. So I naturally turned to html to program the visual interface and link user interactions with javascript functions. Javascript is very useful because the libraries may not be located locally on the user’s computer, and it also allows interactions on a web browser. Last but not least, compatibility is excellent, as it works on most web browsers and operating systems.

User Interface Link

Languages

HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages. It allows me to structure content on my web page using elements and tags. Each HTML element represents a different part of the content, such as headings, paragraphs, images, forms, etc.

In this project, I used HTML to create the user interface (UI) for my web application. I structured the UI using HTML elements like <div>, <input>, and <button>. I used the <input> element to create a text input field where users can enter values, and I used the <button> element to create a button that users can click to send the entered value.

To enhance the visual appeal of the UI and improve user experience, I applied CSS (Cascading Style Sheets) to style the HTML elements. CSS allows me to define the appearance, layout, and design of the HTML elements. For example, I can specify the font size, color, background, padding, margin, and more.

By combining HTML structure with CSS styling, I created a visually appealing and interactive UI for my project. This UI not only provides functionality but also offers a pleasant and engaging user experience. Overall, HTML and CSS work together to build the foundation and appearance of web pages, making them essential tools for web development projects like this one.

JavaScript

JavaScript is a high-level programming language that adds interactivity and dynamic behavior to web pages. It allows me to manipulate the content and behavior of HTML elements in response to user actions or events.

In this project, I used JavaScript to add functionality to my web application. Specifically, I wrote JavaScript code to handle user interactions, such as clicking buttons and entering values into input fields. I used event listeners to listen for these user actions and wrote event handler functions to respond accordingly.

For example, JavaScript was used to dynamically update the UI based on the received data from the microcontroller. This involved parsing JSON data, extracting relevant information, and updating the displayed values or charts accordingly.

JavaScript also played a role in handling errors and providing feedback to the user. For instance, if there was an error sending a command or parsing JSON data, JavaScript code would catch the error and display an error message to the user, helping them understand what went wrong.

Overall, JavaScript serves as the backbone of the web application, enabling it to respond to user interactions, communicate with external devices, and provide real-time updates to the UI, enhancing the overall user experience.

Web Serial API

With the Web Serial API, I can establish a bidirectional communication channel between my web application running in the browser and a connected serial device, such as a microcontroller.

In this project, I utilized the Web Serial API to facilitate communication between my web application and a microcontroller. I requested access to the serial port using navigator.serial.requestPort() and opened the port with specific settings like baud rate using port.open({ baudRate: 9600 }).

Once the port was open, I set up a reader to listen for incoming data from the microcontroller. Whenever data was received, I parsed it as JSON and processed it accordingly. For example, I updated the UI to display temperature values or performed other actions based on the received data.

Throughout this process, error handling was crucial. If there were any errors during data transmission or parsing, I caught and handled them appropriately to ensure a smooth user experience.

Device Interface

For the hardware setup, I connected the microcontroller to the computer using a USB connection. This allows the microcontroller to establish a serial communication link with the computer. The USB connection provides power to the microcontroller and enables data transfer between the microcontroller and the computer’s serial port. This setup enables bidirectional communication, allowing data to be sent from the microcontroller to the computer and vice versa.

In addition to connecting the microcontroller to the computer via USB, I also integrated an OLED display and a temperature sensor into the setup. These components are connected to the microcontroller using the I2C (Inter-Integrated Circuit) communication protocol.

The OLED display (SSD1306) provides a visual interface for displaying information such as ambient temperature, object temperature, and received values. It communicates with the microcontroller via the I2C interface, allowing for easy display updates and data visualization.

The temperature sensor (MLX90614) measures ambient temperature and the temperature of objects in front of the sensor. Similar to the OLED display, it communicates with the microcontroller using the I2C protocol, enabling accurate temperature readings to be obtained and displayed on the OLED screen.

Overall, this setup enables the microcontroller to read temperature data from the sensor, display it on the OLED screen, and communicate with the computer via USB using the Web Serial API for bidirectional data exchange.

This is the Week 14 setup that I connected to my computer via USB.

This was also achieved with my PCB produced in week 8.

Data Interface

The data interface used in this setup is the Web Serial API, which enables bidirectional communication between the microcontroller and the computer over a USB connection. This API allows JavaScript code running in a web browser to read from and write to serial devices, facilitating the exchange of data between the computer and external hardware.

With the Web Serial API, the microcontroller sends data to the computer as JSON objects containing temperature readings and any other relevant information. These JSON objects are serialized into strings and transmitted over the serial connection.

On the computer side, JavaScript code running in the web browser listens for incoming data from the microcontroller. When data is received, it is parsed as JSON and processed accordingly. Commands sent from the computer to the microcontroller are also encoded as JSON objects and sent over the serial connection.

Overall, the Web Serial API serves as the bridge between the microcontroller and the computer, allowing them to communicate seamlessly and exchange data in real-time.

User Interface

Features

List of features:

1. Start Operation Button : Enable serial communication with the microcontroller , and start reading data.
2. Stop Operation Button : Stop serial communication, and reset chart and connectivity.
3. Chart Display: Displays real-time temperature data in a chart.
4. Ambient Temperature Display: Shows the ambient temperature value.
5. Object Temperature Display: Shows the temperature of the object in front of the sensor.
6. Save Data To File: Save all data into a text file.

List of futur features:

1. Input Field: Allows users to enter a value.
2. Send Button: Triggers the sending of the entered value to the microcontroller.

Demonstration

Here’s a video demonstrating the functionality of my html interface.

Testing Timeline

Here I summarize the different stages I went through to arrive at the final result.

1. First send anything via serial and see if the computer detects the microcontroller and accepts the data. To do this, I first tried using Thonny’s interface to display data, which was pretty straightforward.
2. Then I tried this connection with a web page, using the webserial page.

3. The main thing is to code a simple interface in html: a title, a button and two displayed data.

4. Once the layout is done, I can move on to the deep, script coding. Based on the Web Serial Api documentation and chatGPT, I’ve managed to code a javascript function that allows me to establish a stable and maintained serial connection.
5. I now try to send data via the serial connection.
6. I manage to display live data despite numerous communication errors. I’ve set up a protocol to check the incoming message in order to solve this problem.
7. I now want to display a graph of the temperature over time, using the chart.js library. This is also very complex to set up.
8. I add to the graph that accumulates points, the possibility of temporal shifting to display only part of the data set, and the rendering is great!
9. I’ve added the ability to cut off communication and then resume, as well as additional “resetting” functions.
10. I want to be able to retrieve this data and use it if necessary. To do so, I’m adding the option of saving the data to a text file when operations stop.
11. Finally, I try to add a communication in the other direction: computer -> microcontroller, but it doesn’t work because I can’t directly send a text via the serial (it has to be encoded), and I can’t decode it at the output despite my attempts… However, when I use Thonny’s serial I can communicate with the microcontroller, so it must come from the Web Serial API and its encoding.

I’ll stop here for now as I don’t have time to go any further.

Source Code

HTML & JS

This section covers the user interface.

The source code is available on the page.

MicroPython

This section coves the microcontroller program. This is last week’s code, adapted to communicate with the user interface.

from machine import Pin, SoftI2C
import ssd1306
import time
import mlx90614
import json
import sys

# Initialize I2C
i2c = SoftI2C(scl=Pin(9), sda=Pin(8), freq=100_000)

# Initialize MLX90614
mlx = mlx90614.MLX90614(i2c)

# OLED Display setup
oled_width = 128
oled_height = 64
oled = ssd1306.SSD1306_I2C(oled_width, oled_height, i2c)

# Main loop
while True:
    # Read temperature data
    ambient_temp = mlx.read_ambient_temp()  # Ambient temperature
    object_temp = mlx.read_object_temp()    # Temperature of the object in front of the sensor
    
    # Display temperature on OLED
    oled.fill(0)  # Clear the display
    oled.text('Ambient Temp:', 0, 0)
    oled.text(f'{ambient_temp:.2f} C', 0, 10)
    oled.text('Object Temp:', 0, 20)
    oled.text(f'{object_temp:.2f} C', 0, 30)
    oled.show()
    
    # Send temperature data over serial USB
    sys.stdout.write(json.dumps({"ambient": amb