Week 14: Interface & Application Programming

Objectives

Individual Assignment:

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

Group Assignment:

Compare as many tool options as possible

Training

Using Java Script to perform Document Object Model (DOM) Manipulation

First our instructor, Midlaj helped us undertand how to use Javascript. I learnt to use document.getElementById and .addEventListener able to use Java script to use buttons and for updating text in real time as shown here


                        
                            <!DOCTYPE html>
                            <html lang="en">
                            <head>
                                <meta charset="UTF-8">
                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                <title>Document
                            </head>
                            <body>
                                <h1>My name is 
                                <p id="Hello">
                                <input id="type" placeholder="Enter your name">
                                <button id="button">Click Here

                                <script>
                                    const button = document.getElementById('button');
                                    const type =  document.getElementById('type');
                                    const Hello = document.getElementById('Hello');
                                    const name= document.getElementById('name');

                                    button.addEventListener('click', function(Clicktext){
                                        Hello.textContent='Hello There';
                                    });

                                    type.addEventListener('input', function(Update){
                                        name.textContent=type.value;
                                        const nameLen =  name.textContent.length;

                                        if (nameLen>=5 && nameLen<=10){
                                            name.style.color="red";
                                        }
                                        else if (nameLen>10){
                                            name.style.color="blue";
                                        }

                                        else{
                                            name.style.color="black";
                                        }
                                    })
                                </script>
                            </body>
                            </html>

To speed up my process of learning, I used the help of ChatGPT

Connecting to ESP32 via Web Serial

This is the JavaScript code used for the interface:


                        
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">                                                          
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous"/> 
        <!--Link to stylesheet to add bulb icon, crossorigin required to load bulb icon from different domain without credentials -->
    </head>
    <body>
    <h1>Web Serial</h1>
    <button id="connect">Connect</button>  <!-- Adding a button to Connect to USB port -->

    <button id="toggle"><i class="fa-solid fa-lightbulb" style="color:#000000"></i></button> <!-- Adding a toggle button to switch ON and OFF an inbuilt LED in PCB -->


    <div>  <!-- Required for proper alignment of visual elements-->
        <textarea id="SerialOut" rows="10" cols ="30" disabled></textarea> <!-- Serial Monitor where we can read and write data-->
    </div>

    <input type ="type" id="input" placeholder="Enter data here."> <!-- Text box where we can read and write data-->

    <button id="upload">Upload</button> <!-- Button that we can press to upload user input written in input box above-->

        <script>
            //defining variables
            let port;
            let reader;
            let writer;
            let toggle;

            //defining user input textbox, 'Connect' and 'Upload' buttons as different variables. 
            const Connect = document.getElementById('connect');
            
            const addUser = document.getElementById('input');
            const Upload = document.getElementById('upload');
            const toggleBtn = document.getElementById('toggle');

            Connect.addEventListener('click', connectToSerial); //on clicking 'Connect' button, run connecttoSerial function
            Upload.addEventListener('click', uploadMessage); //on clicking 'Upload' button, run uploadMessage function
            toggleBtn.addEventListener('click',toggleLED); //on clicking, LED switches between OFF and ON
            
            async function connectToSerial(){
                port = await navigator.serial.requestPort(); //Wait until a port has been chosen
                await port.open({baudRate:9600}); //Keep connection via port open at baud rate of 9600

                writer = port.writable.getWriter(); //get writer object
                reader = port.readable.getReader(); //get reader object
                const decoder = new TextDecoder(); //get decoder object from TextDecoder class that can convert binary code to human readable format

                while(true){
                    const {value,done}= await reader.read(); //keep reading until data stream has been stopped; extract the data and store in 'value', and whether data stream has been stopped in 'done' variable
                    if (done) break; //if data stream has been stopped; 'done' = true, then exit the while loop
                    const string = decoder.decode(value); //convert the data contained in value to a string constant
                    document.getElementById('SerialOut').textContent+=string;  //add string constant data to text content in <textarea>
                }
            }

            async function uploadMessage(){
                let userInput = addUser.value; //store user input written in input box as data in a variable 'userInput'
                if (!writer) return; //if writer is not found then exit the function

                const encoder = new TextEncoder(); //get new encoder object that can convert human readable text to machine code

                await writer.write(encoder.encode(userInput+'\n')); //keep writing until entire data has been written; write to microncontroller; \n tells the ESP32 that it is the end of the message.
                // document.getElementById('input').value=""; 
                addUser.value=""; //clear the textbox so that user can add new input.
            }

            async function toggleLED(){
                if (!writer) return; //if writer does not exist, return

                const dataToSend = toggle ? '1' : '0' ; //if toggle is true, dataToSend ='1'; else datatoSend='0'
                const encoder = new TextEncoder(); //get new encoder object that can convert human readable text to machine code 

                await writer.write(encoder.encode(dataToSend)); //wait until writer has written dataToSend as machine code
        
                if (dataToSend === '0'){
                    toggleBtn.innerHTML=`<i class="fa-solid fa-lightbulb" style="color:#000000"></i>`; // if dataToSend matches value and datatype of string value of 0, then update bulb icon to black to signify LED is OFF.
                }else{
                    toggleBtn.innerHTML=`<i class="fa-solid fa-lightbulb" style="color:yellow"></i>`; // if dataToSend matches value and datatype of string value of 1, then update bulb icon to black to signify LED is ON.
                }
                toggle=!toggle; //flips state of toggle, ie. if toggle was 'true', now toggle is set to 'false' & viceversa.
            }
        </script>
    </body>
    </html>

