Mission
Build this
Build a two-control OLED browser that shows live data with its unit, place, age, and no-data state while a pointer follows the selected zone.
Borrowed parts are labelled below and have a fallback. The registered device ID is fixed; sensing and behaviour decisions remain yours.
Bill of materials
Parts
| Source | Part | Fallback |
|---|---|---|
| ● kit | OLED | — |
| ● kit | Push buttons ×2 | Use a verified joystick, keypad, or IR-remote example and preserve NEXT and BACK roles |
| ● kit | SG90 servo | — |
Disconnect USB before rewiring. Motors, the relay, and the servo need appropriate power and a shared ground. Never drive an actuator from the ESP32 3V3 pin.
Your invitation
Build something a stranger can use before you can explain it
The Kiosk is a small window into the shared garden. A visitor should be able to approach, discover how to move through it, find one live reading, understand where and when it came from, and leave without a student quietly operating the interface for them.
This turns every label, button, pause, and missing-data message into engineering material. The display is small, attention is brief, and the person has not read your code. Their first thirty seconds are the real test environment.
During testing, your silence is part of the apparatus. If you rescue the visitor, record the task as needing help.
The central idea
A reading needs a place, unit, and age
The value and unit belong together.
Use a human place name, with the device ID available on a details screen.
Freshness keeps an old value from pretending to be live.
Start with the required Juliet temperature topic. Additional screens may read other registered topics, but every screen must answer the same three questions. If any answer is missing, show a clear no-data state rather than a believable zero.
Draw the journey before drawing the screens
Navigation is a small map of possible decisions
What can I discover here?
Which place or reading do I want?
Value, unit, place, and age.
One obvious path back to the beginning.
A shallow interface with four trustworthy views may serve visitors better than a complete browser they cannot escape. Draw the path for each test task before coding it.
Wiring
Begin with two labelled decisions
The reference build uses NEXT and BACK because their meanings can be printed beside the buttons. A joystick, keypad, or IR remote is a valid alternative, but it needs its own visible instructions and the same task test.
The power rule: The OLED and button inputs use 3V3 logic. Buttons use the ESP32 internal pull-ups and connect to ground when pressed. The servo uses a separate 5 V supply. Join all grounds.
Bench referenceOpen the exact wiring map
| ESP32 pin | Part | Part marking | Carries |
|---|---|---|---|
3V3 | OLED (SSD1306) | VCC | 3V3 power |
GND | OLED (SSD1306) | GND | Ground |
GPIO 21 | OLED (SSD1306) | SDA | I²C bus |
GPIO 22 | OLED (SSD1306) | SCL | I²C bus |
GPIO 32 | NEXT button | one leg | Digital in/out — configure INPUT_PULLUP |
GND | NEXT button | other leg | Ground |
GPIO 33 | BACK button | one leg | Digital in/out — configure INPUT_PULLUP |
GND | BACK button | other leg | Ground |
GPIO 18 | SG90 servo | signal (orange) | PWM to actuator — points to selected zone |
external 5 V | SG90 servo | power (red) | 5V power — separate supply |
GND | SG90 servo | ground (brown) | Ground — join servo and ESP32 grounds |
Never power the servo from ESP32 3V3. Disconnect USB before rewiring and debounce buttons in software without blocking the garden connection.
- 3V3 power
- Ground
- I²C bus
- Digital in/out
- PWM to actuator
- 5V power
This map shows the simplest two-button route. If your team chooses a joystick, keypad, or IR receiver, use its verified kit example first and preserve the same navigation roles.
Let physical and digital point together
The arm should confirm the screen, not decorate it
Update the selected place and its text first.
Point to the same place on a printed map.
Refresh the value without making the pointer twitch.
Your team decides:
- Does the first screen teach the controls or immediately show useful data?
- Which words remain understandable to someone outside the course?
- How old may a reading become before the screen changes to stale?
- How does a visitor recover after pressing the wrong control repeatedly?
Your usability study
Give people tasks, not a tour
- Write three observable tasks.
For example: find Juliet’s temperature, tell whether it is current, and return to the first screen.
- Define success before testing.
Set a time limit, required answer, and what counts as a wrong turn or request for help.
- Observe at least five first-time visitors.
Do not coach. Record actions and spoken confusion rather than guessing what they thought.
- Revise the hardest path once.
Change the interface, not the task, then test it with fresh visitors.
| Task | Success? | Time | Wrong turns | Help? | Confusing moment |
|---|---|---|---|---|---|
| find temperature | yes / no | ___ s | ___ | yes / no | ___ |
| judge freshness | yes / no | ___ s | ___ | yes / no | ___ |
| return home | yes / no | ___ s | ___ | yes / no | ___ |
When the visitor becomes the debugger
Confusion is evidence about the interface
People press the labels instead of the buttons
The visual grouping implies the wrong control. Move the labels, increase contrast, or make the intended control physically obvious.
Everyone finds data but nobody knows whether it is live
The age is missing, vague, or visually subordinate. Put freshness beside the value and test stale data deliberately.
The map pointer and screen disagree
The servo is reacting to a different variable or moving before the selection is committed. Use one selected-zone state for both outputs.
Fast button presses skip screens
The input bounces or one press is handled repeatedly. Detect one debounced press event and wait for release before rearming.
The interface freezes while the arm moves
A blocking servo sequence stopped input and message handling. Schedule the arm from elapsed time while the main loop continues.
Choose your visitor question
What kind of kiosk team will you become?
The path architects
Reduce wrong turns with a small, coherent navigation model and make recovery from mistakes the centre of the design.
The information editors
Make value, unit, source, age, and no-data states understandable within a severe screen-space limit.
The access testers
Compare control labels, text sizes, colour-independent cues, and viewing positions with a broader range of first-time visitors.
A calm way through the build
Collect four small wins
ki-01says hello.Join the garden and publish an
okstatus.- One button moves between two drawn screens.
Prove the input and navigation before reading live data.
- One live value shows its unit, source, and age.
Add stale and missing states.
- The pointer follows the selected place.
Power the servo separately, then begin silent user testing.
The garden handshake
Share what you found
These names are the rigid part of the project. They let another team find your work without knowing what you called the variables in your code.
Kiosk operating state
garden/visitor-centre/kiosk/ki-01/statusUnit: enum
Listen beyond your own device.
garden/greenhouse-1/climate-node/gm-01/temperatureJuliet temperature is the required first screen. Additional registered topics are welcome only when their unit, source, age, and no-data behaviour are equally clear.
Finish line
Ready to introduce to the garden
ki-01 stays online and publishes a registered status such as ok, warning, or error.
The reject feed stays clear after the final code starts.
The kiosk reads Juliet temperature and displays value, unit, source, age, and an honest no-data state.
Controls remain responsive and the map pointer agrees with the selected screen without blocking messages.
The build log contains three defined tasks, five first-time visitors, success, time, wrong turns, help events, one revision, and a repeated hard task.
Controls are labelled, text is readable without relying on colour alone, the servo is safely powered, and the device label can be scanned.
The Kiosk is finished when the team can step away. A stranger’s successful path through it is stronger evidence than any explanation its builders can give.