LVGL_V8.3入门四---圆形表盘UI设计(字体、图片、时间显示设计)

已于 2023-12-11 22:56:19 修改
阅读量6.8k 收藏 53
点赞数 35
CC 4.0 BY-SA版权
分类专栏： LVGL入门到进阶(依托项目) 文章标签： ui LVGL stm32 嵌入式硬件
于 2023-12-11 22:51:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xddwg521125/article/details/134920480
本文介绍了如何使用LVGL库在V8.3版本中实现一个动态的圆形表盘UI，包括日期、时间显示和图片设置，以提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

系列文章目录

LVGL_V8.3入门一
LVGL_V8.3入门二—实时时钟（模仿华为watch-UI）
LVGL_V8.3入门三—圆形表盘UI设计（圆弧）

前言

在现代界面设计中，用户体验至关重要。表盘是一种直观而有效的方式，通过图形化的形式向用户传达信息。为了创造出令人印象深刻的用户界面，我选择使用LVGL（LittlevGL）库，这是一个功能强大而灵活的开源图形库。在这篇博客中，我将分享我的经验，介绍如何使用LVGL创建一个引人注目的圆形表盘UI。

一、实验效果

在这里插入图片描述

二、日期字体设置

在这里插入图片描述
设置字体颜色
在这里插入图片描述
利用取色器进行取色比较方便
在这里插入图片描述

三、图片设置

在阿里云矢量图官网可以下载一些图标https://www.iconfont.cn/
在这里插入图片描述
png下载
在这里插入图片描述
但是直接下载的图片可能会太大，可以利用美图秀秀进行更改
在这里插入图片描述
最终效果图
在这里插入图片描述

四、导出代码

将导出的代码加入已经有的LVGL框架，下面是生成的代码
在这里插入图片描述
但使用SquareLine工具导出代码时，图片颜色会有偏差并且有的图片会乱码。解决方法是：利用下面的官方转换工具进行转换，将转换后的.c文件复制到相对应的目录。
https://lvgl.io/tools/imageconverter

time_refresh()函数用于更新时间

// This file was generated by SquareLine Studio
// SquareLine Studio version: SquareLine Studio 1.3.2
// LVGL version: 8.3.6
// Project name: cirspj

#include "ui.h"
#include <stdio.h>
#include "stm32f7xx_hal.h"
#include "ui_CirWatchUi.h"

lv_obj_t *ui_Screen2;
lv_obj_t *ui_Arc1;
lv_obj_t *ui_Arc2;
lv_obj_t *ui_Arc3;
lv_obj_t *ui_Label1;
lv_obj_t *ui_Label2;
lv_obj_t *ui_Label3;
lv_obj_t *ui_Label4;
lv_obj_t *ui_Image1;
lv_obj_t *ui_Image2;
lv_obj_t *ui_Label5;
lv_obj_t *ui_Image3;
lv_obj_t *ui_Label6;
lv_obj_t *ui_Image5;
lv_obj_t *ui_Label7;
lv_obj_t *ui____initial_actions0;

RTC_DateTypeDef GetData;  //获取日期结构�?

RTC_TimeTypeDef GetTime;   //获取时间结构�?

RTC_HandleTypeDef hrtc;

static void time_refresh(lv_event_t* event) {

	uint8_t timeStr[10];
	uint8_t dataStr[10];

	 /* Get the RTC current Time */
	HAL_RTC_GetTime(&hrtc, &GetTime, RTC_FORMAT_BIN);
    /* Get the RTC current Date */
    HAL_RTC_GetDate(&hrtc, &GetData, RTC_FORMAT_BIN);

    sprintf(timeStr, "%02d:%02d:%02d", GetTime.Hours, GetTime.Minutes, GetTime.Seconds);
    lv_label_set_text(ui_Label1,timeStr);

    sprintf(dataStr, "%02d/%02d", GetData.Month, GetData.Date);
    lv_label_set_text(ui_Label1,timeStr);






//    lv_img_set_angle(ui_Image5, GetTime.Seconds * 60);//s秒表
//    lv_img_set_angle(ui_Image4, GetTime.Minutes * 60);//m分钟
//    lv_img_set_angle(ui_Image3, GetTime.Hours * 300);//h时
//    lv_refr_now(NULL);
}

