项目/活动电赛商城文档笔记仿真/工具参考设计AI助手
发布项目
登录/注册
2025寒假练 - 用CrowPanel ESP32 Display 4.3英寸HMI开发板实现MQTT连接HomeAssistant
该项目使用了CrowPanel ESP32 Display 4.3英寸HMI开发板，实现了HomeAssistant连接的设计，它的主要功能为：ESP32使用MQTT连接HomeAssistant。
标签
嵌入式系统
开发板
Sherlock
更新2025-03-13
32

本项目主要可以分为两部分，第一部分为云平台的搭建和配置，第二部分是使用开发板通过MQTT进行连接。

image.png

第一部分：配置云平台

云平台主要为三项配置，分别是宝塔页面（目的是为了后期方便使用云平台）、通过docker安装HomeAssistant和MQTT服务器。

第一步：我们需要购买一个云服务器。

可以选择阿里云、腾讯云、华为云等一系列云服务器。我购买的是腾讯云服务器（因为他当时做活动，便宜！！！）。

image.png

第二步：在云服务器里面安装 宝塔页面

安装宝塔界面是为了后期更好的在docker里面安装HomeAssistant和MQTT服务器。在云平台里面，打开终端输入命令。

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

输入命令后会输出

输出的网址，可以复制网址，到浏览器上，打开这个网址，根据输出的账号和密码输入进去就可以进去云平台。

（安装的目的仅仅是为了让后面更好操作，有这个页面要比单纯的命令行方便），然后再宝塔界面里面安装docker。

使用宝塔，访问你的云服务器，并傻瓜式安装 docker

点击左侧栏的 docker，你的页面上应该有一个“安装”。点击后，就进行安装，时间可能会较长，请耐心等待直到安装完成。

第三步：docker 安装完成后，直接拉取 HomeAssistant 镜像

在docker里面这届拉取 HomeAssistant。使用同样的方法来进行安装MQTT服务器。

ps:如果时间很慢的话，建议泡一杯咖啡，听说云南小种咖啡可以提高下载速度。

安装完成这两个东西后 创建docker容器。

第四步：创建docker容器

文件 -> 进入到 根目录下的 home/你的用户名/ 路径下，新建一个文件夹“homeassistant-config”

sudo docker run -d --name="homeassistant-v1" -v xxx:/config -p 8123:8123 homeassistant/home-assistant:latest

xxx 是自己的用户名路径。

第五步：开放端口和登录homeassistant

要在云服务器里将端口的防火墙打开。

image.png

其中登录网址是 ...:8123(省略的部分是自己云服务器的IP地址)。然后创建自己的账号和密码。登录。结果如下图所示

image.png

第六步：安装MQTT服务器，开启防火墙端口

和上述的安装过程一样。docker拉取的是emqx/emqx:5.1.4。

docker pull emqx/emqx:5.1.4

本次开启的云平台防火墙端口是18083端口。

登录的网址是这个。其中 ..***.***是IP地址（和上面一样）

...:18083

默认的用户名是：admin

默认的密码是：public

第七步；在homeassistant中添加MQTT集成。

image.png

点击后

image.png

服务器一栏写 公网IP

端口是1883（不要忘了将这个防火墙端口打开）

用户名和密码写 MQTT服务器的。

这样就可以和MQTT来接成功。

第二部分：ESP32程序部分

我的工程使用的是platform IO 的官方例程。在这个基础上进行修改。

UI显示部分。这个代码是 屏幕上的的显示部分。使用LVGL写的。

这部分函数是例程上的基础上进行修改的。

