Introduction

In Week-6, we learned about Interface and Applications and explored different software and web-based tools. We worked with Processing, PictoBlox, Web Server, Blynk, p5.js, Blockly, and MIT App Inventor. We learned how to create interactive applications, control hardware through software, and communicate between devices. We also explored how web servers and Blynk can be used to control and monitor ESP32 devices remotely. Using Processing and p5.js, we learned to create simple graphical applications and games. Blockly and PictoBlox helped us understand programming using visual blocks. Overall, this week helped us understand the connection between programming, hardware, web applications, and IoT.

Individual Assignment

My individual assignment was to explore different interfaces and applications. I explored tools such as Processing, PictoBlox, Web Server, Blynk, p5.js, Blockly, and MIT App Inventor. I learned how these tools can be used to create applications, games, graphical interfaces, web interfaces, and mobile applications. I also explored how these applications can communicate with and control a microcontroller such as ESP32. This activity helped me understand different methods of application development and hardware interfacing.

Explore different interfaces and applications

1.Interfaces

An interface is a medium used for communication and interaction between two different devices, systems, or software. It allows devices to send and receive data. In our projects, interfaces were used to connect the ESP32 with different applications for controlling hardware and monitoring sensor data. This makes communication between hardware and software easier.

PICTOBLOX

What is PictoBlox?

PictoBlox is a block-based programming platform used to learn programming and create interactive projects. It allows users to program microcontrollers and electronic components using drag-and-drop blocks, which makes programming easier for beginners. PictoBlox can be used with Arduino, sensors, LEDs, motors, robotics, IoT, and AI projects. It helps users understand how software can communicate with and control hardware.

How i install Pictoblox

I searched for PictoBlox for Windows on Google.

opened the official PictoBlox download page and selected Windows.

clicked the Windows Installer 32-bit option to download PictoBlox

entered the required details and started the PictoBlox download.

The PictoBlox installer was downloaded successfully.

I opened the downloaded PictoBlox setup file to start the installation.

selected the installation folder and clicked the Install button.

PictoBlox was being installed on the computer.

The installation was completed, and I clicked Finish to launch PictoBlox.

Indiviual Asignment – Bounce Ball Game Using PictoBlox

As part of another individual assignment, I created a Bounce Ball Game using PictoBlox with block-based coding. I used different programming blocks to control the movement of the ball, detect collisions, and create the game logic. This assignment helped me understand basic programming concepts such as events, loops, conditions, variables, and sprite movement. Creating the game using block coding made it easier to understand programming logic and improved my problem-solving and interactive application development skills.

I opened PictoBlox

selected the Blocks option to create the game.

I added the ball and paddle sprites and set up the game background.

created the ball movement and bouncing logic using blocks.

programmed the paddle to move left and right using the arrow keys.

tested the game and checked whether the ball bounced correctly on the paddle.

Processing

Introduction

Processing is an open-source programming language and development environment used to create interactive graphics, animations, visualizations, and applications. It has a simple and user-friendly interface. Processing can also communicate with microcontrollers using serial communication. In this task, Processing was used as an interface to communicate with the XIAO ESP32-C3 and control one LED.

How I Installed Processing

1. I searched for Processing IDE on Google.
2. I opened the official Processing website.
3. I selected the Windows version and clicked Download.
4. After downloading, I opened the installer.
5. I followed the installation steps and completed the installation.
6. I opened Processing IDE.
7. I clicked on New Sketch to create a new program.

I searched for Processing IDE on Google.

I opened the official Processing website.

I selected the Windows version and clicked Download.

After downloading, I opened the installer.

I followed the installation steps and completed the installation.

I opened Processing IDE.

I clicked on New Sketch to create a new program.

Individual Assignment – Processing with XIAO ESP32-C3 and 1 LED

As part of my individual assignment, I installed and explored Processing software and learned about its interface and basic features. I connected the XIAO ESP32-C3 to a circuit containing one LED and established serial communication between Processing and the microcontroller. Processing was used to send commands to the XIAO ESP32-C3 to turn the LED ON and OFF. Through this activity, I learned how a computer application can be used as an interface to control physical hardware.

Arduino IDE Code

int ledPin = D0;

int ledPin = D0;