static void send_event(void){
    lv_event_send(ui_Screen2,LV_EVENT_REFRESH,NULL);
}

void ui_CirWatchUi_screen_Iinit(void)
{
	ui_Screen2 = lv_obj_create(NULL);
	lv_obj_clear_flag( ui_Screen2, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Arc1 = lv_arc_create(ui_Screen2);
	lv_obj_set_width( ui_Arc1, 210);
	lv_obj_set_height( ui_Arc1, 210);
	lv_obj_set_align( ui_Arc1, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc1, 68);
	lv_arc_set_bg_angles(ui_Arc1,90,270);
	lv_obj_set_style_arc_color(ui_Arc1, lv_color_hex(0x8680F9), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc1, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc1, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc1, lv_color_hex(0x8680F9), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc1, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc1, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc1, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc1, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Arc2 = lv_arc_create(ui_Screen2);
	lv_obj_set_width( ui_Arc2, 156);
	lv_obj_set_height( ui_Arc2, 210);
	lv_obj_set_x( ui_Arc2, 1 );
	lv_obj_set_y( ui_Arc2, 29 );
	lv_obj_set_align( ui_Arc2, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc2, 68);
	lv_arc_set_bg_angles(ui_Arc2,90,270);
	lv_obj_set_style_arc_color(ui_Arc2, lv_color_hex(0x5DDBE5), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc2, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc2, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc2, lv_color_hex(0x46DEF0), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc2, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc2, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc2, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc2, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Arc3 = lv_arc_create(ui_Screen2);
	lv_obj_set_width( ui_Arc3, 100);
	lv_obj_set_height( ui_Arc3, 210);
	lv_obj_set_x( ui_Arc3, 1 );
	lv_obj_set_y( ui_Arc3, 58 );
	lv_obj_set_align( ui_Arc3, LV_ALIGN_CENTER );
	lv_arc_set_value(ui_Arc3, 68);
	lv_arc_set_bg_angles(ui_Arc3,90,270);
	lv_obj_set_style_arc_color(ui_Arc3, lv_color_hex(0xF4AE4B), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc3, 150, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc3, 15, LV_PART_MAIN| LV_STATE_DEFAULT);

	lv_obj_set_style_arc_color(ui_Arc3, lv_color_hex(0xF4AE4B), LV_PART_INDICATOR | LV_STATE_DEFAULT );
	lv_obj_set_style_arc_opa(ui_Arc3, 255, LV_PART_INDICATOR| LV_STATE_DEFAULT);
	lv_obj_set_style_arc_width(ui_Arc3, 15, LV_PART_INDICATOR| LV_STATE_DEFAULT);

	lv_obj_set_style_bg_color(ui_Arc3, lv_color_hex(0xFFFFFF), LV_PART_KNOB | LV_STATE_DEFAULT );
	lv_obj_set_style_bg_opa(ui_Arc3, 0, LV_PART_KNOB| LV_STATE_DEFAULT);

	ui_Label1 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label1, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label1, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label1, 21 );
	lv_obj_set_y( ui_Label1, 1 );
	lv_obj_set_align( ui_Label1, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label1,"11:10");
	lv_obj_set_style_text_font(ui_Label1, &lv_font_montserrat_26, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Label2 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label2, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label2, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label2, 30 );
	lv_obj_set_y( ui_Label2, -69 );
	lv_obj_set_align( ui_Label2, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label2,"6570");
	lv_obj_set_style_text_color(ui_Label2, lv_color_hex(0x6AC2CD), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label2, 255, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Label3 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label3, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label3, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label3, 29 );
	lv_obj_set_y( ui_Label3, -97 );
	lv_obj_set_align( ui_Label3, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label3,"68%");
	lv_obj_set_style_text_color(ui_Label3, lv_color_hex(0xB4AEEE), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label3, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui_Label3, &lv_font_montserrat_14, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Label4 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label4, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label4, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label4, 27 );
	lv_obj_set_y( ui_Label4, -39 );
	lv_obj_set_align( ui_Label4, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label4,"426");
	lv_obj_set_style_text_color(ui_Label4, lv_color_hex(0xFFAE8B), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label4, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui_Label4, &lv_font_montserrat_14, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Image1 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image1, &ui_img_step_png);
	lv_obj_set_width( ui_Image1, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image1, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image1, 30 );
	lv_obj_set_y( ui_Image1, 74 );
	lv_obj_set_align( ui_Image1, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image1, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image1, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Image2 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image2, &ui_img_power_png);
	lv_obj_set_width( ui_Image2, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image2, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image2, 26 );
	lv_obj_set_y( ui_Image2, 103 );
	lv_obj_set_align( ui_Image2, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image2, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image2, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Label5 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label5, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label5, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label5, 31 );
	lv_obj_set_y( ui_Label5, 44 );
	lv_obj_set_align( ui_Label5, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label5,"PAI");
	lv_obj_set_style_text_color(ui_Label5, lv_color_hex(0xF6AE4A), LV_PART_MAIN | LV_STATE_DEFAULT );
	lv_obj_set_style_text_opa(ui_Label5, 255, LV_PART_MAIN| LV_STATE_DEFAULT);
	lv_obj_set_style_text_font(ui_Label5, &lv_font_montserrat_14, LV_PART_MAIN| LV_STATE_DEFAULT);

	ui_Image3 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image3, &ui_img_rate_png);
	lv_obj_set_width( ui_Image3, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image3, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image3, 84 );
	lv_obj_set_y( ui_Image3, 26 );
	lv_obj_set_align( ui_Image3, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image3, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image3, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Label6 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label6, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label6, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label6, 82 );
	lv_obj_set_y( ui_Label6, 44 );
	lv_obj_set_align( ui_Label6, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label6,"98");

	ui_Image5 = lv_img_create(ui_Screen2);
	lv_img_set_src(ui_Image5, &ui_img_weather_png);
	lv_obj_set_width( ui_Image5, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Image5, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Image5, 81 );
	lv_obj_set_y( ui_Image5, -43 );
	lv_obj_set_align( ui_Image5, LV_ALIGN_CENTER );
	lv_obj_add_flag( ui_Image5, LV_OBJ_FLAG_ADV_HITTEST );   /// Flags
	lv_obj_clear_flag( ui_Image5, LV_OBJ_FLAG_SCROLLABLE );    /// Flags

	ui_Label7 = lv_label_create(ui_Screen2);
	lv_obj_set_width( ui_Label7, LV_SIZE_CONTENT);  /// 1
	lv_obj_set_height( ui_Label7, LV_SIZE_CONTENT);   /// 1
	lv_obj_set_x( ui_Label7, 68 );
	lv_obj_set_y( ui_Label7, -70 );
	lv_obj_set_align( ui_Label7, LV_ALIGN_CENTER );
	lv_label_set_text(ui_Label7,"12/11");

/**< 设置LV_EVENT_REFRESH事件的回调 */
	 lv_obj_add_event_cb(ui_Screen2, time_refresh,LV_EVENT_REFRESH ,NULL);

	  /**<每个1秒发一次LV_EVENT_REFRESH事件*/
	 lv_timer_create((void*)send_event, 1000, NULL);

}

总结

通过这篇博客，你将学到如何使用LVGL创建一个引人注目的圆形表盘UI。LVGL提供了丰富的功能和灵活性，使得用户界面的设计变得轻而易举。我希望这篇博客能够帮助你更好地理解LVGL的使用方法，并在你的项目中创造出独特而美观的用户体验。

LVGL 控件之仪表盘（lv_meter)
Projectsauron 的博客
09-19 2万+
仪表盘部件可以非常灵活地展示数据，其功能包括显示弧形（arcs）、指针（needles）、刻度线（ticks lines）以及标签（labels）。这意味着它可以模拟各种仪表盘样式。：主体背景；：仪表的刻度；：仪表指针；：圆弧。
LVGL UI 界面设计
weixin_57483690的博客
09-29 827
只需要将lv_conf.h中的改为 #define LV_SPRINTF_CUSTOM 1，就正常输出浮点型了，上面这个是我看别的文章发现的，然后找自己的发现版本不一样，我的版本需要改成如下。
LVGL开发
最新发布
2401_85565442的博客
05-13 820
LVGL开发
LVGL_V8.3入门三---圆形表盘UI设计
xddwg521125的博客
12-10 1967
圆弧部件的组成圆弧的当前值和范围值在设置圆弧部件的角度（绝对度数）之前，我们需要先搞清楚圆弧的角度划分。在圆弧部件默认的角度划分中，0 度（绝对度数）位于对象右侧中部（3 点钟方向），然后沿顺时针方向增加度数，直至 360 度。
LVGL 官方UI设计工具 EdgeLine v0.3
10-22
LVGL官方团队推出的拖拽式UI编辑工具，目前在测试阶段，目前版本为V0.3，基于 7.0，支持导出代码 发布页：https://forum.lvgl.io/t/edgeline-v0-3-is-released/5838
LVGL界面设计器V1.3
03-02
LVGL界面设计器是一款用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码。 单击按钮，您可以在模拟环境中运行应用或将其导出到目标项目。可以很轻松地将GUI Guider生成的代码添加到MCUXpresso IDE或IAR Embedded Workbench项目中，从而加速开发过程，并允许无缝地将嵌入式用户界面添加到应用中。 1. 支持拖放的所见即所得UI设计 2. 利用并搜索LVGL的各种小部件，轻松创建GUI应用 3. 自定义并配置小部件属性，可自定义您的设计 4. 轻松添加事件、动作和动画来增强您的应用 5. 导入图像和自定义字体的内置资源管理 6. 为MCUXpresso IDE和IAR Embedded Workbench项目生成应用代码 7. 集成的演示应用，可帮助您开始设计
LVGL项目实战之桌面UI绘制
南山府的博客
07-22 2933
在开始代码之前，我们先来看一下我们这个项目的界面。根据第二章的介绍，我们已经知道需要哪些东西了。首先我们先来看桌面的UI：上面就是我们项目的桌面设计，顶部两栏分别显示的是遥控/门磁和WIFI状态显示部分。往下来是一行分割横线，紧接着显示的是时间、年月日、星期，在之后是分割横线，最底部是我们报警状态的图标显示，时间和日期是需要联网才能进行动态的切换。这就是我们桌面的整体部分。接下来我们就来设计。
【LVGL学习笔记】（五）使用SquareLine Studio设计UI
热门推荐
weixin_45728705的博客
12-20 1万+
LVGL学习笔记
gcc-arm-8.3-2019.03-x86_64-aarch64-linux-gnu.tar.xz
12-21
AARCH64 交叉编译工具链 gcc-arm-8.3-2019.03-x86_64-aarch64-linux-gnu.tar.xz
kettle v8.3_part1（pdi-ce-8.3.0.0-371.zip.rm1)
08-12
共5个（part1/2/3/4/5）分包，全部下载后用命令 “copy /b pdi-ce-8.3.0.0-371.zip.rm1+pdi-ce-8.3.0.0-371.zip.rm2+pdi-ce-8.3.0.0-371.zip.rm3+pdi-ce-8.3.0.0-371.zip.rm4+pdi-ce-8.3.0.0-371.zip.rm5 pdi-ce-8.3...
kettle v8.3_part2 (pdi-ce-8.3.0.0-371.zip.rm2)
08-12
共5个（part1/2/3/4/5）分包，全部下载后用命令 “copy /b pdi-ce-8.3.0.0-371.zip.rm1+pdi-ce-8.3.0.0-371.zip.rm2+pdi-ce-8.3.0.0-371.zip.rm3+pdi-ce-8.3.0.0-371.zip.rm4+pdi-ce-8.3.0.0-371.zip.rm5 pdi-ce-8.3...
基于littlevgl设计的手表模拟时钟表盘（附代码）
01-06
硬件平台：STM32F413-DISCOVERY 操作系统：FreeRTOS UI方案：littlevgl 5.2 模拟时钟表盘展示： 基于LittlevGL设计的手表模拟时钟表盘 Applist效果展示（屏幕破裂，效果不太好，不好意思） 基于LittlevGL设计的手表applist效果展示 表盘绘制： // ## typedef struct { // # lv_obj_t *hour_body; lv_obj_t *minute_body; lv_obj_t *second_body; // ##
【RT-Thread作品秀】基于 lvgl 的漏电保护装置校验仪 UI 设计-电路方案
04-19
【RT-Thread作品秀】基于 lvgl 的漏电保护装置校验仪 UI 界面设计作者:赵加文 概述低压漏电引起的各种安全事故已经严重影响到生产生活，威胁到生命财产安全。而解决这一现象的设备就是漏电保护开关，漏电保护开关的漏报率、误报率是很关键的参数，因此有必要对漏电保护开关的性能进行测试。因此，漏电保护装置校验仪是很有必要的。 开发环境硬件:ART-Pi 开发板，正点原子 480*272 4.3寸 RGB 屏幕 RT-Thread版本:4.0.3 开发工具及版本: RT-Thread Studio 2.0.0 :编写 编译 调试 下载代码 STM32CubeMX 6.1.0: codeBlocks 20.03:用于在 PC 机上进行 lvgl 模拟 MCU_Font V2.0: 用于转换中文，然后使得中文能够在 lvgl 中显示 RT-Thread使用情况概述在 UI 设计的整个过程中，使用到 RT-Thread 的部分主要有以下几个方面: 内核部分:动态线程，信号量 组件部分:PIN 设备、I2C 设备、TOUCH 设备框架、LCD 设备框架、finsh 组件 软件包部分:littlevgl2rtt、gt9147 硬件框架软件框架说明系统整体流程图: 软件模块说明整个UI 系统设计所遵循的是 lvgl 图形库的一个回调函数的机制，将各个事件与对应的操作所绑定起来，当滑动滑条时对应的滑条的回调函数就会被触发，那么就会执行滑条回调函数的内容，当滑动点击文本框时，文本框对应的回调函数就会被触发，进而创建键盘的控件，通过键盘输入所需要的数据。 演示效果图片展示: 演示视频: 比赛感悟这次参赛，之前还没有使用过 RT-Thread studio 这个集成开发环境，这次在使用 ART-Pi 的时候全程是使用 RT-Thread studio 这个开发环境，在使用的过程中也碰到了很多问题，有时候明明配置了相关组件，但是保存之后，并没有代码添加到工程里。现在也没有弄明白问题出在哪里，虽然存在着这里问题，但是在使用的过程中，还是非常的方便，整个开发过程就如同搭积木一样方便，与 RTT操作系统贴合的非常的紧密。 除此之外，便是在使用 lvgl 的过程中碰到了很多的问题，现在网上的教程基本是 lvgl v6 版本的教程，关于 lvgl v7 版本的教程很少，而且 v6版本与 V7 版本的 API 相差很大，不能按照 V6 版本来使用 V7 ，在这个过程中摸索了好多，同时也感受到了 lvgl 的魅力，使用在嵌入式系统上是非常不错的选择。
kettle v8.3_part4 (pdi-ce-8.3.0.0-371.zip.rm4)
08-12
共5个（part1/2/3/4/5）分包，全部下载后用命令 “copy /b pdi-ce-8.3.0.0-371.zip.rm1+pdi-ce-8.3.0.0-371.zip.rm2+pdi-ce-8.3.0.0-371.zip.rm3+pdi-ce-8.3.0.0-371.zip.rm4+pdi-ce-8.3.0.0-371.zip.rm5 pdi-ce-8.3...
LVGL使用Visual Studio仿真（release-v8.3版本）
08-10
在本项目中，我们将探讨如何利用Visual Studio 2019来仿真LVGL的release-v8.3版本。LVGL库提供了丰富的图形组件，如按钮、文本框、图像等，使得在资源受限的设备上构建美观的UI成为可能。 1. **LVGL库介绍**： ...
嵌入式界面设计——使用LVGL库
DaxqScratch的博客
09-25 645
其中一个备受推崇的选择是LVGL（LittlevGL），它是一个开源的嵌入式图形库，提供了丰富的界面元素和功能，适用于各种嵌入式平台。函数中进行了初始化。接下来，我们创建了一个屏幕对象，并在该屏幕上创建了一个标签对象。总结而言，LVGL是一个功能强大、灵活易用的嵌入式图形库，适用于各种嵌入式平台和显示器类型。假设我们要设计一个嵌入式设备的主屏幕，其中包含一个标签（Label）元素，显示"Hello, LVGL!通过上述代码，我们实现了一个简单的LVGL应用，并在屏幕上显示了"Hello, LVGL!
【LVGL快速入门(二)】LVGL开源框架入门教程之框架使用(UI界面设计)
meno的博客
10-16 5245
LVGL是一款开源的嵌入式GUI框架。轻量级和灵活性是其著有的特征。我们在开发如智能手表，仪器表盘时可以采用这个框架。
【原创】介绍一款新的LVGL UI设计神器助你高效开发嵌入式界面应用
大愚若智的博客
09-28 5274
随着物联网的到来，凯文凯利预言的“屏读”时代也到来了。除了手机平板这些类PC的产品，越来越多的嵌入式设备都会带有触控显示屏。要在资源有限的嵌入式设备构建一个好的UI应用并不是一件容易的事，UI库的选型、开发和调试都很耗时耗力。LVGL是一个针对嵌入式设备，占用资源少，而且API封装比较好的成熟的流行开源UI库，使用的人越来越多。但要从头开始手撸一个LVGL的应用还是有大量的工作要做。于是乎，出现了一些支持LVGL的设计工具。
LVGL 官方UI设计工具 EdgeLine代码移植
qq_41980754的博客
08-28 8497
LVGL 官方UI设计工具EdgeLine代码移植 注：项目工程下载地址在文末； 一、Tools LVGL v7.8 Edgeline bata 0.3b 二、Porting 准备移植好的LVGL8-MDK工程。（必须是v7版本，Edgeline目前只支持LVGL v7） 打开Edgeline, 登录账号，新建工程，简单设计一个测试面板。 选择自己LCD尺寸（比如我采用的2.7寸LCD, 则填写W240 * H320 ） 可以通过软件最下面的Asset面板右下角的ADD FILE INTO AS
add_definitions() ui/LVGL_8.3 ui/LVGL_8.3/lvgl ui/LVGL_8.3/lv_drivers
10-31
`add_definitions()` 是CMake中的一个函数，用于向构建系统添加预处理器定义。预处理器定义通常是宏，它们可以在编译期间控制编译器的行为。当你调用 `add_definitions()` 时，可以传递一串字符串列表，每个字符串会被当作单独的预处理器定义来处理。 在你给出的例子中： ```shell add_definitions(ui/LVGL_8.3) add_definitions(ui/LVGL_8.3/lvgl) add_definitions(ui/LVGL_8.3/lv_drivers) ``` 看起来像是你在尝试添加LVGL（Lightning Vision Library，一个图形界面库）相关的几个目录路径作为预处理器定义。但通常来说，这种方式不对。LVGL_8.3、lvgl和lv_drivers更像是库文件夹或者头文件所在的位置，而不是预处理器定义。 如果这些路径是要告诉CMake如何找到LVGL库的相关组件，你应该使用 `include_directories()` 或 `find_package()` 等函数。如果你确实需要传递给编译器的是预处理器定义，它们应该是类似 `LV_USE_X` 这样的形式，而非目录路径。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值