草庐IT

LVGL-GUI

全部标签

LVGL库入门教程 - 颜色和图像

颜色构造颜色在LVGL中,颜色以结构lv_color_t表示。在最开始移植整个工程时,曾经在lv_conf.h中修改过颜色深度:/*Colordepth:1(1byteperpixel),8(RGB332),16(RGB565),32(ARGB8888)*/#defineLV_COLOR_DEPTH32LVGL会自动根据所选的颜色深度创建合适的颜色结构。在接下来几处位置还有几个与颜色有关的配置选项,可以参照注释修改。例如,16位big-endian的颜色定义为:typedefunion{struct{uint16_tblue:5;uint16_tgreen:6;uint16_tred:5;}c

LVGL库入门教程 - 动画

动画可以说是LVGL中的特色之一,不过在使用动画前,请确保单片机具有足够的性能来维持足够的帧率。transition:过渡动画当一个控件的状态发生改变时,可以让样式也发生变化以提醒用户。通过过渡动画(transition)可以让样式的改变更自然。例如,按钮在点击时,以及开关在切换时,都具有一小段的过渡动画。过渡动画使用lv_style_transition_dsc_t结构描述。为了要设置过渡动画,需要提供以下信息:哪些属性需要过渡过渡前的延时过渡持续的时间过渡动画(以回调函数的形式提供)这些信息和结构成员是一一对应的。除了直接给结构成员赋值外,也可以使用以下初始化函数一次性设置:voidlv_

LVGL库入门教程 - 动画

动画可以说是LVGL中的特色之一,不过在使用动画前,请确保单片机具有足够的性能来维持足够的帧率。transition:过渡动画当一个控件的状态发生改变时,可以让样式也发生变化以提醒用户。通过过渡动画(transition)可以让样式的改变更自然。例如,按钮在点击时,以及开关在切换时,都具有一小段的过渡动画。过渡动画使用lv_style_transition_dsc_t结构描述。为了要设置过渡动画,需要提供以下信息:哪些属性需要过渡过渡前的延时过渡持续的时间过渡动画(以回调函数的形式提供)这些信息和结构成员是一一对应的。除了直接给结构成员赋值外,也可以使用以下初始化函数一次性设置:voidlv_

LVGL库入门教程03-布局方式

LVGL布局方式LVGL的布局上一节介绍了如何在LVGL中创建控件。如果在创建控件时不给控件安排布局,那么控件默认会被放在父容器的左上角。可以使用lv_obj_set_pos(obj,x,y)调整一个控件的位置(或者使用类似的函数单独调整一个方向的坐标),将它放在相对父容器左上角的合适位置。不过这种布局方式非常死板,因为绝对坐标一旦设定就不能自动调整;而且当控件数量较多时,也很难确定合适的坐标值。上一节介绍过,可以使用lv_obj_align(obj,align,x_ofs,y_ofs)设置一个控件相对父容器的对齐,并用以下图片展示所有的对齐方式:从图片中可以看到,控件之间不仅可以内对齐,也可

LVGL库入门教程03-布局方式

LVGL布局方式LVGL的布局上一节介绍了如何在LVGL中创建控件。如果在创建控件时不给控件安排布局,那么控件默认会被放在父容器的左上角。可以使用lv_obj_set_pos(obj,x,y)调整一个控件的位置(或者使用类似的函数单独调整一个方向的坐标),将它放在相对父容器左上角的合适位置。不过这种布局方式非常死板,因为绝对坐标一旦设定就不能自动调整;而且当控件数量较多时,也很难确定合适的坐标值。上一节介绍过,可以使用lv_obj_align(obj,align,x_ofs,y_ofs)设置一个控件相对父容器的对齐,并用以下图片展示所有的对齐方式:从图片中可以看到,控件之间不仅可以内对齐,也可

LVGL库入门教程02-基本控件与交互

LVGL本质上是一个GUI库,它包含大量的控件(widget),即按钮、标签、滑块、菜单栏这种具有一定人机交互特征的组合图形。LVGL在设计时,采用了一定面向对象编程的设计思路,有效降低了代码编写的难度。LVGL和大多数GUI库的工作方式都是类似的,其代码编写的基础思路为:创建GUI根窗体对象在窗体上绘制各种控件为控件编写响应函数函数在主事件循环中等待用户触发事件响应如果之前有GUI库的使用经验的话,应该可以比较容易明白LVGL代码的编写思路。标签标签(label)应该是GUI最简单也是最基础的控件之一。标签的作用就是显示一小段说明文字。接下来通过介绍标签来介绍LVGL控件的创建、布局与设置属

LVGL库入门教程02-基本控件与交互

LVGL本质上是一个GUI库,它包含大量的控件(widget),即按钮、标签、滑块、菜单栏这种具有一定人机交互特征的组合图形。LVGL在设计时,采用了一定面向对象编程的设计思路,有效降低了代码编写的难度。LVGL和大多数GUI库的工作方式都是类似的,其代码编写的基础思路为:创建GUI根窗体对象在窗体上绘制各种控件为控件编写响应函数函数在主事件循环中等待用户触发事件响应如果之前有GUI库的使用经验的话,应该可以比较容易明白LVGL代码的编写思路。标签标签(label)应该是GUI最简单也是最基础的控件之一。标签的作用就是显示一小段说明文字。接下来通过介绍标签来介绍LVGL控件的创建、布局与设置属

LVGL库入门教程04-样式

LVGL样式LVGL样式概述创建样式在LVGL中,样式都是以对象的方式存在,一个对象可以描述一种样式。每个控件都可以独立添加样式,创建的样式之间互不影响。可以使用lv_style_t类型创建一个样式并初始化:staticlv_style_tstyle;lv_style_init(&style);样式是延迟渲染的,因此需要使用static存储类别说明符或将其声明为全局变量。样式是多方面的,不仅包括颜色和形状,还包括边距、边框,甚至动画变换效果等细节。LVGL中的样式从CSS中吸取了很多灵感,因此对样式的操作都类似CSS接下来,可以对得到的样式对象设置一些样式规则:/*...createandin

LVGL库入门教程04-样式

LVGL样式LVGL样式概述创建样式在LVGL中,样式都是以对象的方式存在,一个对象可以描述一种样式。每个控件都可以独立添加样式,创建的样式之间互不影响。可以使用lv_style_t类型创建一个样式并初始化:staticlv_style_tstyle;lv_style_init(&style);样式是延迟渲染的,因此需要使用static存储类别说明符或将其声明为全局变量。样式是多方面的,不仅包括颜色和形状,还包括边距、边框,甚至动画变换效果等细节。LVGL中的样式从CSS中吸取了很多灵感,因此对样式的操作都类似CSS接下来,可以对得到的样式对象设置一些样式规则:/*...createandin

LVGL库入门教程01-移植到STM32(触摸屏)

LVGL库移植STM32LVGL库简介LVGL(LightandVersatileGraphicsLibrary)是一个免费、开源的嵌入式图形库,可以创建丰富、美观的界面,具有许多可以自定义样式的控件,支持按键或触摸响应,支持中文字符,并且内存占用较低。可以在https://lvgl.io/demos使用网页端体验LVGL的动态效果,再决定是否需要使用LVGL。LVGL使用C语言编写,可以用在树莓派、ESP32、STM32等单片机上,并支持各种中大型屏幕(只需要提供屏幕的绘图API即可)。LVGL的官网地址为:https://lvgl.io/,GitHub地址为:https://github.