基于KL26Z的串行TFT屏图像显示

jinglixixi

基于KL26Z的串行TFT屏图像显示 [复制链接]

在KL25、KL26及KL27中，我最喜欢的是KL26开发板，这不但是因为它的硬件配置，也源于它的软件资源支持。别开它与其它板子比起来并不起眼，但基于这块开发板和所提供的例程，能将它打造成一个简单的多媒体开发平台。

在前期，曾参考音频播放的例程实现了一个会讲故事的书的小作品，后来受时间的限制，就把后续的功能拓展放下了。前一段又进行了一点拓展，就是利用板载的SD卡来存放图像文件，并借助例程中的文件管理功能来读取图像文件，进而再通过数据的格式转换，由串口TFT显示屏再现图像内容。

在实现图像显示功能前，实现借助串口图像进行了图片文件的读取测试，经实验发现在读取文件过程中，对不同品牌的SDHC卡是存在一定区别的，有些卡是读不出信息，需精心挑选。图1是一个读取成功的界面，从中可以看到该图像文件的名称为1.BMP，其文件大小为230454个字节。从“42 4d 36  ...”开始是图像文件的参数信息，54字节后才是图像数据。

图1  读取1.BMP位图文件

图2  借助WinHEX进行对比

提取图像文件参数的函数如下：

1. BMP_HEADER TFTBmpGetHeadInfo(uint8_t *buf)
   
2. {
   
3.         BMP_HEADER bmpHead;
   
4. 
   
5.         bmpHead.bfType = (buf[0] << 8) + buf[1];                       // BM
   
6.         bmpHead.bfSize        = (buf[5]<<24) + (buf[4]<<16) + (buf[3]<<8) + buf[2];       // 文件大小
   
7.         bmpHead.biWidth = (buf[21]<<24) + (buf[20]<<16) + (buf[19]<<8) + buf[18];   // 图像宽度
   
8.         bmpHead.biHeight = (buf[25]<<24) + (buf[24]<<16) + (buf[23]<<8) + buf[22];  // 图像高度
   
9.         bmpHead.biBitCount = (buf[29] << 8) + buf[28];           // 每个像素的位数，单色位图为１，256色为8，16bit为16， 24bit为24
   
10. 
    
11.         return bmpHead;
    
12. }

复制代码

其数据存放缓冲区及其数据结构的定义如下：

1. unsigned char Buffer[2048];  //2k缓冲区
   
2. //bmpHead
   
3. typedef struct
   
4. {       
   
5.         uint16        bfType;                                 // 说明文件类型，在windows系统中为BM
   
6.         uint32        bfSize;                                 // 说明文件大小
   
7.         uint32        biWidth;                         //        说明图像宽度                                                           
   
8.         uint32        biHeight;                         //        说明图像高度
   
9.         uint16        biBitCount;             //        每个像素的位数，单色位图为１，256色为8，16bit为16， 24bit为24
   
10. }BMP_HEADER;

复制代码

进行16位色彩格式转换的函数为：

1. unsigned int bmp_555to565(unsigned int dat)
   
2. {
   
3. return (unsigned int )(((dat&0x7c00)<<1)|((dat&0x03e0)<<1)|(dat&0x001f));
   
4. }

复制代码

进行24位色彩格式转换的函数为：

1. unsigned int bmp_24to565(uint8_t r,uint8_t g,uint8_t b)
   
2. {
   
3. return(((unsigned int )(r>>3)<<11)|((unsigned int )(g>>2)<<5)|((unsigned int )b>>3));
   
4. }

复制代码

    经图像文件的显示测试，其效果如3所示。整体的线路构成则如图4所示，在此基础上要实现数码相框的功能也就十分方便了。后面有时间的话，再将读取文件字库的功能补充上，到时显示中文的文本信息就不再困难了，集文字、图像、音频的多媒体播放平台将发挥其潜能。

图3  位图显示效果

图4  整体构成

此内容由EEWORLD论坛网友jinglixixi原创，如需转载或用于商业用途需征得作者同意并注明出处

eric_wang

感谢分享

jinglixixi

eric_wang 发表于 2017-3-15 09:56
感谢分享

多谢鼓励！！！

陈纬

请问一下楼主，最好一个图上面是用上什么开发界面的，我也想学习一下做界面

jinglixixi

陈纬 发表于 2017-4-13 17:37
请问一下楼主，最好一个图上面是用上什么开发界面的，我也想学习一下做界面

抱歉，我是直接用的图像文件。不过大多数图像处理软件都行吧，也可以截一些图合成到一个界面中。

陈纬

jinglixixi 发表于 2017-4-14 12:54
抱歉，我是直接用的图像文件。不过大多数图像处理软件都行吧，也可以截一些图合成到一个界面中。

我说图四哪一个，哪上一个图片？

jinglixixi

陈纬 发表于 2017-4-15 10:31
我说图四哪一个，哪上一个图片？

是新唐M451旗舰开发板中配图，给你发一个看是否用得上。