【STM32F411Nucleo测评】modbus&LVGL 屏显从站

pomin

【STM32F411Nucleo测评】modbus&LVGL 屏显从站 [复制链接]

> 在电机应用中，尝尝需要获知电机的运行参数，例如转速、温度等，许多驱动板也会带有屏显，或者通过modbus连接到上位机或者组态屏来监控电机状态。本文使用 LVGL 和 Freemodbus 库制作了一个带屏线从站的 demo

## 往期链接

[【STM32F411Nucleo测评】开箱，搭建开发环境，串口输出](https://bbs.eeworld.com.cn/thread-1272849-1-1.html)
[【STM32F411Nucleo测评】驱动 1.3 寸 LCD 屏幕](https://bbs.eeworld.com.cn/thread-1272852-1-1.html)
[【STM32F411Nucleo测评】移植多功能按键驱动库](https://bbs.eeworld.com.cn/thread-1273453-1-1.html)
[【STM32F411Nucleo测评】移植 Freemodbus 库](https://bbs.eeworld.com.cn/thread-1273454-1-1.html)
[【STM32F411Nucleo测评】移植 LVGL 界面库](https://bbs.eeworld.com.cn/thread-1273455-1-1.html)

在前文的介绍中，已经完成了对 LVGL 和 Freemodbus 的移植，下面介绍做一个上层应用——modbus LVGL 屏显从站的 demo 制作。

## GUI Guider 设计界面

GUI Guider 是 NXP 给 LVGL 开发的可视化界面编辑、模拟器，所见即所得，同时也可以在此之上完成对于时间、定时器、界面切换任务的添加，这里绘制了一个 demo 界面，有两个按键、一个滑条和一个标签文本。

设计的操作逻辑如下：
- 按下 Down 按键减小速度、Up 按键增大速度
- 滑条可以百分比放缩显示当前速度
- 标签文本显示当前速度

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_793333_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20240304221234.png</strong> <em class="xg1">(171.32 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_793333" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=793333&handlekey=savephoto_793333">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

对于上述的功能写代码当然是比较容易实现的，但是这里是在 GUI Guider 中添加这些事件和任务的响应代码。

按下 Down 按键减小速度、Up 按键增大速度时对应的是 Click 事件，这里添加 Click 的事件代码，当 Down 按下后会设置标签文本并且修改滑条的位置

```c
unsigned int speed = 1000;
```

```c
speed-=10;
lv_label_set_text_fmt(guider_ui.screen_label_1, "Speed: %dRPM", speed);
lv_slider_set_value(guider_ui.screen_slider_1, speed / 16, LV_ANIM_ON);
```

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_793334_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20240304222552.png</strong> <em class="xg1">(274.57 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_793334" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=793334&handlekey=savephoto_793334">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

类似的, Up 按键的 Click 事件添加代码

```c
speed+=10;
lv_label_set_text_fmt(guider_ui.screen_label_1, "Speed: %dRPM", speed);
lv_slider_set_value(guider_ui.screen_slider_1, speed / 16, LV_ANIM_ON);
```

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_793335_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20240304222740.png</strong> <em class="xg1">(309.79 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_793335" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=793335&handlekey=savephoto_793335">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

然后在 GUI Guider 中仿真一下，与预期的想法一致，然后生成代码加入到 keil 工程中

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_793336_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20240304222857.png</strong> <em class="xg1">(186.58 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_793336" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=793336&handlekey=savephoto_793336">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

添加的文件如下，当然用别的字体的话字体文件跟这个肯定名字不一样

<ignore_js_op>

<div class="tip tip_4 aimg_tip" id="aimg_793337_menu" style="position: absolute; display: none" disautofocus="true">
<div class="xs0">
<p><strong>Pasted image 20240304223206.png</strong> <em class="xg1">(36.76 KB, 下载次数: 0)</em></p>
<p>
<a href="javascript:;" class="loginf" >下载附件</a>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_793337" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=793337&handlekey=savephoto_793337">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

然后就可以把生成的界面代码加载起来了，先在 main.c 中定义一个全局变量

```c
lv_ui guider_ui;
```

然后在 while(1) 之前加载 GUI Guider 绘制的界面

```c
setup_ui(&guider_ui);
```

编译烧录到开发板

<ignore_js_op>

<a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_793338" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=793338&handlekey=savephoto_793338">保存到相册</a>

</p>

</div>
<div class="tip_horn"></div>
</div>

</ignore_js_op>

此时，这个按键是没法操作的，因为在仿真器中加入的是 Windows 的输入设备，在 MCU 端还需要再把按键注册到 LVGL 的输入设备中。

编写 lv_port_indev.c 的代码如下，主要就是在 button_is_pressed 函数中获取按键的电平状态，在初始化时定义按键到 btn_points，按键按下时相当于对应的坐标点被点击。

```c
/*Copy this file as "lv_port_indev.c" and set this value to "1" to enable content*/
#if 1

/*********************
 *      INCLUDES
 *********************/
#include "lv_port_indev.h"
#include "lvgl/lvgl.h"

/*********************
 *      DEFINES
 *********************/

/**********************
 *      TYPEDEFS
 **********************/

/**********************
 *  STATIC PROTOTYPES
 **********************/

static void button_init(void);
static void button_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data);
static int8_t button_get_pressed_id(void);
static bool button_is_pressed(uint8_t id);

/**********************
 *  STATIC VARIABLES
 **********************/

lv_indev_t * indev_button;

static int32_t encoder_diff;
static lv_indev_state_t encoder_state;

/**********************
 *      MACROS
 **********************/

/**********************
 *   GLOBAL FUNCTIONS
 **********************/

void lv_port_indev_init(void)
{
    /**
     * Here you will find example implementation of input devices supported by LittelvGL:
     *  - Touchpad
     *  - Mouse (with cursor support)
     *  - Keypad (supports GUI usage only with key)
     *  - Encoder (supports GUI usage only with: left, right, push)
     *  - Button (external buttons to press points on the screen)
     *
     *  The `..._read()` function are only examples.
     *  You should shape them according to your hardware
     */

static lv_indev_drv_t indev_drv;

/*------------------
     * Button
     * -----------------*/

/*Initialize your button if you have*/
    button_init();

/*Register a button input device*/
    lv_indev_drv_init(&indev_drv);
    indev_drv.type = LV_INDEV_TYPE_BUTTON;
    indev_drv.read_cb = button_read;
    indev_button = lv_indev_drv_register(&indev_drv);

/*Assign buttons to points on the screen*/
    static const lv_point_t btn_points[2] = {
        {60, 60},   /*Button 0 -> x:10; y:10*/
        {180, 60},  /*Button 1 -> x:40; y:100*/
    };
    lv_indev_set_button_points(indev_button, btn_points);
}

/*------------------
 * Button
 * -----------------*/

/*Initialize your buttons*/
static void button_init(void)
{
    /*Your code comes here*/
}

/*Will be called by the library to read the button*/
static void button_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data)
{

static uint8_t last_btn = 0;

/*Get the pressed button's ID*/
    int8_t btn_act = button_get_pressed_id();

if(btn_act >= 0) {
        data->state = LV_INDEV_STATE_PR;
        last_btn = btn_act;
    }
    else {
        data->state = LV_INDEV_STATE_REL;
    }

/*Save the last pressed button's ID*/
    data->btn_id = last_btn;
}

/*Get ID  (0, 1, 2 ..) of the pressed button*/
static int8_t button_get_pressed_id(void)
{
    uint8_t i;

/*Check to buttons see which is being pressed (assume there are 2 buttons)*/
    for(i = 0; i < 2; i++) {
        /*Return the pressed button's ID*/
        if(button_is_pressed(i)) {
            return i;
        }
    }

/*No button pressed*/
    return -1;
}
#include "main.h"
/*Test if `id` button is pressed or not*/
static bool button_is_pressed(uint8_t id)
{

/*Your code comes here*/
    if (id) return !HAL_GPIO_ReadPin(KEY0_GPIO_Port, KEY0_Pin);
    else return !HAL_GPIO_ReadPin(KEY1_GPIO_Port, KEY1_Pin);
    return false;
}

#else /*Enable this file at the top*/

/*This dummy typedef exists purely to silence -Wpedantic.*/
typedef int keep_pedantic_happy;
#endif

```

然后在 main.c 的初始化代码中加入 indev 的初始化

```c
  lv_init();
  lv_port_disp_init();
  lv_port_indev_init();
  setup_ui(&guider_ui);
```

编译烧录到开发板，可以看到操作按键修改速度值，modbus主机端也可以实时的监控到这个值