This is the code for the Xiao ESP32 S3, programmed in Arduino IDE


                            #define LED D3
    char user;
    
    void setup() {
        pinMode(LED,OUTPUT);
        Serial.begin(9600);
    }
    
    void loop() {
        user = Serial.read();
    
        if (user == '1') {
        digitalWrite(LED, HIGH);
        Serial.println("ON");
        } 
        
        else if (user == '0') {
        digitalWrite(LED, LOW);
        Serial.println("OFF");
        }
    }

Chat GPT prompts I used to learn to write this piece of code are listed below:

ChatGPT Prompt 1: Explain this code async function sendMessage()

Prompt 1: Explain this code async function sendMessage()

This code defines an asynchronous function that reads input from a text box and sends it over a serial connection:

async function sendMessage() {
                    const input = document.getElementById('input').value;
                    if (!writer) return;
                    const encoder = new TextEncoder();
                    await writer.write(encoder.encode(input + '\n'));
                    document.getElementById('input').value = ""
                  }

input captures text from a textbox with ID 'input'.
!writer checks if the serial writer exists; if not, it exits.
TextEncoder() converts human-readable text to binary.
await writer.write(...) writes to the microcontroller.
+ '\n' signals end of message for serial communication.
input.value = "" clears the textbox after sending.

ChatGPT Prompt 3: Why is .then() required here?

Prompt 3: Why is .then() required here?

.then() is used for handling a Promise’s result after it resolves. In your code:

writer.write(encoder.encode(dataToSend)).then(() => {
                ... UI changes
                })

This ensures that the UI updates (changing bulb icon, flipping toggle) happen only after data is written to the serial port.

ChatGPT Prompt 6: Why is the lightbulb not visible?

Prompt 6: Why is the lightbulb not visible?

There are 2 main issues:

Missing Font Awesome CDN: You didn’t include the external script for the icon set.
Incorrect HTML in innerHTML: You wrote <i="...">, but it should be <i class="...">.

Fix:

<script src="https://kit.fontawesome.com/yourkitid.js" crossorigin="anonymous"></script>

Also correct the toggle logic to:

toggleBtn.innerHTML = `<i class="fa-solid fa-lightbulb" style="color: yellow">`;

ChatGPT Prompt 7: What is crossorigin="anonymous"?

Prompt 7: What is crossorigin="anonymous"?

crossorigin="anonymous" is used in tags like <script> or <link> when loading resources from another domain.

It prevents user credentials from being sent (no cookies, auth headers).
Improves security when fetching assets like fonts/scripts from CDNs.
Browser only uses the response if the server explicitly allows it via CORS headers.

Example:

<script src="https://kit.fontawesome.com/abc123.js" crossorigin="anonymous"></script>

Group Assignment

As a group, we explored Kodular, Pygame, Processing, WebSerial (Java Script), & Flutter

To read more, click here

Individual Assignment

Controlling a Servo via Web Serial

Creating a Webpage

