Week 12
This week was harder than expected. I got really stuck when I tried to use Firebase as my database. I think using ChatGPT to trouble shoot just make it worse unfortunately. Eventually I got something super basic that isn't relevant for my final project, but I wanted to at least complete the assignment :(
This one worked but not fully - it would communicate with my app.py file in VS code, but then I couldn't get it to communicate with Firebase :(
#include <WiFi.h>
#include <HTTPClient.h>
#include <Wire.h>
#include <MPU6050.h>
// WiFi credentials
const char* ssid = "xxx"; // Replace with your WiFi SSID
const char* password = "xxx"; // Replace with your WiFi password
// Server URL
const char* serverURL = "http://xxx:5500//update"; // Adjusted endpoint
// MPU6050 object
MPU6050 mpu;
// RGB values
int r = 0, g = 0, b = 0;
void setup() {
Serial.begin(115200);
// Connect to WiFi
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi...");
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("\nWiFi connected.");
Serial.print("ESP32 IP address: ");
Serial.println(WiFi.localIP());
// Initialize MPU6050
Wire.begin();
mpu.initialize();
if (!mpu.testConnection()) {
Serial.println("MPU6050 connection failed");
while (1);
}
}
void loop() {
// Read accelerometer values
int16_t ax, ay, az;
mpu.getAcceleration(&ax, &ay, &az);
// Map accelerometer values to RGB
r = constrain(map(ax, -17000, 17000, 0, 255), 0, 255);
g = constrain(map(ay, -17000, 17000, 0, 255), 0, 255);
b = constrain(map(az, -17000, 17000, 0, 255), 0, 255);
// Send data to the server
sendDataToServer(r, g, b);
delay(200); // Reduced delay for smoother updates
}
void sendDataToServer(int r, int g, int b) {
if (WiFi.status() == WL_CONNECTED) {
HTTPClient http;
// Construct JSON payload
String payload = "{\"r\":" + String(r) + ",\"g\":" + String(g) + ",\"b\":" + String(b) + "}";
// Initialize HTTP connection
http.begin(serverURL);
http.addHeader("Content-Type", "application/json");
// Send HTTP POST request
int httpResponseCode = http.POST(payload);
if (httpResponseCode > 0) {
String response = http.getString();
Serial.println("Response: " + response);
} else {
Serial.println("Error sending data: " + String(httpResponseCode));
}
http.end(); // Close the connection
} else {
Serial.println("WiFi not connected!");
}
}
So I then tried to just simply send the RBGs to a python script to show the RBG values live
It let me do this... but then wouldn't update the values or colors ...
Moving on -
This is the point where I gave up using Firebase and just tried to make the webpage directly from the softAP and a basic http page printed from the microcontroller. This one allows me to turn the neos off and on and change colors from my browser! Set up via a softAP and plugged in the wifi IP to view. See first video above for demo.
#include <WiFi.h>
#include <Adafruit_NeoPixel.h>
// Network credentials
const char* ssid = "ESP_AP";
const char* password = "123456789";
// NeoPixel setup
#define NEOPIXEL_PIN 2 // NeoPixel connected to GPIO2
#define NUM_PIXELS 16 // Number of NeoPixels in your strip
Adafruit_NeoPixel strip(NUM_PIXELS, NEOPIXEL_PIN, NEO_GRB + NEO_KHZ800);
// Web server setup
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Current NeoPixel state
bool neoPixelsOn = false;
uint32_t currentColor = strip.Color(255, 255, 255); // Default color (white)
void setup() {
Serial.begin(115200);
// Initialize NeoPixels
strip.begin();
strip.show(); // Initialize all pixels to 'off'
// Configure Soft-AP mode
WiFi.softAP(ssid, password);
Serial.println("Soft-AP mode initialized.");
// Print Soft-AP details
Serial.print("Host IP: ");
Serial.println(WiFi.softAPIP());
// Start the web server
server.begin();
Serial.println("Web server started.");
}
void loop() {
WiFiClient client = server.available(); // Listen for incoming clients
if (client) {
Serial.println("New Client.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
// Send HTTP response
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// Handle NeoPixel control
if (header.indexOf("GET /neopixel/on") >= 0) {
neoPixelsOn = true;
setNeoPixels(currentColor); // Turn on NeoPixels with the current color
} else if (header.indexOf("GET /neopixel/off") >= 0) {
neoPixelsOn = false;
turnOffNeoPixels();
} else if (header.indexOf("GET /neopixel/red") >= 0) {
currentColor = strip.Color(255, 0, 0); // Set color to red
if (neoPixelsOn) setNeoPixels(currentColor);
} else if (header.indexOf("GET /neopixel/green") >= 0) {
currentColor = strip.Color(0, 255, 0); // Set color to green
if (neoPixelsOn) setNeoPixels(currentColor);
} else if (header.indexOf("GET /neopixel/blue") >= 0) {
currentColor = strip.Color(0, 0, 255); // Set color to blue
if (neoPixelsOn) setNeoPixels(currentColor);
}
// HTML web page content
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<style>html { font-family: Arial; text-align: center;}");
client.println(".button { background-color: yellowgreen; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 20px; margin: 4px; cursor: pointer;}");
client.println(".button2 {background-color: gray;}</style></head>");
client.println("<body><h1>NeoPixel Web Control</h1>");
if (!neoPixelsOn) {
client.println("<p><a href=\"/neopixel/on\"><button class=\"button\">Turn On</button></a></p>");
} else {
client.println("<p><a href=\"/neopixel/off\"><button class=\"button button2\">Turn Off</button></a></p>");
}
client.println("<p>Set Color:</p>");
client.println("<p><a href=\"/neopixel/red\"><button class=\"button\">Red</button></a>");
client.println("<a href=\"/neopixel/green\"><button class=\"button\">Green</button></a>");
client.println("<a href=\"/neopixel/blue\"><button class=\"button\">Blue</button></a></p>");
client.println("</body></html>");
client.println(); // End HTTP response
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
header = ""; // Clear the header
client.stop(); // Close the connection
Serial.println("Client disconnected.");
}
}
void setNeoPixels(uint32_t color) {
for (int i = 0; i < NUM_PIXELS; i++) {
strip.setPixelColor(i, color);
}
strip.show();
}
void turnOffNeoPixels() {
for (int i = 0; i < NUM_PIXELS; i++) {
strip.setPixelColor(i, 0);
}
strip.show();
}
Final color box that worked... Except I had a lot of trouble trying to get the live update to work. I tried Firebase to help with the live updates but continued to get security warnings from my computer so I decided to pause and meet with Quentin to work through... This seems like a relatively easy but me and ChatGPT were both getting confused with this... will come back to it because I prefer to do this assignment not on a local network but through a real app.
#include <WiFi.h>
#include <Adafruit_NeoPixel.h>
#include <Adafruit_MPU6050.h>
#include <Adafruit_Sensor.h>
// Network credentials
const char* ssid = "ESP_AP";
const char* password = "123456789";
// NeoPixel setup
#define NEOPIXEL_PIN 2 // NeoPixel connected to GPIO2
#define NUM_PIXELS 16 // Number of NeoPixels in your strip
Adafruit_NeoPixel strip(NUM_PIXELS, NEOPIXEL_PIN, NEO_GRB + NEO_KHZ800);
// MPU6050 setup
Adafruit_MPU6050 mpu;
// Web server setup
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// RGB color values
uint8_t red = 0, green = 0, blue = 0;
void setup() {
Serial.begin(115200);
// Initialize NeoPixels
strip.begin();
strip.show(); // Initialize all pixels to 'off'
// Initialize MPU6050
if (!mpu.begin()) {
Serial.println("Failed to find MPU6050 chip!");
while (1);
}
Serial.println("MPU6050 initialized!");
// Configure MPU6050
mpu.setAccelerometerRange(MPU6050_RANGE_8_G);
mpu.setGyroRange(MPU6050_RANGE_500_DEG);
mpu.setFilterBandwidth(MPU6050_BAND_21_HZ);
// Configure Soft-AP mode
WiFi.softAP(ssid, password);
Serial.println("Soft-AP mode initialized.");
Serial.print("Host IP: ");
Serial.println(WiFi.softAPIP());
// Start the web server
server.begin();
Serial.println("Web server started!");
}
void loop() {
// Read MPU6050 data
sensors_event_t a, g, temp;
mpu.getEvent(&a, &g, &temp);
// Map accelerometer values to RGB
red = map(a.acceleration.x, -8, 8, 0, 255);
green = map(a.acceleration.y, -8, 8, 0, 255);
blue = map(a.acceleration.z, -8, 8, 0, 255);
// Update NeoPixel colors
setNeoPixels(strip.Color(red, green, blue));
// Check for HTTP client
WiFiClient client = server.available();
if (client) {
Serial.println("New Client.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
// Send HTTP response
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// HTML web page content
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<style>body { font-family: Arial; text-align: center; }");
client.println(".color-box { width: 200px; height: 200px; margin: 20px auto; border: 2px solid black; }</style>");
client.println("</head>");
client.println("<body><h1>MPU6050 RGB Visualizer</h1>");
// Display MPU6050 data
client.println("<h2>MPU6050 Values</h2>");
client.println("<p>Acceleration (m/s²):</p>");
client.println("<ul>");
client.printf("<li>X: %.2f</li>", a.acceleration.x);
client.printf("<li>Y: %.2f</li>", a.acceleration.y);
client.printf("<li>Z: %.2f</li>", a.acceleration.z);
client.println("</ul>");
client.println("<p>Gyroscope (°/s):</p>");
client.println("<ul>");
client.printf("<li>X: %.2f</li>", g.gyro.x);
client.printf("<li>Y: %.2f</li>", g.gyro.y);
client.printf("<li>Z: %.2f</li>", g.gyro.z);
client.println("</ul>");
client.println("<p>Temperature (°C):</p>");
client.printf("<p>%.2f</p>", temp.temperature);
// Display color box
client.println("<h2>Mapped RGB Color</h2>");
client.printf("<div class='color-box' style='background-color: rgb(%d, %d, %d);'></div>", red, green, blue);
// Refresh button
client.println("<p><button onclick='location.reload();'>Refresh</button></p>");
client.println("</body></html>");
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
header = ""; // Clear the header
client.stop();
Serial.println("Client disconnected.");
}
}
void setNeoPixels(uint32_t color) {
for (int i = 0; i < NUM_PIXELS; i++) {
strip.setPixelColor(i, color);
}
strip.show();
}
