RT-Thread-【RA6M3 HMI Board线下培训笔记】以太网+GUI技术实践篇-速通版RT-Thread问答社区

【RA6M3 HMI Board线下培训笔记】以太网+GUI技术实践篇-速通版

发布于 2024-01-24 18:29:18 浏览：794 订阅该版

[tocm]

# 0.环境准备
###1.软件
- 1.RT-Thread Studio
[下载链接](https://download_redirect.rt-thread.org/download/studio/RT-Thread_Studio_2.2.7-setup-x86_64.exe)
- 2.SquareLine Studio
[下载链接](https://static.squareline.io/downloads/SquareLine_Studio_Windows_v1_3_2.zip)
- 3.MQTTX
[下载链接](https://packages.emqx.net/MQTTX/v1.9.6/MQTTX-Setup-1.9.6-x64.exe)

###2.硬件
- RA6M3 HMI Board板子
- 一根网线

![screenshot_e30d3fe061f18c63a93cfe2ac1ba73d.jpg](https://oss-club.rt-thread.org/uploads/20240124/1c66834891ab43ef1340ba2e91e668f4.jpg.webp)

###3.示例文档和代码
- 文档
[以太网+GUI环境配置文档](https://docs.qq.com/doc/DY1VwWGxURXluckp5)
[以太网+GUI技术实践文档](https://docs.qq.com/doc/DY0FIWFVuTEpORlNn)

- 代码
实践环节1和2代码：自己新建一个工程就可以
[实践环节3和4代码链接](链接：https://pan.baidu.com/s/1pW4PInObvuLF67dK6rMmLA 提取码：9999)
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/7c5176a6dc2516db9458ad4b00ffe24d.png)

#以太网+GUI技术实践技术路线图
![以太网+GUI技术实践.jpg](https://oss-club.rt-thread.org/uploads/20240124/148917dd0cfeb9cb1888ab0f486dc01a.jpg.webp)
#实践环节一：以太网外设的使用
按照“以太网+GUI技术实践文档”一步一步操作就行。
主要步骤
1.创建HMI-Board模板工程。
2.在RT-Thread Studio的设置中使能以太网（Ethernet）外设。**配置完要保存(ctrl+s)**
3.保存配置并进行工程编译。
4.下载固件到开发板中。
5.进行电脑端网络设置。
6.检查网络连接。

**电脑端设置注意**
1.如果是台式机或笔记本插网线联网，接入开发板的网络可能回不稳定
这时请设置一下开发板那个网线的ip地址
![开发板的网络设置.png](https://oss-club.rt-thread.org/uploads/20240124/fa8cc327ed92959e6f08b2f87abbf60e.png)
2.如果在家庭网络连接中没有以太网选项，请按照以下步骤操作：
- 将电脑连接到手机热点。
- 启用电脑的移动热点。
- 返回WLAN属性界面，此时应该显示以太网选项。

**查看网络**
1.复位以后输入ifconfig查看是否获取到IP地址
2.成功获取到IP地址，可以输入"ping www.baidu.com"命令测试网络是否正常工作
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/0a317c27574c4424bc68ee960f1906f4.png)
#实践环节二：MQTT 软件包的使用
按照“以太网+GUI技术实践文档”一步一步操作就行。
1.在示例工程中搜索 Kawaii-mqtt 软件包并**使能 mqtt test 功能**，然后拉取软件包到工程内，并编译、烧录固件到开发板中。
**客户端代码设置**用于配置后面的mqtt连接，但当你导入RT-Threads.json文件其实里面已经给配置好了。如果下次自己要改需要在这里改动。
```c
    mqtt_set_host(client, "broker.emqx.io");
    mqtt_set_port(client, "1883");
    mqtt_set_user_name(client, "RT-Thread");
    mqtt_set_password(client, "012345678");
    mqtt_set_client_id(client, cid);
    mqtt_set_clean_session(client, 1);
```
2.**使用 ifconfig 命令查看是否获取到 IP 地址**，并输入 ka_mqtt 命令等待连接 MQTT 服务器成功。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/773d2b293158d668410151e542cb1d13.png)

3.安装 MQTTX-Setup-1.9.6-x64.exe 软件并导入配置。打开 MQTTX 软件，选择导入 tools/mqtt_tool 目录下的 RT-Threads.json 文件。注意，Client ID 需要修改为和其他人不同的数值，需要点击右侧的图标。
-注意：RT-Threads.json 文件是在**hmi-board-eth-monitor工程项目下**：hmi-board-eth-monitor\tools\mqtt_tool
- 1.连接
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/b84cc816002a16893f0f18c10450f070.png.webp)

4.在订阅和发布的 topic 上，需要和开发板上的 topic **保持一致**（sub/pub+手机号后四位）。使用 MQTT 工具向开发板订阅的 Topic 发送数据，并在开发板串口终端接收该消息并打印。
- 1.订阅
mqtt订阅函数：**mqtt_subscribe(client, "sub1332", QOS0, sub_topic_handle1)**
发送下面数据
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/f3aef0d333ce170244c01d86c3d2729c.png.webp)
{
  "temp": 640,
  "humi": 30,
  "lux": 120
}
*串口会接收到数据*
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/b42cee1f27611f22dbd537b782255941.png)
- 2.订阅开发板发送的数据
 mqtt订阅函数：**mqtt_publish(client, "pub1332", &msg)**
  函数调用 每4s发送一个数据
```c
while (1)
{
        mqtt_publish_handle1(client);
        mqtt_sleep_ms(4 * 1000);
}
```

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/ca4b4da78dde9a72617f6425292aa57a.png)

上面的提到代码都在文件：*packages/kawaii-mqtt-latest/test/test.c*
```c
static void sub_topic_handle1(void* client, message_data_t* msg)
{
    (void) client;
    KAWAII_MQTT_LOG_I("-----------------------------------------------------------------------------------");
    KAWAII_MQTT_LOG_I("%s:%d %s()...\ntopic: %s\nmessage:%s", __FILE__, __LINE__, __FUNCTION__, msg->topic_name, (char*)msg->message->payload);
    KAWAII_MQTT_LOG_I("-----------------------------------------------------------------------------------");
}
static int mqtt_publish_handle1(mqtt_client_t *client)
{
    mqtt_message_t msg;
    memset(&msg, 0, sizeof(msg));

msg.qos = QOS0;
    msg.payload = (void *)"this is a kawaii mqtt test ...";

return mqtt_publish(client, "pub5323", &msg);
}

static char cid[64] = { 0 };
static void kawaii_mqtt_demo(void *parameter)
{
    mqtt_client_t *client = NULL;

rt_thread_delay(6000);

mqtt_log_init();

client = mqtt_lease();

rt_snprintf(cid, sizeof(cid), "rtthread-5323", rt_tick_get());
    mqtt_set_host(client, "broker.emqx.io");
    mqtt_set_port(client, "1883");
    mqtt_set_user_name(client, "RT-Thread");
    mqtt_set_password(client, "012345678");
    mqtt_set_client_id(client, cid);
    mqtt_set_clean_session(client, 1);

KAWAII_MQTT_LOG_I("The ID of the Kawaii client is: %s ",cid);

mqtt_connect(client);
    mqtt_subscribe(client, "sub5323", QOS0, sub_topic_handle1);
    while (1) {
        mqtt_publish_handle1(client);
        mqtt_sleep_ms(4 * 1000);
    }
}

int ka_mqtt(void)
{
    rt_thread_t tid_mqtt;

tid_mqtt = rt_thread_create("kawaii_demo", kawaii_mqtt_demo, RT_NULL, 2048, 17, 10);
    if (tid_mqtt == RT_NULL) {
        return -RT_ERROR;
    }

rt_thread_startup(tid_mqtt);

return RT_EOK;}
MSH_CMD_EXPORT(ka_mqtt, Kawaii MQTT client test program);
```

#实践环节三：LVGL 以太网数据监视器（比较综合的项目）
**使用的工程文件是：hmi-board-eth-monitor**
使用方式一: RT-Thread Studio 导入工程,按照“以太网+GUI技术实践文档”一步一步操作就行。
导入项目，编译项目，下载项目。
下载时间有点长：执行完毕, 耗时：1124951ms.
导入开发板界面

![screenshot_57ab675fe1f486f8a8a787ab72d45db.jpg](https://oss-club.rt-thread.org/uploads/20240124/c213abba4c2e233314f6336fc682379d.jpg.webp)
配置订阅信息
![screenshot_01ec5af8e4eb56de460ee2ff795d72d.jpg](https://oss-club.rt-thread.org/uploads/20240124/c7cee17dd7c279e5e138313533fb75d7.jpg.webp)
设置温度报警信息
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/24af4ecc0ede226488940b9f229506fa.png.webp)
配置完成界面
![screenshot_b51346d5d54a9ec5456f268a3eb6a6a.jpg](https://oss-club.rt-thread.org/uploads/20240124/e385dd3e02cbb1c003fcaea2ffc5055b.jpg.webp)
进行测试：
测试数据
{
  "temp": 640,
  "humi": 30,
  "lux": 120
}
*发送下面数据，温度会报警（设置20-40的温度区间，超出会报警）*

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/8fa3c63a93fa6c386ee4663892219390.png.webp)

![screenshot_b17f0e62e9d7c6f9028df22e2178f64.jpg](https://oss-club.rt-thread.org/uploads/20240124/0423f2c2ad0b5125a704b296a834678b.jpg.webp)
可以在Debug里看传过来的数据

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/e135511b5ff2136587a8ba424150b3e4.png.webp)

注意：如果出现下面问题

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/592dbf2763914b10114dde60cdae69f6.png)

解决方法：

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/c543c59d727cb6beecc9f82aa9e16363.png)

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/9d4a3500f45a465f700da23d306fb2e9.png.webp)

