Led Ring with Web Application

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


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


  • 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:

  1. predefined styles selection
  2. 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

  1. Style Selection

  1. 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"


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

#define WIFI_SSID _
#define USER_EMAIL _
#define API_KEY _
#define DATABASE_URL _

Some constants:

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

Pixels interactions:

pixels.setPixelColor(idx, pixels.Color(rand() % 255, rand() % 255, rand() % 255));

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:

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



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 :-D.


iothings/proiecte/2022sric/ledring.txt · Last modified: 2023/06/02 08:13 by mihaela.nuta1207
CC Attribution-Share Alike 3.0 Unported
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0