iT邦幫忙

2026 iThome 鐵人賽

DAY 19
0
自我挑戰組

無硬體也能玩物聯網!使用 Wokwi 模擬器與 MicroPython 打造 30 天 ESP32 實務系列 第 19 篇

實體按鈕選單——用 2 個按鈕切換 OLED 螢幕顯示頁面

  • 分享至 

  • xImage
  •  

今日目標
實現經典的多頁面UI切換。我們將使用兩個實體按鈕,結合之前學過的中斷機制與SSD1306 OLED,打造一個能順暢切換「主頁面」、「溫濕度頁面」與「系統狀態頁面」的互動選單系統。

程式碼
import time
from machine import Pin,I2C
import ssd1306

i2c=I2C(0,scl=Pin(22),sda=Pin(21),freq=400000)
oled=sdd1306.SSD1306_I2C(128,64,i2c)
btn_prev=Pin(4,Pin.IN,Pin.PULL_UP)
btn_next=Pin(5,Pin.IN,Pin.PULL_UP)
current_page=0
TOTAL_PAGES=3
last_interrupt_time=0
def button_headler(pin):
global current_page,last_interrupt_time
now=time.ticks_ms()

if time.ticks_diff(now,last_interrupt_time)>200:
    if pin==btn_next:
        current_page=(current_page+1)%TOTAL_PAGES
    elif pin ==btn_prev:
        current_page=(current_page-1+TOTAL_PAGES)%TOTAL_PAGES
    last_interrupt_time=now
    

btn_perv.irq(trigger=Pin.IRQ_FALLING,headler=button_headler)
btn_next.irq(trigger=Pin.IRQ_FALLING,headler=button_headler)

def render_page_0():
oled.text("===MAIN MENU===",0,0)
oled.hline(0,12,128,1)
oled.text("Welcome to IoT",0,24)
oled.text("Press[>] to Next",0,42)
def render_page_1():
oled.text("===SENSORS===",0,0)
oled.hline(0,12,128,1)
oled.text("Temp:26.5 C",0,24)
oled.text("Humi:60.0%",0,40)
def render_page_2():
oled.text("===SYS INFO===")
oled.hline(0,12,128,1)
oled.text("Uptime:120s",0,24)
oled.text("WiFi:Connected",0,40)
print("===多頁面選單系統啟動===")
last_rendered_page=-1
while True:
oled.fill(0)
if current_page==0:
render_page_0()
elif current_page==1:
render_page_1()
elif current_page==2:
render_page_2()
oled.hline(0,52,128,1)
oled.text(f"Page [{current_page+1}/{TOTAL_PAGES}]",32,55)
oled.show()
time.sleep_ms(100)

心得
今天我們把實體輸入與視覺化輸出結合在一起,實作出極具實用價值的多頁面UI控制架構,這種模組化的頁面繪製搭配中斷狀態切換,是開發小型穿戴裝置或儀表板的最佳程式架構。


上一篇
文字型 LCD——使用 LCD1602 (I2C) 模組顯示兩行狀態文字
系列文
無硬體也能玩物聯網!使用 Wokwi 模擬器與 MicroPython 打造 30 天 ESP32 實務 共 19 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言