HTML file for webpage


                        
            <!DOCTYPE html>
            <html>
                <head> <h1>Web Serial Servo Controller </head>
                <style>
                    body{
                        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                        background-color: rgb(103, 197, 197);
                        display: flex;
                        flex-direction:column;
                        justify-content: center;
                        align-items:center;
                        height:100vh;
                        margin:0;

                    } 
                    button {
                        padding: 10px 20px;
                        margin:10px;
                        background-color:green;
                        color: white;
                        border-radius: 5px;
                        cursor:pointer;
                    }

                    .textarea{
                        margin:auto;
                    }

                </style>

            <body>
                <div>
                <button id="ConnBn">Connect
                </div>
                <div style="margin-auto">  
                <textarea id="SerialOut" style="margin-auto;" rows="10" cols ="30" disabled>     
                </div>
                <div>
                <input type="range" min="0" max="180" value="0" id="Slider">
                <span id="aDisplay" style = "background-color: #e0e0e0;">000
                </div>

                <script>
                    const connectBtn = document.getElementById('ConnBn');
                    const dataSlider = document.getElementById('Slider');
                    const angleDisplay = document.getElementById('aDisplay');  
                    
                    // angleDisplay.addListenerEvent('input',sendAngle);

                    let port
                    let writer
                    let reader
                    let toggleConnect = false

                    connectBtn.addEventListener('click',connectToSerial);
                    dataSlider.addEventListener('input',sendAngle);
                        
                    async function connectToSerial(){
                        if (!toggleConnect){
                            try{
                                port = await navigator.serial.requestPort()
                                await port.open({baudRate:9600});
                                writer = port.writable.getWriter();
                                reader = port.readable.getReader();  
                                sendData();
                                connectBtn.style.backgroundColor = "red";
                                connectBtn.textContent = "Disconnect";
                                toggleConnect=!toggleConnect
                                //Send message to Serial Monitor saying connection successful.
                            }
                            catch(error){
                                console.error("Error, unable to open serial port", error);
                            }
                        }
                        else{
                            try{
                                await writer.releaseLock();
                                await reader.releaseLock();
                                await port.close();
                                //remove reference as a fail safe
                                writer=null;
                                reader=null;
                                port=null;
                                connectBtn.style.backgroundColor = "green";
                                connectBtn.textContent = "Connect";
                                toggleConnect=!toggleConnect;
                                //Send message to Serial Monitor saying disconnection successful.
                            }
                            catch(error){
                                console.error("Error, unable to close serial port", error);
                            }   
                        }
                        
                    }
                
                    async function sendAngle(){
                        sendData(dataSlider.value)
                        angleDisplay.textContent=dataSlider.value.padStart(3,"0");
                    }
                
                    function sendData(value = dataSlider.value){
                        const encoder = new TextEncoder();
                        if (!writer) return;
                        
                        value = value.toString().padStart(3,"0");
                        writer
                            .write(encoder.encode(value))
                            .then (()=>{
                                console.log("Sent: " + value);
                                document.getElementById('SerialOut').scrollTop= document.getElementById('SerialOut').scrollHeight;
                            });
                            const end = '\n'
                            writer.write(encoder.encode(end));
                            document.getElementById('SerialOut').textContent+="Servo 1 Angle: " + value + '\n';
                        }

                </script>    
            </body>
            </html>

Code for Xiao ESP32 S3 I programmed on the Arduino IDE

 
                                    //Firmware to serially control a servo
            #include <ESP32Servo.h>

            #define PULSEMIN 500
            #define PULSEMAX 2500
            #define SERVO_PIN D6

            Servo myServo;
            String inputString;

            void setup() {
            Serial.begin(9600);
            ESP32PWM::allocateTimer(0);
            myServo.attach (SERVO_PIN, PULSEMIN, PULSEMAX);

            Serial.println("Serial connection successful!");
            Serial.println("Type servo angle: ");
            }

            void loop() {

            if (Serial.available()){
                char digit = Serial.read();

                if (digit == '\n'){
                Serial.println(inputString);
                int servoAngle = (inputString[0]-48)*100 + (inputString[1]-48)*10 + (inputString[2]-48);
                Serial.println(servoAngle);
                myServo.write(servoAngle);
                
                inputString = "";
                }
                else{
                    inputString=inputString+digit;
                }
                }
            }

ChatGPT Prompt 1: Explain what this line of code does: value = value.toString().padStart(3, "0");

Prompt 1: Explain what this line of code does

This line ensures that the value being sent is always three characters long, padded with leading zeroes if needed.

Code Breakdown:

value.toString(): Converts the numeric value to a string.
padStart(3, "0"): Pads the string on the left with "0" until its length is 3.

Example:

let value = 5;
                    value = value.toString().padStart(3, "0");
                    console.log(value); // "005"

This is especially useful when communicating with devices that expect values in a fixed-width format, such as microcontrollers via serial ports.

ChatGPT Prompt 2: How do I use Web Serial API to read input from a microcontroller continuously?

Prompt 2: Web Serial API - Continuous Read Example

Here's how to use the Web Serial API to read data continuously from a microcontroller like an Arduino:

✅ Full HTML + JavaScript Example:

<!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8" />
                        <title>Serial Read Demo</title>
                    </head>
                    <body>
                        <button id="connect">Connect</button>
                        <textarea id="output" rows="10" cols="50"></textarea>
                    
                        <script>
                        const connectButton = document.getElementById('connect');
                        const outputTextarea = document.getElementById('output');
                        let port, reader;
                    
                        connectButton.addEventListener('click', async () => {
                            try {
                            port = await navigator.serial.requestPort();
                            await port.open({ baudRate: 9600 });
                    
                            const decoder = new TextDecoderStream();
                            const readableStreamClosed = port.readable.pipeTo(decoder.writable);
                            reader = decoder.readable.getReader();
                    
                            while (true) {
                                const { value, done } = await reader.read();
                                if (done) break;
                                outputTextarea.value += value;
                            }
                            } catch (err) {
                            console.error('Serial read error:', err);
                            }
                        });
                        </script>
                    </body>
                    </html>

💡 Notes:

The await reader.read() ensures that the browser waits for data before continuing the loop.
This approach prevents the UI from freezing by avoiding a tight infinite loop.

Chat GPT Prompt 3: Why does my screen freeze after calling await navigator.serial.requestPort()?

Root Cause: Freezing After Serial Connect

Your screen most likely freezes after connecting because of an improperly handled infinite loop without await. This causes the browser’s main thread to become blocked.

