基于Basys3开发板使用Vivado进行VGA编写【手把手学步车级教程】

基于Basys3开发板使用Vivado进行VGA编写【手把手学步车级教程】

写在前面：

        小编为完成课程作业，查阅无数csdn文章，向同学请教无数次，踩过无数坑之后终于获得成功。立志撰写一篇造福后人的blog，希望帮助到和我有相同困境的有缘人~（和会忘记过程的自己）本文用的是640×480像素/25MHz的显示，但其他分辨率也可以参考~

• Step 1：创建合适的coe文件

        获得一个320×320的bmp文件

将普通的jpg图片转换为320×320的bmp文件。可以用图片查看器比如WPS图片将jpg文件转化为bmp格式，再将bmp文件转化为320×320像素。

win10系统可以用画图软件改变图片像素，win11可以选择“照片”软件改变像素（如图倒数第二个）

如图点中间上面三个点，选择调整图像大小

输入宽度320。因为我选的照片本来就是正方形的，如果不是正方形也不用强求，后面参数设置相应改变就可以了。点击保存储存照片。

                

        将bmp文件转换为coe文件

下载一个BMP2Mif文件：

链接： 
提取码：jqj9 
上传刚刚生成的bmp文件，注意勾选以下选项，点击“一键转换”

这里的RGB565代表的是RGB三种颜色数据的位宽。但Basys3板子的引脚为RGB444，所以在后面的代码中会看到从coe文件中取出数据为16位，而存入输出数据中时为4+4+4位。

• Step 2：编写rom文件

        按照以下图片顺序进行操作

然后点“OK”完成rom的创建

• Step 3：编写clock文件

然后点“OK”完成clock文件的创建

• Step 4：显示代码编写

先把完整的代码放在这里，再分段解释。

完整代码：

