HMI-Board以太网数据监视器

1 开发工具

●RT-Thread Studio/Keil MDK5(固件开发、编译)
●SquareLine Studio(LVGL UI设计工具)
资料链接
●RT-Thread Studio下载链接:
https://download_redirect.rt-thread.org/download/studio/RT-Thread_Studio_2.2.7-setup-x86_64.exe
●SquareLine Studio下载链接:https://static.squareline.io/downloads/SquareLine_Studio_Windows_v1_3_2.zip
●MQTTX 下载链接:
https://packages.emqx.net/MQTTX/v1.9.6/MQTTX-Setup-1.9.6-x64.exe
●项目代码链接:
https://gitee.com/Rbb666/hmi-board-eth-monitor
HMI-Board以太网数据监视器_第1张图片

2 以太网外设的使用

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

HMI-Board以太网数据监视器_第2张图片

2.2 接下来安装烧写工具:

HMI-Board以太网数据监视器_第3张图片

2.3 创建 HMI-Board 模板工程:

HMI-Board以太网数据监视器_第4张图片

2.4 在 RT-Thread Setting 中的Hardware中使能 Ethernet (以太网)外设:

HMI-Board以太网数据监视器_第5张图片
HMI-Board以太网数据监视器_第6张图片

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

在这里插入图片描述

在这里插入图片描述

2.6 电脑端设置

HMI-Board以太网数据监视器_第7张图片

2.7 进入 控制面板→网络和 Internet→网络和共享中心

HMI-Board以太网数据监视器_第8张图片

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

HMI-Board以太网数据监视器_第9张图片

2.9 选择属性,点击允许其他网络用户通过Internet连接

HMI-Board以太网数据监视器_第10张图片

2.10 复位下开发板,然后进行下面步骤 !!!

如果遇到家庭网络连接没有以太网选项,请按照如下步骤:
1、电脑连接手机热点
2、使能电脑的移动热点
3、回到WLAN属性界面,则会显示以太网选项了

HMI-Board以太网数据监视器_第11张图片

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

获取到IP地址后,可以输入 ping www.baidu.com 测试网络是否可以用。

3 MQTT 软件包的使用

3.1 基于刚刚创建好的示例工程:

在 RT-Thread Setting 中搜索 Kawaii-mqtt 软件包,并使能mqtt test功能,
然后ctrl+s 拉取软件包到工程内:

HMI-Board以太网数据监视器_第12张图片

3.2 示例代码:

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

#include 
#include 
#include 
#include 
#include 
#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);

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

HMI-Board以太网数据监视器_第13张图片

3.4 输入 ka_mqtt 命令,等待连接MQTT服务器成功:HMI-Board以太网数据监视器_第14张图片

3.5 上位机软件配置

  1. 安装软件 安装MQTTX-Setup-1.9.6-x64.exe 软件 导入配置
  2. 打开MQTTX软件,按照下图选择导入tools/mqtt_tool 目录下的:RT-Threads.json 文件
    HMI-Board以太网数据监视器_第15张图片
    注意:其中Client ID需要修改为和其他人不同的数值,需要点击右侧的图标
    HMI-Board以太网数据监视器_第16张图片
    注意:订阅和发布的topic需要和开发板上的topic保持一致(sub/pub+手机号后四位)
    HMI-Board以太网数据监视器_第17张图片
    HMI-Board以太网数据监视器_第18张图片
{
    "temp": 23,
    "humi": 20,
    "lux": 120
}

使用MQTT工具向开发板订阅的Topic发送数据:
开发板串口终端接收到此消息,并打印:
HMI-Board以太网数据监视器_第19张图片

4 LVGL 以太网数据监视器

导入工程有以下两种方式,请任选其一即可(推荐方式一):
方式一:使用RT-Thread Studio

4.1 打开RT-Thread Studio 选择导入:

HMI-Board以太网数据监视器_第20张图片

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

HMI-Board以太网数据监视器_第21张图片

4.3 选择fimeware目录下进行导入

HMI-Board以太网数据监视器_第22张图片

4.4 点击编译按钮,等待编译完成

在这里插入图片描述

4.5 烧录固件

在这里插入图片描述

4.6 Demo使用介绍

克隆该https://gitee.com/Rbb666/hmi-board-eth-monitor仓库,进行
HMI-Board以太网数据监视器_第23张图片

你可能感兴趣的:(Rt-Thread,专栏介绍,stm32)