3323|13

1447

帖子

6

资源

版主

【我与gui-guider②】button控件 [复制链接]

 
本帖最后由 RCSN 于 2021-3-20 21:19 编辑

  botton词义就是按钮意思,在lgvl也充当着开关作用。这里说明以gui-guide进行对buttom操作,以便形象理解lgvl的按钮控件。

  这里我们根据上章的新建工程,参考 http://bbs.eeworld.com.cn/thread-1159377-1-1.html,自行建立好自己分辨率的工程,按button控件的事件触发作为命名ID,如以下

image.png

  这里我们使用了七个按钮,也就是说按钮事件在此设计器中有7个。我们以clicked按钮介绍下按钮的相关属性,依次类推其他控件,都是一样的操作方式。我们把它切换成中文,这样对于我们更加方便理解。

1、通用部分,包含了名字ID,控件坐标,控件大小。

image.png

①名字ID:系统默认的是btn_x,有多少个button就按照序号进行排序,但是实际用的时候,建议自己命名,以控件功能作为简要名称,同个srceen不能相同命名,但是不同srceen则可以。

②控件坐标:分为横坐标和纵坐标。当前的设计器版本不支持两个控件之间对齐方式,这个不太方便,如果需要多个控件对齐,要么在设计器上横纵坐标一样,要么自己设计器先随便放,然后在custom文件中自己手动加API进行对齐。

③控件大小:分为高度和宽度。很简单,就是定义控件的大小。

 

2、属性部分,包括文本编辑、切换toggle、字体选择、字体大小、字体颜色

image.png

①文本编辑:可以按钮的文本编辑,其实也就是个在button这个父对象建立个label子对象,需要注意的是,默认生成的是对齐Button的中心,如果需要对齐上下左右边自由对齐,需要在custom自定义代码中,需要禁止布局功能,当禁止之后,对于子对象在父对象中的摆放位置,子对象必须得手动通过API接口随便定义对齐。e.g: lv_btn_set_layout(ui->led_page1_btn_back, LV_LAYOUT_OFF)

②切换:也就是toggle,这里勾选就是把按钮当作开关用,点击前后样式改变后,之后的样式就保持不变,直到下一次点击。

③字体选择:目前只支持simsum,但是这种字体很丑,我们可以自己生成自己的字库,通过custom来改变设计器的字库,这个后面章节会进行说明。

note:设计器当前有选项可支持导入自定义字体,但是导入不生效,毕竟V1.0版本,等待官方修复即可。

image.png

④字体大小:也就是字体的大小,字体越大,消耗ROM也就越大,自己均衡资源决定大小。

⑤字体颜色:也就是字体的颜色RGB,可手动输入RGB,也可以自己在颜色框选择

image.png

赞赏

1

查看全部赞赏

个人签名

1084534438 欢迎交流  [加油,一切皆有可能]


回复

5530

帖子

18

资源

五彩晶圆(中级)

就喜欢看RC折腾新东西

个人签名

默认摸鱼


回复

1447

帖子

6

资源

版主

本帖最后由 RCSN 于 2021-3-20 21:17 编辑

3、样式属性,不同状态可以有不同的样式,lgvl 7.0以上最大改变就在这里,样式的多样化,也给用户提供多选择。包括背景、内外边框、动画效果等都有。

image.png

①默认样式:若勾选,则各个状态的样式都是按照默认的来。

②状态:也就是控件的当前状态,这里包含了缺省状态(没有任何动作)、聚焦、单击、翻转状态

image.png

③禁用功能:若点击,则状态当前选择的样式是无效的,动作发生了样式也不会显示出来。

④背景 :也就是控件的背景颜色,这里包含了背景色、渐变色、透明度、和渐变方式。255就是不透明,0是透明。

e.g 若选择的背景色是蓝色,渐变色为白色,透明度为255,渐变方向为垂直,则效果如下:

image.png

若选择的背景色是蓝色,渐变色为白色,透明度是150,渐变方向是水平,效果如下,透明度在有图片或者颜色的前景下很有用。

image.png

接下图

image.png