module VGA_design(input clk,input rst,output h_sync,   // 行同步信号output v_sync,   // 列同步信号output reg [3:0] rgb_r,output reg [3:0] rgb_b,output reg [3:0] rgb_g);parameter   h_a = 11'd96,h_b = 11'd48,h_c = 11'd640,h_d = 11'd16,h_all = 11'd800,v_a = 11'd2,v_b = 11'd33,v_c = 11'd480,v_d = 11'd10,v_all = 11'd525;reg [10:0] h_cnt, v_cnt;//行计数always @(posedge clk or posedge rst) beginif(rst) h_cnt <= 11'b0;else if(h_cnt == h_all - 11'b1) h_cnt <= 11'b0;else h_cnt <= h_cnt + 1'b1; end//列计数always @(posedge clk or posedge rst) beginif(rst) v_cnt <= 11'b0;else if(v_cnt == v_all - 1'b1) v_cnt <= 11'b0;else if(h_cnt == h_all - 1'b1) v_cnt <= v_cnt + 1'b1; end//行同步assign h_sync = (h_cnt >= h_a); //列同步assign v_sync = (v_cnt >= v_a);//设定图片的位置reg [16:0] address;parameter   width = 11'd320,height = 11'd320;wire en_picture;wire begin_picture;assign en_picture = (h_cnt >= h_a + h_b + (h_c - width) / 2 + 11'd1) && (h_cnt <= h_a + h_b + (h_c + width) / 2) && (v_cnt >= v_a + v_b + (v_c - height) / 2 + 11'd1) && (v_cnt <= v_a + v_b + (v_c + height) / 2);assign begin_picture = (h_cnt == h_a + h_b + (h_c - width) / 2 + 11'd1) && (v_cnt ==v_a + v_b + (v_c - height) / 2 + 11'd1);always @(posedge clk or posedge rst) beginif(rst) address <= 17'b0;else if(begin_picture) address <= 17'b0;else if(en_picture) address <= address + 1'b1;endwire [15:0] rgb;//例化rom文件rom rom1(.clka(clk),.addra(address),.douta(rgb));//将像素点进行赋值always @(posedge clk or posedge rst) beginif(rst) {rgb_r, rgb_g, rgb_b} <= 12'b0;else if (en_picture) beginrgb_r <= rgb[15:12];rgb_g <= rgb[10:7];rgb_b <= rgb[4:1];endelse {rgb_r, rgb_g, rgb_b} <= 12'b0;end
endmodule

        1 进行一些参数的设定

由于我们选择的是640×480的分辨率，所以参数设定如下图。

parameter   h_a = 11'd96,h_b = 11'd48,h_c = 11'd640,h_d = 11'd16,h_all = 11'd800,v_a = 11'd2,v_b = 11'd33,v_c = 11'd480,v_d = 11'd10,v_all = 11'd525;

        2 进行行计数和列计数

这一行为是为了知道读取到屏幕上的哪个像素点了

行计数时，每个上升沿前进一个单位；列计数时，每完成一行计数则列加一

reg [10:0] h_cnt, v_cnt;//行计数always @(posedge clk or posedge rst) beginif(rst) h_cnt <= 11'b0;else if(h_cnt == h_all - 11'b1) h_cnt <= 11'b0;else h_cnt <= h_cnt + 1'b1; end//列计数always @(posedge clk or posedge rst) beginif(rst) v_cnt <= 11'b0;else if(v_cnt == v_all - 1'b1) v_cnt <= 11'b0;else if(h_cnt == h_all - 1'b1) v_cnt <= v_cnt + 1'b1; end

        3 进行行同步和列同步的设定

只有在行同步、列同步范围内，同步信号才为1。这是为了告诉板子准备开始发光了

行同步、列同步范围：h_cnt >= h_a，v_cnt >= v_a

    //行同步assign h_sync = (h_cnt >= h_a); //列同步assign v_sync = (v_cnt >= v_a);

        4 设定图片的位置

将图片设置在屏幕的正中间。注意width和height要设为图片的宽度长度值（也就是前面设的320×320）。用一些巧妙的计算方法设置 可以读取图片 的位置，只有在这些位置时才使读取图片的address值+1。注意一行是320个（别读多读少了）

//设定图片的位置reg [16:0] address;parameter   width = 11'd320,height = 11'd320;wire en_picture;wire begin_picture;assign en_picture = (h_cnt >= h_a + h_b + (h_c - width) / 2 + 11'd1) && (h_cnt <= h_a + h_b + (h_c + width) / 2) && (v_cnt >= v_a + v_b + (v_c - height) / 2 + 11'd1) && (v_cnt <= v_a + v_b + (v_c + height) / 2);assign begin_picture = (h_cnt == h_a + h_b + (h_c - width) / 2 + 11'd1) && (v_cnt ==v_a + v_b + (v_c - height) / 2 + 11'd1);always @(posedge clk or posedge rst) beginif(rst) address <= 17'b0;else if(begin_picture) address <= 17'b0;else if(en_picture) address <= address + 1'b1;end

注意两个else if之间的前后关系！begin的时候置零，除此之外其他时候+1

        5 例化rom文件，将像素点赋值

这里clk和address是input，rgb是output。相当于输入一个地址，返回这张图片里这个地址的像素值。

对像素点进行赋值则是前文提到的16和12的关系，不要付错值就好啦

wire [15:0] rgb;//例化rom文件rom rom1(.clka(clk),.addra(address),.douta(rgb));//将像素点进行赋值always @(posedge clk or posedge rst) beginif(rst) {rgb_r, rgb_g, rgb_b} <= 12'b0;else if (en_picture) beginrgb_r <= rgb[15:12];rgb_g <= rgb[10:7];rgb_b <= rgb[4:1];endelse {rgb_r, rgb_g, rgb_b} <= 12'b0;end

• Step 5：top module的编写

将clock文件和vga代码放在一起（其实也可以把clock文件放在design里面）

module VGA_top(input CLK,input rst,output [3:0] rgb_g,output [3:0] rgb_r,output [3:0] rgb_b,output h_sync,output v_sync);wire clk;wire [15:0] rgb;vga_clk clk60(.clk_in1(CLK),.clk_out1(clk));VGA_design design1(.clk(clk),.rst(rst),.rgb_r(rgb_r),.rgb_g(rgb_g),.rgb_b(rgb_b),.h_sync(h_sync),.v_sync(v_sync));endmodule

• Step 6：约束文件

（主打一个贴心）

set_property IOSTANDARD LVCMOS33 [get_ports {rgb_b[3]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_b[2]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_b[1]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_b[0]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_g[3]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_g[2]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_g[1]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_g[0]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_r[3]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_r[2]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_r[1]}]
set_property IOSTANDARD LVCMOS33 [get_ports {rgb_r[0]}]
set_property PACKAGE_PIN W5 [get_ports CLK]
set_property PACKAGE_PIN P19 [get_ports h_sync]
set_property PACKAGE_PIN V17 [get_ports rst]
set_property PACKAGE_PIN R19 [get_ports v_sync]
set_property PACKAGE_PIN J18 [get_ports {rgb_b[3]}]
set_property PACKAGE_PIN K18 [get_ports {rgb_b[2]}]
set_property PACKAGE_PIN L18 [get_ports {rgb_b[1]}]
set_property PACKAGE_PIN N18 [get_ports {rgb_b[0]}]
set_property PACKAGE_PIN D17 [get_ports {rgb_g[3]}]
set_property PACKAGE_PIN G17 [get_ports {rgb_g[2]}]
set_property PACKAGE_PIN H17 [get_ports {rgb_g[1]}]
set_property PACKAGE_PIN J17 [get_ports {rgb_g[0]}]
set_property PACKAGE_PIN N19 [get_ports {rgb_r[3]}]
set_property PACKAGE_PIN J19 [get_ports {rgb_r[2]}]
set_property PACKAGE_PIN H19 [get_ports {rgb_r[1]}]
set_property PACKAGE_PIN G19 [get_ports {rgb_r[0]}]
set_property IOSTANDARD LVCMOS33 [get_ports CLK]
set_property IOSTANDARD LVCMOS33 [get_ports h_sync]
set_property IOSTANDARD LVCMOS33 [get_ports rst]
set_property IOSTANDARD LVCMOS33 [get_ports v_sync]

然后就可以下板啦！记得把屏幕调到vga模式！

彩蛋

如果有倒霉蛋没有把地址或者颜色设好就会收获这样的风景

        小编对于vga的原理并没有理解得很透彻，欢迎大家的批评指正！感谢所有给予我帮助和指导的老师同学们！！/哐哐哐