立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:图片控件(lv_img)与自带图标的使用

2020-3-29 11:34| 发布者: imliubo| 查看: 1817| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了仪表控件(lv_cont),本节课带大家来学习一下图片控件,其实我们在前面的画布控件一节,也有讲过如何显示一幅图片,不过那是以来别的控件的,本节教 ...
Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了仪表控件(lv_cont),本节课带大家来学习一下图片控件,其实我们在前面的画布控件一节,也有讲过如何显示一幅图片,不过那是以来别的控件的,本节教程的不同之处是我们单独在窗口中显示一幅图片,那么这里还会给大家展示一下库里自带的一些图标,一些很常见也很有用的图标,那么废话少说!
一 有图有真相

可以看到在我们的图片下面还有一排很精致的小Logo,当然这里只是展示了很小的一部分,很有很多没有展示出来,大家可以自己去尝试,有了这些库自带的图标可就极大的方便我们做一些状态指示的显示了,所以熟练的掌握多少图标可以供我们使用也是很有必要的,当然肯定还会有很多你找不到,那么这时候你就需要自己去处理了!
二 代码分析
LV_IMG_DECLARE(WaveShare_LOGO)
void img_test(void)
{
    lv_obj_t * img1 = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img1, &WaveShare_LOGO);
    lv_obj_align(img1, NULL, LV_ALIGN_CENTER, 0, -20);

    lv_obj_t * img2 = lv_img_create(lv_scr_act(), NULL);
    lv_img_set_src(img2, LV_SYMBOL_AUDIO LV_SYMBOL_VIDEO
                         LV_SYMBOL_OK  LV_SYMBOL_LIST
                         LV_SYMBOL_CLOSE LV_SYMBOL_HOME
                         LV_SYMBOL_WIFI LV_SYMBOL_BATTERY_EMPTY
                         LV_SYMBOL_BLUETOOTH );
    lv_obj_align(img2, img1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
}
第一个图片对象img1就是显示的我们微雪课堂的logo,这里需要下载一下我这里给大家处理的微雪课堂logo的取模文件,大家可以点击下面链接下载,将文件添加到我们的工程后,记得一定要用这一句函数LV_IMG_DECLARE(WaveShare_LOGO) 声明一下我们的微雪课堂图片文件的C语言数组,后面教大家如何显示别的图片。

WaveShare_Logo.zip

大家下载上面的文件,解压出来,然后放到跟test.c文件同一个目录中,然后加到工程树中,如下图:

然后第二个img2对象,这里我们是设置了很多图标,是的,大家可以想我那样一次设置很多个图标去测试看看,那么都有哪些自带的图标呢?大家可以看一下下面的代码:
#define LV_SYMBOL_AUDIO           "\xef\x80\x81"
#define LV_SYMBOL_VIDEO           "\xef\x80\x88"
#define LV_SYMBOL_LIST            "\xef\x80\x8b"
#define LV_SYMBOL_OK              "\xef\x80\x8c"
#define LV_SYMBOL_CLOSE           "\xef\x80\x8d"
#define LV_SYMBOL_POWER           "\xef\x80\x91"
#define LV_SYMBOL_SETTINGS        "\xef\x80\x93"
#define LV_SYMBOL_TRASH           "\xef\x80\x94"
#define LV_SYMBOL_HOME            "\xef\x80\x95"
#define LV_SYMBOL_DOWNLOAD        "\xef\x80\x99"
#define LV_SYMBOL_DRIVE           "\xef\x80\x9c"
#define LV_SYMBOL_REFRESH         "\xef\x80\xa1"
#define LV_SYMBOL_MUTE            "\xef\x80\xa6"
#define LV_SYMBOL_VOLUME_MID      "\xef\x80\xa7"
#define LV_SYMBOL_VOLUME_MAX      "\xef\x80\xa8"
#define LV_SYMBOL_IMAGE           "\xef\x80\xbe"
#define LV_SYMBOL_EDIT            "\xef\x81\x80"
#define LV_SYMBOL_PREV            "\xef\x81\x88"
#define LV_SYMBOL_PLAY            "\xef\x81\x8b"
#define LV_SYMBOL_PAUSE           "\xef\x81\x8c"
#define LV_SYMBOL_STOP            "\xef\x81\x8d"
#define LV_SYMBOL_NEXT            "\xef\x81\x91"
#define LV_SYMBOL_EJECT           "\xef\x81\x92"
#define LV_SYMBOL_LEFT            "\xef\x81\x93"
#define LV_SYMBOL_RIGHT           "\xef\x81\x94"
#define LV_SYMBOL_PLUS            "\xef\x81\xa7"
#define LV_SYMBOL_MINUS           "\xef\x81\xa8"
#define LV_SYMBOL_WARNING         "\xef\x81\xb1"
#define LV_SYMBOL_SHUFFLE         "\xef\x81\xb4"
#define LV_SYMBOL_UP              "\xef\x81\xb7"
#define LV_SYMBOL_DOWN            "\xef\x81\xb8"
#define LV_SYMBOL_LOOP            "\xef\x81\xb9"
#define LV_SYMBOL_DIRECTORY       "\xef\x81\xbb"
#define LV_SYMBOL_UPLOAD          "\xef\x82\x93"
#define LV_SYMBOL_CALL            "\xef\x82\x95"
#define LV_SYMBOL_CUT             "\xef\x83\x84"
#define LV_SYMBOL_COPY            "\xef\x83\x85"
#define LV_SYMBOL_SAVE            "\xef\x83\x87"
#define LV_SYMBOL_CHARGE          "\xef\x83\xa7"
#define LV_SYMBOL_BELL            "\xef\x83\xb3"
#define LV_SYMBOL_KEYBOARD        "\xef\x84\x9c"
#define LV_SYMBOL_GPS             "\xef\x84\xa4"
#define LV_SYMBOL_FILE            "\xef\x85\x9b"
#define LV_SYMBOL_WIFI            "\xef\x87\xab"
#define LV_SYMBOL_BATTERY_FULL    "\xef\x89\x80"
#define LV_SYMBOL_BATTERY_3       "\xef\x89\x81"
#define LV_SYMBOL_BATTERY_2       "\xef\x89\x82"
#define LV_SYMBOL_BATTERY_1       "\xef\x89\x83"
#define LV_SYMBOL_BATTERY_EMPTY   "\xef\x89\x84"
#define LV_SYMBOL_BLUETOOTH       "\xef\x8a\x93"
是的,你没看错,足足有50种!相信这些应该可以满足你绝大部分的需求了,当然具体还得你自己亲自去显示出来看一下,最重要的还是要符合你的期待值,个人觉得还是都蛮好看的!

三 如何处理图片
处理图片我们需要用到littlevGL的在线工具,下面是网址链接:
打开网址后,我们按照下面的步骤就可以得到我们需要的文件了。


那么我们如何使用呢?其实很简单,首先我们需要将文件加入到我们的工程树中,然后在需要的地方声明一下就可以了,可以用下面两种方式:
extern const lv_img_t my_image_name; 
LV_IMG_DECLARE(my_image_name);
这两种方式都可以。
我们再来看看转换出来的图片文件的一些信息,就在我们的刚下载的文件最后就可以看到一个结构体,如下图:
const lv_img_dsc_t WaveShare_LOGO = {
  .header.always_zero = 0,
  .header.w = 287,
  .header.h = 81,
  .data_size = 11728,
  .header.cf = LV_IMG_CF_INDEXED_4BIT,
  .data = WaveShare_LOGO_map,
};
上面就是转换的图片的一些基本信息,包括宽度,高度,大小等等。大家有没有学会呢?

OK,那么本节课先到这里,那么我们下节课学习图片按钮控件,我们下节课再见!

42

顶一下

刚表态过的朋友 (42 人)

关键词STM32 littlevGL

相关阅读

最新评论

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2021-1-18 20:35 , Processed in 0.012635 second(s), 14 queries .

返回顶部