void ui_Screen1_screen_init(void)
{
    ui_Screen1 = lv_obj_create(NULL);
    lv_obj_clear_flag(ui_Screen1, LV_OBJ_FLAG_SCROLLABLE);      /// Flags
   

	ui_Screen2 = lv_obj_create(NULL);
	lv_obj_clear_flag( ui_Screen1, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Arc1 = lv_arc_create(ui_Screen1);
	lv_obj_set_width( ui_Arc1, 210);
	lv_obj_set_height( ui_Arc1, 210);
	lv_obj_set_align( ui_Arc1, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc1, 68);
	lv_arc_set_bg_angles(ui_Arc1,90,270);
	lv_obj_set_style_arc_color(ui_Arc1, lv_color_hex(0x8680F9), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc1, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc1, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc1, lv_color_hex(0x8680F9), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc1, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc1, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc1, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc1, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Arc2 = lv_arc_create(ui_Screen1);
	lv_obj_set_width( ui_Arc2, 156);
	lv_obj_set_height( ui_Arc2, 210);
	lv_obj_set_x( ui_Arc2, 1 );
	lv_obj_set_y( ui_Arc2, 29 );
	lv_obj_set_align( ui_Arc2, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc2, 68);
	lv_arc_set_bg_angles(ui_Arc2,90,270);
	lv_obj_set_style_arc_color(ui_Arc2, lv_color_hex(0x5DDBE5), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc2, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc2, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc2, lv_color_hex(0x46DEF0), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc2, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc2, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc2, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc2, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Arc3 = lv_arc_create(ui_Screen1);
	lv_obj_set_width( ui_Arc3, 100);
	lv_obj_set_height( ui_Arc3, 210);
	lv_obj_set_x( ui_Arc3, 1 );
	lv_obj_set_y( ui_Arc3, 58 );
	lv_obj_set_align( ui_Arc3, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc3, 68);
	lv_arc_set_bg_angles(ui_Arc3,90,270);
	lv_obj_set_style_arc_color(ui_Arc3, lv_color_hex(0xF4AE4B), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc3, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc3, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc3, lv_color_hex(0xF4AE4B), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc3, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc3, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc3, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc3, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Label1 = lv_label_create(ui_Screen1);
	lv_obj_set_width( ui_Label1, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label1, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label1, 21 );
	lv_obj_set_y( ui_Label1, 1 );
	lv_obj_set_align( ui_Label1, LV_ALIGN_CENTER );
    //char temp_1[3];
    //strcat(temp_1, " *c");
	lv_label_set_text(ui_Label1,temp);
	lv_obj_set_style_text_font(ui_Label1, &lv_font_montserrat_26, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Label2 = lv_label_create(ui_Screen1);
	lv_obj_set_width( ui_Label2, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label2, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label2, 30 );
	lv_obj_set_y( ui_Label2, -69 );
	lv_obj_set_align( ui_Label2, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label2," ");
	lv_obj_set_style_text_color(ui_Label2, lv_color_hex(0x6AC2CD), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label2, 255, LV_PART_MAIN| LV_STATE_DEFAULT);

}

WIFI连接和MQTT部分。安装PubSubClient库

/*****************************WIFI MQTT****** *********************************/
const char* wifi_ssid     = "####";//修改成自己的WIFI名字
const char* wifi_password = "*************";//自己WIFI的名称
// MQTT相关配置信息
const char *mqtt_broker_addr = "***********"; // 服务器地址，自己的云服务器的IP地址。
const uint16_t mqtt_broker_port = 1883; // 服务端口号            
const char *mqtt_username = "***********"; // 账号
const char *mqtt_password = "***********"; // 密码
const uint16_t mqtt_client_buff_size = 4096; // 客户端缓存大
String mqtt_client_id = "***********"; // 客户端ID
const char *mqtt_topic_pub = "***********"; // 需要发布到的主题
const char *mqtt_topic_sub = "TOESP01S"; // 需要订阅的主题
char temp[3]=  "25";

这些位置都换成自己的信息。

// MQTT消息回调函数，该函数会在PubSubClient对象的loop方法中被调用
void mqtt_callback(char *topic, byte *payload, unsigned int length)
{
    Serial.printf("Message arrived in topic %s, length %d\\n", topic, length);
    Serial.print("Message:");
    for (int i = 0; i < length; i++)
    {
        Serial.print((char)payload[i]);
    }
    Serial.println("\\n----------------END----------------");
}

连接WIFI部分。

    Serial.printf("\\nConnecting to %s", wifi_ssid);
    WiFi.begin(wifi_ssid, wifi_password);
    while (WiFi.status() != WL_CONNECTED)
    {
        delay(500);
        Serial.print(".");
    }
    Serial.println("ok.");
    Serial.print("IP address: ");
    Serial.println(WiFi.localIP());

设置MQTT 客户端

  // 设置MQTT客户端
  mqttClient.setClient(tcpClient);
  mqttClient.setServer(mqtt_broker_addr, mqtt_broker_port);
  mqttClient.setBufferSize(mqtt_client_buff_size);
  mqttClient.setCallback(mqtt_callback);

这部分是 在loop里面进行的代码部分。

/***************MQTT部分 ************/

 unsigned long currentMillis = millis(); // 读取当前时间

    // 连接MQTT服务器
    if (!mqttClient.connected()) // 如果未连接
    {
        if (currentMillis - previousConnectMillis > intervalConnectMillis)
        {
            previousConnectMillis = currentMillis;
            mqtt_client_id += String(WiFi.macAddress()); // 每个客户端需要有唯一的ID，不然上线时会把其他相同ID的客户端踢下线
            if (mqttClient.connect(mqtt_client_id.c_str())) // 尝试连接服务器
            // if (mqttClient.connect(mqtt_client_id.c_str(), mqtt_username, mqtt_password))
            {
                mqttClient.publish(mqtt_topic_pub, "hello mqtt!"); // 连接成功后可以发送消息
                mqttClient.subscribe(mqtt_topic_sub); // 连接成功后可以订阅主题
            }
        }
    }

    // 定期发送消息
    if (mqttClient.connected())
    {
        if (currentMillis - previousPublishMillis >= intervalPublishMillis) // 如果和前次时间大于等于时间间隔
        {
            previousPublishMillis = currentMillis;
            mqttClient.publish(mqtt_topic_pub, temp); //发送的话题
        }
    }
    //printLocalTime();
    // 处理MQTT事务
    mqttClient.loop();

通过网盘分享的文件：CrowPanel_ESP32_4.3.rar

链接: https://pan.baidu.com/s/14neO53R9FweLmqVpA4dlgQ?pwd=i4vd 提取码: i4vd


团队介绍
个人实现，普通电子专业学生。
评论
0 / 100
查看更多
猜你喜欢
2025寒假练-基于CrowPanel ESP32 Display 4.3英寸HMI开发板实现手写数字识别该项目使用了CrowPanel ESP32 Display 4.3英寸HMI开发板，实现了手写数字识别的设计，它的主要功能为：通过触摸屏幕，在画板上书写数字，通过ESP32进行推理，然后将推理结果显示到LED点阵上。 该项目使用了74HC595，实现了点亮8X8LED点阵的设计，它的主要功能为：通过程序控制，可以使用74HC595驱动点阵显示数字。 该项目使用了CrowPanel ESP32 Display 4.3英寸HMI开发板，实现了手写计算器的设计，它的主要功能为：通过触摸屏输入数字和运算符，实现个位数的加、减、乘运算。。
Elec
60
2025寒假练 - 用 CrowPanel ESP32 Display 4.3英寸HMI开发板 实现手写识别显示该项目使用了CrowPanel ESP32 Display 4.3英寸HMI开发板，实现了手写识别显示的设计，它的主要功能为：基于LVGL显示手写数字、基于神经网络识别数字、点阵屏显示。
Glass
84
2025寒假练 - 用 CrowPanel ESP32 Display 4.3英寸HMI开发板实现手写识别显示该项目使用了CrowPanel ESP32 Display 4.3英寸HMI开发板，实现了手写识别显示的设计，它的主要功能为：对手写的数字进行识别，将结果显示在4.3寸的屏幕和一个外接的LED点阵屏上。
Rabbid
26
相关活动
相关平台
目录
硬禾服务号
关注最新动态
0512-67862536
info@eetree.cn
江苏省苏州市苏州工业园区新平街388号腾飞创新园A2幢815室
苏州硬禾信息科技有限公司
友情链接
STEP小脚丫纳芯微电子
Copyright © 2024 苏州硬禾信息科技有限公司 All Rights Reserved 苏ICP备19040198号