Interface and Application Programming
In this week, we are integrating an interface and application for our custom-made CNC board. If you’re interested in how to design and build your own board, check out Week 7 here.
Here are the tools I am using for this project:
Software:
- MIT App Inventor - Link to MIT App Inventor
- Arduino IDE - Link to Arduino IDE
MIT App Inventor - UI Explanation
I built the user interface step by step in the Designer area of the MIT App Inventor interface (see Image 1). There, I was able to easily add the required UI elements to the app interface using drag-and-drop:
- First, I selected the TextBox component under User Interface on the left side and dragged it into the screen area. This will later display the temperature and humidity values.
- Next, I added the Button component. This button will trigger the request to the web server to fetch the current sensor data.
- Optionally, I added Labels to neatly separate the temperature and humidity readings.
Image 1: MIT App Inventor Designer area
If you want to try this yourself: In the Designer area, simply select the desired component and drag it into the workspace. You can then adjust the properties on the right in the menu.
Once the interface was ready in the Designer, I created the logic for the HTTP requests in the Blocks area (see Image 2). Here, I defined the connections between the UI elements and the web server queries to ensure the data is displayed correctly.
Image 2: MIT App Inventor Blocks area
Block 1 (Server Communication Only): This code block performs HTTP requests to the server at fixed intervals to retrieve temperature and humidity data. After each request, the received data is directly processed and displayed in the temperature and humidity text labels.
Block 2 (Server Communication + UI): This extended code block combines data retrieval with the user interface. In addition to regularly fetching and updating the temperature and humidity values within the interface, it also manages a countdown in seconds and a progress indicator that visualizes the remaining time until the next update.
Hardware Setup
The sensor used is a DHT22, which measures both temperature and humidity. I connected it to the Xiao ESP32-C6 so that the sensor data is available through defined endpoints.
In week 9, I originally used a pulse sensor. I have now replaced it with the DHT22 temperature sensor.
Webserver Configuration
To easily retrieve the data, I configured the Xiao ESP32-C6 as a web server. The sensor data is available in the local network through the following endpoints:
- Temperature: http://192.168.178.158/temperature
- Humidity: http://192.168.178.158/humidity
If you want to replicate this, make sure the web server is correctly started and the IP address is correct. The endpoints return data in JSON format, which makes processing in the app much easier.
Code Used for Xiao ESP32-C6
#include <WiFi.h>
#include <WebServer.h>
#include <DHT.h> // Include the DHT sensor library
// WiFi Credentials
const char* ssid = "*"; // Your WiFi SSID
const char* password = "*"; // Your WiFi Password
// DHT Sensor Setup
#define DHTPIN 0 // Digital pin connected to the DHT sensor
#define DHTTYPE DHT22 // DHT 22 sensor type
DHT dht(DHTPIN, DHTTYPE); // Initialize DHT sensor object
// Webserver Setup
WebServer server(80);
// Global variables to store sensor data
float currentTemperature = 0.0; // Stores temperature
float currentHumidity = 0.0; // Stores humidity
unsigned long lastUpdate = 0; // Timer for sensor reading interval
const unsigned long updateInterval = 2000; // Update sensor data every 2 seconds
// Webserver handler for humidity requests
void handleHumidity() {
server.send(200, "text/plain", String(currentHumidity, 1)); // Send humidity with one decimal place
}
// Webserver handler for temperature requests
void handleTemperature() {
server.send(200, "text/plain", String(currentTemperature, 1)); // Send temperature with one decimal place
}
void setup() {
Serial.begin(115200); // Initialize serial communication
Serial.println("Booting ESP32-C6 with DHT22 Sensor Data and Webserver");
// Initialize DHT sensor
dht.begin();
// Connect to WiFi
WiFi.begin(ssid, password);
Serial.print("Connecting to WLAN");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nWLAN connected!");
Serial.print("IP-Adress: ");
Serial.println(WiFi.localIP());
// Define webserver endpoints
server.on("/humidity", handleHumidity);
server.on("/temperature", handleTemperature);
server.begin(); // Start the webserver
Serial.println("Webserver ready: /humidity and /temperature running");
Serial.println("Data will be reloaded every " + String(updateInterval / 1000) + " Seconds");
}
void loop() {
server.handleClient(); // Handle incoming client requests
unsigned long currentMillis = millis(); // Get current time
if (currentMillis - lastUpdate >= updateInterval) { // Check if it's time to read the sensor
lastUpdate = currentMillis; // Reset the timer
// Read humidity and temperature from DHT sensor
float h = dht.readHumidity();
float t = dht.readTemperature();
// Check if any reads failed and exit early (to try again).
if (isnan(h) || isnan(t)) {
Serial.println("Failed to read from DHT sensor!");
return;
}
// Update global variables with new readings
currentHumidity = h;
currentTemperature = t;
// Print the readings to the Serial Monitor
Serial.print("Measured: Temperature = ");
Serial.print(currentTemperature, 1); // One decimal place
Serial.print(" °C, and Humidity = ");
Serial.print(currentHumidity, 1); // One decimal place
Serial.println(" %");
}
}
The program sets up an ESP32-C6 microcontroller to read temperature and humidity data from a DHT22 sensor and makes this information accessible through a simple web server. After connecting to a specified WiFi network, the ESP32 initializes the DHT22 sensor and starts a web server on port 80. The server provides two endpoints: /temperature and /humidity. When accessed, these endpoints return the current temperature and humidity readings as plain text. The sensor data is refreshed every 2 seconds and stored in global variables. If the readings fail, an error message is displayed in the Serial Monitor, otherwise, the values are updated and printed to the console. This setup allows real-time monitoring of environmental conditions by simply accessing the ESP32’s IP address in a browser.
finish
what i learned in this week
This week, I focused on interface programming and worked intensively with the MIT App Inventor. Initially, I faced some challenges with the app integration, which led me to read through various documents and search for solutions on different websites. After gaining a deeper understanding of how to properly implement the app, it became much easier to use. However, integrating the Xiao ESP32-C6 proved to be more complicated. I first attempted to connect it to my smartphone via Bluetooth, only to realize that the ESP32-C6 only supports Bluetooth Low Energy (BLE), which is incompatible with my phone. Additionally, the serial interface also caused some issues, leading me to switch to a web server-based approach. This change significantly improved the connection and overall functionality, making the interface more reliable and efficient.
group website
Additionally, we compared different interface variants on the group’s website. It became clear that the solutions implemented by my colleagues worked significantly better and were much easier to handle for the week’s tasks. This comparison provided valuable insights into alternative approaches and their advantages in terms of simplicity and reliability.
Here you can watch our group website
file