分享一些在LCD/OLED上绘制图像的软件使用技巧

介绍

LCD/OLED相信有过嵌入式开发经历的同学都有使用过，但是绝大多数人都是使用一些广为流传的驱动函数，在上面写写英文，写写汉字，画一些矩阵和圆这种简单的图案。作为一个超爱花里胡哨的选手，我当然不允许我的显示屏幕上只有这些东西，所以我总结出了一整套在LCD/OLED上绘制图案的方法，包括图片，图标和GIF。欢迎大家与我交流：2250017028@qq.com

图标绘制

使用软件：IconWorkshop + Img2Lcd

1. IconWorkshop

• 首先打开软件，选择UNIX图标，再选择想要生成的图片大小（只考虑单色图，因为要在OLED显示）
  
  
• 快乐绘图，使用右边工具栏中的画笔进行创作
  
  效果图：
  
• 保存图片到自定义路径

2. Img2Lcd

• 使用软件打开上面保存的图片并如图修改配置参数（这个与绘制函数息息相关）
  
• 生成对应数组，并将其放到工程文件中（推荐使用一个头文件存储想要在显示器上打印的图片数组，或者将其存储入外部FLASH中）
  
• 编写图片绘制函数

/**
 *@brief 在LCD指定位置绘制图片
 *@param x0 y0 x1 y1 图片起止点
 *@param front_color 图像颜色
 *@param back_color 背景颜色
 *@param	p 图片存储地址
 */ 
void LCD_Draw_Picture(uint8_t x0, uint8_t y0, uint8_t x1, uint8_t y1, int front_color, int back_color, const unsigned char* p)
{
 char temp, t;
 unsigned int j=0;
 unsigned char x,y;
  
  if((y1-y0)%8!=0) y1 =(y1-y0)/8 + 1; 
	else y1 = y1 / 8;
	for(y=0;y<y1;y++)
	{
    for(x=x0;x<x1;x++)
	    {      
	    	temp = p[j++]; 
				for(t=0;t<8;t++)
				{
					if(temp&0x01)
					{
						POINT_COLOR = front_color;
						LCD_DrawPoint(x,y*8+y0+t);
					}
					else 
					{
						POINT_COLOR = back_color;
						LCD_DrawPoint(x,y*8+y0+t);
					}
					temp>>=1;					
				}
	    }
	}
}

/**
 *@brief 在OLED指定位置绘制图片
 *@param x0 y0 x1 y1 图片起止点
 *@param mode 0 反白显示 1 正常显示	
 *@param	p 图片存储地址
 *@note x:0~128 y:0~64
 */ 
void OLED_Draw_Picture(uint8_t x0, uint8_t y0, uint8_t x1, uint8_t y1, uint8_t mode, unsigned const char p[])
{
	char temp, t;
 unsigned int j=0;
 unsigned char x,y;
  
  if((y1-y0)%8!=0) y1 =(y1-y0)/8 + 1; 
	else y1 = y1 / 8;
	for(y=0;y<y1;y++)
	{
    for(x=x0;x<x1;x++)
	    {      
	    	temp = p[j++]; 
				for(t=0;t<8;t++)
				{
					if(temp&0x01)OLED_DrawPoint(x,y*8+y0+t,mode);
					else OLED_DrawPoint(x,y*8+y0+t,!mode);
					temp>>=1;					
				}
	    }
	}
}

呈现效果，以OLED为例

图片绘制

使用软件：画图+Img2Lcd

1. 下载图片
   下载的格式最好为.png或者.jpg格式。
2. 图片处理
   这里的处理指的是图片大小的处理，可以使用画图软件进行图片大小修改。下面以俄罗斯方块的一张图标为例。先打开该图片，在右上方有重新调整大小按键，可以根据自己的需求调整图片大小
   
   
   调整后对图片进行存储，一般bmp格式就够用了。
   
   接下来就是对图片进行取模，也是使用Img2Lcd软件，但是不同于上面图标取模的是，因为该图片是彩色的，转换为二值图需要选择合适的阈值，不然最后得到的图片会失去相当多的信息。
   适当亮度+对比度
   
   过亮+对比度过小
   
   接下来的处理就跟上面图标处理一致了，这里不再赘述。

GIF绘制

使用软件：GifResizerChs + zhs9 + Img2Lcd
其实GIF取模跟图片取模最大的一点区别就是，GIF取模是多图片处理，而上述图片取模只针对于一张图片。

1.找到合适的GIF图

这里以我找的《上篮》为例

2.修改GIF的尺寸

这里使用GifResizerChs进行处理，目的是为了处理后的GIF图尺寸适配所使用的显示屏。

3.将GIF分割成多图

这里使用的是zhs9,最后生成的图片如果数量过多可以适当的进行删减，不会影响最后的显示效果。

4.图片二值化处理

若图片本身为彩色图，可以使用PictureReader软件对图片进行预处理为二值图片。这一步也可以忽略，因为最后取模为图像数组也会有二值化的过程。

5.图片取模

这里使用的方法有点笨，因为没有找到批量取模的软件，所以使用的还是Img2Lcd对GIF分离出来的图片进行逐一取模。这里使用上一幅和下一幅可以切换一个文件夹内的各个图片文件，然后逐一生成C文件代码进行存储

6. GIF显示

参考上面给出的显示一张图片的方法，对于多张图片的显示，就是一张一张图片进行显示，并且每张图片显示的间隔中需要加一定的延时，延时大小会影响最后的流畅度。这里给出我之前做的项目的开机动画作为参考。

如果对于在OLED/LCD上显示图片还有疑问，欢迎与我进一步交流：2250017028@qq.com