❌ Problematic Code Example:

while (true) {
                        const { value, done } = reader.read(); // ❌ missing await!
                        if (done) break;
                        outputTextarea.value += value;
                    }

This loop runs extremely fast and doesn’t give control back to the event loop, freezing the page.

✅ Correct Version:

while (true) {
                        const { value, done } = await reader.read(); // ✅ awaits incoming data
                        if (done) break;
                        outputTextarea.value += value;
                    }

✔️ Add Try/Catch for Robustness:

try {
                        while (true) {
                        const { value, done } = await reader.read();
                        if (done) break;
                        outputTextarea.value += value;
                        }
                    } catch (error) {
                        console.error("Error while reading serial:", error);
                    }

Chat GPT Prompt 4: How to disconnect gracefully from Web Serial

Prompt 4: Add Disconnect Button

Include a "Disconnect" button to safely close the serial connection and free resources:

HTML:

<button id="disconnect">Disconnect</button>

JavaScript:

document.getElementById('disconnect').addEventListener('click', async () => {
                        if (reader) {
                        await reader.cancel();     // Stops the reader loop
                        await reader.releaseLock();
                        }
                        if (port) {
                        await port.close();        // Closes the serial port
                        }
                    });

This prevents potential memory leaks or app crashes due to lingering open connections.

ChatGPT Prompt 5: Explain what this line of code does: let port = await navigator.serial.requestPort();

Prompt 5: Explain what this line of code does

This line prompts the user to select a serial port on their device and returns a reference to the selected port.

Code Breakdown:

navigator.serial.requestPort(): This function opens a prompt to allow the user to choose a serial port from available options.
await: Ensures the code execution pauses until the user makes a selection or cancels the prompt.

Example:

let port;
                    try {
                        port = await navigator.serial.requestPort();
                        console.log('Selected port:', port);
                    } catch (error) {
                        console.error('User canceled port selection:', error);
                    }

This is the first step before any further serial communication, such as reading or writing data to the microcontroller.

ChatGPT Prompt 6: What does navigator.serial.requestPort() return if the user cancels the port selection?

Prompt 6: What happens when the user cancels port selection?

If the user cancels the port selection, navigator.serial.requestPort() will throw an error, which can be caught in a try...catch block.

Handling the Cancellation:

let port;
                    try {
                        port = await navigator.serial.requestPort();
                        console.log('Selected port:', port);
                    } catch (error) {
                        console.error('User canceled port selection:', error);
                    }

In this case, the error caught will inform you that the user canceled the operation, and no serial port is selected.

ChatGPT Prompt 7: What is TextDecoderStream used for in the Web Serial API?

Prompt 7: What is `TextDecoderStream` in the Web Serial API?

TextDecoderStream is used to convert raw byte streams (such as data received over a serial connection) into text. It decodes data from a byte stream into human-readable characters, making it easier to process serial input.

Code Example:

const decoder = new TextDecoderStream();
                    const readableStreamClosed = port.readable.pipeTo(decoder.writable);
                    const reader = decoder.readable.getReader();

How it works:

TextDecoderStream(): Creates a decoder that converts binary data into text.
pipeTo(decoder.writable): This pipes the serial port’s readable stream to the decoder’s writable stream, allowing the raw byte data to be decoded.
getReader(): Returns a reader from the decoded stream, allowing you to read the decoded text data.

This is particularly useful when dealing with data sent by microcontrollers or other devices over serial communication, as they often send raw byte streams that need to be decoded into text for further processing.

ChatGPT Prompt 8: How can I handle errors gracefully while reading from a serial port?

Prompt 8: How to handle errors while reading from serial port?

To handle errors gracefully while reading from a serial port, use try...catch blocks to catch and manage any potential issues, such as communication failures or unexpected disconnections.

Error Handling Example:

try {
                        while (true) {
                        const { value, done } = await reader.read();
                        if (done) break;
                        outputTextarea.value += value;
                        }
                    } catch (error) {
                        console.error("Error reading from serial port:", error);
                    }

This ensures that if there is an issue with the serial communication, it is caught and handled properly, preventing your app from crashing unexpectedly.

Tips:

Always provide meaningful error messages when catching exceptions.
Consider implementing user-friendly notifications in the UI to inform the user about connection or read failures.

ChatGPT Prompt 9: Can I use Web Serial API on all browsers?

Prompt 9: Browser Compatibility of Web Serial API

The Web Serial API is supported in modern browsers like Google Chrome, Edge, and Opera, but is not available in all browsers.

Supported Browsers:

Google Chrome: Fully supports the Web Serial API (with appropriate flags enabled in some cases).
Microsoft Edge: Also supports the Web Serial API, as it is built on Chromium.
Opera: Has Web Serial API support since it is based on Chromium.
Firefox/Safari: These browsers currently do not support the Web Serial API.

How to Check if Web Serial API is Supported:

if ('serial' in navigator) {
                        console.log('Web Serial API is supported!');
                    } else {
                        console.log('Web Serial API is not supported in this browser.');
                    }

