ShinyThinks
Projects Blog About

37 Things to Know

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

3. FastLED

  • Arduino library for controlling LED strips

4. WS2812B RGB LED strip

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).

11. Node-RED Dashboard

  • 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

14. Installing Node-RED

15. Mosquitto

16. Raspberry Pi Docs

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).

19. Decent FastLED tutorial

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

22. Raspbian / Pi set up

23. More Raspberry Pi setup / tour

24. Basic Arduino serial communication example + more resources

25. Instructables Arduino

26. More Arduino projects from Hackster

27. Using JSON in Arduino

28. An instructables account

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.

Network Diagram

 

Control Flow

 

2 Comments

cbd oil
May 4, 2020, 1:52 a.m.
What's up to every one, it's genuinely a pleasant for me to pay a quick visit this web page, it consists of helpful Information.
Royal CBD
May 26, 2020, 9:17 p.m.
Excellent items from you, man. I have take note your stuff prior to and you're just too fantastic. I actually like what you have got right here, really like what you're saying and the way in which you say it. You make it entertaining and you still take care of to keep it wise. I cant wait to learn much more from you. That is really a terrific site. P.S. If you have a minute, would love your feedback on my new website re-design. You can find it by searching for «royal cbd» — no sweat if you can’t. Keep up the good work!