在小安派Eyes-S1上学习LVGL-Slider和Switch的使用

[复制链接]
查看4503 | 回复14 | 2024-5-19 09:32:51 | 显示全部楼层 |阅读模式
由于之前的SCP4.3没有触摸,需要触摸交互的控件没法使用,转到Eyes-S1上继续LVGL的学习,创建工程时面板选择自定义,大小240x320
微信截图_20240519084730.png
先放上几个控件,想实现的效果是:用色环调节中间的LED颜色,滑条调节亮度,开关调节开关
微信截图_20240519084921.png
接下来添加控件事件,以色环控件为例,选中色环后点击左上角的手指图标
微信截图_20240504204220.png
选择valuechange事件
微信截图_20240518201708.png
选择自定义
微信截图_20240518201725.png
添加代码实现使用色环控制LED颜色
  1. lv_led_set_color(guider_ui.screen_led_1,lv_colorwheel_get_rgb(guider_ui.screen_cpicker_1));
复制代码
添加后记得点右下角的保存按钮
微信截图_20240519085616.png
用同样的方法为滑条和开关添加valuechange事件,代码分别为
  1. lv_led_set_brightness(guider_ui.screen_led_1,lv_slider_get_value(guider_ui.screen_slider_1));
复制代码
  1. if(lv_obj_has_state(guider_ui.screen_sw_1, LV_STATE_CHECKED))
  2.   lv_led_on(guider_ui.screen_led_1);
  3. else
  4.   lv_led_off(guider_ui.screen_led_1);
复制代码
在custom_init中初始化开关状态为开
  1. lv_obj_add_state(guider_ui.screen_sw_1, LV_STATE_CHECKED);
复制代码


TIPS:如果不知道控件的名称,可以在添加控件后先生成一次代码,在setup_scr_screen.c中找到生成的控件名称,代码中控件名称的命名规则一般是 页面名_控件名,例如下图中LED控件在生成的代码中的名称是screen_led_1
微信截图_20240519090511.png
控件的使用方法可以到LVGL目录中查看控件的定义,或直接在网上搜索
先用模拟器跑一下,看看控件是否都工作正常
QQ录屏20240519084616 00_00_00-00_00_30.gif
接下来代码移植到Eyes-S1,这里使用的天气站的工程,移植方法和SCP4.3一样,最终运行效果
WeChat_20240519092813 00_00_00-00_00_30.gif
另外这次移植的全过程也做了视频发到了B站,欢迎围观
https://www.bilibili.com/video/BV17Z421s7tG/


回复

使用道具 举报

WT_0213 | 2024-5-19 09:44:29 | 显示全部楼层
回复

使用道具 举报

1055173307 | 2024-5-19 11:39:32 | 显示全部楼层
回复

使用道具 举报

lovzx | 2024-5-19 12:55:05 | 显示全部楼层
学习
回复

使用道具 举报

1084504793 | 2024-5-19 16:13:28 | 显示全部楼层
回复

使用道具 举报

WangChong | 2024-5-19 19:22:22 | 显示全部楼层
回复

使用道具 举报

爱笑 | 2024-5-20 08:53:48 | 显示全部楼层
不错不错
用心做好保姆工作
回复

使用道具 举报

jkernet | 2024-5-21 10:50:37 | 显示全部楼层
设计UI有编辑器就是舒服
回复 支持 反对

使用道具 举报

iiv | 2024-5-21 19:48:14 | 显示全部楼层
大哥优秀
回复

使用道具 举报

知行合一 | 2024-6-23 19:49:00 | 显示全部楼层
学习学习
回复

使用道具 举报

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

本版积分规则