In this section, I'll guide you through replicating my Adafruit IO dashboard. You don't have to have all the feeds I do, but you will have to slightly update the project code for that.
First, go to the Adafruit IO feeds tab. Then, click the 'New Feed' button and create these 7 feeds:
- battery
- door
- heatindex
- humidity
- lamp
- neopixel
- temperature
After you've created them, your Feeds page should look something like this, except the last values section should be blank for all of them.
Then, go to the Dashboards tab and click the 'New Dashboard' button. Name the dashboard whatever you want. I called mine 'IOT Hub'. Then, click on it and it should take you to a blank dashboard.
Next, click the gear icon and press the button labeled 'Create New Block'. You'll do this for every block you create.
The first block we'll be creating will be a Toggle block. You can find it in the upper left-hand corner.
The first block we'll be creating will be a Toggle block. You can find it in the upper left-hand corner.
We'll use this block to control a relay. In my setup, I have it hooked up to a lamp, so we'll use the lamp feed.
On the next step, set the on text to 'True' and the off text to 'False' (it is case sensitive). Set the title to whatever you want, in this case I'll use 'Lamp'.
Then, click 'Create Block' and it should show up on your dashboard.
Now, we'll make a block to display data from a temperature sensor. This one will be a Text block which is in the first column of the second row.
Set the feed to 'temperature'.
On the final screen, set the text size to medium, set the decimal places to 1, check 'show icon' and set the icon to 'thermometer'.
This block should appear right under the last block we made.
Now, we'll make the humidity block. This one is also a text block.
Using the humidity feed, we'll set the text size to medium, decimal places to one, enable 'show icon' and set the icon to 'w:humidity' and click 'create block'.
Now, click the gear icon, then 'edit layout' and click and drag it so it's next to the temperature block.
After that, we'll make our fourth block, which displays the heat index. The heat index is what the temperature and humidity feels like. We'll also use a text block for this one.
Set feed to 'heatindex', the text size to medium, decimal places to 1, and the icon to 'w:thermometer-exterior'.
Once you've created the block, click 'edit layout' and resize it so it's the same width as the lamp block.
Next, make a color picker block. This will be used so we can set the color of a neopixel strip remotely. Use the neopixel feed for this one. You don't need to do any more configuration for this block.
For our penultimate block, we'll make a LiPo charger indicator. This will use the gauge block and the battery feed.
Set the title to Battery, the gauge label to Percent, the low warning value to 20, the decimal places to zero, and set the icon to battery.
Page last edited March 08, 2024
Text editor powered by tinymce.
