Led Ring with Web Application

Author: — Mihaela-Mădălina NUȚĂ (101594) 2023/06/01 11:40

Introduction

The purpose of this project is to control a NeoPixel Led Ring in a beautiful manner.

The user should be able to control it using a simple web application or a push button. The web page provides several predefined styles that can be selected or a color picker that can be used in order to select a specific color. The push button can be used to cycle through all the predefined styles.

Hardware Description

Components:

ESP32 Microcontroller
NeoPixel Led Ring
Push Button
Wires
Breadboard
Resistor

The electronic schema that I created with www.draw.io

Software Description

The flow of the project

The web application was created using Javascript, HTML and CSS and deployed using Firebase Hosting https://firebase.google.com/docs/hosting/quickstart.

The application gives the possibility to control the NeoPixel LedRing in 2 ways:

predefined styles selection
color picker

When having a style selected, the application writes into the database 2 variables:

type of selection: style
the name of the selected style

When having a color selected, the application writes into the database 2 variables:

type of selection: color
the color as an array of 3 values

When switching the style using the button, the microcontroller is setting the selected style as switch and it loops through the styles until another action is made using the Web Application.

The microcontroller is connected to the WIFI. Using the WIFI connection, it is reading from the database in a loop and based on the provided data, it changes the style of the led ring.

Snapshots of the Web App and Firebase Realtime Database

Style Selection

Color Selection

Used Libraries

#include <iostream>
#include <Adafruit_NeoPixel.h> // to control the NeoPixel Ring
#include <WiFi.h> // to connect the ESP32 microcontroller to WIFI
#include <Firebase_ESP_Client.h> // used for Firebase Realtime Database
#include "addons/TokenHelper.h"
#include "addons/RTDBHelper.h"

Code

In order to connect to WIFI and Firebase I defined the following:

#define WIFI_SSID _
#define WIFI_PASSWORD _
#define USER_EMAIL _
#define USER_PASSWORD _
#define API_KEY _
#define DATABASE_URL _

Some constants:

#define PIN 25
#define BUTTONPIN 26
#define NUMPIXELS 12

Pixels interactions:

pixels.setBrightness(150);
pixels.setPixelColor(idx, pixels.Color(rand() % 255, rand() % 255, rand() % 255));
pixels.rainbow();
pixels.show();

Firebase Realtime Database interactions:

FirebaseJsonArray dbColor;
if (Firebase.RTDB.getArray(&fbdo, "/data/color"))
{
  dbColor = fbdo.jsonArray();
}
FirebaseJsonData r, g, b;
dbColor.get(r, 0);
dbColor.get(g, 1);
dbColor.get(b, 2);

uint32_t color = pixels.Color(r.intValue, g.intValue, b.intValue);

String changeType;
if (Firebase.RTDB.get(&fbdo, "/data/type"))
{
   changeType = fbdo.stringData();
}

Button interactions:

pinMode(BUTTONPIN, INPUT);

if (digitalRead(BUTTONPIN) == 1)
    {
      Firebase.RTDB.setString(&fbdo, "/data/type", "switch");
      switchStyle = (switchStyle + 1) % 7;
    }

Demo

https://www.youtube.com/watch?v=ww6ns7aVLCk

Conclusion

The Led Ring can be easily controlled using both the web application and the push button.

A missing functionality could be the possibility to create more user accounts in order to let every user to define its own set of predefined styles. It could be nice .