Week 14. Interface and application¶

Hero Shot

This week we were introduced to a new software known as Processing and was also taught how to do coding using processing.

Assignments for the Week¶

Group Assignment:

Compare as many tool options as possible.
Document your work on the group work page and reflect on your individual page what you learned.

Link to our group assignment is here

key takeaways from this week

While you are writing processing code, never forget to mention the correct serial port name or else the interface won’t work out.
Processing sends numbers (0–255) through the USB cable and arduino hears these numbers and adjusts the input or output devices.
Coding on processing draws buttons, sliders, and pretty colors on your computer screen.

Individual Assignment:

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

Processing¶

Processing is a simple programming language and tool that helps people learn how to code by making art, animations, and interactive projects. It’s easy to use and was created to help artists and designers learn programming, and to help programmers explore visual ideas.

To start with processing, Firstly I had downloaded processing software from here

For this week’s assignment, I am using Processing. I want to control an inbuilt LED on my board, which I programmed using the Arduino IDE. I will use the Processing interface to send commands through serial communication.

Making Canvas¶

Step 1 - Making a simple Yellow canvas of 250px by 250px.

void setup(){
size(250,250); //250px by 250px canvas
}

void draw(){
background(255,255,0); //yellow background
}

After writing a simple code for creating canvas of 250 by 250 with its background as yellow, I just clicked on the play button to view the canvas.

To get a different colours we can play with the numbers(R,G,B)

Black (0,0,0)
yellow(255,255,0)
Red(255, 0, 0)
Green (0, 255, 0)
Blue (0, 0, 255)

Step 2 - Drawing 2D shape and writing text inside canvas:

To draw rectangle; type rect in the code
To draw circle: type circle in the code
To give fill inside shape: type fill >> give colour number (RGB)

Changes made in stroke weight includes change in stroke size

    void setup(){
    size(350,350); //350px by 350px canvas
    }

    void draw(){
    background(0,0,255); //Blue background
    stroke(255,255,0);
    strokeWeight(4); //stroke yellow colour
    fill(0,0,0);
    circle(width/2,height/2,55);//fill black colour
    }

Step 3 - To make a Pointer: No Cursor, mouseX, mouseY

        int posX = 150;

        void setup() {
        size(350, 350); // 350px by 350px canvas
        }

        void draw() {
        background(255, 255, 255); // White background

        // Draw line
        stroke(150); //line colour(gray)
        strokeWeight(2); // Line thickness
        line(2, height/2, width, height/2); // xy of start point,xy of end point

        // Draw cube
        noStroke(); // No outline for shape
        fill(150); // colour for shape(gray)
        rectMode(CENTER);

        // Constrain rectangle to visible area
        posX = constrain(mouseX, 15, width-15); // Keep rectangle fully visible
        rect(posX, height/2, 30, 30); // Center vertically
        }

For this week assignment, I tried to put Led “ON” and “OFF” by connecting it to pin A1 of my board Xiao Rp2040 by creating the Processing interface with a button that turns an LED ON/OFF.

Attached below is the code for processing which creates a GUI(Graphical User Interface) with a button that can communicate with the Xiao RP2040 via serial port of the computer.

        import processing.serial.*;

        Serial myPort;  // Create object from Serial class
        boolean buttonState = false;

        void setup(){
        size(350,350); //350px by 350px canvas
        myPort = new Serial(this, "COM11", 9600);
        }

        void draw(){
        background(0,0,255); //Blue background
        stroke(255,255,0);
        strokeWeight(4); //stroke yellow colour

        // Draw button
        if (buttonState) {
            fill(255, 0, 0); // Red when pressed
        } else {
            fill(0,0,0); // Black when not pressed
        }

        circle(width/2,height/2,55);
        }

        void mousePressed() {
        // Check if mouse is inside the circle
        if (dist(mouseX, mouseY, width/2, height/2) < 55/2) {
            buttonState = !buttonState; // Toggle state

            // Send '1' or '0' to Arduino
            if (buttonState) {
            myPort.write('1');
            } else {
            myPort.write('0');
            }
        }
        }

Explainations on the processing code

The processing code includes the GUI to create a canvas of size 350 pixels by 350 pixels with its background blue in colour. Secondly it also includes the circular button of stroke (thickness) 4, yellow in colour which is filled with black colour when mouse is not pressed and changes to red colour when we press the mouse. In addition to that I had also defined the port name as PORT ‘COM11” where the Arduino (Xiao RP2040) communicates via a virtual serial port over USB because without the correct port, Processing won’t know where to send/receive data.

Attached below is the code for arduino which;

Acts as a bridge between the Processing GUI (software) and the LED (hardware).
Listens for serial commands.
Controls the actual hardware (LED on pin A1).
Manages electrical signals safely.
Processing cannot directly control hardware pins.