For non-supported browsers, you can provide alternative instructions or fallback options, like using Bluetooth or WebSockets for serial communication.

ChatGPT Prompt 10: What is the difference between navigator.serial.requestPort() and navigator.serial.getPorts()?

Prompt 10: Difference between `navigator.serial.requestPort()` and `navigator.serial.getPorts()`

The primary difference is that navigator.serial.requestPort() prompts the user to select a port, while navigator.serial.getPorts() returns a list of all available ports without requiring user interaction.

Code Breakdown:

navigator.serial.requestPort(): Opens a prompt that allows the user to select a port.
navigator.serial.getPorts(): Returns an array of available ports without any user interaction, typically used when you want to display all available options without prompting.

Examples:

// Requesting a port
                    let port = await navigator.serial.requestPort();
                    console.log(port);
                    
                    // Getting all available ports
                    const ports = await navigator.serial.getPorts();
                    console.log(ports);

Use getPorts() if you want to automatically detect all available ports, and use requestPort() when you want the user to choose a specific one.

ChatGPT Prompt 11: What does port.open() do in the Web Serial API?

Prompt 11: What does `port.open()` do in the Web Serial API?

The port.open() method is used to open a serial port and establish a communication session. Once the port is open, you can begin reading and writing data to and from the device connected to the port.

Code Breakdown:

port.open(options): Opens the selected serial port with the provided options (e.g., baud rate, data bits, etc.).

Example:

const port = await navigator.serial.requestPort();
                    await port.open({ baudRate: 9600 });
                    console.log('Port is now open!');

Once the port is open, you can proceed with reading and writing data using the available readable and writable streams.

ChatGPT Prompt 12: What does the baudRate option do when opening a serial port?

Prompt 12: What does `baudRate` do when opening a serial port?

The baudRate option specifies the communication speed between the computer and the connected device. It is measured in bits per second (bps), and both the computer and the device must use the same baud rate for successful communication.

Example:

const port = await navigator.serial.requestPort();
                    await port.open({ baudRate: 115200 });
                    console.log('Port is open with baud rate of 115200');

Common baud rates include 9600, 115200, and 250000. You should consult the documentation for your device to determine the correct baud rate.

ChatGPT Prompt 13: How do I send data to a serial port using the Web Serial API?

Prompt 13: How to send data to a serial port using the Web Serial API?

To send data to a serial port, you need to write to the port's writable stream. This is done by creating a WritableStream and then using its getWriter() method to write data.

Code Example:

const port = await navigator.serial.requestPort();
                    await port.open({ baudRate: 9600 });
                    
                    const writer = port.writable.getWriter();
                    const encoder = new TextEncoder();
                    const data = encoder.encode("Hello, device!");
                    
                    writer.write(data).then(() => {
                        console.log('Data sent successfully');
                    }).catch((error) => {
                        console.error('Error sending data:', error);
                    });

In this example, we use TextEncoder to convert the text into a binary format, which can then be written to the serial port.

ChatGPT Prompt 14: What is the purpose of the TextEncoder in the Web Serial API?

Prompt 14: What is the purpose of `TextEncoder` in the Web Serial API?

The TextEncoder class is used to encode text into a sequence of bytes, which can be transmitted over a serial port or any other binary stream.

How it works:

TextEncoder: Converts strings into binary data that can be sent over a serial connection.
encode(): This method takes a string and encodes it into a Uint8Array (a binary representation of the string).

Example:

const encoder = new TextEncoder();
                    const byteArray = encoder.encode("Hello, world!");
                    console.log(byteArray); // Uint8Array [72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33]

This is useful when you need to send string data as binary over a serial connection, which is typically how serial communication works.

ChatGPT Prompt 15: How do I close a serial port using the Web Serial API?

Prompt 15: How do I close a serial port using the Web Serial API?

You can close a serial port by calling the port.close() method. This closes the connection and releases the port for other uses.

Code Example:

const port = await navigator.serial.requestPort();
                    await port.open({ baudRate: 9600 });
                    
                    // After communication is done
                    await port.close();
                    console.log('Port closed successfully');

After closing the port, you cannot use it for communication until it is reopened, typically by requesting the user to select it again.

ChatGPT Prompt 19: Why does my screen freeze when I connect to USB device?

Prompt 19: Why does my screen freeze when I connect to USB device?

Your screen likely freezes because you forgot to await the reader.read() function call inside the while(true) loop. Without await, the browser doesn’t pause to wait for data, and the loop runs uncontrollably fast, locking the UI.

// Wrong
                    const {value, done} = reader.read();
                    
                    // Correct ✅
                    const { value, done } = await reader.read();

ChatGPT Prompt 20: Write an Arduino code to test serial read and write

Prompt 20: Write an Arduino code to test serial read and write

