OneOS+LVGL实现简易时钟UI页面

OneOS+LVGL实现简单时钟UI

一、LVGL简介

lvgl是一个免费、开源的轻量级通用图形库,可以在嵌入式设备上实现GUI;lvgl具有诸多控件(Widgets),可以实现图片、事件、动画等,详细内容参考文档:Introduction (介绍) — 百问网LVGL中文教程文档 文档 (100ask.net);

二、OneOS上的LVGL

目前OneOS支持lvgl7.9和lvgl8.2,利用OneOS Cube可以对lvgl进行配置,具体配置路径,Top—>Components—>GUI—>Enable LVGL,默认选择lvgl8.2,该demo也是使用lvgl8.2实现;

三、所需材料

  1. 代码地址:components/gui/lvgl8.2/oneos_extra/SimpleUi · zero/OneOS - 码云 - 开源中国 (gitee.com);
  2. 开发板:正点原子阿波罗;(如果选择其他开发板,在编译时出现空间不足的情况时,可以在LVGL basic menu中减少LVGL buff lines或者GUI task stack size的大小)
  3. 接口:ST-Link;

四、操作步骤

  1. 拉取码云代码到本地仓库,首先利用OneOScube生成Keil项目,需要选择你使用的开发板;

    生成项目如下:
    OneOS+LVGL实现简易时钟UI页面_第1张图片

  2. 在生成KEIL项目的目录下,打开OneOScube,按照以下路径使能SimpelUI;
    OneOS+LVGL实现简易时钟UI页面_第2张图片
    保存更改,利用命令scrons --ide=mdk5重新编译项目;

  3. 在KEIL里打开project,可以看到已经有了Gui/Simple的文件夹:
    OneOS+LVGL实现简易时钟UI页面_第3张图片
    hutao.c与os_logo.c是lvgl处理图片的一种方式,lvgl提供一种在线图片转换工具,可以将图片转换成C数组的形式进行保存,然后在程序中声明该图片即可使用,在线转换地址:Online image converter - BMP, JPG or PNG to C array or binary | LVGL;

  4. 接下来就是选择接口ST-LINK,然后编译、烧写代码,成功之后打开串口工具,在shell窗口中输入命令ex_simple,demo成功演示;
    OneOS+LVGL实现简易时钟UI页面_第4张图片

    五、demo演示:

OneOS+LVGL实现简易时钟UI页面_第5张图片
demo视频演示链接:演示视频
1.该demo显示两个页面,home页面为主页面,中间时钟显示了具体时、分、秒、年、月、日和星期;左下是一个利用动画实现的温度计;右下为演示的gif图片;

2.第二个function页面,包括一个可以查看的日历,并将几个重要日期高亮显示在日历中;还有一个note文本框,可以调出键盘写备忘录;

3.两个页面之间可以通过点击页签或者左右滑动进行切换;

4.点击最右下角的小圆圈,可以切换你喜欢的颜色。

你可能感兴趣的:(ui)