RT-Thread-【RA6M3 HMI Board线下培训笔记】MQTT\网关\以太网1.20RT-Thread问答社区

【RA6M3 HMI Board线下培训笔记】MQTT\网关\以太网1.20

发布于 2024-01-20 22:42:00 浏览：515 订阅该版

[tocm]

![太网HMI线下培训](https://oss-club.rt-thread.org/uploads/20240120/8bb1f734e66f966f358300fcbf8fe9ed.png.webp)
# 以太网HMI线下培训-环境准备
这是官方社群的文档：【腾讯文档】以太网线下培训（HMI-Board）所有教程都在这~
https://docs.qq.com/doc/DY0FIWFVuTEpORlNn
---
$$
\textcolor{#4183c4}{RA6M3 HMI-Board} 
$$
本次培训使用的是，由RT-Thread与瑞萨电子及LVGL官方合作推出的一款高性价比图形评估套件。它采用了瑞萨电子的高性能RA6M3芯片，具备2D的图形加速和JPEG编解码功能。配合RT-Thread软件生态系统，可帮助开发人员轻松创建GUI智能硬件产品。

![640.png](https://oss-club.rt-thread.org/uploads/20240120/e65d47b87c0e7f0d1bd2ff0698187960.png.webp)
这是官方公众号里通知：

> 1月20号，RT-Thread 瑞萨电子共同举办 智能家居网络开发：RA6M3 HMI Board 以太网+GUI技术实践线下培训。本期培训， 开发者将了解以太网在嵌入式行业的应用，上手LVGL GUI图形界面开发，
> 从0到1的去学习如何进行智能家居网络开发。同时我们还特设现场交流环节，RT-Thread及瑞萨电子资深技术工程师将现场与开发者交流、答疑解惑。

## 环境准备
### ●电脑（需要带网口/自备带网口的拓展坞）
### ●Win10/11 系统
### ●网线+RA6M3 HMI-Board

## 开发工具
### ●RT-Thread Studio/Keil MDK5（固件开发、编译）
$$
RT-Thread Studio开发工具
$$
$$
SquareLine Studio图形工具
$$
$$
MQTTX上位机软件
$$

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240120/400241fa8a8d5b383e84937a0966e5bd.png)
## 资料链接
### ●RT-Thread Studio下载链接：
[RT-Thread Studio下载链接](%EF%BC%9Ahttps://download_redirect.rt-thread.org/download/studio/RT-hread_Studio_2.2.7-setup-x86_64.exe)

### ●SquareLine Studio下载链接：

[SquareLine Studio 下载链接](https://static.squareline.io/downloads/SquareLine_Studio_Windows_v1_3_2.zip)

### ●MQTTX 下载链接：
[MQTTX 下载链接](https://packages.emqx.net/MQTTX/v1.9.6/MQTTX-Setup-1.9.6-x64.exe)

[MQTTX官网](https://mqttx.app/zh)

## 历程下载：

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240120/4c26e862e755a990cba86bdbf488c173.png.webp)
链接：https://pan.baidu.com/s/1rPTo7ZM0OYqpfmm5GSGiZQ?pwd=6666 
提取码：6666 
--来自百度网盘超级会员V5的分享

---
# 开始！ HMI-Board    以太网数据监视器
## Rt-Thread的版本有三类
- 标准
- Nano
- smart

### 这次培训是以标准版为主：
$$
关键词：以太网 GUI LVGL 嵌入式图形库 Squareline
$$

现场实践中……
---
# 注意：详细内容、参考以上官方文档
# 注意：以下仅为个人探索的Gif，希望给小白以启发
---
# 实践环节一：以太网外设的使用

安装好RT-Thread Studio 后我们需要安装HMI-Board的开发板支持包：

接下来安装烧写工具：

创建 HMI-Board 模板工程：

在 RT-Thread Setting 中的Hardware中使能 Ethernet （以太网）外设：

然后`ctrl+s` 保存配置到工程，接下来点击编译选项进行工程的编译：

最后点击下载选项，烧录固件到开发板中：

电脑端设置
1.打开控制面板

2.进入：控制面板→网络和 Internet→网络和共享中心

3.选择当前电脑连接的wi-fi

4.选择属性，点击允许其他网络用户通过Internet连接

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240126/066e9ceb4247187e3c8dc94059e8e1dd.png.webp)
5.！！！复位下开发板，然后进行下面步骤	！！！

查看网络
烧录好固件后，打开串口终端，可以输入` ifconfig `命令查看是否获取到IP地址。

![screenshot_image.png](https://oss-club.rt-thread.org/uploads/20240126/f6c1c432c8510a7607a93b4debee5e6d.png.webp)
获取到IP地址后，可以输入  `ping www.baidu.com `测试网络是否可以用。

![屏幕截图 2024-01-20 143404.png](https://oss-club.rt-thread.org/uploads/20240120/d61f414a3f22fc841a032a39e540707d.png.webp)
# 实践环节二：MQTT 软件包的使用
基于刚刚创建好的示例工程：
在 RT-Thread Setting 中搜索 `Kawaii-mqtt` 软件包，并使能mqtt test功能，
然后`ctrl+s `拉取软件包到工程内：

示例代码：
将下面代码粘贴覆盖 `packages/kawaii-mqtt-latest/test/test.c `

实在不行是可以手动拖的。
```c
#include <stdio.h>
#include <stdint.h>
#include <rtthread.h>
#include <rtdevice.h>
#include <board.h>
#include "mqttclient.h"

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);
```

编译，烧录固件到开发板中，使用 `ifconfig` 命令查看是否获取到IP地址：

输入 `ka_mqtt` 命令，等待连接MQTT服务器成功：

上位机软件配置
安装软件
安装`MQTTX-Setup-1.9.6-x64.exe` 软件
导入配置
打开MQTTX软件，按照下图选择导入tools/mqtt_tool 目录下的：RT-Threads.json 文件

注意：其中`Client ID`需要修改为和其他人不同的数值，需要点击右侧的图标

注意：订阅和发布的topic需要和开发板上的topic保持一致（sub/pub+手机号后四位）

{
    "temp": 23,
    "humi": 20,
    "lux": 120
}

使用MQTT工具向开发板订阅的Topic发送数据：
开发板串口终端接收到此消息，并打印：

# 实践环节三：LVGL 以太网数据监视器
导入工程有以下两种方式，请任选其一即可（推荐方式一）：
**方式一：使用RT-Thread Studio**
- 1、打开RT-Thread Studio 选择导入：

- 2、选择导入RT-Thread Studio项目到工作空间

- 3、选择fimeware目录下进行导入

- 4、点击编译按钮，等待编译完成

- 5、烧录固件

**方式二：使用Keil MDK5**
- 1、双击`project.uvprojx `文件打开项目

- 2、点击编译按钮，等待编译完成

- 3、点击下载按钮进行固件的烧录

**Demo**使用介绍
克隆该`https://gitee.com/Rbb666/hmi-board-eth-monitor`仓库，进行

![Rbb666/hmi-board-eth-monitor](https://img-blog.csdnimg.cn/direct/143b105b254941dbb4ba18bacb158a8a.png)

# 实践环节四：使用Squareline Studio开发UI
创建LVGL工程，配置如下：

UI项目资源导出设置：

选择ui文件导出路径：

修改以下选项为 `lvgl.h`

导出UI文件，选择`hmi-board-lvgl\board\lvgl\demo\squareline`路径：

点击导出，即可导出LVGL文件：

QA
**问题1：**

解决办法：

node-red 可视化界面（选做）
  Node-RED是一个物联网编程工具，它以新颖和有趣的方式，将硬件设备、应用接口和在线服务连接到一起。
  它不仅提供了一个基于浏览器的编程环境和丰富的节点类型，使流程的创建变得非常容易，而且还为流程的运行提供了运行环境，实现了一键部署的能力。
**安装node-red**
Windows 环境：
1、安装nodejs服务：
安装tools/node-red 目录下的`node-v18.18.1-x64.msi`软件。
2、安装node-red服务：打开powershell，输入以下命令
`npm install -g --unsafe-perm node-red`

3、在终端输入node-red，打开服务

4、打开http://127.0.0.1:1880/ 网址，即可进入node-red界面
5、进入右上角的节点管理

6、安装插件：控制板中的搜索框中输入dashboard，安装对应插件：

导入配置
导入`tools/node-red` 目录下的flows.json文件：
   
进行节点的导入：

导入成功后见下图：

使用方式
配置订阅和发布的topic：

全部配置好后，点击右上角的部署：

在dashboard界面点击可以进入web界面：

或者进入网址：`http://127.0.0.1:1880/ui/`

---
## 现场照片

![地点图.jpg](https://oss-club.rt-thread.org/uploads/20240120/ea0c50a894a9b72d7860f9a430092009.jpg.webp)

![RTTHMI3.jpg](https://oss-club.rt-thread.org/uploads/20240120/d62aec2932351bc5f9d89216e7dd48c4.jpg.webp)

![Rtt-HMI生活2.jpg](https://oss-club.rt-thread.org/uploads/20240120/2dc490fec42bf8dfb8d6f704106adc25.jpg.webp)

![1.20RttHMIDPask.jpg](https://oss-club.rt-thread.org/uploads/20240120/f65963f4953e900fcb080150a72dc4a8.jpg.webp)
---
# 参考
[1]【腾讯文档】以太网线下培训（HMI-Board）
https://docs.qq.com/doc/DY0FIWFVuTEpORlNn
[2]andychen《五分钟玩转新社区》
https://club.rt-thread.org/ask/article/f8fe0f15dc8749bc.html
[3]DarrenPig《RT-Thread 瑞萨 智能家居网络开发：RA6M3 HMI Board 以太网+GUI技术实践》
http://t.csdnimg.cn/GcAEz
[4]【腾讯文档】Rt-Thread线下培训 社群准备文档
https://docs.qq.com/doc/DY1VwWGxURXluckp5
[5]公众号 《本周六-上海! 以太网+GUI技术实践线下培训》
https://mp.weixin.qq.com/s/KF307YcXGA_6L9jUiqYuQw
---
@andychen @RT-Thread小师弟 @[金探长Jeeed](https://b23.tv/XHpBN6s)
感谢^-^😀