代码收藏家技术教程 2023-12-31

在STM32上使用内部FLASH显示彩色图片的LCD方案

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

文章目录

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

前言

1、图片处理

1.1 准备图片

1.2 查看和调整图片大小

2、Picture2Hex 软件使用

3、Img2Lcd 软件使用

4、函数代码实现

5、图片显示效果

6、显示图片太大会报错

总结

前言

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

1、图片处理

1.1 准备图片

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

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

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

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、最大宽度和高度：(图片分辨率大小)

第二步：导入图片：

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

点击保存按钮后，需要选择一个保存该图片数组文件的路径和命名名字，默认是.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);
这样写就很方便直观看出图片的分辨率大小和显示位置了。

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