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

发布时间：2024-12-11 15:40

JavaScript的学习路径：HTML+CSS为基础，熟练DOM操作，深入ES6和框架如React或Vue #生活技巧# #工作学习技巧# #编程语言学习路径#

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

一、项目概述

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

二、系统架构

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

用户界面

云平台

数据分析与优化

STM32单片机

电力电子控制

数据采集

逆变器

充电控制器

电能/太阳能/风能数据

1. 硬件部分

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

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

2. 通信协议

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

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

3. 软件部分

前端：基于HTML/CSS/JavaScript的用户界面，用于实时显示数据和控制指令。

后端：使用Python Flask框架构建云平台，负责数据接收、存储和分析。

三、环境搭建

1. 硬件环境

开发板：STM32F4系列开发板。

电力电子设备：选用合适的逆变器和充电控制器。

2. 软件环境

IDE：使用STM32CubeIDE进行嵌入式开发。

Python环境：使用Anaconda或直接安装Python3和Flask框架。

# 安装Flask pip install Flask 12 前端环境：使用VS Code或其他代码编辑器，编写HTML/CSS/JavaScript代码。 3. 通信协议库 Modbus库：可以使用pymodbus库来实现通信。

# 安装 pymodbuspip install pymodbus 12

四、代码实现

1. STM32数据采集代码

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

STM32数据采集代码示例

#include "stm32f4xx.h" void ADC_Init(void) { // 使能ADC时钟 RCC->APB2ENR |= RCC_APB2ENR_ADC1EN; // 配置ADC ADC1->CR1 = 0; // 清除配置寄存器 ADC1->CR2 |= ADC_CR2_ADON; // 启动ADC ADC1->SQR3 = 0; // 选择通道0 } uint16_t ADC_Read(void) { // 开始转换 ADC1->CR2 |= ADC_CR2_SWSTART; // 等待转换完成 while(!(ADC1->SR & ADC_SR_EOC)); // 读取ADC转换结果 return ADC1->DR; }

12345678910111213141516171819202122 代码说明

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

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

2. 电力电子控制代码

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

逆变器控制代码示例

#include "stm32f4xx.h" // 假设PB0连接到逆变器控制引脚 void Inverter_Control(uint8_t state) { if(state) { GPIOB->ODR |= (1 << 0); // 使能逆变器 } else { GPIOB->ODR &= ~(1 << 0); // 禁用逆变器 } } void GPIO_Init(void) { // 使能GPIOB时钟 RCC->AHB1ENR |= RCC_AHB1ENR_GPIOBEN; // 配置PB0为输出模式 GPIOB->MODER |= (1 << (0 * 2)); // 设置PB0为输出 }

123456789101112131415161718 代码说明

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

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)

1234567891011121314151617181920212223 代码说明

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

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

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

主程序运行：运行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(); // 解析JSON数据 const tableBody = document.getElementById('data-table'); // 获取表格主体 tableBody.innerHTML = ''; // 清空当前表格内容 // 遍历数据并填充表格 data.forEach((entry) => { const row = document.createElement('tr'); row.innerHTML = ` <td>${entry.time}</td> <td>${entry.electricity}</td> <td>${entry.solar}</td> <td>${entry.wind}</td> `; tableBody.appendChild(row); // 将新行添加到表格中 }); } catch (error) { console.error('获取数据失败:', error); // 捕获并打印错误 } } // 每5秒自动刷新数据 setInterval(fetchData, 5000); fetchData(); // 初次加载数据 </script> </body> </html>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 代码说明

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

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

JavaScript部分：

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

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

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

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