Here you'll create and test an Adafruit IO Dashboard, which allow interactive visualisation and control of your WipperSnapper components (or any other Adafruit IO feed). If you've not setup WipperSnapper then start here.
To get started head on over to the Dashboards page.
Click the New Dashboard button on the Dashboards page to create a new dashboard.
In the Create a new Dashboard dialog give the new dashboard an appropriate name, plus a description if you wish, then click the Create button.
You will be returned to the list of dashboards, with a new entry for the one you created.
Click the dashboard name in the list to be taken to the new dashboard.
You'll be presented with an empty dashboard. At the top right is a Cog that triggers a drop-down menu for Dashboard Settings, and then to the left is the full screen button, followed by Edit Layout button, and finally the create New Block option.
If you click the cog then there are also options for dark/light mode, block borders, and dashboard privacy (as well as deleting the dashboard) as shown below.
You can get a more in-depth learn guide for dashboards here.
For now, click the create New Block button.
On the Create a new block dialog you'll see a list of available block types.
Click on the Gauge block type to start the process of adding the block
Next, you'll be taken to the Connect a Feed page, where you need to select which feed to connect to the Toggle block. Select the new button feed we created then use the Next Step button.
Note that the groups/devices in the list can be collapsed/expanded to hide or show their feeds. You may need to expand a group to find your button feed.
On the next page, for the Block Settings, change the Gauge Max Value to something appropriate for your board setup (65000 for raw values or 3.3 if voltage).
Later you can adjust these block settings and also configure the low/high warning values which change the gauge color to reflect the status.
After adjusting anything else that feels right like the gauge label, block title, or maybe even an icon, press the Create Block button.
The dashboard will update, displaying the gauge you added.
Now add a new block, choosing the Line Chart in the blocks dialog, and select the same feed again before proceeding to the block settings page. There choose the time period you want to display, and potentially you may wish to adjust the graphs maximum and minimum values, along with the scale to logarithmic instead of linear.
By default the graph shows aggregated data once there are over 640 datapoints in the chosen time period, so if you never want that to happen, instead only showing actual data values, then choose the Raw Data Only option.
Once happy with the setup choose Create Block.
The graph block appears beneath the existing block, refresh the page to see the chart data.
Here I've added a duplicate graph in linear rather than logarithmic range to illustrate the difference.
The dashboard is in edit layout mode so you can see the settings cogs and resize markers for each block.
Clicking the cog opens a small menu (with time period for charts), including Edit Block and related items.
You may wish to use the Edit Layout button and move things around, taking note that there is a new layout for each screen size (XS/S/M/L/XL), or just continue onto usage so you can test this thing!
While looking at the WipperSnapper Device page, or the Dashboard, cover the sensor / project to produce a few "low light" readings. Follow this up with some "strong light" readings by uncovering the sensor and exposing it to a light source (daylit window / torch / light).
On the dashboard you'll see the Gauge block value change and the Line Chart update with the new readings. The WipperSnapper Device page will show the Light Sensor value constantly updated with each new reading.
Congratulations! You have a working light sensor transmitting data to the internet, hopefully that wasn't too stressful and you want a bit more... Check out our other learn guides for some project ideas if your stuck.
A pretty common thing to try next is to create an automated Action to notify or trigger something else (by writing to another feed), like a display, motor or NeoPixel that run when the light sensor value is high or low enough.
Page last edited August 29, 2025
Text editor powered by tinymce.
