Week 1: Device Setup & First Project

Welcome

This guide gets you from unboxing to a working project in UIFlow 2.0. Follow each step in order.

The course uses two different M5Stack devices this semester. Your team will receive either an M5StickC Plus or an M5StickS3. The setup process differs between them — each section below uses tabs. Select your device tab each time before reading the instructions.

Having issues?

Jump to Troubleshooting at any time.

---

What to Bring (4-hour Session)

Every team member needs their own laptop and equipment

Sharing a single laptop between team members will slow everyone down.

Item	Why Needed	Notes
Laptop	UIFlow 2.0 runs in your browser	Windows, Mac, or Linux. Tablets/phones will NOT work
Chrome or Edge browser	UIFlow 2.0 requires Web Serial API	Safari and Firefox do NOT work. Download Chrome
USB data cable	Connect device to your computer	Must be a DATA cable, not charge-only. Quick test: can you transfer photos with it?
Laptop charger	Sessions are 4 hours long	Most batteries won’t last the full session

💡 About 50% of connection issues come from wrong cables

Charge-only cables look identical to data cables but cannot transfer data. If your device is not detected, try a different cable first.

---

Step 1: UIFlow 2.0 Account

One account per team. One person creates it and shares the login with all teammates.

/ completed — progress saved in your browser

---

Step 2: Device Setup

How to use the tabs below

The instructor will tell you which device your team has. Click the tab for your device — M5StickC Plus or M5StickS3 — and follow only those instructions. The steps are different for each device.

M5StickC Plus

These instructions are for the M5StickC Plus. If your team has an M5StickS3, click the other tab above.

The M5StickC Plus connects to UIFlow 2.0 over WiFi. It communicates with the browser IDE through the M5Stack cloud relay — you need a working WiFi connection during the session.

English (YouTube) ~4 min

Bilibili ~4 min

2a. Install CP2104 Driver

The M5StickC Plus uses a CP2104 USB-Serial chip. A driver is needed to let your computer communicate with it over USB.

Windows:

1. Device unplugged — install before connecting
2. Download the CP210x VCP driver from the M5Stack Downloads page or directly from Silicon Labs
3. Run the installer → Restart your computer
4. Plug in the device — Device Manager should show it under Ports (COM & LPT) as CP210x USB to UART Bridge

Mac:

macOS ships a built-in USB serial driver (AppleUSBSLCOM) that works for many Silicon Labs chips — but it has only been confirmed to work with the CP2102. The M5StickC Plus uses a CP2104, which requires the Silicon Labs VCP driver.

1. Plug in the device first and check if it is automatically detected:

   ls /dev/tty.SLAB*

   If you see /dev/tty.SLAB_USBtoUART → the device is detected, skip the driver install.

2. If nothing appears → install the Silicon Labs CP210x VCP driver

3. After installing, go to System Settings → Privacy & Security → scroll down → look for a message about “Silicon Laboratories” being blocked → click Allow

4. Restart your Mac, then plug in the device again and recheck with ls /dev/tty.SLAB*

Apple Silicon Mac (M1/M2/M3) + macOS Ventura or Sonoma

Installing third-party system extensions on an Apple Silicon Mac running Ventura or Sonoma may require entering Reduced Security mode in Recovery — this is a significant extra step. If you hit this, do not try to do it during the session. Ask your TA; they may have a pre-configured device or Windows laptop available.

macOS Ventura+ “Allow accessories to connect” prompt

If a dialog appears asking “Allow accessories to connect?” when you plug in the device, click Allow. This is a macOS Ventura security feature on portable Macs (MacBook Air/Pro) and is separate from the driver. If you click Don’t Allow by accident, unplug and replug the device.

2b. Check Firmware

When you power on the device (hold the side button for 2 seconds), you should see the UIFlow boot screen followed by WiFi status information on the display.

If the device shows an unfamiliar screen or appears unresponsive, ask your TA — do not attempt to reflash firmware without permission.

2c. Configure WiFi

The first time a device is used, it needs WiFi credentials entered.

1. Power on the device — it creates a WiFi hotspot called M5-XXXXXX
2. On your laptop, connect to that WiFi network (it may take 20–30 seconds to appear)
3. Open a browser and go to 192.168.4.1
4. Enter the session WiFi SSID and password (instructor provides these)
5. Submit — the device connects to WiFi and reboots
6. Once connected, the device screen shows your API Key

WiFi already configured

If the device immediately shows an API Key on startup (no M5-XXXXXX hotspot visible), WiFi is already configured. Skip to step 2d.

2d. Note Your API Key

The API Key is displayed on the device screen after it connects to WiFi — a short alphanumeric string (e.g. 4F8A2C). Write it down. You will need it in Step 3.

M5StickS3

These instructions are for the M5StickS3. If your team has an M5StickC Plus, click the other tab above.

The M5StickS3 connects to UIFlow 2.0 directly over USB. No internet connection is required for the IDE — your laptop communicates directly with the device through a USB serial port.

English (YouTube) ~5 min

Bilibili ~5 min

2a. Driver — Usually Not Needed

The M5StickS3 uses the ESP32-S3’s built-in USB (CDC ACM). On most systems, no third-party driver is required.

Windows 10 / 11: The device usually appears automatically as a COM port under Ports (COM & LPT) in Device Manager. If it does not:

