Differences

This shows you the differences between two versions of the page.

Link to this comparison view

iothings:proiecte:2022sric:ledring [2023/05/28 13:20]
mihaela.nuta1207 [Snapshots of the Web App and Firebase Realtime Database]
iothings:proiecte:2022sric:ledring [2023/06/02 08:13] (current)
mihaela.nuta1207 [Components:]
Line 1: Line 1:
 ====== Led Ring with Web Application ====== ====== Led Ring with Web Application ======
-Author: ​Nuță ​Mihaela-Mădălina +Author: ​ --- //​[[mihaela.nuta1207@stud.acs.upb.ro|Mihaela-Mădălina ​NUȚĂ (101594)]] 2023/06/01 11:40//
 ===== Introduction ===== ===== Introduction =====
 The purpose of this project is to control a NeoPixel Led Ring in a beautiful manner. The purpose of this project is to control a NeoPixel Led Ring in a beautiful manner.
Line 16: Line 15:
   * Wires   * Wires
   * Breadboard   * Breadboard
 +  * Resistor
  
 ==== The electronic schema that I created with www.draw.io ==== ==== The electronic schema that I created with www.draw.io ====
Line 39: Line 39:
   * the color as an array of 3 values   * the color as an array of 3 values
  
-The microcontroller is reading from the database in a loop and based on the provided data, it changes the style of the led ring.+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 ==== ==== Snapshots of the Web App and Firebase Realtime Database ====
   - Style Selection   - Style Selection
-{{:​iothings:​proiecte:​2022sric:​rainbow.jpg?​300|}} +{{:​iothings:​proiecte:​2022sric:​rainbow.jpg?​200|}} 
-{{:​iothings:​proiecte:​2022sric:​styledb.png?​300|}}+{{:​iothings:​proiecte:​2022sric:​styledb.png?​250|}}
   - Color Selection   - Color Selection
-{{:​iothings:​proiecte:​2022sric:​colorpicker.jpeg?​300|}} +{{:​iothings:​proiecte:​2022sric:​colorpicker.jpeg?​200|}} 
-{{:​iothings:​proiecte:​2022sric:​colorpicker2.jpeg?​300|}} +{{:​iothings:​proiecte:​2022sric:​colorpicker2.jpeg?​200|}} 
-{{:​iothings:​proiecte:​2022sric:​colordb2.png?​300|}}+{{:​iothings:​proiecte:​2022sric:​colordb2.png?​250|}} 
 + 
 + 
 +==== Used Libraries ==== 
 + 
 +<​code>​ 
 +#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>​ 
 + 
 +==== Code ==== 
 + 
 +In order to connect to WIFI and Firebase I defined the following:​ 
 +<​code>​ 
 +#define WIFI_SSID _ 
 +#define WIFI_PASSWORD _ 
 +#define USER_EMAIL _ 
 +#define USER_PASSWORD _ 
 +#define API_KEY _ 
 +#define DATABASE_URL _ 
 +</​code>​ 
 + 
 +Some constants:​ 
 +<​code>​ 
 +#define PIN 25 
 +#define BUTTONPIN 26 
 +#define NUMPIXELS 12 
 +</​code>​ 
 + 
 +Pixels interactions:​ 
 +<​code>​ 
 +pixels.setBrightness(150);​ 
 +pixels.setPixelColor(idx,​ pixels.Color(rand() % 255, rand() % 255, rand() % 255)); 
 +pixels.rainbow();​ 
 +pixels.show();​ 
 +</​code>​ 
 + 
 +Firebase Realtime Database interactions:​ 
 +<​code>​ 
 +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);​ 
 +</​code>​ 
 + 
 +<​code>​ 
 +String changeType;​ 
 +if (Firebase.RTDB.get(&​fbdo,​ "/​data/​type"​)) 
 +
 +   ​changeType = fbdo.stringData();​ 
 +
 +</​code>​ 
 + 
 +Button interactions:​ 
 +<​code>​ 
 +pinMode(BUTTONPIN,​ INPUT); 
 +</​code>​ 
 +<​code>​ 
 +if (digitalRead(BUTTONPIN) == 1) 
 +    { 
 +      Firebase.RTDB.setString(&​fbdo,​ "/​data/​type",​ "​switch"​);​ 
 +      switchStyle = (switchStyle + 1) % 7; 
 +    } 
 +</​code>​ 
 + 
 +===== Demo ===== 
 +[[https://​www.youtube.com/​watch?​v=ww6ns7aVLCk]] 
 ===== Conclusion ===== ===== Conclusion =====
  
-===== Bibliography=====+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.
 +===== Bibliography=====
 +  * [[https://​firebase.google.com/​docs/​hosting/​quickstart]]
 +  * [[https://​forums.adafruit.com/​viewtopic.php?​t=41143]]
 +  * [[https://​alvarotrigo.com/​blog/​css-text-animations/​]]
 +  * [[https://​ocw.cs.pub.ro/​courses/​iothings/​laboratoare/​2022/​lab4]]
 +  * [[https://​ocw.cs.pub.ro/​courses/​iothings/​laboratoare/​2022/​lab3]]
 +  * [[https://​www.adafruit.com/​product/​1586]]
iothings/proiecte/2022sric/ledring.1685269225.txt.gz · Last modified: 2023/05/28 13:20 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