2025交互标牌 - 基于xiao-esp32-s3的智能电子价签系统

内容介绍

一、项目介绍

本项目设计并实现了一套创新的智能电子价签管理系统，旨在替代传统纸质价签，实现商品价格的远程实时更新和管理。系统采用Seeed Studio XIAO ESP32S3 Sense开发板作为终端显示设备，搭配OLED显示屏，通过SIOT MQTT服务器与基于Flask的Web管理系统进行通信。管理员可以通过Web界面实时管理商品信息、监控价签状态、调整价格，并通过MQTT协议将更新推送到物理价签设备上。
系统核心功能包括：

商品信息管理（添加、编辑、删除）
电子价签设备管理
商品与价签的绑定关系管理
实时状态监控（电量、信号强度、在线状态）
价格变更的即时推送
基础数据配置（分类、单位、位置等）

二、使用到的硬件介绍

1. Seeed Studio XIAO ESP32S3 Sense开发板

XIAO ESP32S3 Sense 引脚列表2.jpg

处理器：ESP32-S3双核Xtensa® 32位LX7 MCU，主频240MHz
无线连接：支持Wi-Fi 4（802.11b/g/n）和蓝牙5.0
存储：内置8MB PSRAM和8MB Flash
传感器：集成麦克风和摄像头接口（本项目未使用）
特点：体积小巧（21×17.5mm），低功耗设计，支持深度睡眠模式

2. OLED显示屏

尺寸：0.96英寸（也可使用1.3英寸）
分辨率：128x64像素
接口：I2C通信接口

三、方案框图和项目设计思路

1. 方案框图

+-----------------+     +----------------+     +-----------------+
| 电子价签终端     |<--->| SIOT MQTT服务器 |<--->| Flask Web服务器  |
| (XIAO+OLED屏)   |     | (消息中转)      |     |  (数据管理+界面)  |
+-----------------+     +----------------+     +-----------------+
       ^                                            |
       |                                            |
+----------------+                            +-----------------+
| 商品价格更新    |                            | 管理员操作       |
| 状态上报        |                            | (浏览器界面)     |
+----------------+                            +-----------------+

2. 项目设计思路

系统采用 “分层架构 + 模块化设计” 思路，分为三层：

终端设备层：XIAO ESP32S3作为主控，连接Wi-Fi并订阅MQTT主题，接收价格更新指令并刷新显示屏
通信层：使用SIOT作为MQTT Broker，实现终端与后台之间的消息传递
后台管理层：Flask提供RESTful API管理数据，Web界面提供可视化操作
数据存储：使用JSON文件存储商品信息、价签设备和绑定关系
实时通信：通过MQTT协议实现双向通信（指令下发和状态上报）

四、软件流程图和关键代码介绍

1.系统流程图

2.终端设备工作流程：

 初始化OLED显示屏 → 连接Wi-Fi网络 → 获取设备MAC地址 →  
 连接MQTT服务器 → 订阅指令主题 → 循环执行：  
   ├─ 接收MQTT消息（若MAC匹配则更新显示内容）  
   ├─ 每30秒上报设备状态（电量、信号等）  
   └─ 异常时重启设备

3.Web 平台工作流程：

 用户登录 → 加载设备/商品数据 → 实时展示仪表盘 →  
 用户操作（添加商品/绑定设备/更新信息） →  
 发送指令至MQTT服务器 → 接收终端状态反馈 → 更新界面显示

4. 关键代码介绍

1. MQTT消息处理（前端）

// 发布价签更新消息
function publishPriceTagUpdate(topic, message) {
    if (globalData.mqtt.client && globalData.mqtt.isConnected) {
        const jsonMessage = JSON.stringify(message);
        globalData.mqtt.client.publish(topic, jsonMessage, { qos: 1 }, (error) => {
            if (error) {
                addLog(`发布消息失败: ${error.message}`);
            } else {
                addLog(`发布消息成功: ${jsonMessage}`);
            }
        });
    }
}

2. 价签状态更新处理（后端）

# Flask API接收终端状态更新
@app.route('/api/status', methods=['POST'])
def update_status():
    data = request.json
    mac = data.get('mac_address')
    
    # 查找对应设备
    for device in esl_devices:
        if device['mac'] == mac:
            device['battery'] = data.get('battery_level')
            device['RSSI'] = data.get('RSSI')
            device['last_heartbeat'] = datetime.now().isoformat()
            device['status'] = 'online'
            break
    
    save_json('esl_devices.json', esl_devices)
    return jsonify(success=True)