Here is an example Arduino code to test serial communication, including both reading and writing data:


                    #define LED_BUILTIN 13
                    
                    void setup() {
                        // Start serial communication at 9600 baud rate
                        Serial.begin(9600);
                        pinMode(LED_BUILTIN, OUTPUT);  // Initialize the built-in LED pin as an output
                    }
                    
                    void loop() {
                        if (Serial.available() > 0) {
                            // Read the incoming byte
                            char receivedChar = Serial.read();
                            
                            // Check if the received character is 'H'
                            if (receivedChar == 'H') {
                                digitalWrite(LED_BUILTIN, HIGH);  // Turn on the LED
                                Serial.println("LED is ON");
                            }
                            // Check if the received character is 'L'
                            else if (receivedChar == 'L') {
                                digitalWrite(LED_BUILTIN, LOW);   // Turn off the LED
                                Serial.println("LED is OFF");
                            }
                            else {
                                Serial.println("Invalid input");
                            }
                        }
                    }

The Arduino code listens for serial data.
If 'H' is received, it turns on the LED and prints "LED is ON".
If 'L' is received, it turns off the LED and prints "LED is OFF".
For any other input, it prints "Invalid input".

ChatGPT Prompt 23: Explain how to convert bytes from Serial.read to integer

Prompt 23: Explain how to convert bytes from Serial.read to integer

To convert bytes read from the serial input into an integer, you need to interpret the bytes as characters and then convert those characters to their respective numerical values:


                    char data = Serial.read();
                    int value = data - '0';  // Convert the ASCII byte to an integer

Serial.read() reads a byte from the serial input.
data - '0' converts the ASCII value of the byte to its corresponding integer value.
This works for single-digit numbers (0-9). For multi-digit numbers, you can multiply and add the digits in a loop to construct the full number.

ChatGPT Prompt 24: Explain the error 'i was not declared in this scope'

Prompt 24: Explain the error 'i was not declared in this scope'

The error "i was not declared in this scope" occurs because the variable i is being used without being declared first:

The variable i is likely being used as an index or counter but has not been initialized.
To fix this, declare i before using it, like this:

int i = 0;

Always ensure variables are declared before usage in loops or conditionals.

ChatGPT Prompt 25: Explain why `angleDisplay.textConnect` is incorrect

Prompt 25: Explain why `angleDisplay.textConnect` is incorrect

The issue with angleDisplay.textConnect is that it's an incorrect property name. The correct property for modifying the text content of an HTML element is textContent, not textConnect. Here's the corrected code:

angleDisplay.textContent = dataSlider.value.padStart(3, "0");

textContent is the proper way to set or get the textual content of an HTML element.
By using textContent, you can update the displayed angle value from the slider correctly.

ChatGPT Prompt 26: Explain the use of `await` in async functions

Prompt 26: Explain the use of `await` in async functions

The await keyword is used inside an async function to pause the execution of the function until a promise is resolved or rejected. It makes asynchronous code behave more like synchronous code:

await waits for the promise to resolve and returns the result.
If the promise is rejected, an error is thrown and can be caught using try-catch blocks.
await can only be used inside functions declared with async.

Example usage:


                    async function connectToSerial() {
                        try {
                            const port = await navigator.serial.requestPort();
                            await port.open({ baudRate: 9600 });
                            console.log('Connected to the serial port');
                        } catch (error) {
                            console.error('Error:', error);
                        }
                    }

ChatGPT Prompt 27: What does `navigator.serial.requestPort()` do?

Prompt 27: What does `navigator.serial.requestPort()` do?

The method navigator.serial.requestPort() is used to request access to a connected serial port on a device. This is part of the Web Serial API, which allows web pages to interact with hardware devices like microcontrollers and sensors via serial communication:

requestPort() opens a dialog box where the user can select a serial port to connect to.
It returns a promise that resolves to the selected serial port if successful.
If the user denies the request or no port is available, the promise is rejected.

Example usage:


                    async function connectToSerial() {
                        try {
                            const port = await navigator.serial.requestPort();
                            console.log('Serial port opened:', port);
                        } catch (error) {
                            console.error('Failed to access serial port:', error);
                        }
                    }

ChatGPT Prompt 28: Explain the error `Uncaught (in promise) TypeError: angleDisplay is null`

Prompt 28: Explain the error `Uncaught (in promise) TypeError: angleDisplay is null`

This error indicates that the angleDisplay element could not be found in the DOM when the script tried to access it. The most likely reasons for this error include:

The element with ID angleDisplay doesn't exist in the HTML at the time the script is running.
The JavaScript might be running before the DOM is fully loaded, so the element hasn't been created yet.
The element ID in the script doesn't match the one in the HTML (e.g., `angleDisplay` vs `aDisplay`).

To fix this, ensure the element exists and is correctly referenced, and make sure the script is executed after the DOM is ready. You can do this by:

Placing the <script> tag at the end of the HTML body, or
Using document.addEventListener('DOMContentLoaded', ...); to wait for the DOM to be fully loaded before running the script.

Example fix:


                    document.addEventListener('DOMContentLoaded', function() {
                        const angleDisplay = document.getElementById('angleDisplay');
                        // Now you can safely interact with the angleDisplay element
                    });

ChatGPT Prompt 29: Explain the error `TypeError: Cannot read properties of null (reading 'value')`

