转——【小梅哥FPGA进阶教程】第十四章 TFT屏显示图片

Zedd

十四、TFT屏显示图片

本文由杭电网友曾凯峰贡献，特此感谢

- Y, i1 @9 ^6 Y) q) M学习了小梅哥的TFT显示屏驱动设计后，想着在此基础上通过TFT屏显示一张图片，有了这个想法就开始动工了。首先想到是利用FPGA内部ROM存储图片数据，然后通过控制读取数据地址将图片数据传给TFT驱动模块，从而将每个图片数据显示在对应的像素点上。整个设计的框图如下：

主要是在小梅哥TFT驱动设计基础上增加了图片数据发送控制模块Imgdata_send，该模块包括存储图片数据的rom，和一些简单的逻辑控制。具体的rom IP核的建立我这里就不说了，不懂的可以参看小梅哥的相关内容的视频，我这里主要讲如何将图片转换成mif文件。这里有两种方法，可以作为参考，主要用到如下软件：

步骤1：利用Img2Lcd将图片转化为BMP格式的（当然图片本身为BMP格式就不需要转了，直接进入步骤2）；
& f( n# p  b* V3 ?' @$ e" W2 _步骤2：利用BMP2Mif可将图片转化为mif文件。
% o8 x( ?+ U( C# M具体实现如下：
, {: V7 D1 H8 h: {步骤1：先打开Img2Lcd打开一张图片，选择输出格式为BMP格式，输出灰度选择24位真彩色（由于BMP2Mif软件只能载入24位或8位的，所以这里就没有直接选16位的真彩色），最大宽度和高度根据图片实际的大小进行选择的，由于内部rom能存储的数据量有限，我选择了一张像素为160*120的图片如果想显示大的图片，如480*272图片，用这种方法就不能实现（看到这里有人想，如果想显示大点的图片那应该怎么解决，后面我会有其他方法来实现TFT屏保显示）。

步骤2：打开BMP2Mif软件，加载刚转换输出的24位BMP格式图片，选择输出图像格式和文件类型，点击一键转换便将图片转换为了mif文件了，可以将mif文件名更改下以区别不同图片mif文件。
$ ~0 [3 {' P# ?/ l

0 R8 o% o" v3 G) n& e9 B7 X可以用Notepad++将转化的mif文件打开看看，截取部分图如下：

rom IP核设置完成后就是数据发送控制模块Imgdata_send中控制逻辑的编写，主要是让图片显示在屏幕指定的地方，这就需要根据TFT_CTRL模块的TFT行和场扫描计数器输出信号来控制rom的数据地址，从而控制TFT_CTRL的待显示数据data_in。具体代码如下：
! Z( I3 b! ]0 x7 I

8 ^: _; }2 j2 Q1 Z) S
, F) j9 U/ ^, p6 O% Y# C( r

6 k- {2 g! Y* J6 i( G

  t' Y# }0 ]+ U% Y接下来就是仿真验证，利用已有的TFT_CTRL模块的hcount、vcount、tft_de作为Imgdata_send模块的输出进行仿真验证，代码如下：
# f2 d1 S1 I) v" o3 P; [) L, y

" E1 A* o1 E) i3 A
9 f3 }( y7 E1 D* S) t

% S7 E4 G7 N2 D2 Y. H4 r2 _  I2 ?

0 M0 z0 d4 j/ W5 q" M

% S) r; S8 y8 j* R1 t. Q
; ?0 \! z* d+ O# h* W# h7 G仿真验证的波形图如下：
* e% d& B+ ^0 V; V

) k2 L: B) l; B* i( b

0 B7 B' ?. n" R
1 x: t& ?. a2 X* j9 ?从仿真结果可以看出，图片数据是在我们指定的区域输出的。该模块仿真验证正确后，进行顶层电路文件的设计。顶层文件编写如下：

: x0 A' M' J! |+ ^6 {

8 c% u! ~7 [/ q  H' _8 H

2 d. G6 `" Q1 K" l生成的顶层电路图如下：
2 U* p8 i0 {; I4 ], H

; h* o6 B' \1 o接下来就是仿真验证，仿真验证程序如下：
2 Y, ]) h  L# _. n! Y

6 p$ Z9 r: b6 E7 Q
4 U) M2 [% H  S& i

/ q. O( j) [. `7 V* w

仿真波形如下：

5 y; T! [* Y$ @% J2 d8 o& m" }
. J7 ^! \" }# v

% Q0 [4 V" X" @- X' R3 N
$ z! _: o7 b  i从波形可以看出，图片数据在指定区域显示。接下来就是板级验证，引脚分配参照芯航线FPGA学习套件引脚分配表进行分配，然后布局布线，板级程序下载最后实现的效果图如下:
  V' E4 P0 q1 V  c* J8 O8 s' w" ?; E

: a1 ]+ Z- k% W0 N; @9 H7 Q6 x我们设置的是显示在屏幕的左上角，与预期效果是一致的，想要改变图片的位置，可以更改Imgdata_send模块的28、29行代码：
3 g. W/ D7 q; {% K3 w* {  z: ^7 O

4 X* K" F& h% x8 }/ ^2 v! t; L将上面的（0、0）更改为其他的数，图片位置就会改变，如果想让图片在屏幕上自动的移动，可以自己设置一种路径让img_hbegin、img_vbegin的值按你的路径变化就可实现图片的自动移动，读者可以自己改进学习。
) p: r  d% v: u* A9 f

$ h: q- w% ^+ o0 ^* n0 {- E6 _# M

游客，如果您要查看本帖隐藏内容请回复

- b# l% ?6 }5 @7 }; Z6 l; d$ e

fanichicl

连载的吗？

fuyang_house

学习学习学习