void setup() {
pinMode(ledPin, OUTPUT);
digitalWrite(ledPin, LOW);
Serial.begin(115200);
}

void loop() {
if (Serial.available()) {
char data = Serial.read();

if (data == '1') {  digitalWrite(ledPin, HIGH);}if (data == '0') {  digitalWrite(ledPin, LOW);}

}
}

• 1 → LED ON
• 0 → LED OFF

Processing IDE Code

import processing.serial.*;

Serial myPort;

void setup() {
size(400, 300);

// Change COM6 according to your XIAO ESP32-C3 port
myPort = new Serial(this, “COM6”, 115200);
}

void draw() {
background(240);

fill(0);
textAlign(CENTER);
textSize(30);
text(“LED CONTROL”, 200, 50);

// ON button
fill(0, 180, 0);
rect(75, 100, 100, 60);

fill(255);
textSize(20);
text(“LED ON”, 125, 137);

// OFF button
fill(200, 0, 0);
rect(225, 100, 100, 60);

fill(255);
text(“LED OFF”, 275, 137);
}

void mousePressed() {

// LED ON
if (mouseX > 75 && mouseX < 175 &&
mouseY > 100 && mouseY < 160) {
myPort.write(‘1’);
}

// LED OFF
if (mouseX > 225 && mouseX < 325 &&
mouseY > 100 && mouseY < 160) {
myPort.write(‘0’);
}
}

Experience – Processing

Working with Processing was an interesting experience because I learned how software can be used as an interface to control physical hardware. I installed Processing, explored its interface and basic functions, and connected it with the XIAO ESP32-C3. I used Processing to control one LED through serial communication. This activity helped me understand communication between a computer application and a microcontroller. It also improved my understanding of interactive programming and hardware-software integration.

Web Server

A web server is a system that stores, processes, and delivers web pages or data to users through a web browser over a network. In IoT and embedded systems, a microcontroller such as the XIAO ESP32-C3 can work as a simple web server by connecting to a Wi-Fi network and hosting a webpage.

Users can access the webpage by entering the device’s IP address in a web browser. The webpage can be used to view information or control connected devices such as LEDs, RGB LEDs, motors, and sensors.

Web servers are commonly used for remote monitoring, device control, automation, and displaying sensor data.

Individual Assignment – Web Server with XIAO ESP32-C3 to Control RGB LED

I used the XIAO ESP32-C3 to create a simple web server and connected it to a Wi-Fi network. I created a web interface to control an RGB LED. The IP address displayed in the Serial Monitor was entered into a web browser to open the control webpage. Using the buttons on the webpage, I controlled the RGB LED and changed its colours. This assignment helped me understand how a microcontroller can work as a web server and how Wi-Fi and a web browser can be used to control a physical device.

RGB CODE

#include <WiFi.h>

// Wi-Fi Details
const char* ssid = “YOUR_WIFI_NAME”;
const char* password = “YOUR_WIFI_PASSWORD”;

WiFiServer server(80);

// RGB LED pins
#define RED_PIN D0
#define GREEN_PIN D1
#define BLUE_PIN D2

void setup() {
Serial.begin(115200);

pinMode(RED_PIN, OUTPUT);
pinMode(GREEN_PIN, OUTPUT);
pinMode(BLUE_PIN, OUTPUT);

// RGB LED OFF
digitalWrite(RED_PIN, LOW);
digitalWrite(GREEN_PIN, LOW);
digitalWrite(BLUE_PIN, LOW);

// Connect to Wi-Fi
WiFi.begin(ssid, password);

Serial.print(“Connecting to Wi-Fi”);

while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(“.”);
}

Serial.println();
Serial.println(“Wi-Fi Connected!”);

Serial.print(“IP Address: “);
Serial.println(WiFi.localIP());

server.begin();
}

