First Sensor App

By the end of this tutorial your device will show a live sensor reading on screen — updating in real time as you interact with the sensor.

One laptop per team is enough (每组一台电脑即可)

Only one person per team needs to run UIFlow — the person whose laptop is connected to the M5Stack. Everyone else follows along and helps think.

Everyone was asked to bring a laptop as a backup only, in case the first laptop has a driver or browser issue.

每组只需要一台电脑连接 M5Stack 运行 UIFlow，其他成员协作讨论即可。带笔记本只是为了备用，以防某台电脑出现驱动或浏览器问题。

Screenshots coming soon

This page is text-only for now. If you get stuck on the UIFlow interface, ask your TA — they know these steps well.

Connect only ONE sensor at a time

Do not plug both ENV III and PIR into the Unit Hub at the same time — UIFlow will crash or freeze.

Pick one sensor for your team, connect it, and leave the other unplugged.

If your device is already crashing: unplug one sensor, press the reset button on the side of the M5Stack, then reconnect UIFlow.

---

What you’re building

A UIFlow program that:

1. Reads a value from an external sensor (temperature/humidity, or motion)
2. Stores it in a variable
3. Displays it on screen with a label

The program runs in a forever loop so the reading updates continuously.

---

Step 1 — Add the sensor as a Unit

In UIFlow, external sensors are added as Units before you can use them in blocks.

How to add a Unit:

1. Click the Units button in the left sidebar (looks like a plug icon)
2. Click + Add Unit
3. Find your sensor in the list and select it
4. Click OK — UIFlow 2.0 detects the connection automatically
5. The unit now appears in your block palette

ENV III (temp & humidity)

ENV III measures temperature and humidity.

• In the Units list, select ENV III
• After adding, you’ll see ENV III blocks in the palette: get temperature, get humidity, get pressure

Which value to display: Start with get temperature — it’s the most satisfying to demonstrate (breathe on the sensor and watch the number change).

M5Stack’s docs page for ENV III includes a short tutorial video: docs.m5stack.com → Units → ENV III

PIR (motion sensor)

PIR detects motion — it outputs True when motion is detected, False when still.

• In the Units list, select PIR
• After adding, you’ll see a PIR get state block

Note: PIR returns a boolean (True/False), not a number. You’ll display Motion detected! or No motion instead of a number.

M5Stack’s docs page for PIR includes a short tutorial video: docs.m5stack.com → Units → PIR

---

Step 2 — Read the sensor value in blocks

Create the reading logic inside the loop section:

1. Open the Blocks editor (not MicroPython)
2. Find the loop section on the canvas — UIFlow 2 creates this automatically. Anything inside it repeats forever. If you see separate Setup and Loop blocks, use the Loop block.
3. Inside the loop, drag in Variables → Set [variable] to [value]
4. Create a new variable called sensorValue
5. Set sensorValue to the sensor read block:
   • ENV III: drag ENV III get temperature into the value slot
   • PIR: drag PIR get state into the value slot
6. Add a Time → Wait block at the bottom of the loop: set it to 500 ms (0.5 seconds)

Always add a Wait block — this is important

A forever loop without a delay runs thousands of times per second and will freeze or crash the device. The Wait 500 ms block is not optional — add it every time you use a forever loop.

This loop will read the sensor twice per second and store the result.

---

Step 3 — Display the value on screen

Add a Label widget to show the sensor reading:

1. Switch to the UI tab (screen design view)
2. Drag a Label widget onto the screen
3. Give it a sensible default text like ---
4. Note the label’s variable name (e.g., label0) — you’ll use this in blocks

Back in the Blocks editor, inside your forever loop (after the sensor read):

1. Drag a Label → set text block
2. Select label0 (or whatever your label is named)
3. Set the text to sensorValue

For ENV III, you may want to add a unit string. Use a Text → join block to combine the number with " °C":

set label0 text to: join(sensorValue, " °C")

---

Step 4 — Style the screen

Make it look intentional:

1. In the UI editor, click the screen background and pick a colour (dark blue works well)
2. Click your label — find the font size control in the properties panel and increase it until the text is large and easy to read on the M5Stack screen
3. Add a second label above it with the sensor name as static text (e.g., Temperature)
4. Set the static label to a smaller size and lighter colour

---

Step 5 — Run and test

Click the Run button (▶) in UIFlow.

ENV III: Breathe gently on the sensor — the temperature should tick up within a few seconds.

PIR: Wave your hand in front of the sensor — the display should change between True and False (or Motion detected! / No motion if you added a conditional).

Checkpoint

Your device shows a live sensor reading that updates on its own.

If it does, you’ve completed Mission 1. Head back to the Week 2 Session Guide and start Mission 2.

---

Troubleshooting

Problem	Try this
Unit doesn’t appear in palette	Remove and re-add it via Units — make sure the sensor is physically connected before adding
Screen shows --- and never updates	Check the forever loop is running — make sure you clicked Run
Temperature reads 0.0	The cable may be loose — unplug and reconnect, then re-run
PIR always shows True	Cover the sensor with your hand briefly to reset it, then uncover
UIFlow disconnects mid-session	Reconnect via the device menu — your blocks are saved in the browser
Device freezes or crashes on startup	Both sensors are plugged in at once — unplug one, press the reset button on the side of the device, then reconnect

Video tutorials & Chinese resources

For UIFlow walkthrough videos and 中文资源, see the Week 2 Resources page.