14. Interface and Application Programming
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.
Processing
To create a Processing application, we follow Rico's tutorial as our primary reference. The development process includes these key steps. Designed for beginners, Rico San tutorial provides a clear, structured pathway to learn essential Processing concepts.
Getting started with processing
//Basic Processing Program
//by Rico Kanthatham
//May 5, 2022
//setup is an initialization function...runs once at the beginning of the program
void setup(){
(insert some code here...);
}
//draw is a loop function...runs repeatedly until stopped
void draw(){
(insert some code here...);
}
Make a Colorful Canvas
Let’s make a 300px by 300px square canvas >> size(width, height), background(30)
void setup(){
size(500,500); //make a drawing canvas...width and height in pixels as parameters
}
void draw(){
background(100); //canvas color...0 is black, 255 is white
}
Draw Shapes & Text
We made the ‘2D Primitive’ shapes...rectangle, circle, etc...and text
Drawing circle inside the canva
void setup(){
size(400,400);
}
void draw() {
background(150,0,0);
stroke(0,200,200);
strokeWeight(8);
circle(width/2, height/2, 40);
}
Writing the text inside the canva
void setup(){
size(500,500); //pixels
}
void draw(){
background(100); //greyscale...0 is black, 255 is white
stroke(0,0,200);
strokeWeight(2);
fill(100, 200, 50);
circle(width/2, height/2, 200);
stroke(100,100,100);
fill(200, 60, 0);
textSize(30);
text("Click me!", width/2-50, height/2);
}
Make a Pointer: noCursor, mouseX, mouseY
String s = "Click me!"; //create a string datatype variable
int posX = 250;
void setup(){
size(300,300); //pixels
noCursor();
}
void draw(){
background(100); //greyscale...0 is black, 255 is white
//Button
stroke(0,0,200);
strokeWeight(5);
fill(100, 200, 50);
circle(width/2, height/2, 100);
//Pointer
fill(200,100,0);
noStroke();
circle(mouseX, mouseY, 30);
}
Blynk
Is the online platform where we can
Blynk¶ Blynk is a platform that helps you connect microcontrollers like Arduino and Raspberry Pi to the internet.
It supports different ways to connect your board to the Blynk Cloud or your own Blynk server. These include:
-
Ethernet
-
Wi-Fi
-
Bluetooth
-
Cellular
-
Serial
Blynk has three main parts:
Blynk app builder – Lets you create apps using widgets. It works on Android and iOS.
Blynk server – Manages communication between your phone and the hardware. You can use the Blynk Cloud or set up your own local server. It’s open source and runs even on a Raspberry Pi.
Blynk libraries – Help your microcontroller talk to the server and handle commands from the app. They support many popular boards.
ESP32 webserver - Arduino IDE
We got the code from this page. We did a simple example to illustrate how to build a web server that controls outputs. In our case we want to control the t led using the webserver.
/*********
Rui Santos
Complete project details at https://randomnerdtutorials.com
*********/
#include <WiFi.h>
// Replace with your actual network credentials
const char* ssid = "Fablab"; // Replace with your WiFi name
const char* password = "#JSW@2o25"; // Replace with your WiFi password
WiFiServer server(80);
String header;
String outputD10State = "off"; // This is the correct variable name
const int outputD10 = 10; // Using GPIO number (D10 corresponds to GPIO10)
unsigned long currentTime = millis();
unsigned long previousTime = 0;
const long timeoutTime = 2000;
void setup() {
serial.begin(115200);
pinMode(outputD10, OUTPUT);
digitalWrite(outputD10, LOW);
WiFi.mode(WIFI_STA); // Set as station mode
WiFi.disconnect(); // Clear any previous connections
delay(100);
Serial.println("\nScanning available networks...");
int n = WiFi.scanNetworks();
if (n == 0) {
Serial.println("No networks found!");
} else {
Serial.print(n);
Serial.println(" networks found:");
for (int i = 0; i < n; ++i) {
Serial.print(i + 1);
Serial.print(": ");
Serial.print(WiFi.SSID(i));
Serial.print(" (");
Serial.print(WiFi.RSSI(i));
Serial.print(" dBm) ");
Serial.println((WiFi.encryptionType(i) == WIFI_AUTH_OPEN)?" ":"*");
delay(10);
}
}
Serial.print("\nConnecting to: ");
Serial.println(ssid);
WiFi.begin(ssid, password);
unsigned long startAttemptTime = millis();
while (WiFi.status() != WL_CONNECTED && millis() - startAttemptTime < 30000) {
delay(500);
Serial.print(".");
}
if (WiFi.status() != WL_CONNECTED) {
Serial.println("\nConnection Failed! Detailed status:");
switch (WiFi.status()) {
case WL_IDLE_STATUS: Serial.println("WiFi idle"); break;
case WL_NO_SSID_AVAIL: Serial.println("SSID not available"); break;
case WL_SCAN_COMPLETED: Serial.println("Scan completed"); break;
case WL_CONNECTED: Serial.println("Connected"); break;
case WL_CONNECT_FAILED: Serial.println("Connection failed"); break;
case WL_CONNECTION_LOST: Serial.println("Connection lost"); break;
case WL_DISCONNECTED: Serial.println("Disconnected"); break;
default: Serial.println("Unknown status"); break;
}
Serial.print("RSSI at failure location: ");
Serial.println(WiFi.RSSI());
while (true) delay(1000); // Halt
}
Serial.println("\nConnected successfully!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
WiFiClient client = server.available();
if (client) {
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client.");
String currentLine = "";
while (client.connected() && currentTime - previousTime <= timeoutTime) {
currentTime = millis();
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// Control GPIO
if (header.indexOf("GET /D10/on") >= 0) {
Serial.println("GPIO D10 on");
outputD10State = "on";
digitalWrite(outputD10, HIGH);
} else if (header.indexOf("GET /D10/off") >= 0) {
Serial.println("GPIO D10 off");
outputD10State = "off";
digitalWrite(outputD10, LOW);
}
// HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
client.println("<body><h1>XIAO ESP32 C3</h1>");
// Fixed line - using outputD10State instead of output10State
client.println("<p>GPIO D10 - State " + outputD10State + "</p>");
if (outputD10State == "off") {
client.println("<p><a href=\"/D10/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/D10/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
header = "";
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}
- This code transforms your XIAO ESP32 C3 board into a WiFi-controlled smart switch that lets you turn devices on/off through a simple webpage. After connecting to your WiFi network (using your provided credentials), it creates a local web server accessible from any phone or computer on the same network. When you visit the board's IP address in a browser, you'll see ON/OFF buttons that send commands to control GPIO pin 10 . Each button press makes your browser send either a "GET /D10/on" or "GET /D10/off" request, which the board processes to physically toggle the connected LED or device while providing real-time feedback in the Serial Monitor.
Files
Files for the week can be download from here