#实践环节四：使用Squareline Studio开发UI
**使用的工程文件是：hmi-board-lvgl**
*按照“以太网+GUI技术实践文档”一步一步操作就行。*
主要步骤
1.导入hmi-board-lvgl工程文件。
2.在Squareline Studio软件中创建LVGL工程，并且配置界面大小，配置好后得到和开发板界面大小相同的界面
![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/9d7453ec9543d220ea60b87c7cbf38cd.png)
3.在资源导出设置中，选择要导出的 UI 文件的路径。
4.修改相关选项为 "lvgl.h"，确保生成的代码与 LVGL 库的版本兼容。
5.导出 UI 文件时，选择 "hmi-board-lvgl\board\lvgl\demo\squareline" 路径作为导出目录。
6.点击导出按钮，等待 Squareline Studio 完成 LVGL 文件的导出过程。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/84a35b63b80a7f3a43d7f488569a242e.png)
*这里可以设置控件事件，类似qt或C#*

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240124/c45e553c70981bbec7560d463a2e78f5.png)
#总结
在四个实践和挑战环节中，学习了如何使用mqtt协议进行消息传递、使用LVGL开发GUI界面、使用以太网和tcp协议实现网络通信。
1.学习了如何使用mqtt协议进行消息传递。mqtt协议是一种基于发布/订阅模式的轻量级通信协议，适用于物联网设备之间的消息传递。通过使用mqtt协议，能够实现设备之间的实时通信，并保证通信的安全可靠。

2.使用LVGL开发了GUI界面。LVGL是一款轻量级的图形库，适用于嵌入式系统的GUI开发。通过使用LVGL提供的函数和API，能够方便地绘制图形元素、添加交互功能、设置样式等，从而创建出美观且易用的用户界面。

3.在第三个实践环节中，学习了如何使用以太网和mqtt协议实现网络通信。通过使用以太网接口和mqtt协议栈，能够实现设备之间的数据传输。这为物联网设备的远程控制和监测提供了基础支持。

这次以太网+GUI技术实践线下培训对我的技术能力和实践经验有了很大的提升。掌握了重要的开发技术和工具，为未来的物联网项目开发打下了坚实的基础。

我想向RT-Thread实践老师、现场工作人员和组织者表示感谢。感谢你们的辛勤付出和耐心指导，让我们能够顺利完成这次以太网+GUI技术实践线下培训。同时，也要感谢瑞萨电子为我们提供了优秀的硬件设备和场地支持，为我们的学习提供了保障。这次实践培训不仅让我们学到了很多知识和技能，也增强了我们的团队合作和解决问题的能力。再次感谢大家的付出和支持！