Prompt 29: Explain the error `TypeError: Cannot read properties of null (reading 'value')`

This error occurs when trying to access the value property of an element that is null. This typically happens if the JavaScript code attempts to reference an element that has not been found in the DOM:

The most common cause is that the element ID in document.getElementById() does not match the actual ID in the HTML.
Another possibility is that the script is trying to access the element before it is created in the DOM.

To resolve this:

Ensure the element ID in the script matches the one in the HTML.
Check that the element exists before trying to access its properties.
Ensure the script is executed after the DOM is fully loaded.

Example fix:


                    document.addEventListener('DOMContentLoaded', function() {
                        const slider = document.getElementById('Slider');
                        if (slider) {
                            console.log(slider.value);  // Safe to access the value now
                        }
                    });

Hosting using Vercel

To host via Vercel, I need to create a new Github repository and clone it like we have done before. Then I we copy paste the HTML file , rename it to index.html if not already done so and push the file into global repo. Then link your github account to Vercel, install Vercel, and import your git repo

While deploying I dont have to use any specific framework preset, so I chose Other

This is what a succesful deployment should look like

I have deployed the site here

Using Processing to make a Servo Controller

Processing is an open-source programming language and developmet environment initiated by Ben Fry and Casey Reas in 2001. Processing programming language is based off of Java for the purpose of creating visual graphics and animations for designers and creative professionals easily. To download Processing IDE click here

p5Control library is a graphical user interface (GUI) library used to create different kinds of controllers, including buttons, sliders, knobs, etc. To downloaded p5 Control library, go to Processing IDE > Sketch > Import Library > Manage Library, and type in p5, and click Download

A big portion of the code I used is based off off this instructable that discusses how to control Servo Motors with Processing and Arduino IDE, among other sources. I have listed all references in References

This is the code I used in the Processing IDE


                        
    import processing.serial.*; //Importing Processing library
    import controlP5.*; //Importing controlP5 library
    Knob KnobX; //call KnobX object from Knob class
    Knob KnobY; //call KnobY object from Knob class
    int xpos; // set xpos integer
    int ypos; // set ypos integer

    ControlP5 cp5; //create object cp5 from class ControlP5
    Serial myPort; //create object myPort from class Serial 

    void setup(){
    size(500,500); //set size of canvas/window
    frameRate(100); //set frame rate for animation
    printArray(Serial.list());
    myPort=new Serial(this, Serial.list()[4], 9600);
    cp5 = new ControlP5(this);
    PFont pfont = createFont("Arial",20,true); // use true/false for smooth/no-smooth
    ControlFont font = new ControlFont(pfont,15); //creating new object font from class ControlFont. Font size can be adjusted here
    
    KnobX = cp5.addKnob("Servo X")
            .setRange(0,180) //range of knob
            .setValue(0)  //set deafult value 
            .setPosition(150,25)  //set corordinates
            .setRadius(100) //adjust radius of knob
            .setNumberOfTickMarks(36) //add 36 tick marks that divide 180 degrees into 5 degree divisions
            .setTickMarkLength(10) //adjust length of tick marks
            .snapToTickMarks(true) //snap to 5 degree marks when dragging/moving pointer, angle varies in multiples of 5 degrees
            .setDragDirection(Knob.VERTICAL) //set drag direction
            .setFont(font); //adjust font size according to prespecified font size
    
    KnobY = cp5.addKnob("Servo Y")
        .setRange(0,180)
        .setValue(0)
        .setPosition(150,275)
        .setRadius(100)
        .setNumberOfTickMarks(36)
        .setTickMarkLength(10)
        .snapToTickMarks(true)
        .setDragDirection(Knob.VERTICAL)
        .setFont(font);
    }

    void draw(){
    background(0); //set background to black colour
    xpos=Math.round(KnobX.getValue()); //round pointer value in Knob X to nearest integer and store in xpos
    ypos=Math.round(KnobY.getValue()); //round pointer value in Knob Y to nearest integer and store in ypos
    myPort.write("x"); //Write 'x' as a byte through Serial Port
    //print("x");
    //print(xpos);
    myPort.write(xpos); //Write xpos as multiple bytes through Serial Port
    myPort.write("y"); //Write 'y' as a byte through Serial Port
    myPort.write(ypos); //Write ypos as multiple bytes through Serial Port
    }

