WOKWI ESP32-IDF DHT22 + MQTT
WOKWI ESP32-IDF 程式
您可以打開一個網頁瀏覽器，搜尋 mosquitto_sub -h mqttgo.io -t "alex9ufo/wokwi/dht/temperature"
來查看是否有數據進入。
要在電腦上安裝 mosquitto_sub（這屬於 Mosquitto 客戶端工具的一部分），根據您的作業系統，安裝方式如下：
1. Windows 系統
在 Windows 上，最簡單的方法是安裝完整的 Mosquitto 套件。
下載安裝檔：前往
Mosquitto 官方下載頁面 mosquitto-2.x.x-install-windows-x64.exe）。執行安裝：照著預設步驟安裝。
設定環境變數（重要）：
搜尋「編輯系統環境變數」。
點擊「環境變數」-> 在「系統變數」下找到
Path-> 點擊「編輯」。新增 Mosquitto 的安裝路徑（預設通常是
C:\Program Files\mosquitto）。
驗證：打開命令提示字元 (CMD)，輸入
mosquitto_sub --help。
如何訂閱您 ESP32 發出的數據？
安裝完成後，您可以使用以下指令來測試連線到 mqttgo.io 並接收溫度數據：
訂閱溫度：
mosquitto_sub -h mqttgo.io -t "alex9ufo/wokwi/dht/temperature"
訂閱濕度：
mosquitto_sub -h mqttgo.io -t "alex9ufo/wokwi/dht/humidity"
同時訂閱該路徑下的所有訊息（使用萬用字元 #）：
mosquitto_sub -h mqttgo.io -t "alex9ufo/wokwi/dht/#" -v
-v參數會顯示 Topic 名稱，方便區分溫度和濕度。
Python +TKinter 程式
import tkinter as tk
from tkinter import messagebox
import paho.mqtt.client as mqtt
# --- 配置區 ---
BROKER = "mqttgo.io"
PORT = 1883
TOPIC_TEMP = "alex9ufo/wokwi/dht/temperature"
TOPIC_HUMID = "alex9ufo/wokwi/dht/humidity"
class MqttApp:
def __init__(self, root):
self.root = root
self.root.title("ESP32 DHT22 遠端監控儀表板")
self.root.geometry("400x350")
self.root.configure(bg="#f0f0f0")
# UI 變數
self.temp_var = tk.StringVar(value="--.- °C")
self.humid_var = tk.StringVar(value="--.- %")
self.status_var = tk.StringVar(value="等待連線...")
self.status_color = "gray"
self.setup_ui()
# MQTT 初始化
self.client = mqtt.Client()
self.client.on_connect = self.on_connect
self.client.on_message = self.on_message
try:
self.client.connect(BROKER, PORT, 60)
self.client.loop_start()
except Exception as e:
self.status_var.set("連線失敗")
messagebox.showerror("錯誤", f"無法連線至 Broker: {e}")
def setup_ui(self):
# 標題
tk.Label(self.root, text="MQTT 數據監測站", font=("Arial", 18, "bold"), bg="#f0f0f0").pack(pady=10)
# 狀態燈與文字
status_frame = tk.Frame(self.root, bg="#f0f0f0")
status_frame.pack(pady=5)
self.canvas_status = tk.Canvas(status_frame, width=20, height=20, bg="#f0f0f0", highlightthickness=0)
self.status_dot = self.canvas_status.create_oval(5, 5, 15, 15, fill="gray")
self.canvas_status.pack(side=tk.LEFT, padx=5)
tk.Label(status_frame, textvariable=self.status_var, font=("Arial", 10), bg="#f0f0f0").pack(side=tk.LEFT)
# 數據顯示區
data_frame = tk.Frame(self.root, bg="white", bd=2, relief="groove")
data_frame.pack(pady=20, padx=20, fill=tk.BOTH, expand=True)
# 溫度
tk.Label(data_frame, text="當前溫度", font=("Arial", 12), bg="white").grid(row=0, column=0, padx=40, pady=10)
tk.Label(data_frame, textvariable=self.temp_var, font=("Arial", 24, "bold"), bg="white", fg="#e74c3c").grid(row=1, column=0, padx=40)
# 濕度
tk.Label(data_frame, text="當前濕度", font=("Arial", 12), bg="white").grid(row=0, column=1, padx=40, pady=10)
tk.Label(data_frame, textvariable=self.humid_var, font=("Arial", 24, "bold"), bg="white", fg="#3498db").grid(row=1, column=1, padx=40)
# 退出按鈕
tk.Button(self.root, text="關閉程式", command=self.on_close).pack(pady=10)
def on_connect(self, client, userdata, flags, rc):
if rc == 0:
self.status_var.set(f"已連線至 {BROKER}")
self.canvas_status.itemconfig(self.status_dot, fill="green")
# 訂閱主題
client.subscribe(TOPIC_TEMP)
client.subscribe(TOPIC_HUMID)
else:
self.status_var.set("連線錯誤")
self.canvas_status.itemconfig(self.status_dot, fill="red")
def on_message(self, client, userdata, msg):
payload = msg.payload.decode()
if msg.topic == TOPIC_TEMP:
self.temp_var.set(f"{payload} °C")
elif msg.topic == TOPIC_HUMID:
self.humid_var.set(f"{payload} %")
def on_close(self):
self.client.loop_stop()
self.client.disconnect()
self.root.destroy()
if __name__ == "__main__":
root = tk.Tk()
app = MqttApp(root)
root.protocol("WM_DELETE_WINDOW", app.on_close)
root.mainloop()
[{"id":"node_temp","type":"mqtt in","z":"a6dc6d40023a8282","name":"接收溫度","topic":"alex9ufo/wokwi/dht/temperature","qos":"2","datatype":"auto-detect","broker":"mqtt_broker_io","nl":false,"rap":false,"inputs":0,"x":160,"y":120,"wires":[["ui_temp_gauge"]]},{"id":"node_humid","type":"mqtt in","z":"a6dc6d40023a8282","name":"接收濕度","topic":"alex9ufo/wokwi/dht/humidity","broker":"mqtt_broker_io","inputs":0,"x":160,"y":200,"wires":[["ui_humid_gauge"]]},{"id":"ui_temp_gauge","type":"ui_gauge","z":"a6dc6d40023a8282","name":"","group":"ui_group_dht","order":1,"width":0,"height":0,"gtype":"gage","title":"溫度","label":"°C","format":"{{value}}","min":0,"max":"50","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","diff":false,"className":"","x":400,"y":120,"wires":[]},{"id":"ui_humid_gauge","type":"ui_gauge","z":"a6dc6d40023a8282","name":"","group":"ui_group_dht","order":2,"width":0,"height":0,"gtype":"gage","title":"濕度","label":"%","format":"{{value}}","min":0,"max":100,"colors":["#0099cc","#007799","#005577"],"x":400,"y":200,"wires":[]},{"id":"mqtt_broker_io","type":"mqtt-broker","name":"MQTTGO.IO","broker":"mqttgo.io","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"15","cleansession":true,"autoUnsubscribe":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"userProps":"","sessionExpiry":""},{"id":"ui_group_dht","type":"ui_group","name":"ESP32 DHT22 監測","tab":"ui_tab_main","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ui_tab_main","type":"ui_tab","name":"環境監控","icon":"dashboard"}]
沒有留言:
張貼留言