基于STM32的智能能源管理系统：HTML/CSS/JavaScript与Flask框架下的Modbus通信

随着可再生能源的普及和智能家居的兴起，智能能源管理系统（Smart Energy Management System, SEMS）逐渐成为现代家庭和企业实现高效电能利用的重要工具。本文将详细介绍一个基于 STM32 的智能能源管理系统的设计与实现过程，涵盖嵌入式编程、电力电子控制、通信协议及数据分析与优化等方面。

一、项目概述

本项目旨在开发一个智能能源管理系统，能够实时监测电能、太阳能和风能等多种能源数据，通过有效的控制策略优化能源使用，降低能耗成本，提高能效。系统将支持多种通信协议，便于与不同设备进行数据交互，并将数据上传至云平台进行分析和决策支持。

二、系统架构

系统架构设计如下图所示：

1. 硬件部分

• 单片机：使用 STM32 系列单片机作为核心控制器，负责数据采集和设备控制。

• 电力电子设备：包括逆变器和充电控制器，能够高效地管理各种能源输入和输出。

2. 通信协议

• Modbus：用于控制和监测电力设备的通信。

• CAN（Controller Area Network）：用于设备间的高速通信，特别适合在复杂的网络环境中。

3. 软件部分

三、环境搭建

1. 硬件环境

2. 软件环境

pip install Flask

• 前端环境：使用 VS Code 或其他代码编辑器，编写 HTML/CSS/JavaScript 代码。

3. 通信协议库

• Modbus 库：可以使用 pymodbus 库来实现通信。

pymodbuspip install pymodbus

四、代码实现

1. STM32 数据采集代码

首先，我们需要在 STM32 上实现对电能数据的采集。这里使用 ADC（模拟数字转换器）来读取电能传感器的输出。

STM32 数据采集代码示例

#include "stm32f4xx.h"

void ADC_Init(void) {
    
    RCC->APB2ENR |= RCC_APB2ENR_ADC1EN; 
    
    
    ADC1->CR1 = 0; 
    ADC1->CR2 |= ADC_CR2_ADON; 
    ADC1->SQR3 = 0; 
}

uint16_t ADC_Read(void) {
    
    ADC1->CR2 |= ADC_CR2_SWSTART;        
    
    
    while(!(ADC1->SR & ADC_SR_EOC));     
   
    
    return ADC1->DR;                     
}

代码说明

1. ADC_Init 函数：该函数用于初始化 ADC 模块。首先使能 ADC 时钟，然后配置 ADC 控制寄存器以启动 ADC。

2. ADC_Read 函数：该函数用于读取 ADC 值。它启动 ADC 转换，并在转换完成后返回结果。在实际应用中，可以根据需要选择不同的通道进行数据读取。

2. 电力电子控制代码

在采集到电能数据后，我们需要控制电力电子设备，如逆变器和充电控制器。以下代码示例展示如何控制逆变器的开关。

逆变器控制代码示例

#include "stm32f4xx.h"


void Inverter_Control(uint8_t state) {
    if(state) {
        GPIOB->ODR |= (1  0);  
    } else {
        GPIOB->ODR &= ~(1  0); 
    }
}

void GPIO_Init(void) {
    
    RCC->AHB1ENR |= RCC_AHB1ENR_GPIOBEN;

    
    GPIOB->MODER |= (1  (0 * 2)); 
}

代码说明

1. Inverter_Control 函数：该函数通过设置 GPIO 引脚的电平来控制逆变器的开关。传入的 state 参数决定逆变器的状态，1 表示开启，0 表示关闭。

2. GPIO_Init 函数：该函数初始化 GPIO 引脚，将 PB0 配置为输出模式，以便控制逆变器。

3. 数据上传至云平台的 Python 代码

在完成数据采集和控制后，我们需要将采集的数据上传到云平台以进行后续分析。以下示例使用 Flask 框架实现一个简单的 REST API，用于接收来自 STM32 的数据。

Flask 云平台代码示例

