发帖
18 2 1

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

yuyy1989
论坛元老

13

主题

35

回帖

3538

积分

论坛元老

积分
3538
小安派&M61基本系统教程 5995 18 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/


──── 2人觉得很赞 ────

使用道具 举报

2024-5-19 09:44:29
2024-5-19 11:39:32
2024-5-19 12:55:05
学习
2024-5-19 16:13:28
2024-5-19 19:22:22
2024-5-20 08:53:48
不错不错
2024-5-21 10:50:37
设计UI有编辑器就是舒服
2024-5-21 19:48:14
大哥优秀
2024-6-23 19:49:00
学习学习
您需要登录后才可以回帖 立即登录
高级模式
12下一页
统计信息
  • 会员数: 28275 个
  • 话题数: 40246 篇