Cloud Dashboards

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:

1. Add 4+ widget types to a dashboard: Switch, Gauge, Chart, Value, and bind each to a Property.
2. Resize and arrange widgets so the dashboard looks polished on phone and desktop.
3. 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

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:

1. Click "Link Variables" → pick the Thing → pick the property.
2. Set widget name (shown above the widget).
3. Customise: min/max range, colours, units.
4. 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 potValue as "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

1. Install from App Store / Play Store.
2. Sign in with the same Arduino account.
3. Your dashboards appear in a list.
4. 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

1. Add → Switch → pick DeskMonitor → ledOn.
2. Name it "Desk LED".
3. Test: toggle in the dashboard, watch your physical LED.

Step 2 — add a Gauge for potValue

1. Add → Gauge → potValue.
2. Set min = 0, max = 1023.
3. Test: turn the pot, gauge animates.

Step 3 — add a Chart

1. Add → Chart → potValue.
2. Default 1-hour window.
3. 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.

Basic 5 min

Challenge 1 5 min

Challenge 2 5 min

Challenge 3 · The gauge that hits the end too soon 10 min

A classmate moved DeskMonitor to a Nano ESP32. Their Gauge is bound to potValue, with min 0 and max 1023. Now the needle hits the end when the knob is only a quarter turned. The Chart shows values up to 4095.

1. Explain the cause with one number.
2. Fix it in the sketch, so the old Gauge works again.
3. Then add a new int Property knobPct (READ, 0–100). Fill it with map() and bind a second Gauge to it, range 0–100.

It works if both Gauges move smoothly from end to end as you turn the knob once.

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.

Extra Mission 5 min

Part 1 — Design a dashboard someone else will use

Pick a person who would use a dashboard, such as a parent, a coach or a gardener. Design one phone screen for them on paper.

Your design must include:

• Who it is for and the one question it answers at a glance.
• Every widget, with the Property it is bound to and its min/max.
• Which widgets go at the top, and why.
• One widget that controls something, and one that only shows.

Part 2 — Make it

Build your dashboard for DeskMonitor or a new Thing, with real widgets bound to real Properties. Open it in the Arduino IoT Remote app. Toggle a control from another room to prove it works over WiFi alone.

Bring back next class: screenshots of the dashboard on a computer and on a phone, plus the uploaded sketch.