Skip to content
ENT208TC Industry Readiness

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.

What you’re building

Section titled “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

Section titled “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 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

Step 2 — Read the sensor value in blocks

Section titled “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)

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

Step 3 — Display the value on screen

Section titled “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

Section titled “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

Section titled “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).

Troubleshooting

Section titled “Troubleshooting”
ProblemTry this
Unit doesn’t appear in paletteRemove and re-add it via Units — make sure the sensor is physically connected before adding
Screen shows --- and never updatesCheck the forever loop is running — make sure you clicked Run
Temperature reads 0.0The cable may be loose — unplug and reconnect, then re-run
PIR always shows TrueCover the sensor with your hand briefly to reset it, then uncover
UIFlow disconnects mid-sessionReconnect via the device menu — your blocks are saved in the browser
Device freezes or crashes on startupBoth sensors are plugged in at once — unplug one, press the reset button on the side of the device, then reconnect
This site uses anonymous analytics (Microsoft Clarity) to improve course content. No personal data is collected.
Current page
🤖