IoT Whiteboard Dashboard

About: We are two brothers who like to make things.

Will I need an umbrella today? Am I Instructables-famous? Snow day? Good wind speed to fly drone? Bus almost here? TV show on soon? You can train IoT whiteboard to find and display answers to all these questions via a convenient and remote web app that pairs the IoT whiteboard to APIs across the web.

Circuit simplicity is optimized by using only 60 pure red, green, or blue WS2812B LEDs.

Cheap - core parts cost < $15 USD in total.

This is a looping GIF-based instructable so please let me know if you are having trouble viewing the GIFs.

Supplies:

You will need:

Wemos D1 Mini - https://www.banggood.com/custlink/GvvK5E8B0P

WS2812B Addressable LED Strip (You must cut down to 60 LEDs with scissors) - https://www.banggood.com/custlink/3GmmFR9ee8

Soldering Iron & 60/40 Rosin Core Lead Solder: https://www.banggood.com/custlink/DmKDPhZ6e6

5V 2A+ Power Supply - Must be at least 2 amps. - I used a cut USB cable and a 2.1A USB Charger. https://www.banggood.com/custlink/mD3K5Y9egq

Hot Glue Gun with Sticks: https://www.banggood.com/custlink/KKvKHhSNEe

Whiteboard or Acrylic Sheet and Dry Erase Marker: https://www.ebay.com/itm/16-24-35-47-Aluminum-Fra...

The zipped files from https://github.com/donovanmagryta/ESP8266-LED-API

Step 1: API Huh?

The source of the information we want to fetch for our IoT whiteboard will come from external servers that hold the information. 'API' stands for application-programming-interface. This simply means an interface for requesting data from these external servers.

Thankfully, there are hundreds of publicly accessible, free APIs to connect to. We will focus on the APIs that don't require a password or API key, however you can usually simple append the API key you could want by appending "?apikey=myapikeyhere" to the URL of the API you are connecting to. Each API may have a different way the authentication key needs to be spelled out but documentation is abundant

Here's a massive list of free public APIs: https://github.com/toddmotto/public-apis

For further reading about APIs, see this link: https://medium.freecodecamp.org/what-is-an-api-in-english-please-b880a3214a82

Step 2: Setup Web App Host

Sign up for a free PHP web hosting service such as at https://www.000webhost.com. I'm not affiliated with 000webhost, but it's a convenient and accessible service.

Step 3: Create a New Site

Pick your website domain name.

Step 4: Upload Your Web App

Load the led.php file onto the site in the file manager area.

Step 5: Match the URLs

Modify the url in the led.php script to match the url of your website.

Step 6: Install the Driver and Software

Unzip the files.

Install the CH340 drivers.

Step 7: Install MicroPython Firmware

Open up UPyCraft from the unzipped folder and select board-->ESP8266.

Select the active USB port.

Open "burn firmware".

Set flash erase=ON.

Under "Custom Firmware", select the micropython.bin file you downloaded earlier and hit "flash".

Step 8: Install the Scripts

In a text editor or in UPyCraft, open up connectWiFi.py and input your WiFi hotspot credentials.

In main.py enter your web hosting URL for led.php and hit save.

Download these files to the board's filesystem using UPyCraft.

Step 9: Strip Wire Tips

Strip wire tips.

Step 10: Solder It Up

The wires are all color coded.

Green = Data

White = Ground

Red = + 5VCC

And the circuit:

D1 Mini ESP8266 5V---5V 2A Power---LED VCC

D1 Mini ESP8266 GND---Ground 2A Power---LED Ground D1 Mini ESP8266 GPIO4(D2)---LED Strip Data In

My LED strip came with 2 red wires and 2 white wires, this made it convenient to solder.

Note: I recommend using the connector that came with the strip so that you can separate the D1 Mini from the rest of the circuit while it is plugged into your computer's USB port.

If you've never soldered before, Randofo has written an in-depth instructable on that very topic: https://www.instructables.com/id/How-To-Soldering/

Step 11: Wrap It Up

Wrap individual connections in electrical tape to insulate and prevent a short circuit.

Step 12: Stick Together

Preheat the hot glue gun for a couple minutes, then use it to fasten the electronics to the whiteboard or acrylic board.

Step 13: Train the Device

Edit the settings at your web hosting URL where led.php is located to program the device.

Most API's use JSON as a nested data structure with key-value pairs. To access the information you want, you need to enter the correct indices that point to the key you want the value from.

As a way to understand better, here is a representation of the weather api data:

"consolidated_weather"-->1-->"weather_state_abbr".

For the http://www.tvmaze.com/api:

0-->"show"-->"status". Notice how brackets start and terminate each section.

I used this web tool to help me better understand the nesting structure:

https://jsonformatter.org/json-parser

Step 14: Let There Be Blinking!

Thank you for reading this instructable. I hope you will find it useful or at least interesting!

Please consider voting for this instructable in the IoT Challenge here on instructables.

IoT Challenge

Participated in the
IoT Challenge

Share

    Recommendations

    • Pets Challenge

      Pets Challenge
    • Classroom Science Contest

      Classroom Science Contest
    • Growing Beyond Earth Maker Contest

      Growing Beyond Earth Maker Contest

    2 Discussions