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

0.环境准备

1.软件

• 1.RT-Thread Studio
  下载链接
• 2.SquareLine Studio
  下载链接
• 3.MQTTX
  下载链接

2.硬件

• RA6M3 HMI Board板子
• 一根网线

3.示例文档和代码

• 文档
  以太网+GUI环境配置文档
  以太网+GUI技术实践文档

• 代码
  实践环节1和2代码：自己新建一个工程就可以
  [实践环节3和4代码链接](链接：https://pan.baidu.com/s/1pW4PInObvuLF67dK6rMmLA 提取码：9999)
  

#以太网+GUI技术实践技术路线图

1.实践环节一：以太网外设的使用

按照“以太网+GUI技术实践文档”一步一步操作就行。
主要步骤
1.创建HMI-Board模板工程。
2.在RT-Thread Studio的设置中使能以太网（Ethernet）外设。配置完要保存(ctrl+s)
3.保存配置并进行工程编译。
4.下载固件到开发板中。
5.进行电脑端网络设置。
6.检查网络连接。

电脑端设置注意
1.如果是台式机或笔记本插网线联网，接入开发板的网络可能回不稳定
这时请设置一下开发板那个网线的ip地址

2.如果在家庭网络连接中没有以太网选项，请按照以下步骤操作：

• 将电脑连接到手机热点。
• 启用电脑的移动热点。
• 返回WLAN属性界面，此时应该显示以太网选项。

查看网络
1.复位以后输入ifconfig查看是否获取到IP地址
2.成功获取到IP地址，可以输入"ping www.baidu.com"命令测试网络是否正常工作

2.实践环节二：MQTT 软件包的使用

按照“以太网+GUI技术实践文档”一步一步操作就行。
1.在示例工程中搜索 Kawaii-mqtt 软件包并使能 mqtt test 功能，然后拉取软件包到工程内，并编译、烧录固件到开发板中。
客户端代码设置用于配置后面的mqtt连接，但当你导入RT-Threads.json文件其实里面已经给配置好了。如果下次自己要改需要在这里改动。

    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 服务器成功。

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.连接
  

4.在订阅和发布的 topic 上，需要和开发板上的 topic 保持一致（sub/pub+手机号后四位）。使用 MQTT 工具向开发板订阅的 Topic 发送数据，并在开发板串口终端接收该消息并打印。

• 1.订阅
  mqtt订阅函数：mqtt_subscribe(client, “sub1332”, QOS0, sub_topic_handle1)
  发送下面数据
  
  {
  “temp”: 640,
  “humi”: 30,
  “lux”: 120
  }
  串口会接收到数据
  
• 2.订阅开发板发送的数据
  mqtt订阅函数：mqtt_publish(client, “pub1332”, &msg)
  函数调用 每4s发送一个数据

while (1)
{
        mqtt_publish_handle1(client);
        mqtt_sleep_ms(4 * 1000);
}

上面的提到代码都在文件：packages/kawaii-mqtt-latest/test/test.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);

3.实践环节三：LVGL 以太网数据监视器（比较综合的项目）

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

配置订阅信息

设置温度报警信息

配置完成界面

进行测试：
测试数据
{
“temp”: 640,
“humi”: 30,
“lux”: 120
}
发送下面数据，温度会报警（设置20-40的温度区间，超出会报警）

可以在Debug里看传过来的数据

注意：如果出现下面问题

解决方法：

4.实践环节四：使用Squareline Studio开发UI

使用的工程文件是：hmi-board-lvgl
按照“以太网+GUI技术实践文档”一步一步操作就行。
主要步骤
1.导入hmi-board-lvgl工程文件。
2.在Squareline Studio软件中创建LVGL工程，并且配置界面大小，配置好后得到和开发板界面大小相同的界面

3.在资源导出设置中，选择要导出的 UI 文件的路径。
4.修改相关选项为 “lvgl.h”，确保生成的代码与 LVGL 库的版本兼容。
5.导出 UI 文件时，选择 “hmi-board-lvgl\board\lvgl\demo\squareline” 路径作为导出目录。
6.点击导出按钮，等待 Squareline Studio 完成 LVGL 文件的导出过程。

这里可以设置控件事件，类似qt或C#

总结

在四个实践和挑战环节中，学习了如何使用mqtt协议进行消息传递、使用LVGL开发GUI界面、使用以太网和tcp协议实现网络通信。
1.学习了如何使用mqtt协议进行消息传递。mqtt协议是一种基于发布/订阅模式的轻量级通信协议，适用于物联网设备之间的消息传递。通过使用mqtt协议，能够实现设备之间的实时通信，并保证通信的安全可靠。

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

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

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

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