基于STM32+ESP8266打造智能家居温湿度监控系统（附源码&接线图）

极客小张

于 2024-06-26 13:51:17 发布

阅读量837

点赞数 15

文章标签： stm32 智能家居嵌入式硬件物联网 html flask python

本文链接：https://blog.csdn.net/qq_40431685/article/details/139987112

版权

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