1）实验平台：正点原子领航者ZYNQ开发板
2）平台购买地址：/item.htm?&id=606160108761
3）全套实验源码+手册+视频下载地址：/thread-301505-1-1.html
4）对正点原子FPGA感兴趣的同学可以加群讨论：994244016
5）关注正点原子公众号，获取最新资料更新
第二十二章 HDMI方块移动实验
在HDMI彩条显示实验中，我们成功地在显示器上显示出了静态的彩条图案。本章我们通过在屏幕上显示一个移动的小方块，来给大家演示如何使用HDMI接口显示动态图案。
本章包括以下几个部分：
22.1 HDMI简介
22.2 实验任务
22.3 硬件设计
22.4 程序设计
22.5 下载验证
22.1 HDMI简介
我们在“HDMI彩条显示实验”中对HDMI视频传输标准作了详细的介绍，包括HDMI接口定义、行场同步时序、以及显示分辨率等。如果大家对这部分内容不是很熟悉的话，请参考“HDMI彩条显示实验”中的HDMI简介部分。
22.2 实验任务
本章的实验任务是使用领航者开发板上的HDMI接口在显示器上显示一个不停移动的方块，要求方块移动到边界处时能够改变移动方向。显示分辨率为1280720，刷新速率为60hz。
22.3 硬件设计
HDMI接口部分的硬件设计原理及本实验中各端口信号的管脚分配与“HDMI彩条显示实验”完全相同，请参考“HDMI彩条显示实验”中的硬件设计部分。
22.4 程序设计
图 7.5.13.1是根据本章实验任务画出的系统框图。其中，时钟生成IP核（clk_wiz_0）生成1280720分辨率所需的像素时钟74.25MHz、以及TMDS编码驱动IP核所需的像素时钟的5倍频率即74.25 * 5 = 371.25MHz。RGB驱动模块（rgb_driver）负责产生RGB时序，并输出来自RGB显示模块（rgb_display）的RGB数据。RGB数据被送入TMDS编码驱动IP核（rgb2dvi_0）并最后输出到HDMI接口。
图 7.5.13.1 HDMI方块移动实验系统框图
在“HDMI彩条显示实验”中，我们利用RGB驱动模块输出的像素点的横坐标，在RGB显示模块中完成了彩条图案的绘制。而在本次实验中，为了完成方块的显示，需要同时使用像素点的横坐标和纵坐标来绘制方块所在的矩形区域，另外还需要知道矩形区域左上角的顶点坐标。由于RGB显示的图像在行场同步信号的同步下不停的刷新，因此只要连续改变方块左上角顶点的坐标，并在新的坐标点处重新绘制方块，即可实现方块移动的效果。
各模块端口及信号连接如图 7.5.13.2所示：
图 7.5.13.2 顶层模块原理图
图 7.5.13.2中的顶层模块（hdmi_block_move_top）、时钟分频IP核（clk_wiz_0）、TMDS编码驱动IP核（rgb2dvi_0）以及RGB驱动模块（rgb_display）均与“HDMI彩条显示实验”完全相同，只对RGB显示模块（RGB_display）作了修改。因此，这里我们重点讲解RGB显示模块，其他部分大家可以参考“HDMI彩条显示实验”。
RGB显示模块的代码如下：
1 module rgb_display(2 inputpixel_clk, //像素时钟3 inputsys_rst_n, //复位信号4 5 input [10:0] pixel_xpos, //像素点横坐标6 input [10:0] pixel_ypos, //像素点纵坐标7 output reg [23:0] pixel_data//像素点数据8 ); 9 10 //parameter define11 parameter H_DISP = 11'd1280; //分辨率--行12 parameter V_DISP = 11'd720; //分辨率--列13 14 localparam SIDE_W = 11'd40; //屏幕边框宽度15 localparam BLOCK_W = 11'd40; //方块宽度16 localparam BLUE = 24'b00000000_00000000_11111111; //屏幕边框颜色 蓝色17 localparam WHITE = 24'b11111111_11111111_11111111; //背景颜色 白色18 localparam BLACK = 24'b00000000_00000000_00000000; //方块颜色 黑色19 20 //reg define21 reg [10:0] block_x = SIDE_W ; //方块左上角横坐标22 reg [10:0] block_y = SIDE_W ; //方块左上角纵坐标23 reg [21:0] div_cnt; //时钟分频计数器24 reg h_direct; //方块水平移动方向，1：右移，0：左移25 reg v_direct; //方块竖直移动方向，1：向下，0：向上26 27 //wire define28 wire move_en; //方块移动使能信号，频率为100hz29 30 //*****************************************************31 //**main code32 //*****************************************************33 assign move_en = (div_cnt == 22'd742500) ? 1'b1 : 1'b0;34 35 //通过对像素时钟计数，实现时钟分频36 always @(posedge pixel_clk ) begin37 if (!sys_rst_n)38 div_cnt <= 22'd0;39 else begin40 if(div_cnt < 22'd742500)41div_cnt <= div_cnt + 1'b1;42 else43div_cnt <= 22'd0; //计数达10ms后清零44 end45 end46 47 //当方块移动到边界时，改变移动方向48 always @(posedge pixel_clk ) begin49 if (!sys_rst_n) begin50 h_direct <= 1'b1; //方块初始水平向右移动51 v_direct <= 1'b1; //方块初始竖直向下移动52 end53 else begin54 if(block_x == SIDE_W - 1'b1) //到达左边界时，水平向右55h_direct <= 1'b1;56 else//到达右边界时，水平向左57 if(block_x == H_DISP - SIDE_W - BLOCK_W)58h_direct <= 1'b0;59 else60h_direct <= h_direct;6162 if(block_y == SIDE_W - 1'b1) //到达上边界时，竖直向下63v_direct <= 1'b1;64 else//到达下边界时，竖直向上65 if(block_y == V_DISP - SIDE_W - BLOCK_W)66v_direct <= 1'b0;67 else68v_direct <= v_direct;69 end70 end71 72 //根据方块移动方向，改变其纵横坐标73 always @(posedge pixel_clk ) begin74 if (!sys_rst_n) begin75 block_x <= SIDE_W; //方块初始位置横坐标76 block_y <= SIDE_W; //方块初始位置纵坐标77 end78 else if(move_en) begin79 if(h_direct) 80block_x <= block_x + 1'b1; //方块向右移动81 else82block_x <= block_x - 1'b1; //方块向左移动8384 if(v_direct) 85block_y <= block_y + 1'b1; //方块向下移动86 else87block_y <= block_y - 1'b1; //方块向上移动88 end89 else begin90 block_x <= block_x;91 block_y <= block_y;92 end93 end94 95 //给不同的区域绘制不同的颜色96 always @(posedge pixel_clk ) begin97 if (!sys_rst_n) 98 pixel_data <= BLACK;99 else begin100if( (pixel_xpos < SIDE_W) || (pixel_xpos >= H_DISP - SIDE_W)101 || (pixel_ypos < SIDE_W) || (pixel_ypos >= V_DISP - SIDE_W))102 pixel_data <= BLUE;//绘制屏幕边框为蓝色103else104if( (pixel_xpos >= block_x) && (pixel_xpos < block_x + BLOCK_W)105 && (pixel_ypos >= block_y) && (pixel_ypos < block_y + BLOCK_W))106 pixel_data <= BLACK; //绘制方块为黑色107else108 pixel_data <= WHITE; //绘制背景为白色109end110 end111 112 endmodule
代码中14至18行声明了一系列的参数，方便大家修改边框尺寸、方块大小、以及各部分的颜色等。其中边框尺寸和方块宽度均以像素点为单位。当方块的宽度确定时，如果我们知道方块左上方顶点的坐标，就能轻而易举的画出整个方块区域。因此，我们将方块的移动简化为其左上角顶点的移动。
由于像素时钟相对于方块移动速度而言过快，我们通过计数器对时钟计数，得到一个频率为100hz的脉冲信号move_en，用它作为使能信号来控制方块的移动（33~45行）。方块的移动方向分为水平方向h_direct和竖直方向v_direct，由代码的47至70行可知，当方块移动到上下边框时，竖直移动方向改变；当方块移动到左右边框时，水平移动方向改变。代码72至93行根据方块的移动方向，在使能信号move_en到来时改变其左上角顶点的纵横坐标值。当move_en的频率为100hz时，方块每秒钟在水平和竖直方向上分别移动100个像素点的距离，也可以通过调整move_en的频率，来加快或减慢方块移动的速度。
代码第95至110行根据RGB驱动模块输出的纵横坐标判断当前像素点所在的区域，对不同区域中的像素点赋以不同的颜色值，从而实现边框、方块以及背景颜色的绘制。
22.5 下载验证
编译工程并生成比特流.bit文件。然后将HDMI电缆的一端与领航者开发板上HDMI插座相连接，另一端与显示器的HDMI接口相连接，如下图所示。
图 7.5.13.1领航者HDMI连接图
最后将下载器一端连电脑，另一端与开发板上的JTAG端口连接，连接电源线并打开电源开关。
接下来我们下载比特流.bit文件，验证HDMI显示方块移动的功能。下载完成后观察显示器显示的图案如下图所示，图中的黑色方块能够不停的移动，且碰撞到蓝色边框时能改变移动方向，说明HDMI方块移动程序下载验证成功。
图 7.5.13.2 HDMI方块移动效果图
【正点原子FPGA连载】 第二十二章 HDMI方块移动实验 -摘自【正点原子】领航者ZYNQ之FPGA开发指南_V2.0
