Now to create our interactive dashboard, or remote control panel, to allow controlling the Air Horn over the internet. You can even share the dashboard with others, such as your personal assistant (or cat!).
So let's get started! I recommend setting up your first dashboard at the normal screen size of your computer. Then you can save that layout, resize your browser window, and then optimise your dashboard layout for the smaller screen.
Navigate to the Adafruit IO Dashboard page and click the New Dashboard button. Then, enter a name for the dashboard (and a description if you wish).
You will be taken to an "empty" dashboard. You'll be adding "blocks" to this page.
On the upper-right-hand side of the dashboard, click the Cog/Gear icon to access the Dashboard Settings dropdown menu.
Click the Create New Block option, and then select the Momentary Button block type from the list of blocks.
The Block Settings window will be presented.
Set the Button Text to "Toot HornšÆ"
Verify that the Press Value is set to 1 and the Release Value to 0.
Update the colors if desired then click Create Block.Ā
You will see the new button on your dashboard.Ā
Next you'll need to create another momentary button, pointed again at the horn feed, using the Create New Block option of the Dashboard Settings drop-down menu.
Call it something like Emergency Reset, and set both the Press and Release values to zero. That way if the horn get's stuck on then we can fire an Off signal by pressing this reset button.
Update the block title to "In Emergency Press To Turn Horn Off š"
Set both the Press and Release values to zero.
You probably want to pick a different color for this block, as you want it to have a strong visual difference to the other button that triggers the horn.
Set the Light Mode Color to:
hsv(0, 0%, 49%)
Set the Dark Mode Color to:
hsv(259, 100%, 68%)
Now create another new block, selecting the Indicator block type. This will be to show if a person or movement is detected by the PIR sensor.
Select the PIR sensor feed on theĀ Connect a Feed step, called "Currently In Office?" if you followed the suggested name.
On the Block Settings page leave the colors as they are (Green for movement/person, and red for not).
Set theĀ Block Title to something like "Person in Room? ššŖšš"
Set theĀ Conditions to ">=" (meaning "greater than or equal to")Ā in the first box, and then a value ofĀ 1Ā in the box beneath.
Complete adding the block with the Create Block button.
You probably want to have an Indicator block for the current horn status. That way any user of the dashboard can tell if the horn is stuck on and to use the emergency reset!
Create a new Indicator block, and this time on the Connect A Feed page select the horn feed ("Attention Grabbing Horn šÆ").
Set theĀ Block TitleĀ to something like "Horn Status (Is it stuck on?)"
Set theĀ On Color to Orange or hsv(26, 100%, 100%)
Set theĀ On Color to just lighter than Black or hsv(0, 0%, 6%)
Set theĀ ConditionsĀ to ">=" (meaning "greater than or equal to")Ā in the first box, and then a value ofĀ 1Ā in the box beneath.
Complete adding the block with theĀ Create BlockĀ button.
Now you need to create anĀ Icon block. This will be controlled by the Actions that we defined earlier. The idea is to not set any icon initially in the block settings, because it will be changed as soon as the PIR sensor Feed receives new data.
Select the feed manually created on the Actions step, I called mineĀ icon-name.
Set theĀ Block TitleĀ if desired. I set mine to "In Room?".
Select aĀ Color, something that goes with your color-scheme, or if you switch the dashboard between dark/light mode often then it makes more sense to pick a neutral colour that works with both.
I went with Grey orĀ hsv(0, 0%, 48%)
Set the following options then use the Create Block buttonA:
- Block Title to Occupancy Graph (4hr)
- Show History to 4 Hours
- Y-Axis MinimumĀ toĀ 0
- Y-Axis Maximum to 1
- Decimal Places toĀ 0
- EnableĀ Raw Data Only option
- EnableĀ Stepped Line option
- DisableĀ Draw Grid LinesĀ option
- DisableĀ Feed Key LegendĀ option
Your dashboard will look something like this, small buttons and everything in a tall stack:
Now we have all the pieces it's time to do some reorganising... Access the dashboard settings, and instead of Create New Block, choose Edit Layout. You can now drag blocks around and resize them as desired.
You may also find it useful to enable Block Outlines in the dashboard settings, but in Edit Layout mode you can see the block's corner markers anyway.
And that's about it! You'll want to share your dashboard with your personal assistant so they'll finally have the power to get your attention, but first do some thorough testing!
Text editor powered by tinymce.