This shows you the differences between two versions of the page.
|
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]] | ||