STM32 LCD 显示彩色图片(内部FLASH)

STM32 LCD 数组方式显示彩色图片

---

---

前言

在使用LCD颜色填充的时候发现正点原子提供了一个很好用的填充函数，就是LCD_Color_Fill();该函数是用来填充颜色块的，也可以直接用来显示图片，因为图片也是由颜色块组成的。所以在需要使用stm32从内部flash的方法来显示图片时就不要独立写显示图片的函数了，非常实用。

---

1、图片处理

1.1 准备图片

第一步：准备一张需要显示的图片。
注意：该图片的分辨率大小需要在使用的LCD屏支持的分辨率范围内，如果图片分辨率超出LCD屏幕的分辨率则会无法正常显示或者出现异常的情况。

接下来就以下面这个表情图片为例进行显示：

该图片为.jpg格式的图片，分辨率是200x200。实验使用的LCD屏分辨率是240x320的。

1.2 查看和调整图片大小

第二步：查看图片分辨率方法：
方法1：在图片属性里面查看

方法2：用画图软件方式查看

鼠标右键图片以画图方式打开图片，如下图：

点击重新调整大小选项。

这里有一个小技巧，如果发现这个图片分辨率太大，也可以在这里输入合适分辨率的数值即可进行调整，注意勾选下面的保持纵横比选项，才能保证图片的原始比例，不然图片比例不一致会被拉伸从而导致显示效果不佳。

2、Picture2Hex 软件使用

该软件在浏览器输入软件名字搜索下载即可。

第一步：双击Picture2Hex.exe文件，即可打开该软件，界面如下：

根据图片信息进行设置参数。

第二步：导入图片：

导入后就可以在该软件的目录下看到一个名字是work的文件夹，打开后可以看到一个bmp的图片和.c的文件，转换生成的大数组就存放在这个.c里面了，拷贝到MDK工程即可。

第三步：拷贝代码：
添加后的效果如下，需要在名字前面添加const关键字进行修饰，不然会提示内存不够的(针对小容量芯片)。

注意：这个LOGO_W和LOGO_H是图片对应的分辨率，为了方便看大小的，可以不用管该代码，也可以不用拷贝到MDK工程，自己知道图片大小就行。

3、Img2Lcd 软件使用

该软件在浏览器输入软件名字搜索下载即可。

第一步：双击Img2Lcd.exe文件，即可打开该软件，界面如下：

根据图片信息进行设置参数：
1、输出数据类型：C语言数组
2、扫描模式：水平扫描
3、输出灰度：16位真彩色
4、最大宽度和高度：(图片分辨率大小)

第二步：导入图片：

根据标号顺序进行设置图片参数，设置好后导入图片如下图。本图片是240x300的分辨率。

点击保存按钮后，需要选择一个保存该图片数组文件的路径和命名名字，默认是.c文件。

第三步：拷贝代码：
添加后的效果如下，名字前面会默认添加const关键字进行修饰。

4、函数代码实现

函数原型如下：

//在指定区域内填充指定颜色块
//(sx,sy),(ex,ey):填充矩形对角坐标,区域大小为:(ex-sx+1)*(ey-sy+1)
//color:要填充的颜色
void LCD_Color_Fill(u16 sx, u16 sy, u16 ex, u16 ey, u16 *color)
{
    u16 height, width;
    u16 i, j;
    width = ex - sx + 1;            //得到填充的宽度
    height = ey - sy + 1;           //高度

    for (i = 0; i < height; i++)
    {
        LCD_SetCursor(sx, sy + i);  //设置光标位置
        LCD_WriteRAM_Prepare();     //开始写入GRAM

        for (j = 0; j < width; j++)
        {
            LCD->LCD_RAM=color[i * width + j];  //写入数据
        }
    }
}

这里有一点是需要特别注意的，就是这个函数是对显示区域加1操作了，所以在调用该函数时，区域大小也需要对应减去1才能正常显示，不然显示的图片会显示异常等错位效果。

在main.c文件下的mian函数内调用该函数。

在while里面调用函数：LCD_Color_Fill(0, 0, 199, 199, (u16*)gImage);
编译下载代码后发现能正常显示图片，能达到实验效果目的。

但是发现调用函数这样写区域坐标有点别扭，和图片分辨率大小不太符合。那么，可以适当改一下原函数进行显示，修改如下：

//在指定区域内填充指定颜色块
//(sx,sy),(ex,ey):填充矩形对角坐标,区域大小为:(ex-sx)*(ey-sy)
//color:要填充的颜色
void LCD_Color_Fill(u16 sx, u16 sy, u16 ex, u16 ey, u16 *color)
{
    u16 height, width;
    u16 i, j;
    width = ex - sx;                //得到填充的宽度
    height = ey - sy;               //高度

    for (i = 0; i < height; i++)
    {
        LCD_SetCursor(sx, sy + i);  //设置光标位置
        LCD_WriteRAM_Prepare();     //开始写入GRAM

        for (j = 0; j < width; j++)
        {
            LCD->LCD_RAM=color[i * width + j];  //写入数据
        }
    }
}

把获取宽度和高度的坐标的+1删除即可。

调用如下：LCD_Color_Fill(0, 0, 200, 200, (u16*)gImage);
这样写就很方便直观看出图片的分辨率大小和显示位置了。

编译下载代码后发现效果是一样的，这样看起来就比较直观图片大小了。

5、图片显示效果

Picture2Hex 软件效果如下：

Img2Lcd 软件效果如下：

6、显示图片太大会报错

这种读取大数组的方式不建议用来显示大图片的，因为是芯片内存有限，显示小图片还是可以的。要是需要显示比较多的图片，还是建议读取SD卡的方式，这样就不会占用太大的内存了，节省一些空间。大容量的芯片还好，小容量的很容易就报错提示超内存了。

添加大图片数组后下载会有错位提示，如下图：

总结

用这个方法来显示小分辨率的图片还是很不错的，颜色效果很逼真，和图片原图是一样的效果，就是有点费内存，不过小型项目或者学习还是可以的。

用这个LCD_Color_Fill函数后，发现使用部分其它的图片转换工具转换出来的数据显示会异常的，大概率和LCD显示格式存在差异导致的，刚好这个LCD是用RGB565的颜色模式，而这个软件也刚好是RGB565的，所以就对应可以使用了。

通过该例子就能很好地学习了LCD_Color_Fill函数及其图片显示的实现，和传参过程。

Picture2Hex软件生成图片数组大小有点限制，就是不能显示200x100分辨率以下的图片，不过也符合大部分的使用了。如果有其它的需要则需要自行写图片显示函数然后用其它的图片处理工具。