void loop() {

WiFiClient client = server.available();

if (!client) {
return;
}

String request = client.readStringUntil(‘\r’);
client.flush();

// RED
if (request.indexOf(“GET /red”) >= 0) {
digitalWrite(RED_PIN, HIGH);
digitalWrite(GREEN_PIN, LOW);
digitalWrite(BLUE_PIN, LOW);
}

// GREEN
if (request.indexOf(“GET /green”) >= 0) {
digitalWrite(RED_PIN, LOW);
digitalWrite(GREEN_PIN, HIGH);
digitalWrite(BLUE_PIN, LOW);
}

// BLUE
if (request.indexOf(“GET /blue”) >= 0) {
digitalWrite(RED_PIN, LOW);
digitalWrite(GREEN_PIN, LOW);
digitalWrite(BLUE_PIN, HIGH);
}

// WHITE
if (request.indexOf(“GET /white”) >= 0) {
digitalWrite(RED_PIN, HIGH);
digitalWrite(GREEN_PIN, HIGH);
digitalWrite(BLUE_PIN, HIGH);
}

// ALL OFF
if (request.indexOf(“GET /off”) >= 0) {
digitalWrite(RED_PIN, LOW);
digitalWrite(GREEN_PIN, LOW);
digitalWrite(BLUE_PIN, LOW);
}

// Webpage
String html = “”;

html += “”;
html += “”;
html += “”;
html += “”;
html += “RGB LED Control”;

html += “”;
html += “”;

html += “”;

html += “

RGB LED CONTROL

“;

html += ““;
html += “RED”;
html += “
“;

html += ““;
html += “GREEN”;
html += “
“;

html += ““;
html += “BLUE”;
html += “
“;

html += ““;
html += “WHITE”;
html += “
“;

html += ““;
html += “ALL OFF”;
html += ““;

html += “”;
html += “”;

// Send webpage
client.println(“HTTP/1.1 200 OK”);
client.println(“Content-Type: text/html”);
client.println(“Connection: close”);
client.println();
client.println(html);

delay(1);
client.stop();
}

p5.js

what is p5.js

p5.js is a JavaScript library used for creating interactive graphics, animations, drawings, and creative web applications. It provides simple functions for drawing shapes, adding colors, images, sounds, and user interactions such as mouse and keyboard actions. p5.js runs in a web browser, making it easy to create and test interactive projects. It is useful for learning programming, creative coding, animation, game development, and interactive web applications.

search p5.js on google

p5.js Web Editor Interface.

Individual Assignment – p5.js

As part of my individual assignment, I learned about p5.js and explored its Web Editor, coding structure, and basic functions. I used p5.js to create different games, pictures, animations, and interactive graphics by writing my own code with the help of ChatGPT AI for learning, understanding, and developing the programs. This activity helped me understand how code can be used to create visual and interactive applications. I learned about functions, shapes, colors, animations, user interaction, and game logic while experimenting with different projects. This assignment improved my programming skills and gave me practical experience in creative coding and interactive web development.

codes p5.js Car Dodging Game

let carX;
let carY;
let obstacleX;
let obstacleY;
let obstacleSpeed = 5;
let score = 0;
let gameOver = false;

function setup() {
createCanvas(500, 600);

carX = width / 2 – 25;
carY = height – 100;

obstacleX = random(50, width – 90);
obstacleY = -80;
}

function draw() {
background(100);

// Road
fill(50);
rect(50, 0, 400, height);

// Road lines
stroke(255);
strokeWeight(5);

for (let y = 0; y < height; y += 80) {
line(250, y, 250, y + 40);
}

noStroke();

if (!gameOver) {

// Player carfill(0, 150, 255);rect(carX, carY, 50, 80, 8);// Car windowsfill(200);rect(carX + 10, carY + 10, 30, 20);rect(carX + 10, carY + 50, 30, 20);// Obstacle carfill(255, 50, 50);rect(obstacleX, obstacleY, 50, 80, 8);// Move obstacleobstacleY += obstacleSpeed;// Move playerif (keyIsDown(LEFT_ARROW)) {  carX -= 6;}if (keyIsDown(RIGHT_ARROW)) {  carX += 6;}// Keep car inside roadcarX = constrain(carX, 55, 395);// Collision detectionif (  carX < obstacleX + 50 &&  carX + 50 > obstacleX &&  carY < obstacleY + 80 &&  carY + 80 > obstacleY) {  gameOver = true;}// New obstacleif (obstacleY > height) {  obstacleY = -80;  obstacleX = random(55, 395);  score++;}// Scorefill(255);textSize(22);text("Score: " + score, 20, 30);

} else {

fill(255);textAlign(CENTER);textSize(45);text("GAME OVER", width / 2, height / 2);textSize(22);text("Score: " + score, width / 2, height / 2 + 45);textSize(18);text("Press R to Restart", width / 2, height / 2 + 85);

}
}