①边框:有颜色、透明度、宽度、圆角可选择。为了方便理解这几个属性,这里列举了右边的A控件、B控件、C控件。A是图上默认的样式边框,B是透明度变为150,宽度变为4,圆角为200;C则是把圆角为0,这样变成了长方形。

③动画 这是Lgvl的新改变,这里如果设置了动画,则会位移和方式、持续时间进行动画移动。

4、事件 button支持不少事件,事件属性包含以下,有目标对象,触发方式,作用对象,对作用对象的动作是怎样的,事件的处理在设计器上,Button已经足够很完善。特别是还支持自定义C语言,这个也给用户足够的扩展性。

image.png

这里我们把每个控件作为一个事件名称,然后作用对象还是自己,每个控件的动作不一样,有的是触发就改变背景颜色,改变控件长宽,隐藏控件,设置动画等。这里我们看下设计器的模拟器和在单片机的运行情况。


QQ图片20210320204013.gif

 

QQ图片20210320211151.gif

 

 

个人签名

1084534438 欢迎交流  [加油,一切皆有可能]


回复

1477

帖子

3

资源

版主

复制以后,将文中图片重新插入即可

点评

我现在就是这么做的  详情 回复 发表于 2021-3-20 19:47

回复

6895

帖子

0

资源

五彩晶圆(中级)

RGB自动可调时能显示三种颜色的数字值么

点评

可以,这点设计器容易实现  详情 回复 发表于 2021-3-20 19:47

回复

1447

帖子

6

资源

版主

Jacktang 发表于 2021-3-20 18:42 RGB自动可调时能显示三种颜色的数字值么

可以,这点设计器容易实现

个人签名

1084534438 欢迎交流  [加油,一切皆有可能]


回复

1447

帖子

6

资源

版主

annysky2012 发表于 2021-3-20 13:43 复制以后,将文中图片重新插入即可

我现在就是这么做的

个人签名

1084534438 欢迎交流  [加油,一切皆有可能]


回复

1447

帖子

6

资源

版主

至此,button控件已经说明完毕,下一章,btnimg控件,也就是带图片的按钮空间。

个人签名

1084534438 欢迎交流  [加油,一切皆有可能]


回复

1102

帖子

29

资源

纯净的硅(初级)

这个设计器哪里下载,看着不错

点评

NXP官网下载即可  详情 回复 发表于 2021-3-22 17:28

回复

1447

帖子

6

资源

版主

dql2016 发表于 2021-3-22 13:36 这个设计器哪里下载,看着不错

NXP官网下载即可

个人签名

1084534438 欢迎交流  [加油,一切皆有可能]


回复

1208

帖子

3

资源

五彩晶圆(初级)

好东西,弱弱的请教一下,button如何响应实体按键?

点评

可以通过读取实体按键状态来改变button的状态以及样式  详情 回复 发表于 2021-3-23 22:26

回复

1447

帖子

6

资源

版主

ou513 发表于 2021-3-23 08:00 好东西,弱弱的请教一下,button如何响应实体按键?

可以通过读取实体按键状态来改变button的状态以及样式

个人签名

1084534438 欢迎交流  [加油,一切皆有可能]


回复

42

帖子

0

资源

一粒金砂(中级)

马克一下


回复

2023

帖子

3

资源

版主

楼主是要把guider玩个遍啊~


回复
您需要登录后才可以回帖 登录 | 注册

查找数据手册?

EEWorld Datasheet 技术支持

最新文章 更多>>
    关闭
    站长推荐上一条 1/10 下一条

    About Us 关于我们 客户服务 联系方式 器件索引 网站地图 最新更新 手机版

    站点相关: 安防电子 汽车电子 手机便携 工业控制 家用电子 医疗电子 测试测量 网络通信 物联网

    北京市海淀区知春路23号集成电路设计园量子银座1305 电话:(010)82350740 邮编:100191

    电子工程世界版权所有 京B2-20211791 京ICP备10001474号-1 电信业务审批[2006]字第258号函 京公网安备 11010802033920号 Copyright © 2005-2022 EEWORLD.com.cn, Inc. All rights reserved
    快速回复 返回顶部 返回列表