Sitemap

HMI-Board Ethernet MQTT Cloud Connection Learning Notes | Technology Collection

6 min readAug 13, 2025

Brief Introduction to the HMI-Board Development Kit

In this practice, we use the HMI-Board development kit, based on the RA6M3 MCU. The HMI-Board is a high cost-performance graphical evaluation kit jointly launched by RT-Thread and Renesas. It replaces the traditional HMI + main control board hardware, enabling HMI, IoT, and control functions all in one hardware platform.

Powered by the high-performance Renesas RA6M3 chip and the RT-Thread software ecosystem, the HMI-Board not only delivers robust hardware performance but also offers a rich software ecosystem, helping developers rapidly create GUI-based smart hardware products.

Hardware Specifications:

● 2 MB on-chip Flash

● 640 KB on-chip SRAM

● Hardware JPEG decoding

● 2D graphics acceleration

● RGB888 LCD controller

● Arduino interface

● Pmod interface

● Ethernet interface

● USB Device

● CAN interface

● Speaker and microphone interfaces

● Onboard DAP-Link

Press enter or click to view image in full size

The microcontroller itself does not come with built-in Wi-Fi or Ethernet ports. The HMI-Board connects to the network via an external RW007 Wi-Fi module over SPI, with existing package support available.

Press enter or click to view image in full size

From the hardware schematic, it can be seen that SPI3 pins are used.

Press enter or click to view image in full size

In this project, the cloud platform used is the EMQX cloud server. The relationship between the development board, the computer, and the cloud platform is shown in the diagram: both the computer and the development board act as clients.

In addition, both MQTT publishers and subscribers are clients. The server simply acts as a relay, forwarding the messages published by publishers to all subscribers of that topic. Publishers can publish to any topics within their permissions, and a message publisher can also be a subscriber at the same time. This enables decoupling between producers and consumers, allowing a single published message to be received by multiple subscribers simultaneously.

Press enter or click to view image in full size

Practical Demo Operation Notes

1. In this practice, the Windows desktop version of the demo was used. The home page after startup is as follows:

Press enter or click to view image in full size

2. Since I did not have an Ethernet cable, I enabled the Wi-Fi module package during code compilation. Note that this is the Wi-Fi module connected via the SPI3 interface.

Press enter or click to view image in full size

3. In the code, I opened the test project and modified the original password and subscription information as follows:

Press enter or click to view image in full size

4. In the code, ka_mqtt was added to the command list. After powering on, you can enter help in the command line to see the ka_mqtt command:

scss

MSH_CMD_EXPORT(ka_mqtt, Kawaii MQTT client test program);

Press enter or click to view image in full size

5. You can start it directly from the command line, which is quite convenient. By using MQTTX to subscribe to the pub9215 topic, you can see the periodic data reported by the development board.

Press enter or click to view image in full size

6. The development board publishes messages to the cloud server, and the PC running MQTTX can see the published data by subscribing to the cloud topic. Conversely, when the PC publishes a message, the subscription thread on the development board also receives it and prints it to the serial console.

Press enter or click to view image in full size
Press enter or click to view image in full size

UI Design Practice Using GUI-Guider-1.5.1-GA

After the previous demo exercises, it’s time to try building something on my own. The following is a practice session using a UI design tool.

1. First, run an LVGL demo to test it out, compiling an air-conditioner-style GUI as shown below.

Press enter or click to view image in full size

2. Then, I ported the code to the board, compiled it, and downloaded it to see the effect.

Press enter or click to view image in full size

GUI-Guider LVGL UI Design & MQTT Connection to Cloud Practice

I had previously experimented with the Cloud platform, and this time I wanted to try connecting the RT-Thread development board to Cloud.

1. First, I designed the UI, using a button switch to control login and a slider to change values. The final effect is shown below:

Press enter or click to view image in full size

Board Power-Up and Initialization:

Press enter or click to view image in full size

2. Use the rw007 Wi-Fi package, cJSON, LVGL, and mqtt packages. The code below connects to Wi-Fi after booting up and creates the LVGL UI.

Press enter or click to view image in full size

3. The MQTT start function is placed inside the button’s event handler.

Press enter or click to view image in full size
Press enter or click to view image in full size

4. Enter the Cloud device password to prepare for login.

Press enter or click to view image in full size

5. After successful login, subscribe to messages.

Press enter or click to view image in full size

6. Then, create a child thread to periodically report power consumption data.

Press enter or click to view image in full size

7. After powering on, the board automatically connects to my Wi-Fi, and using ifconfig you can verify that the network connection is successful.

Press enter or click to view image in full size

8. By toggling the Cloud button switch on the UI, you can see that the connection and login succeed, and data is periodically published to the cloud.

Press enter or click to view image in full size
Press enter or click to view image in full size

9. On the cloud backend, the device’s online login status is visible.

Press enter or click to view image in full size

10. Switching to the cloud data, you can see the on/off switch toggling and power consumption data updating, along with terminal log messages indicating the operations.

Press enter or click to view image in full size
Press enter or click to view image in full size

--

--

RT-Thread IoT OS
RT-Thread IoT OS

Written by RT-Thread IoT OS

An Open-Source Community-Powered Real-Time Operating System (RTOS) Project! Let’s develop, DIY, create, share, and explore this new IoT World together!