首页 前端知识 基于STM32的智能能源管理系统:HTML/CSS/JavaScript与Flask框架下的Modbus通信

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

2024-10-29 11:10:42 前端知识 前端哥 832 532 我要收藏

随着可再生能源的普及和智能家居的兴起,智能能源管理系统(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;                     
}
代码说明
  1. ADC_Init函数:该函数用于初始化ADC模块。首先使能ADC时钟,然后配置ADC控制寄存器以启动ADC。

  2. 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为输出
}
代码说明
  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">
            <!-- 数据行将通过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>

代码说明

  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构建的前端界面,提供了直观的数据展示。用户可以实时查看电能、太阳能和风能的使用情况,方便管理和控制。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19434.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!