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

随着可再生能源的普及和智能家居的兴起，智能能源管理系统（Smart Energy Management System, SEMS）逐渐成为现代家庭和企业实现高效电能利用的重要工具。本文将详细介绍一个基于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复制

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

3. 通信协议库

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

 # 安装
pymodbuspip install pymodbus复制

四、代码实现

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;                     
}复制

代码说明

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为输出
}复制

代码说明

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)复制

代码说明

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">
            <!-- 数据行将通过JavaScript动态添加 -->
        </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>复制

代码说明

HTML结构：页面包含一个标题和一个表格，表格用于展示从后端获取的电能数据。表格的thead部分定义了列标题。
CSS样式：简单的样式设置，主要用于美化表格和页面布局，使其更具可读性。
JavaScript部分：

fetchData函数：该函数使用Fetch API从后端获取数据。它发送GET请求到http://localhost:5000/data，并解析返回的JSON数据。
更新表格：在获取到数据后，清空当前表格内容，并使用forEach遍历数据数组，将每条数据动态添加到表格中。
错误处理：如果在获取数据的过程中出现错误，使用console.error打印错误信息。
自动刷新：使用setInterval方法，每5秒调用一次fetchData函数，以便实时更新数据显示。

五、项目总结

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

数据采集：使用STM32单片机实时采集电能、太阳能和风能数据。这种实时监测能够帮助用户清晰了解各类能源的使用情况。
电力电子控制：系统能够控制逆变器和充电控制器，以优化能源使用。例如，在电量充足时，将多余的电量存储或反馈到电网中，从而提高能源利用效率。
通信协议支持：通过实现Modbus和CAN通信协议，确保了系统各个设备之间的高效通信。无论是设备间的状态监测，还是数据传输，都能快速、可靠地完成。
云平台数据分析：通过Flask框架搭建的后端，系统能够实现数据的上传和存储。用户可以随时从前端界面查看历史数据，进行数据分析，帮助用户更好地了解能源使用情况并制定优化策略。
用户友好的前端界面：使用HTML、CSS和JavaScript构建的前端界面，提供了直观的数据展示。用户可以实时查看电能、太阳能和风能的使用情况，方便管理和控制。

	#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;
	}

	#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为输出
	}

	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)

	<!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">
	<!-- 数据行将通过JavaScript动态添加 -->
	</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>

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

一、项目概述

二、系统架构

1. 硬件部分

2. 通信协议

3. 软件部分

三、环境搭建

1. 硬件环境

2. 软件环境

3. 通信协议库

四、代码实现

1. STM32数据采集代码

STM32数据采集代码示例

代码说明

2. 电力电子控制代码

逆变器控制代码示例

代码说明

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

Flask云平台代码示例

代码说明

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

HTML 代码示例

代码说明

五、项目总结

微信扫一扫：分享