function keyPressed() {

if ((key == ‘r’ || key == ‘R’) && gameOver) {
restartGame();
}
}

function restartGame() {

carX = width / 2 – 25;
obstacleX = random(55, 395);
obstacleY = -80;

score = 0;
gameOver = false;
}

5.Blockly Games

Blockly Games is a collection of educational games designed to teach programming concepts using block-based coding. It allows users to create programs by arranging and connecting visual blocks instead of writing traditional code. Through different interactive games and challenges, users can learn concepts such as sequence, loops, conditions, logic, and problem-solving. Blockly Games makes programming easier and more engaging for beginners and helps develop logical thinking and basic coding skills.

search blockly on google

blockly games interface

Individual Assignment – Blockly Games

As part of my individual assignment, I explored Blockly Games, a collection of educational games designed to teach programming concepts using block-based coding. Instead of writing code using traditional programming languages, I arranged and connected different blocks to create instructions and solve challenges. Through these games, I learned basic programming concepts such as sequence, loops, conditions, logic, and problem-solving. This activity made programming easier to understand and helped me develop logical thinking and coding skills in an interactive way.

Blockly Games: Maze

In this assignment, I worked with Blockly Games – Maze, where I used block-based coding to guide a character through a maze and reach the destination. I used programming blocks such as move forward, turn left, turn right, repeat until, and if path to create the required sequence of instructions. The assignment required me to understand the maze structure and arrange the blocks in the correct logical order so that the character could reach the target without getting stuck. This activity helped me understand loops, conditional statements, sequencing, and logical problem-solving through visual programming. It also improved my ability to develop programming logic without writing traditional text-based code.

Applications I Use

1.MIT App Inventor

MIT App Inventor and ESP32 LED Control

In my individual assignment, I developed a simple mobile application using MIT App Inventor to control an LED connected to an ESP32. The ESP32 was connected to the mobile phone through Wi-Fi, and the app was designed with buttons to turn the LED ON and OFF. When a button was pressed in the app, the ESP32 received the command and controlled the LED accordingly. This activity helped me understand MIT App Inventor, ESP32 Wi-Fi communication, app development, and IoT-based device control.

what is MIT app inventor

MIT App Inventor

MIT App Inventor is a web-based platform used to create mobile applications using a simple drag-and-drop interface and block-based programming. It allows users to develop Android applications without requiring advanced programming knowledge. In this assignment, MIT App Inventor was used to create a mobile application for controlling an LED connected to an ESP32. The app sends commands to the ESP32 through Wi-Fi, allowing the LED to be turned ON and OFF from the mobile phone.

steps a follow to create app on MIT app inventor

search MIT app inventor on google

open website and create account

click on new project

create a app interface as you need

go to the blocks

scan QR and download app on mobile

code

#include <WiFi.h>#include <WebServer.h>const char* ssid = "YOUR_WIFI_NAME";const char* password = "YOUR_WIFI_PASSWORD";WebServer server(80);const int ledPin = 2;void handleOn() {  digitalWrite(ledPin, HIGH);  server.send(200, "text/plain", "LED ON");}void handleOff() {  digitalWrite(ledPin, LOW);  server.send(200, "text/plain", "LED OFF");}void setup() {  Serial.begin(115200);  pinMode(ledPin, OUTPUT);  digitalWrite(ledPin, LOW);  WiFi.begin(ssid, password);  while (WiFi.status() != WL_CONNECTED) {    delay(500);    Serial.print(".");  }  Serial.println();  Serial.print("ESP32 IP Address: ");  Serial.println(WiFi.localIP());  server.on("/on", handleOn);  server.on("/off", handleOff);  server.begin();}void loop() {  server.handleClient();}

ESP32 Configuration

To connect the ESP32 with the MIT App Inventor application, the Wi-Fi network name and password were entered in the ESP32 program. The ESP32 was then connected to the same Wi-Fi network as the mobile phone. After successful connection, the ESP32 automatically displayed its IP address in the Serial Monitor. This IP address was used in the MIT App Inventor application to communicate with the ESP32 and control the LED. No IP address was required to be added manually to the ESP32 code.

