STM32之littlevGL系列教程：图片控件(lv
Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了仪表控件(lv_cont)，本节课带大家来学习一下图片控件，其实我们在前面的画布控件一节，也有讲过如何显示一幅图片，不过那是以来别的控件的，本节教程的不同之处是我们单独在窗口中显示一幅图片，那么这里还会给大家展示一下库里自带的一些图标，一些很常见也很有用的图标，那么废话少说！
一 有图有真相
可以看到在我们的图片下面还有一排很精致的小Logo，当然这里只是展示了很小的一部分，很有很多没有展示出来，大家可以自己去尝试，有了这些库自带的图标可就极大的方便我们做一些状态指示的显示了，所以熟练的掌握多少图标可以供我们使用也是很有必要的，当然肯定还会有很多你找不到，那么这时候你就需要自己去处理了！
二 代码分析
01LV_IMG_DECLARE(WaveShare_LOGO)04 lv_obj_t * img1 = lv_img_create(lv_scr_act(), NULL);05 lv_img_set_src(img1, &WaveShare_LOGO);06 lv_obj_align(img1, NULL, LV_ALIGN_CENTER, 0, -20);08 lv_obj_t * img2 = lv_img_create(lv_scr_act(), NULL);09 lv_img_set_src(img2, LV_SYMBOL_AUDIO LV_SYMBOL_VIDEO10 LV_SYMBOL_OK LV_SYMBOL_LIST11 LV_SYMBOL_CLOSE LV_SYMBOL_HOME12 LV_SYMBOL_WIFI LV_SYMBOL_BATTERY_EMPTY13 LV_SYMBOL_BLUETOOTH );14 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对象，这里我们是设置了很多图标，是的，大家可以想我那样一次设置很多个图标去测试看看，那么都有哪些自带的图标呢？大家可以看一下下面的代码：
01#define LV_SYMBOL_AUDIO "xefx80x81"02#define LV_SYMBOL_VIDEO "xefx80x88"03#define LV_SYMBOL_LIST "xefx80x8b"04#define LV_SYMBOL_OK "xefx80x8c"05#define LV_SYMBOL_CLOSE "xefx80x8d"06#define LV_SYMBOL_POWER "xefx80x91"07#define LV_SYMBOL_SETTINGS "xefx80x93"08#define LV_SYMBOL_TRASH "xefx80x94"09#define LV_SYMBOL_HOME "xefx80x95"10#define LV_SYMBOL_DOWNLOAD "xefx80x99"11#define LV_SYMBOL_DRIVE "xefx80x9c"12#define LV_SYMBOL_REFRESH "xefx80xa1"13#define LV_SYMBOL_MUTE "xefx80xa6"14#define LV_SYMBOL_VOLUME_MID "xefx80xa7"15#define LV_SYMBOL_VOLUME_MAX "xefx80xa8"16#define LV_SYMBOL_IMAGE "xefx80xbe"17#define LV_SYMBOL_EDIT "xefx81x80"18#define LV_SYMBOL_PREV "xefx81x88"19#define LV_SYMBOL_PLAY "xefx81x8b"20#define LV_SYMBOL_PAUSE "xefx81x8c"21#define LV_SYMBOL_STOP "xefx81x8d"22#define LV_SYMBOL_NEXT "xefx81x91"23#define LV_SYMBOL_EJECT "xefx81x92"24#define LV_SYMBOL_LEFT "xefx81x93"25#define LV_SYMBOL_RIGHT "xefx81x94"26#define LV_SYMBOL_PLUS "xefx81xa7"27#define LV_SYMBOL_MINUS "xefx81xa8"28#define LV_SYMBOL_WARNING "xefx81xb1"29#define LV_SYMBOL_SHUFFLE "xefx81xb4"30#define LV_SYMBOL_UP "xefx81xb7"31#define LV_SYMBOL_DOWN "xefx81xb8"32#define LV_SYMBOL_LOOP "xefx81xb9"33#define LV_SYMBOL_DIRECTORY "xefx81xbb"34#define LV_SYMBOL_UPLOAD "xefx82x93"35#define LV_SYMBOL_CALL "xefx82x95"36#define LV_SYMBOL_CUT "xefx83x84"37#define LV_SYMBOL_COPY "xefx83x85"38#define LV_SYMBOL_SAVE "xefx83x87"39#define LV_SYMBOL_CHARGE "xefx83xa7"40#define LV_SYMBOL_BELL "xefx83xb3"41#define LV_SYMBOL_KEYBOARD "xefx84x9c"42#define LV_SYMBOL_GPS "xefx84xa4"43#define LV_SYMBOL_FILE "xefx85x9b"44#define LV_SYMBOL_WIFI "xefx87xab"45#define LV_SYMBOL_BATTERY_FULL "xefx89x80"46#define LV_SYMBOL_BATTERY_3 "xefx89x81"47#define LV_SYMBOL_BATTERY_2 "xefx89x82"48#define LV_SYMBOL_BATTERY_1 "xefx89x83"49#define LV_SYMBOL_BATTERY_EMPTY "xefx89x84"50#define LV_SYMBOL_BLUETOOTH "xefx8ax93"是的，你没看错，足足有50种！相信这些应该可以满足你绝大部分的需求了，当然具体还得你自己亲自去显示出来看一下，最重要的还是要符合你的期待值，个人觉得还是都蛮好看的！
三 如何处理图片
处理图片我们需要用到littlevGL的在线工具，下面是网址链接：
打开网址后，我们按照下面的步骤就可以得到我们需要的文件了。
那么我们如何使用呢？其实很简单，首先我们需要将文件加入到我们的工程树中，然后在需要的地方声明一下就可以了，可以用下面两种方式：
1extern const lv_img_t my_image_name; 2LV_IMG_DECLARE(my_image_name);这两种方式都可以。
我们再来看看转换出来的图片文件的一些信息，就在我们的刚下载的文件最后就可以看到一个结构体，如下图：
1const lv_img_dsc_t WaveShare_LOGO = {2 .header.always_zero = 0,6 .header.cf = LV_IMG_CF_INDEXED_4BIT,7 .data = WaveShare_LOGO_map,上面就是转换的图片的一些基本信息，包括宽度，高度，大小等等。大家有没有学会呢？
OK，那么本节课先到这里，那么我们下节课学习图片按钮控件，我们下节课再见！
相关知识
LabVIEW界面设计之控件美化
STM32智能农田监测系统教程
Winform(C#) 国内开源美化控件主题库2:花木兰控件库
STM32与88E6250连接
STM32微控制器在智能灌溉系统中的应用研究
基于STM32单片机的鲜花售卖机系统设计
连线简笔画图片系列10
基于STM32的物联网下智能化养鱼鱼缸控制控制系统
基于STM32的智能浇花系统
STM32
网址: STM32之littlevGL系列教程：图片控件(lv https://m.huajiangbk.com/newsview631425.html
| 上一篇: 我们的节日·五一丨“庆五一 ”主 |
下一篇: 全球六大最佳春季传统节日，您了解 |
