Learning Goals 5 min
Yesterday your Property values were just numbers in the Things tab. Today you bind them to visual widgets — gauges, charts, switches, value cards — for a dashboard you can show anyone. By the end of this lesson you will be able to:
- Add 4+ widget types to a dashboard: Switch, Gauge, Chart, Value, and bind each to a Property.
- Resize and arrange widgets so the dashboard looks polished on phone and desktop.
- Use the Arduino IoT Remote phone app to view and control the dashboard on the go.
Warm-Up 10 min
From yesterday: DeskMonitor with potValue, ledOn, uptime properties. Confirm they're still updating.
Widget types overview
| Widget | Best for | Property type |
|---|---|---|
| Switch | Boolean toggle | bool |
| Push button | Momentary action (e.g. "water now") | bool |
| Gauge | Single value as an arc | int / float |
| Chart | Historical trend | int / float |
| Value | Big number readout | any |
| LED | Boolean as a coloured circle | bool |
| Slider | Set a numeric value | int / float, READWRITE |
| Colour picker | RGB selection | CloudColor |
| Map | GPS coordinates | CloudLocation |
| Messenger | Text log between sketch and dashboard | String |
New Concept · Building a dashboard 25 min
Step 1 — Dashboards tab
In IoT Cloud → Dashboards → Build Dashboard. Name it "DeskMonitor".
Step 2 — Add widgets
Click "Add" → pick a widget type. For each:
- Click "Link Variables" → pick the Thing → pick the property.
- Set widget name (shown above the widget).
- Customise: min/max range, colours, units.
- Save.
Step 3 — Layout
The dashboard uses a grid. Drag widgets to reposition; drag corner to resize. The layout adapts on phone (single column) automatically.
Suggested layout for DeskMonitor
- Top: big Value widget showing
potValueas "Knob position". - Top right: Switch widget for
ledOn, labelled "Desk LED". - Middle: Gauge widget for
potValue(0–1023), mirrors the Value but visually. - Bottom: Chart widget showing the last hour of
potValue. - Footer: Value widget showing
uptime.
Sharing the view
Click Dashboards → your dashboard → Share. Three options:
- Direct sharing: invite another Arduino Cloud user by email. They can view (or edit if you grant).
- Public link: anyone with the link sees the dashboard (read-only). For demos or live status pages.
- Phone app: install Arduino IoT Remote (free, iOS + Android). All your dashboards appear automatically.
Arduino IoT Remote app
- Install from App Store / Play Store.
- Sign in with the same Arduino account.
- Your dashboards appear in a list.
- Tap one — same widgets, optimised for touch.
Any widget toggle on the phone immediately updates the cloud → updates your device. Bidirectional sync just works.
Worked Example · Polish the DeskMonitor dashboard 25 min
Step 1 — add a Switch for ledOn
- Add → Switch → pick DeskMonitor → ledOn.
- Name it "Desk LED".
- Test: toggle in the dashboard, watch your physical LED.
Step 2 — add a Gauge for potValue
- Add → Gauge → potValue.
- Set min = 0, max = 1023.
- Test: turn the pot, gauge animates.
Step 3 — add a Chart
- Add → Chart → potValue.
- Default 1-hour window.
- Live values populate the right edge as they come in.
Step 4 — arrange + resize
Drag widgets so the "at-a-glance" (Switch + Gauge) is at top, the "detail" (Chart) below. Resize the Chart to take full width.
Step 5 — phone-app test
Install Arduino IoT Remote. Open your dashboard. Toggle the LED from your phone — the physical LED responds. Take a phone screenshot — that's your "commercial smart device" demo.
Step 6 — share publicly
Click Share → Public link. Copy and paste in your browser's incognito mode. The dashboard loads without login — view-only. Useful for showing a parent or classmate without making them sign up.
Try It Yourself 15 min
Goal: Add an LED widget bound to the same ledOn property. Now you have both a Switch (control) and an LED indicator (visual). Useful for "ON/OFF at a glance".
Goal: Add a Slider bound to a new int property ledBrightness (0..255, READWRITE). On the device, use it to analogWrite a PWM-capable LED pin. Phone slider = real LED dimmer.
Goal: Add a Messenger widget bound to a String property. Use it as a two-way text log: dashboard sends "hello"; sketch responds "hello back at <time>".
Mini-Challenge · Demo from a phone 10 min
- Install Arduino IoT Remote on your phone if you haven't.
- Open the DeskMonitor dashboard from the app.
- Walk to another room. Toggle the LED. Confirm it works from a distance with WiFi as the only link.
- Take a screenshot of the app showing the dashboard.
That screenshot is the "wow" moment of IoT — a phone in your hand, a device in another room, a cloud in between, no custom app written.
Recap 5 min
Dashboards bind widgets to Properties. ~10 widget types cover most needs. Layout adapts to phone automatically. Public links + phone app cover all sharing patterns. Free tier: 1 dashboard, lots of widgets in it. Tomorrow: turn the LED into a real cloud-controlled output that anyone with the share link can drive.
- Widget
- A visual element on a dashboard (Switch, Gauge, Chart, Value). Bound to a Property.
- Binding
- Connecting a widget to a Property. Bidirectional for READWRITE widgets.
- Grid layout
- The 12-column grid the dashboard uses. Widgets snap to grid; auto-collapses to single column on phone.
- Share link / public dashboard
- Read-only URL anyone can open. Doesn't require an Arduino account on their side.
- Arduino IoT Remote
- Free phone app showing all your dashboards. Touch-optimised.
- Chart history
- Auto-stored time-series data for any non-bool Property. Tier-limited retention.
Homework 5 min
- Polish the dashboard. Screenshot it on both desktop and phone.
- Share the public link with a classmate or family member. Let them open it.
- Read ahead to ARD-L04-10 (Cloud-Controlled LED). Tomorrow we build the canonical cloud demo.