摘要:?本文將介紹如何使用STM32單片機、ESP8266 Wi-Fi模塊和Python Flask框架構建一個完整的物聯網系統，實現傳感器數據采集、無線傳輸、云端存儲及Web可視化展示。
關鍵詞:?STM32, ESP8266, 傳感器, Flask, 物聯網, 云平臺, 數據可視化
1. 系統概述
本系統以STM32作為主控芯片，負責采集傳感器數據，并通過ESP8266模塊將數據發送至云平臺。云平臺采用輕量級的Flask框架搭建，接收并存儲數據，同時提供Web界面實時顯示傳感器數值變化曲線。
1.1 系統架構
以下是系統架構圖：
?
1.2 功能模塊
- 傳感器節點:?采集環境數據，例如溫度、濕度、光照強度等。
- STM32微控制器:?控制傳感器數據采集，并將數據通過串口發送至ESP8266模塊。
- ESP8266 Wi-Fi模塊:?連接Wi-Fi網絡，并將數據通過HTTP協議發送至云平臺。
- Flask Web服務器:?接收傳感器數據并存儲到數據庫，同時提供Web API接口供前端訪問。
- 數據庫:?存儲傳感器數據，例如使用SQLite或MySQL。
- Web前端:?使用HTML、CSS和JavaScript實現數據可視化展示，例如使用ECharts或Chart.js繪制圖表。
2. 硬件設計
2.1 元器件清單
| 序號 | 元器件名稱 | 型號 | 數量 | 備注 |
|---|---|---|---|---|
| 1 | STM32開發板 | STM32F103C8T6 | 1 | |
| 2 | ESP8266模塊 | ESP8266-01 | 1 | |
| 3 | DHT11傳感器 | - | 1 | 或其他傳感器 |
| 4 | 杜邦線 | - | 若干 |
2.2 電路連接圖
- 請根據實際使用的傳感器和模塊修改以下連接方式。
3. 軟件設計
3.1 STM32代碼
- 使用STM32CubeMX生成初始化代碼，并配置串口和傳感器讀取功能。
- 定時采集傳感器數據，并通過串口發送至ESP8266模塊。
// ... STM32初始化代碼 ...// DHT11數據結構體
typedef struct {uint8_t humidity;uint8_t temperature;
} DHT11_Data;// 讀取DHT11數據
DHT11_Data DHT11_Read(void);// 發送數據到ESP8266
void ESP8266_Send(char *data);int main(void)
{// ... 初始化代碼 ...while (1) {DHT11_Data dht11_data = DHT11_Read();char data[50];sprintf(data, "temperature=%d&humidity=%d", dht11_data.temperature, dht11_data.humidity);ESP8266_Send(data);HAL_Delay(5000); // 5秒采集一次數據}
}3.2 ESP8266配置
- 使用AT指令配置ESP8266模塊為Station模式，并連接Wi-Fi網絡。
- 將STM32發送的數據通過HTTP POST請求發送至Flask服務器。
// ESP8266 AT指令配置
AT+CWMODE=1 // 設置為Station模式
AT+CWJAP="your_ssid","your_password" // 連接Wi-Fi// 發送HTTP POST請求
AT+CIPSTART="TCP","your_server_ip",5000 // 建立TCP連接
AT+CIPSEND=xxx // 發送數據長度
> POST /data HTTP/1.1
> Host: your_server_ip
> Content-Type: application/x-www-form-urlencoded
> Content-Length: xxx> temperature=25&humidity=60 // 傳感器數據3.3 Flask服務器代碼
- 使用Flask框架創建Web應用，并定義路由接收傳感器數據。
- 將數據存儲到數據庫，并提供API接口供前端獲取數據。
from flask import Flask, request, jsonify
import sqlite3app = Flask(__name__)# 數據庫連接
conn = sqlite3.connect('sensor_data.db')
cursor = conn.cursor()# 創建數據表
cursor.execute('''CREATE TABLE IF NOT EXISTS sensor_data (id INTEGER PRIMARY KEY AUTOINCREMENT,temperature REAL,humidity REAL,timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)
''')@app.route('/data', methods=['POST'])
def receive_data():temperature = request.form.get('temperature')humidity = request.form.get('humidity')# 將數據插入數據庫cursor.execute("INSERT INTO sensor_data (temperature, humidity) VALUES (?, ?)", (temperature, humidity))conn.commit()return jsonify({'status': 'success'})# 獲取最新傳感器數據
@app.route('/api/latest_data')
def get_latest_data():cursor.execute("SELECT * FROM sensor_data ORDER BY timestamp DESC LIMIT 1")data = cursor.fetchone()return jsonify({'temperature': data[1], 'humidity': data[2]})if __name__ == '__main__':app.run(host='0.0.0.0', debug=True)
3.4 Web前端代碼
- 使用JavaScript和圖表庫（例如ECharts）獲取傳感器數據并繪制實時圖表。
<!DOCTYPE html>
<html>
<head><title>傳感器數據可視化</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</head>
<body><div id="chart" style="width: 800px; height: 400px;"></div><script>var chartDom = document.getElementById('chart');var chart = echarts.init(chartDom);function updateChartData() {fetch('/api/latest_data').then(response => response.json()).then(data => {// 更新圖表數據chart.setOption({xAxis: {type: 'category',data: ['溫度', '濕度']},yAxis: {type: 'value'},series: [{data: [data.temperature, data.humidity],type: 'bar'}]});});}// 定時更新數據setInterval(updateChartData, 5000);</script>
</body>
</html>
4. 系統測試
- 編譯并燒錄STM32代碼，確保傳感器數據采集正常。
- 配置ESP8266模塊連接Wi-Fi網絡，并測試與Flask服務器的通信。
- 運行Flask Web應用，并訪問Web界面查看數據圖表。
5. 總結
本文詳細介紹了如何使用STM32、ESP8266和Flask構建一個完整的物聯網系統，實現傳感器數據采集、無線傳輸、云端存儲及Web可視化展示。通過學習本文，你可以了解物聯網系統開發的基本流程，并掌握相關技術知識。
附錄
- STM32CubeMX下載:?https://www.st.com/en/development-tools/stm32cubemx.html
- ESP8266 AT指令集:?Technical Documents | Espressif Systems
**注意:**
* 代碼示例中使用DHT11傳感器作為演示，你可以根據實際需求選擇其他類型的傳感器。
* 請將代碼中的占位符替換為實際的Wi-Fi信息、服務器IP地址等。
* 本文僅提供一個基本的框架，實際應用中需要根據具體需求進行調整和優化。