1. Right-click the unknown device → Update Driver → Browse my computer → Let me pick → USB Serial Device (CDC)
2. If that fails, ask your TA for the CH9102 driver

Mac: No driver needed. The device appears as /dev/tty.usbmodem... automatically.

macOS Ventura+ “Allow accessories to connect” prompt

If a dialog appears asking “Allow accessories to connect?” when you plug in the device, click Allow. This is a macOS Ventura security feature on portable Macs (MacBook Air/Pro). If you click Don’t Allow by accident, unplug and replug the device.

2b. Connect via USB

1. Plug your USB data cable into the StickS3 and your laptop
2. Confirm the device appears:
   • Windows: Device Manager → Ports (COM & LPT) → look for USB Serial Device or USB-SERIAL
   • Mac: Open Terminal and run ls /dev/tty.usbmodem* — you should see an entry

Device not detected? Try boot mode

If the device appears in Device Manager but UIFlow cannot connect, try forcing boot mode:

1. Unplug the USB cable
2. Hold the side button down
3. While holding, plug in USB
4. Keep holding for 2 seconds, then release

This puts the device into download mode and can resolve detection issues.

---

Step 3: Connect in UIFlow 2.0

Select your device tab

Click the tab for your device before following the connection steps below.

M5StickC Plus

M5StickC Plus connects via Internet mode using the API Key from your device screen.

1. Open uiflow2.m5stack.com in Chrome or Edge
2. Log in with your team UIFlow 2.0 account
3. In the top-right connection area, click the connection button
4. Select Internet mode
5. Enter the API Key shown on your device screen
6. Click Connect

You should see a green connected indicator and your device name in the IDE.

Subsequent sessions

WiFi stays configured after the first time. Just power on → note the API Key → open UIFlow 2.0 → Internet mode → enter key → connect.

M5StickS3

M5StickS3 connects via USB mode directly from your browser.

1. Open uiflow2.m5stack.com in Chrome or Edge
2. Log in with your team UIFlow 2.0 account
3. In the lower-right corner of UIFlow 2.0, find the connection mode selector
   • Default shows: Cloud Pair — click it
   • Change to: USB
4. Click Connect — your browser shows a serial port picker dialog (this is expected)
5. Select your COM port from the list:
   • Windows: COM3, COM4, etc.
   • Mac: /dev/tty.usbmodem...
6. Click Connect

You should see a green connected indicator in the IDE.

Browser permission prompt

Chrome and Edge will show a pop-up asking to connect to a serial port — this is expected and safe. Select your device from the list.

---

Step 4: Run Your First Project

Select your device tab

Download the correct starter file for your device.

M5StickC Plus

1. Download the starter project: StickCPlus-KnightRider.m5f2
2. In UIFlow 2.0: File → Import → select the downloaded .m5f2 file
3. Click Run (▶ button)
4. Watch the LEDs animate on your device!

M5StickS3

1. Download the starter project: StickS3-KnightRider.m5f2
2. In UIFlow 2.0: File → Import → select the downloaded .m5f2 file
3. Click Run (▶ button)
4. Watch the LEDs animate on your device!

Once it’s running, explore the blocks: change LED colours, adjust speed, add conditions. You don’t need to understand everything yet — just start modifying and see what happens.

---

What to Build Next

Your device is connected and running. Now it’s time to build something with it.

Smart Device Challenge Brief Hardware toolkit, project sparks, team roles, and deliverable — everything you need for Weeks 1–2

---

Help Others Culture

Got your device working? Help others! This earns recognition in your assessment.

1. Solved your setup issue? Great!
2. Look around — who else is struggling?
3. Help your teammates first, then help other teams
4. After helping, report to TA: “I helped [Name] from [Team]”

ℹ️ In your video demo

You can mention helping other teams — but only if you reported it to the TA first for verification.

---

Troubleshooting Quick Reference

Select your device tab

M5StickC Plus

Symptom	Quick Fix
Device not in Device Manager (Windows)	Install CP2104 driver, restart computer
ls /dev/tty.SLAB* returns nothing (Mac)	Install Silicon Labs driver; approve in System Settings → Privacy & Security
M5-XXXXXX hotspot not appearing	Hold side button 2s to power on; check UIFlow firmware is installed
WiFi config page won’t load at 192.168.4.1	Confirm your laptop is connected to M5-XXXXXX, not your home WiFi
API Key not showing on screen	Device hasn’t connected to WiFi yet — redo WiFi config step
UIFlow shows “Disconnected”	Check API Key matches device screen; confirm device is on WiFi
Apple Silicon Mac + Ventura	Ask TA — driver install may require Reduced Security mode

M5StickS3

Symptom	Quick Fix
Device not detected (Windows)	Try different USB cable (data cable!), different USB port
Device not detected (Mac)	Click Allow if “accessories” prompt appeared; run ls /dev/tty.usbmodem*
COM port keeps changing	Normal — just note the new number each time
UIFlow won’t connect	Confirm USB mode selected (not Cloud Pair); use Chrome or Edge
”Timeout / Write error”	Try boot mode: hold side button while plugging in USB
Screen is black	Hold side button ~6 seconds to reset; check USB cable is a data cable

If nothing works after 20 minutes: Ask your TA to use their laptop. No penalty — some PCs have IT restrictions that block USB serial access.

See the full Troubleshooting Guide for detailed solutions.