Static WiFi LED Visualizer
In no particular order.
1. Arduino
- Microcontrollers
- They open source their designs, so there are a lot of inexpensive off-brands.
- Generally cpp based
2. ESP8266
- Arduino compatible microcrontroller with WiFi.
- The one I usually get.
3. FastLED
- Arduino library for controlling LED strips
4. WS2812B RGB LED strip
- The type of RGB LED strip used in most of our projects
- The one I usually get.
5. ESP8266WiFI
- The library for using WiFi on an ESP8266
- Generally a drop in replacement for the standard WiFi arduino library
6. Arduino IDE
- Recommended Arduino IDE
- I don't actually use this, instead I use VSCode with the Arduino extension. However that still requires this and is not full-fledged yet, I use it since it's my IDE of choice.
- Needs set up to work with ESP8266's
7. MQTT
- The protocol I use for sending messages to wireless microcontrollers
- Uses a client / server architecture. Meaning it will need a server running on the network.
- Uses a "topic" subscription / publish method. ie (pseudo-code): subscribe("/this/is/a/topic", callbackFunction)
8. PubSubClient
- The library used to interface the ESP8266 with MQTT
9. Mosquitto
- The MQTT server I use. I have it on a VM, but it will work from a Raspberry Pi or such as well.
10. Node-RED
- A fantastic visual automation platform
- I use this despite being a web dev who could write my own automation scripts due to it's simplicity (and to make it accessible for friends who are not).
- The plugin I used to make the UI (I was in a hurry, but it ended up being good enough I never bothered to roll a custom one).
12. MQTT Explorer
- A good client for browsing + sending MQTT data while testing.
- Can technically control the lights so you don't need the node red stuff, but not recommended
Docs + Tutorials for the Above
13. ESP8266WiFi
15. Mosquitto
17. Classes in Arduino (as in object oriented programming, not school)
18. The repository for this project. (Note this is private... Message me Adam for access).
20. Best Arduino tutorial I know
21. Docs for Node-RED function nodes This allows you to use javascript for more custom nodes in Node-RED
23. More Raspberry Pi setup / tour
24. Basic Arduino serial communication example + more resources
26. More Arduino projects from Hackster
29. PubSubClient library documentation
General Web Development Basics
30. HTML (ie: what your browser downloads and renders - structured data-ish)
31. CSS (Styling the HTML)
32. JavaScript (Running client-side code - generally for manipulating the downloaded HTML or requesting more data)
33. Basic explanation of how loading a page works (client/server/dns)
34. My favorite web host + lots of good docs for everything related to web hosting (and general unix installations) - DigitalOcean
35. Good free place to host static websites - Netlify
36. SEO basics (Side note: giant link-dumps like this page? Not so great for SEO).
Finally
37. Yes, I actually did 37 ;).
This is by no means comprehensive or particularly cohesive. But it should hopefully be enough to let you work on the static LED visualizer and point you in the right direction for some basic web development concepts. If you want something more structured, I'd recommend udemy courses (but I haven't done many, so hard to specifically recommend one). Or CodeAcademy for better free options.
Diagrams
Not built to any standard, but helpful to visualize how the above work together.