Arduino ensures safe, reliable, and real-time hardware interaction.

    const int ledPin = A1; // LED connected to digital pin 13
    int incomingByte = 0;   // for incoming serial data

    void setup() {
    pinMode(ledPin, OUTPUT);
    Serial.begin(9600); // opens serial port, sets data rate to 9600 bps
    }

    void loop() {
    // send data only when you receive data:
    if (Serial.available() > 0) {
        // read the incoming byte:
        incomingByte = Serial.read();

        // if received '1', turn on LED
        if (incomingByte == '1') {
        digitalWrite(ledPin, HIGH);
        } 
        // if received '0', turn off LED
        else if (incomingByte == '0') {
        digitalWrite(ledPin, LOW);
        }
    }
    }

Secondly I tried to increase and decrease the brightness of inbuilt Led of my board which is connected to pin A0 by creating the Processing interface with a horizontal slider that increases and decreases the inbuilt Led.

Attached below is the code for processing which creates a GUI(Graphical User Interface) with a horizontal slider that can communicate with the Xiao RP2040 via serial port of the computer “COM11”

        import processing.serial.*;

        Serial myPort;  // Serial port object
        int posX = 150; // My original variable

        void setup() {
        size(350, 350); // My canvas size
        myPort = new Serial(this, "COM11", 9600);
        }

        void draw() {
        background(255, 255, 255); // White background

        // Draw line
        stroke(150); // line colour
        strokeWeight(2); 
        line(2, height/2, width, height/2);

        // Draw cube
        noStroke();
        fill(150); // colour for shape
        rectMode(CENTER);
        posX = mouseX;

        // Constrain X-position and map to brightness (0-255)
        posX = constrain(posX, 15, width-15); // Keep rectangle visible
        int brightness = (int)map(posX, 15, width-15, 0, 255); // Left=0, Right=255
        rect(posX, height/2, 30, 30); // Your original rectangle

        // Send brightness to Arduino (only added part)
        myPort.write(brightness); 
        }

Attached below is the code for arduino

        const int ledPin = A0;

        void setup() {
        pinMode(ledPin, OUTPUT);
        Serial.begin(9600);
        }

        void loop() {
        if (Serial.available() > 0) {
            int brightness = Serial.read();
            analogWrite(ledPin, brightness); // Set LED brightness
        }
        }

Next I tried to explore the Blynk app and tried to put Led ON and OFF through my mobile and so for that firstly I downloaded the blynk app in my mobile phone.

After that I tried opening the blynk app from my computer too by signing up and creating the user account and for that I had referred to this tutorial for setting up the blynk app.

Steps to create the New Template

I typed the blynk app in my computer and clicked on it to open the app

I created the new template after opening the blynk app page

Next I had given the project name, selected the board, selected the mode of connection and clicked on Done.

Followed by that, I clicked on the new datastream and selected the virtual pin

After that I kept the name as LED, selected the pin as V0, selected the data type to integer and clicked on create

Then next I clicked on the web dashboard and dragged the symbol of switch in the dashboard and set the datastream by clicking on V0 and then clicked on save option

Next I clicked on the mobile dashboard and clicked on save option

I then clicked on the device, added new device from the template

After that I had selected my project name and clicked on create

Next I opened the blynk app in my phone and carried out some of the steps mentioned below so that I can control Led from my phone;

Followed by that I went for setting up my layout and for that I had connected the external Led to D2 pin of Xiao RP2040 by defining all the necessary credentials that are required for connecting blynk app.

Attached below is the code which I used for blinking LED with blynk app.

        #define BLYNK_TEMPLATE_ID "TMPL6Ut4YoCeb"
        #define BLYNK_TEMPLATE_NAME "first project"
        #define BLYNK_AUTH_TOKEN "MBqioQihYa3qHcc5PE-et2cR06yGbrby"

        #include <WiFi.h>
        #include <BlynkSimpleEsp32.h>

        // Replace with your WiFi credentials
        char ssid[] = "redmi";
        char pass[] = "Jnwsfl@2025";

        // LED pin (D2 on ESP32-C3 is GPIO 4)
        const int ledPin = 4;

        // Called when the Blynk app writes to Virtual Pin V0
        BLYNK_WRITE(V0) {
        int ledState = param.asInt(); // Get value from app
        digitalWrite(ledPin, ledState);
        }

        void setup() {
        // Start serial for debug
        Serial.begin(115200);

        // Set LED pin as output
        pinMode(ledPin, OUTPUT);

        // Connect to WiFi and Blynk
        Blynk.begin(BLYNK_AUTH_TOKEN, ssid, pass);
        }

        void loop() {
        // Run Blynk tasks
        Blynk.run();
        }

In the above code, those were the areas where I had entered some of the credentials for using blynk app

Disclaimer: All the Assignments and Documentations are done and written by me and for getting clear concepts of processing and how it works, I had gone through the documentation of some of the previous fabacademy graduates. In addition to that I had also referred to chatgpt.

Files for the week