14.Interface and Application Programming¶

heroshot

Assignments for week 14:¶

1. Group Assignment

compare as many tool options as possible

2. Individual Assignment

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

1. Group Assignment.¶

Our group Assignment link is here

Learnings outcomes from the group assignment:¶

I have learned to use IoT platforms like Blynk from web server as well as from mobile phone which are used for communicating and interfacing.I have also learned on using the Processing software to draw simple canvas and got basic familirization on the commands like defining size, basic shapes, background,fill, stroke.I have got idea to interface between the Arduino IDE and Processing software using the serial communication between them.

2. Individual Assignment.¶

Assignment using Processing software to canvas button for ON/OFF with Arduino IDE.¶

Processing software has been the free and open source to run on windows and Mac OS, and can be used as a development tool.It is helpful in creating visual, interactive media that appears on the screen while using it.It is a flexible software sketchbook and a language for learning how to code, making it good for learning as well as prototyping. Processing is based on java langauge.You can refer more about it from my reference link here.

For my first assignment, I wanted to try interfacing between the Processing and Arduino IDE by making sketch for Button to control Built-in LED of my fabricated PCB.

These are the following steps involved for this work.

I downloaded the Processing IDE from this link and opened.
I made canvas for a window of size 300 pixle by 300 pixle and added background with 240 as light gray.
Next, i defined my button circle at 150 to x-axis and 150 y-axis with its diameter of 100.
I kept fill color as green when it is’ON’ and red when it is ‘OFF’.Followed by adding text inside the circle when its font size 16.And i wanted my Text color as black when LED is on and white text when my LED is off.
I wanted to monitor the state of my built-in LED by pressing inside the circle.
I checked if my canvas was working and i found it was working.

Here is the Processing code that i have developed.

int ledState = 0; // 0 for off, 1 for on
int circleX = 150;
int circleY = 150;
int circleDiameter = 100;

void setup() {
  size(300, 300); // Set the window size
  textAlign(CENTER, CENTER); // Center the text inside the circle
  textSize(16); // Set the text size
}

void draw() {
  background(240); // Set the background color

  // Draw the "LED" as a circle
  if (ledState == 1) {
    fill(0, 255, 0); // Green when LED is on
  } else {
    fill(255, 0, 0); // Red when LED is off
  }

  ellipse(circleX, circleY, circleDiameter, circleDiameter); // Draw the circle

  // Draw the text inside the circle
  if (ledState == 1) {
    fill(0); // Black text when LED is on
    text("My LED On", circleX, circleY); // Display "LED On"
  } else {
    fill(255); // White text when LED is off
    text("My LED Off", circleX, circleY); // Display "LED Off"
  }
}

// Detect mouse press
void mousePressed() {
  // Check if the mouse is inside the circle
  float distToCenter = dist(mouseX, mouseY, circleX, circleY);

  if (distToCenter <= circleDiameter / 2) {
    ledState = (ledState == 0) ? 1 : 0; // Toggle the LED state
  }
}

Since my Built-in LED was in pin D0, so i am using this for Arduino IDE.

#define LED_PIN D0  // D0 is GPIO10 on XIAO ESP32-C3

void setup() {
  pinMode(LED_PIN, OUTPUT);  // Set the pin as output
}

void loop() {
  digitalWrite(LED_PIN, HIGH);  // Turn LED on
  delay(1000);                  // Wait 1 second
  digitalWrite(LED_PIN, LOW);   // Turn LED off
  delay(500);                  // Wait 1 second
}

However, i went through chatGPT and refined my code and as i wanted to make it serial command using processing.

So, here is the Arduino IDE code.

#define LED_PIN D0  // D0 is GPIO10 on XIAO ESP32-C3

void setup() {
  pinMode(LED_PIN, OUTPUT);   // Set the pin as output
  Serial.begin(9600);         // Start serial communication
}

void loop() {
  if (Serial.available() > 0) {
    char command = Serial.read();  // Read 1 byte from serial

    if (command == '1') {
      digitalWrite(LED_PIN, HIGH); // Turn LED ON
    } else if (command == '0') {
      digitalWrite(LED_PIN, LOW);  // Turn LED OFF
    }
  }
}

I selected ‘COM13’ for the Arduino IDE and compiled and uploaded the code.I put off the serial monitor as i wanted to run the processing code.
I opened Processing Software and added serial communication and added the ‘COM13’ as port.

Here is the final Processing IDE code for Built in LED after adding defining serial communication and port.

import processing.serial.*;

Serial myPort;
int ledState = 0;

int circleX = 150;
int circleY = 150;
int circleDiameter = 100;

void setup() {
  size(300, 300);
  textAlign(CENTER, CENTER);
  textSize(16);

  // List available ports (helpful for debugging)
  println(Serial.list());  // <<<<< Check console for correct COM port

  // Replace with actual port from the list (e.g., "COM13")
  myPort = new Serial(this, "COM13", 9600); 
}

void draw() {
  background(240);

  if (ledState == 1) {
    fill(0, 255, 0);
    text("LED ON", circleX, circleY);
  } else {
    fill(255, 0, 0);
    text("LED OFF", circleX, circleY);
  }

  ellipse(circleX, circleY, circleDiameter, circleDiameter);
}

void mousePressed() {
  float d = dist(mouseX, mouseY, circleX, circleY);
  if (d < circleDiameter / 2) {
    ledState = (ledState == 0) ? 1 : 0;

    if (ledState == 1) {
      myPort.write('1');
    } else {
      myPort.write('0');
    }
  }
}

Next, i had clicked on ‘Import Library’ under ‘Sketch’ and clicked to select ‘Serial’.

Finally i have clicked to run the processing IDE code along with the Arduino IDE code, where i could monitor to control my Built-in LED with my on/off button.

Learning Outcomes from this assignment¶

I learned using Arduino IDE and Processing software to interface using the serial communication.Processing is based on java langauge which is helpful for programming for beginners.It was must to define the processing serial and we have to give the right COM port define to interact.Whenever, we are interfacing using the two programming softwares, i had to upload the code with identified COM port one at at time.

Disclaimer : I have referred chatGPT for this assignment and the prompts i give are mentioned as i documentated.

Files.¶

Here is the codes i used for this assignment in Arduino and processing codes