摘要: 本文将介绍如何使用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 sqlite3
app = 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地址等。
* 本文仅提供一个基本的框架，实际应用中需要根据具体需求进行调整和优化。