from flask import Flask, request, jsonify

app = Flask(__name__)


data_store = []

@app.route('/upload', methods=['POST'])
def upload_data():
    
    data = request.json
    
    data_store.append(data)
    
    return jsonify({"message": "Data received", "data": data}), 201

@app.route('/data', methods=['GET'])
def get_data():
    
    return jsonify(data_store), 200

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

代码说明

1. Flask 应用初始化：创建一个 Flask 应用实例。

2. upload_data 路由：处理 POST 请求，接收来自 STM32 的数据，并将其存储到 data_store 列表中。该路由返回一个 JSON 响应，确认数据已接收。

3. get_data 路由：处理 GET 请求，返回存储的数据列表，便于前端展示或进一步分析。

4. 主程序运行：运行 Flask 应用，监听所有 IP 地址的 5000 端口。

4. 前端数据展示代码示例

为了实现用户界面，前端部分可以使用 HTML 和 JavaScript 来展示来自云平台的数据。

HTML 代码示例

DOCTYPE html>
html lang="zh">
head>
    meta charset="UTF-8">
    meta name="viewport" content="width=device-width, initial-scale=1.0">
    title>智能能源管理系统title>
    style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
    style>
head>
body>
    h1>智能能源管理系统h1>
    table>
        thead>
            tr>
                th>时间th>
                th>电能（kWh）th>
                th>太阳能（kWh）th>
                th>风能（kWh）th>
            tr>
        thead>
        tbody id="data-table">
            
        tbody>
    table>

    script>
        
        async function fetchData() {
            try {
                const response = await fetch('http://localhost:5000/data'); 
                const data = await response.json(); 

                const tableBody = document.getElementById('data-table'); 
                tableBody.innerHTML = ''; 

                
                data.forEach((entry) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        ${entry.time}
                        ${entry.electricity}
                        ${entry.solar}
                        ${entry.wind}
                    `;
                    tableBody.appendChild(row); 
                });
            } catch (error) {
                console.error('获取数据失败:', error); 
            }
        }

        
        setInterval(fetchData, 5000);
        fetchData(); 
    script>
body>
html>

代码说明

1. HTML 结构：页面包含一个标题和一个表格，表格用于展示从后端获取的电能数据。表格的 thead 部分定义了列标题。

2. CSS 样式：简单的样式设置，主要用于美化表格和页面布局，使其更具可读性。

3. JavaScript 部分：

• fetchData 函数：该函数使用 Fetch API 从后端获取数据。它发送 GET 请求到http://localhost:5000/data，并解析返回的 JSON 数据。

• 更新表格：在获取到数据后，清空当前表格内容，并使用 forEach 遍历数据数组，将每条数据动态添加到表格中。

• 错误处理：如果在获取数据的过程中出现错误，使用 console.error 打印错误信息。

• 自动刷新：使用 setInterval 方法，每 5 秒调用一次 fetchData 函数，以便实时更新数据显示。

五、项目总结

通过以上的实现，我们成功构建了一个智能能源管理系统，具备以下功能：

• 数据采集：使用 STM32 单片机实时采集电能、太阳能和风能数据。这种实时监测能够帮助用户清晰了解各类能源的使用情况。

• 电力电子控制：系统能够控制逆变器和充电控制器，以优化能源使用。例如，在电量充足时，将多余的电量存储或反馈到电网中，从而提高能源利用效率。

• 通信协议支持：通过实现 Modbus 和 CAN 通信协议，确保了系统各个设备之间的高效通信。无论是设备间的状态监测，还是数据传输，都能快速、可靠地完成。

• 云平台数据分析：通过 Flask 框架搭建的后端，系统能够实现数据的上传和存储。用户可以随时从前端界面查看历史数据，进行数据分析，帮助用户更好地了解能源使用情况并制定优化策略。

• 用户友好的前端界面：使用 HTML、CSS 和 JavaScript 构建的前端界面，提供了直观的数据展示。用户可以实时查看电能、太阳能和风能的使用情况，方便管理和控制。