This is the code I uploaded to the Xiao ESP32S3 board from Output Devices Week


                        
        #include <ESP32Servo.h>
        char xChannel='x', yChannel='y';
        Servo servoX, servoY;
        #define servoXpin D6
        #define servoYpin D7
        #define PULSEMIN 500
        #define PULSEMAX 2500
        
        char serialChar=0;
        void setup()
        {
            ESP32PWM::allocateTimer(0); //Allocate timer for pulse width modulation
            servoX.attach (servoXpin, PULSEMIN, PULSEMAX); //Set up servo X connection
            servoY.attach (servoYpin, PULSEMIN, PULSEMAX); //Set up servo Y connection
            Serial.begin(9600);  //Set up a serial connection for 9600 bps.
        }
        void loop(){
            while(Serial.available() ==0);  //Wait for a character on the serial port.
            serialChar = Serial.read();     //Returns data in ASCII format (eg: x100 is xd in ASCII)
            
            if(serialChar == xChannel){  //Check to see if the character is the servo ID (ie. x in ASCII format) for the servo X
            while(Serial.available() ==0);  //Wait for the second command byte from the serial port.
            servoX.write(Serial.read());  //Set the servoX position to the value of the second command byte (eg: d = 100) received on the serial port
            }
            else if(serialChar == yChannel){ //Check to see if the character is the servo ID (ie. x in ASCII format) for the servo Y
            while(Serial.available() <= 0);  //Wait for the second command byte from the serial port.
            servoY.write(Serial.read());   //Set the servoY position to the value of the second command byte received on the serial port
            }
        }

Conclusion

Mistakes, Solutions & Tips

Using Serial.parseInt: sends an additional value of '0' that messed with the code logic; used Serial.read to read as bytes which I manually converted into a integer data type.
Web Serial incompatible with Mozilla Firefox: Web Serial is compatible with Chromium browsers, eg: Google Chrome, Microsoft Edge

References

References to help reader understand in detail

Design Files

Click here to access the design files

Table of Contents

Week 14: Interface & Application Programming

Objectives

Training

Using Java Script to perform Document Object Model (DOM) Manipulation

Prompt 1: Explain this code to me

Key Features:

Dynamic Styling Logic:

Prompt 2: What do you call this type of DOM?

Prompt 3: Explain const inputValue = inputBox.value;

Prompt 4: else if (nameLen > 5 && < 9)

Prompt 5: Problem in this code

Line:

Fix:

Prompt 6: What is the error here?

❌ Error: Variable Shadowing

✅ Fix:

⚠️ Also recommended:

Connecting to ESP32 via Web Serial

Prompt 1: Explain this code async function sendMessage()

Prompt 2: Confirm if this LED toggle algorithm is used

Prompt 3: Why is .then() required here?

Prompt 4: What are the differences between .then and await?

Key Differences:

Prompt 5: Why does this use '\n' in some places but not others?

Prompt 6: Why is the lightbulb not visible?

Fix:

Prompt 7: What is crossorigin="anonymous"?

Prompt 8: Explain const inputValue = inputBox.value;

Prompt 9: What's wrong with this line? else if (nameLen > 5 && < 9)

Prompt 10: Problem in the code snippet with color logic

Prompt 11: Explain this serial connection code block

Prompt 12: What is { value, done } = await reader.read();

Prompt 13: Explain to someone with no coding experience

Prompt 14: Full explanation of the connectToSerial code

Prompt 15 Syntax of destructuring assignment

Prompt 16: Does break exit out of if or while?

Group Assignment

Individual Assignment

Controlling a Servo via Web Serial

Creating a Webpage

Prompt 1: Explain what this line of code does

Code Breakdown:

Example:

Prompt 2: Web Serial API - Continuous Read Example

✅ Full HTML + JavaScript Example:

💡 Notes:

Root Cause: Freezing After Serial Connect

❌ Problematic Code Example:

✅ Correct Version:

✔️ Add Try/Catch for Robustness:

Prompt 4: Add Disconnect Button

HTML:

JavaScript:

Prompt 5: Explain what this line of code does

Code Breakdown:

Example:

Prompt 6: What happens when the user cancels port selection?

Handling the Cancellation:

Prompt 7: What is TextDecoderStream in the Web Serial API?

Code Example:

How it works:

Prompt 8: How to handle errors while reading from serial port?

Error Handling Example:

Tips:

Prompt 9: Browser Compatibility of Web Serial API

Supported Browsers:

How to Check if Web Serial API is Supported:

Prompt 10: Difference between navigator.serial.requestPort() and navigator.serial.getPorts()

Code Breakdown:

Examples:

Prompt 11: What does port.open() do in the Web Serial API?

Code Breakdown:

Example:

Prompt 12: What does baudRate do when opening a serial port?

Example:

Prompt 13: How to send data to a serial port using the Web Serial API?

Code Example:

Prompt 14: What is the purpose of TextEncoder in the Web Serial API?

How it works:

Prompt 8: Explain `const inputValue = inputBox.value;`

Prompt 9: What's wrong with this line? `else if (nameLen > 5 && < 9)`

Prompt 12: What is `{ value, done } = await reader.read();`

Prompt 7: What is `TextDecoderStream` in the Web Serial API?

Prompt 10: Difference between `navigator.serial.requestPort()` and `navigator.serial.getPorts()`

Prompt 11: What does `port.open()` do in the Web Serial API?

Prompt 12: What does `baudRate` do when opening a serial port?

Prompt 14: What is the purpose of `TextEncoder` in the Web Serial API?

Prompt 17: What is `name=""` in a textarea?

Prompt 18: Syntax of `const input = document.getElementById('input').value;`