Week 14

Interface & Applications

This week focused on interfacing microcontrollers with software tools. I created a Morse Code Communicating Device with my XIAO ESP32 Board using MQTT, learnt about a WebSerial interface, connected my ESP32 to a Mobile App made using Flutter, and explored the Spotify API to control music playback.

Learning Objectives

Implement a User Interface (UI) using programming and explore protocols to communicate with a microcontroller board that you designed and made.

Assignments

Group Assignments

Compare as many tool options as possible.

Document your work on the group work page and reflect on your individual page what you learned.

Individual Assignments

Write an application for the embedded board that you made. that interfaces a user with an input and/or output device(s)

Group Assignment

For this week, all of us explored different interface and applications like mobile apps, web apps and interfaces. The interface programs that we explored are WebUSB, Processing, Kodular, Pygame and Flutter.

I explored Flutter and Android Studio along with Spotify API. I also learned from myy classmates about Kodular and Processing.

The group assignment can be found on the below link.

Group Assignment

Individual Assignments

WebSerial

WebSerial is a browser-based API that allows direct communication between web applications and serial devices, such as development boards. By leveraging WebSerial, developers can send and receive data over a serial connection without requiring additional software installations. This is particularly useful for debugging, configuring, or interacting with microcontrollers like the SAMD21 or ESP32. To use WebSerial, ensure your browser supports the API, and establish a connection by selecting the appropriate serial port. Once connected, you can exchange data in real-time, enabling seamless integration between hardware and web-based interfaces.

WebSerial Documentation

Open a serial port

The Web Serial API is asynchronous by design. This prevents the website UI from blocking when awaiting input, which is important because serial data can be received at any time, requiring a way to listen to it.

To open a serial port, you can use the following code:

async function connecttoSerial(){  //connecttoSerial is a use defined async function that opens a serial port.
    // Prompt user to select any serial port.
    const port = await navigator.serial.requestPort();
    await port.open({ baudRate: 9600}); //open the port with a baud rate of 9600.
}

Getting writer and reader

writer = port.writable.getWriter();  //allows you to send data to the serial device
reader = port.readable.getReader(); //allows you to read incoming data

Read incmoming data


//create a new instance of the TextDecoder class to decode incoming data.
const decoder = new TextDecoder(); 

//textDecoder is a built-in JavaScript class that decodes text from a stream of bytes(Uint8Array).

while(true) {
    //read and store incoming data(bytes) from the serial port into value
    const { value, done } = await reader.read(); 
    if (done) break;

    //decoding stored data(bytes) into a string.
    const string = decoder.decode(value);

    //append the decoded string to the outputMsg textarea.
    document.getElementById('outputMsg').textContent += string; 
}

Sending Serial Data


async function sendMessage() {
    //get the value of the input field with id 'input'.
    //store it in a variable called input.
    
    const input = document.getElementById('input').value;
    if (!writer) return;

    //create a new instance of the TextEncoder class to encode the input string into bytes.
    const encoder = new TextEncoder();

    //write the encoded input string to the serial port using the writer object.
    await writer.write(encoder.encode(input + '\n'));

    //clear the input field after sending the message.
    document.getElementById('input').value = ""
}

WebSockets

WebSockets is a communication protocol that enables full-duplex communication channels over a single TCP connection. It is designed to work over the web and allows for real-time data exchange between a client (usually a web browser) and a server. Unlike traditional HTTP requests, which are request-response based, WebSockets maintain an open connection, allowing both the client and server to send messages independently. This makes WebSockets ideal for applications that require low latency and real-time updates, such as chat applications, online gaming, and live data feeds.