2016 Urop Summer Project August 31, 2016 FPGA to VGA: controlling graphic displays with reconfigurable hardware. Emanuele Giuseppe Esposito Introduction This document describes the implementation and results of this 2016 Urop Summer Project, that was about programming an FPGA using the VHDL language. The aim of this project was to create a Pong Game, and was successfully reached. What are VHDL and FPGA : VHDL is an acronym: the V is another acronym, VHSIC or Very High-Speed In- tegrated Circuit, and the HDL stands for Hardware Description Language. VHDL is a true computer language with the accompanying set of syntax and usage rules. However, as opposed to higher- level computer languages, VHDL is primarily used to describe hardware. An FPGA (field-programmable gate array) is an integrated circuit designed to be configured by a customer or a designer after manufacturing – hence ”field- programmable”. An Altera DE2 development board, embedding an FPGA 1
Transcript
2016 Urop Summer Project August 31, 2016
FPGA to VGA: controlling graphic displayswith reconfigurable hardware.
Emanuele Giuseppe Esposito
Introduction
This document describes the implementation and results of this 2016 Urop SummerProject, that was about programming an FPGA using the VHDL language.The aim of this project was to create a Pong Game, and was successfully reached.
What are VHDL and FPGA :
VHDL is an acronym: the V is another acronym, VHSIC or Very High-Speed In-tegrated Circuit, and the HDL stands for Hardware Description Language. VHDLis a true computer language with the accompanying set of syntax and usage rules.However, as opposed to higher- level computer languages, VHDL is primarily usedto describe hardware.
An FPGA (field-programmable gate array) is an integrated circuit designed tobe configured by a customer or a designer after manufacturing – hence ”field-programmable”.
An Altera DE2 development board, embedding an FPGA
1
2016 Urop Summer Project August 31, 2016
Documents, Hardware and Software
In this project, several documents have been used as documentation and hardwaresignals specifications:
- Quartus II 12.0 Introduction VHDL.pdf (how to use the Quartus Editor)
- vhdl type conversions.png (signals’ type conversion table)
The project was implemented using an Altera Cyclone II Development and Edu-cational Board DE2 model EP2C35F672C6 and a Monitor Screen with VGA portthat supports 640x480 pixels screen resolution.
For Software, Quartus II 12.1 Web Edition has been used to write and synthesizeVHDL code, while Modelsim simulated the behavior of signals over a specifiedamount of time. A java tool has also been created to convert an image to an Altera.mif file (in gray-scale), available on github and attached to this document.https://github.com/esposem/MifGeneratorSee MifGenerator in VGA component section for more info about this tool.
Hardware Implementation of Pong Game
The developed Pong game uses the following DE2 peripherals: one LCD screen, 4seven-digit segments, 2 switches, 4 push buttons, 5 leds and 1 VGA port. The onlyexternal hardware is the monitor, used to display the game. In more details:
- LCD screen displays a welcome writing, a creator name and the winner
- 2 seven-segments leds per player represent the score (max 10)
- 1 switch is used for reset, 1 to pause the game
- 2 button per player move the bar up and down
- 4 green led show the button to push to continue the game after a goal
- 1 red led shows the reset position and blink when player has to restart thegame
- 1 VGA port connects to the monitor.
2
2016 Urop Summer Project August 31, 2016
Description of the Pong Game
Display of the Pong Game
In this 1 vs 1 arcade sport game, each player can move its bar to hit a ball directing itto the opponent. If the opponent doesn’t hit the ball in time, it will go beyond its barand the player will score. If a player scores 10 goals, wins the game.
To turn on the game, make sure the VGA cable of the monitor is attached to thescreen and the SW0 (last switch) is lifted up .Once on, a “Welcome!” will appear in the board’s LCD screen followed by a “Createdby ...”, all 4 seven-digit segment will show the score 00 00 , the light above the SW0will be red and the initial state of the will game be showed on the screen.To start the game, switch the SW1 (second-last switch) up.
Switches, Push buttons and Led used
The ball on the screen will start moving.Each player has to use the push button to move its bar ( KEY3 moves down the Player1 bar, KEY2 moves it up, KEY1 moves down the Player 2 bar, KEY0 moves the Player2 bar up).
3
2016 Urop Summer Project August 31, 2016
Every 5 times the ball touches any bar, the speed increases. If somebody scores,the ball and bars return to default position, speed returns normal and the score isincreased. At this point, game stops. To play a new ball, push KEY0 or KEY3, de-pending on who scored. If Player1 scored, KEY0 (Player2’s button) has to be pressed,otherwise KEY3. In any case, 2 green light will show the key to press to start the game.
To pause the game, lower the SW1 switch. To resume, lift it up. The game endswhen one player scores 10 goals, and to play a new game the restart needs to be low-ered and lifted again (in that occasion the red light on it will blink).
High-Level view of the Platform
All files are in the folder Project/VGA/Files are organized in this way :
Source VHDL files
- VGA.qpf Quartus project file.
- VGA.vhd, Display.vhd, LCD.vhd, Random.vhd, ROM 2.vhd, Hsync.vhd, Vsync.vhdand PixelClock.vhd are in the VGA folder.
- ROM 2.vhd is in VGA/ROM folder.
- TB VGA.vhd and TB LCD.vhd are in VGA/simulation/modelsim folder.
Synthesis output
- DE2 Default.sof, VGA.sof and VGA.pof are in VGA/output files (DE2 Default isthe default .sof file for the FPGA).
Timing Constraints
- VGA.out (for timing) is in VGA/Timing folder.
4
2016 Urop Summer Project August 31, 2016
Components
VGA
PROTOCOLThe VGA component requires 7 signals: Hsync, Vsync, Blank, P clk and 3 datasignals.
The Hsync signal is made of 4 states: Sync, Back Porch, Horizontal Display Areaand Front Porch. Each state lasts for a certain amount of pixel clocks (25 mHz).
The signal itself is 0 in the Sync state, 1 in all the others. Front and Back Porch arethere just because of portability, since in old cathode tube monitors these 2 timeintervals were required. In newer monitors, there are no more such delays. Everytime Hsync has reached Sync state, it means a line of the screen has been displayed.
The Vsync signal is made of 4 states too: Sync, Back Porch, Vertical Display Areaand Front Porch. Like Hsync, each state indicates an amount of lines displayed, thesignal is 0 in Sync state and 1 in the others and the use of Back and Front porch isthe same. Every time Vsync has reached Sync state, it means it means the wholescreen has been displayed (a frame).
Vertical Region ScalinesFront Porch 10Sync Width 2Back Porch 33Vertical Display Area 480Total frame height 525
Number of lines that has to be displayed per state.
Horizontal Region PixelsFront Porch 16Sync Width 96Back Porch 48Horizontal Display Area 640Total frame height 800
Number of pixels that has to be displayed per state.
Pixels are displayed on the screen only when both Vsync and Hsync are in theirDisplay Area State, and only in that moment their counters (used to monitor thelength of the state) correspond to the X-Y coordinates.Based on these counters, the FPGA also knows when to send synchronization pulsesto the display and when to actually display pixels.
5
2016 Urop Summer Project August 31, 2016
In this project, a 25 mHz clock has been used, since screen resolution was 640x480at 60 mHz (this means every second, Vsync must have been in Sync state exactly60 times). We can compute the pixel clock frequency as follows:
Vsync and Hsync signalsThe Blank signal only displays when it’s the right time to read the signals carryingthe colors. In facts, this signal is one only when Vsync is in Vertical Display Areaand Hsync is in Horizontal Display Area.
The P clk is an additional clock that change its state when there is a rising edgeof the original clock. Because of this, pixel clock will have half of the original clockspeed, running at 25 mHz. Each pixel clock rising edge represents a transition froma pixel to another.
The Red, green and blue signals carry the binary RGB value of red, green andblue. They are 3 because to display any possible color, all screens use the mix ofred, green and blue. Each color is added to the mix in a proportion from 0 to 255.
IMPLEMENTATIONIn our implementation in addition to all required signals, 2 finite state machineshave been created, vsync fsm and hsync fsm. They both have the same states, butwith different time periods and meanings, as one refers to Vsync and another toHsync. A counter for each state machine has been used to change from a state toanother .
As already said, to display a pixel Hsync and Vsync are used as X and Y mon-itor coordinates only when they are in their Display Area State.
The Hsync counter increases at every pixel clock, and depending on the currentstate, the state changes once it reaches a certain amount.
6
2016 Urop Summer Project August 31, 2016
When in Display area, this counter is also used as X coordinate.The same thing is made with Vsync, with the difference that its counter increasesevery time Hsync enters the Sync state.
Therefore, after checking that Hsync and Vsync are in Display Area (blank is 1)the 2 counters can be used as screen coordinates. For example, in this code:
Code and results to draw a black screen with one white pixel in the middleGray lines are just to show coordinates
The screen will be totally black except for the white pixel at position 320,240.To show drawings on the screen (what are called sprites), and put them in the rightposition, additional checks are needed.
Every sprite (or drawing) has an X and Y coordinate position that represent itscenter. To display an image bigger than 1 pixel knowing only the center positionand its dimension, we need to calculate the area where the sprite will be placed. Inthis example, if a 100x100 white rectangle needs to be placed in position 320,240,the check is not for a single position, but for an area (a range of points):
7
2016 Urop Summer Project August 31, 2016
Code and results to draw a black screen with a square in the middleGray lines are just to show coordinates
SPRITES2 kind of sprites have been used:
- Hand-made sprites: Sprites made by hand writing 0 and 1. For example:
00000011100111000000
That’s a rectangle (the 1s can be seen as “color” and the 0s as “ no color”).
- Software-generated sprites: Sprites generated from the java tool MifGen-erator. Providing an appropriate image and memory dimension, it will cre-ate a .mif file representing the gray-scale image readable from the QuartusMegaWizard Plugin and/or available to the ROM 2 component (see ROM 2component). For more info about the MifGenerator, see the next section.
DisplayUsing an image as background leads to further complications in displaying otherimages, especially if they are not square but have other shapes, such as circles.It is important to remember that any image, also a circle, will be displayed as asquare containing a circle.
8
2016 Urop Summer Project August 31, 2016
Ball sprite on the background without proper adjustments
First of all, as usual, there is the need to check that the Hsync and Vsync countersare in the ball sprite area. The next check is about the colors: by default, trans-parent background (like the ball’s image) and mif-generated images’ backgroundsfrom MifGenerator are displayed as black (Red = 0, Green = 0, Blue = 0).
This means that when the X,Y coordinates are in the sprite area and the pixelcolor of the sprite in that position is black we can ignore it and display the back-ground. The only issue is that all pixels that have as RGB value 0,0,0 will betransparent to the background. A fix could be finding those pixels and coloringthem in with a different value (also 001 will work).
Code and results to draw a background with a ball spritewith proper adjustments
9
2016 Urop Summer Project August 31, 2016
MovementsTo move the sprites, the FPGA checks all positions every time Vsync enters theSync state. If during the check a push button is pressed, the bar is moved. If thepause switch SW1 is on (and other signals and states are in the right position), theball keeps moving.
CollisionsAbout collisions, there aren’t particular checks to do, since all the sprites are subjectto margins and do not interact with the other images (for example, the ball doesnot check that there is the upper/lower border sprite, it just change direction whenits position reach a certain Y coordinate).The only special case is when the ball hits the player bar. In that case there is notonly a check between the ball and a X fixed position but also an additional control:the ball’s Y position is in the range of height of the bar’s position.
If the ball is in the Y-range position when it reaches the X position,it will bounce back
RANDOMAt the beginning of each match (every time the reset is lifted up), the ball directionis generated from a random component. This random is a small version of an LFSR(linear feedback shift register). It’s made of an 8 bit signal vector that at each risingedge of clock shift all bits to the left and adds 2 new bit made by the combinationof the previous bits.
It’s pseudo-random, but the way it is made make really hard to guess the out-put. In facts, the random component generates a new bit on each rising edge ofthe clock. The generator became a stable signal only when SW1 (the pause/resumeswitch) is lifted up. Since this is a user-made action, the time given to the generatoris different every time, so the pick is different.
10
2016 Urop Summer Project August 31, 2016
For example, if it is known that after 200 ns the output will be “up left”, anuser would have to coordinate the hand to lift the switch (that has its delay) tostop the generator exactly after 200 ns.
The implemented random LFSRThe value in the 4th bit is not shifted.
ROM 2 PORTSROM 2 ports is an internal ROM component instantiated using the Quartus Megawiz-ard Plugin. Its main scope is to contain the images (sprites and a background) thatwill be displayed on the screen.
Having only one-port ROM doesn’t allow to have the sprites and background dis-played correctly, so a 2-port one has been chosen. In fact, the ball is not a roundsprite, it’s a square with a ball on it and if a one-port ROM was used, the part ofthe sprite that is outside the ball figure couldn’t be overwritten.Therefore, of the 2 ports one is dedicated to the background, and the other to thevarious sprites (that do not overlap each other).
All configuration is automatically made by the plugin, the only manual configu-ration is the port map in Display.vhd. Between all generated code, only the miffile can be changed (in case the background wants to be changed). The mif file, asexplained in VGA component, can be generated using a java tool called MifGener-ator.
11
2016 Urop Summer Project August 31, 2016
Example of mif file
MIFGENERATORThis tool firstly converts a png, jpeg,jpg,bmp etc... (all major image files) in alist of RGB values and temporary saves them. Then it creates a mif file knowingthe ROM memory size and word width, providing a list with a certain number ofaddresses. Each RGB value is then assigned to each of the addresses, mapping theimage in the file. In other words, it takes every pixel color of the image an writesit in the mif file. For example, the 7th pixel color will be in the 7th mif address.Therefore, when the ROM is loaded, using the right address the image can be re-constructed on the screen. More info of this tool in ./MifGenerator/Readme or ongithub.
Example of what MifGenerator Does
12
2016 Urop Summer Project August 31, 2016
LCD
PROTOCOLLCD screen component can display up to 2 lines of 16 characters/ numbers/symbolsat time. It requires various signals depending on what function is needed to perform.
The control signals required to interface the LCD are:
- a read/write signal, that enables writing or reading on LCD
- a busy flag signal that provides a delay after some kind of operations suchas writing a character
- an enable signal that starts the internal operation requiring the written datain the LCD
- an rs signal that is 1 only when data is being written
- a data signal that contains the data to write in the LCD memory
IMPLEMENTATIONIn our case, some signals are fixed (such as read/write always set to 0 and blacklight and LCD power always to 1).However, there are some signals that change thorough the various operations, likethe enable, the rs and the data.To distinguish the various LCD operations a finite state machine (fsm lcd) has beenused with these states:
- NIL : waits some fixed amount of time to get the LDC ready
- FUNCT : decides how many lines will be displayed
- DISPLAY : sets the display, cursor and blink on/off.
- ENTRY : prepares the LCD to receive data to display.
- WR1 : writes the first line
- WR2 : writes the second line
- EN1 : using lcd en and lcd rw, starts the internal operation using the writtendata in the LCD memory
- EN0 : ends the transfer
- DELAY : a delay between each state (substitutes the busy flag)
- RETURN HOME : ends the cycle and move the cursor at the beginning
- SECOND LINE : prepares the cursor to start the second line
The Finite State Machine process handles all the states that have to follow in orderto proper display three times two lines’ writing.The writings are:
First of all, after each of the main states(FUNCT, DISPLAY, ENTRY, WR1, SECOND LINE, WR2, RETURN HOME)there is the sequence of 3 states (EN1, EN0, DELAY) that is needed by the machineto receive and process the data.
The real transition between two main states FUNCT and DISPLAYThe dotted line is to show what is intended to go in the next state,
the black one is the real process
In more details, there is a NIL state that gives some time to the LCD, then thenext states are FUNCT, DISPLAY and ENTRY.These three states prepare the screen to be written.
Now the writing starts: WR1, SECOND LINE, WR2 (long delay), RETURN HOME.Written ”welcome”.
Second writing: WR1, SECOND LINE, WR2, RETURN HOME.Written ”created...”.
When a player scores 10 goals:Third writing: WR1, SECOND LINE, WR2, RETURN HOME (endless loop tostay in this state).Written ”player...”.
The (long delay) is there to let the Welcome! appears for a while and then disappear.
14
2016 Urop Summer Project August 31, 2016
The transition between the main statesWR1, SECOND LINE, WR2 and RETURN loop 3 times(showed in different colors). State 15 is an endless loop
Seven-Segment Digit
2 seven-digit segments
A Seven-Segment Digit is a 7 light display component arranged in form of an 8 thatcan represent all numbers and some letters. Every number is displayed by turningon/off a light of the segment.
For example, to write 2 in the segment we need to pass the signal to is as “0100100”.Each of the 7 lights refer to one of that 7 bit, and if it’s 0 it will be turned on, oth-erwise off.
2 displayed as seven-digit segments
All constants to display the numbers as seven-digit segments are written in vh sync package.vhdat line 166.
Synthesis Result
Looking at this report, it can be seen that in our organization a low number of combina-tional logic elements have been used(4 %,4 % and < 1 %). On the other side, however,there is an high usage of memory(54 %).
15
2016 Urop Summer Project August 31, 2016
This is because the background image resolution cold not be just changed to 640x480(screen size) and translated in mif file, but an additional resize was needed. In fact, tolet an image fit in this FPGA memory, it has to be in converted in gray scale (insteadof using RGB, that would have produced the triple of addresses) and in 160x120 size (asixteenth of 640x480)
![Video Graphics Array interfacing through Artix-7 FPGA · VGA port to display various colours on the LCD Monitor. The board will be a Digilent Nexys4 DDR Artix-7 [6]FPGA Board. ...](https://static.documents.pub/doc/80x56/5fbf8a2c5b7e7a14b731c55d/video-graphics-array-interfacing-through-artix-7-fpga-vga-port-to-display-various.jpg)