Experience

In this activity, I learned how to create a mobile application using MIT App Inventor and connect it with an ESP32 through Wi-Fi. I learned how to enter the Wi-Fi details, find the ESP32 IP address, and use it in the mobile application. I also learned how to create ON and OFF buttons using block programming to control an LED. This activity gave me practical experience in app development, Wi-Fi communication, ESP32 programming, and basic IoT control.

2.blynk iot

what is Blynk

Blynk is an IoT platform used to connect, monitor, and control electronic devices through a mobile or web application. It allows a microcontroller such as the XIAO ESP32-C3 to communicate with a smartphone over the internet. Users can create a graphical interface using widgets such as buttons, switches, displays, and gauges. In this week, I used Blynk to create a mobile interface for controlling an LED and for displaying temperature and humidity data from a DHT22 sensor. Blynk is commonly used in IoT applications such as home automation, environmental monitoring, smart agriculture, and remote device control.

Log in and interface of blynk

Individual Assignment – LED Control Using Blynk

As part of my individual assignment, I used Blynk to create a mobile interface for controlling one LED connected to the XIAO ESP32-C3. I installed the Blynk application, created a project interface, and added a button to control the LED. The XIAO ESP32-C3 was connected to Wi-Fi and linked with the Blynk application. When I pressed the button on the mobile app, a command was sent to the XIAO ESP32-C3, which turned the LED ON or OFF. This assignment helped me understand how a mobile application can be used as an IoT interface to control physical devices remotely.

Create a Template by selecting new template

Create a Datastream and dashboard

edit template ID , template name , token number and wifi name password in the code and upload it in arduinoIDE

#define BLYNK_TEMPLATE_ID "TMPL36K5YoDc1"#define BLYNK_TEMPLATE_NAME "esp"#define BLYNK_AUTH_TOKEN "2aoak6gsYXFcgDgJ-m98syD3383bAj0F"#include <WiFi.h>#include <BlynkSimpleEsp32.h>char ssid[] = "karan";char pass[] = "12345678";#define LED_PIN 21BLYNK_WRITE(V0){  int value = param.asInt();  digitalWrite(LED_PIN, value);}void setup(){  Serial.begin(115200);  pinMode(LED_PIN, OUTPUT);  digitalWrite(LED_PIN, LOW);  Blynk.begin(BLYNK_AUTH_TOKEN, ssid, pass);}void loop(){  Blynk.run();}

Individual Assignment – Temperature and Humidity Monitoring Using Blynk

As part of my individual assignment, I used the DHT22 sensor, XIAO ESP32-C3, and Blynk to monitor temperature and humidity. The DHT22 sensor was connected to the XIAO ESP32-C3 to measure the surrounding temperature and humidity. The XIAO ESP32-C3 read the sensor values and sent the data through Wi-Fi to the Blynk platform. I created a mobile interface in Blynk to display the temperature and humidity readings using suitable widgets. This assignment helped me understand how sensor data can be collected by a microcontroller and displayed remotely on a mobile application using IoT technology.

create a new template for monitoring temperature and humidity

then create a datastream

then create a dashboard and upload a code in arduino IDE with template ID , template name , token number and wifi name password

Week 6 – Overall Experience

Week 6 was a very interesting and practical learning experience because I learned how interfaces and applications can be used to communicate with and control electronic systems. I explored different platforms such as Processing, p5.js, Blockly Games, PictoBlox, web servers, MIT App Inventor, and Blynk. Through individual assignments, I created a Bounce Ball game using PictoBlox, solved programming challenges using Blockly Games, created games and pictures using p5.js with the help of ChatGPT AI, and used Processing to control five LEDs connected to the XIAO ESP32-C3. I also created a web server to control three LEDs through a web browser.

I further explored IoT applications using Blynk, where I created a mobile interface to control an LED and monitored temperature and humidity using a DHT22 sensor connected to the XIAO ESP32-C3. These activities helped me understand the connection between hardware, software, web interfaces, and mobile applications. Overall, Week 6 improved my programming, problem-solving, IoT, and interface-design skills and gave me practical experience in developing interactive and connected applications .