vga lab 800x600

SoCLab: Lab 3: Building a VGA display controller

Page 1 Luc Claesen NCTU [email protected] version: 20/07/20064

SoCLab

Lab 3 : Building a VGA display controller

Purpose

In the previous labs, we familiarized ourselves with the Xilinx ISE environment. The Project Navigator has been used as the overall interface to Xilinx Design tools. To familiarize the usage, simple combinatorial and sequential circuits have been designed.

In this lab, already more complex systems are addressed. A VGA display controller will be designed and experimented.

Requirements To complete this Lab, the following software is required:

Windows PC

Xilinx ISE / ISE WebPack Integrated Software Environment

An Experimentation board such as:

Digilent Pegasus-2

Digilent Inc D2SB

Digilent Inc D2FT

Xilinx Spartan-3 Starter Kit or Digilent Spartan-3 board

Digilent JTAG3 Programming Cable

Power Supply (only use the ones as provided by Digilent!)

VGA display



Optional: a smart VGA display, keyboard and mouse sharing cable

Overview of this Lab

Everyone is currently familiar with the display of a personal computer. This display is usually called a VGA display. During the evolution of the PC all kinds of display standards have been introduced: MGA, EGA, VGA, XGA etc For the purpose of this lab, we will use the name VGA display.

The electrical signals to be generated for a modern display uses signals of 50 MHz or more. For such high-speed systems, often dedicated hardware is being used. Although, using current high-speed processors alone, with dedicated and hand coded software could reach such speeds, the real-time constraints on the generation of such signals are simply too high, in order to be able to make a practical software solution. This is without taking any computational overhead of an operating system or other tasks to be done by the processor.

FPGAs as programmable systems are a very interesting platform to experiment with systems requiring dedicated hardware.

First the basics of the VGA signals will be explained. Hereafter a basic VGA controller will be designed. Following this, further applications can be realized, based on the basic VGA controller.

The Digilent boards do have an 3-bit 8-color VGA interface. The NCTU-IO1 peripheral board has a 24-bit (8-bits per primary color: red, green and blue) 16,777,216 colors. For this experiment we will use the VGA ports on the Digilent boards.



Computer Displays

For the preparation of this laboratory, you should consult the section on the introduction of VGA signals in the Digilent reference manuals.

Computer displays have traditionally been realized by Cathode Ray Tubes (CRTs). CRTs (see fig. 3.1.) have been used for years in television sets. An electron beam is emitted from the electron guns. In color displays there are three independent guns; one for each of the three primary colors: red, green and blue. The electron beam is deflected by the variable magnetic fields of the deflection coils. These coils generate a sawtooth shaped waveform. The horizontal coil generates the writing of lines from the left to the right. The vertical coil generates the deflection of line per line from the top of the screen to the bottom, to form frames.

Fig. 3.1. Principle of operation of a Cathode Ray Tube.

Fig. 3.2. Illustrates the writing of an image on the screen. When a line has been written from the left to the right, the beam will instantly return back to the left to prepare to write a new line. The same is true for the vertical deflection. After having written a whole frame and arriving at the bottom of the screen, the beam will be redirected again to write the next lines at the top of the screen.

In a traditional CRT, the horizontal and vertical deflection coils both generate a saw-tooth signal. The horizontal, writing the lines, is the fastest, the vertical writing the frames, is the



slowest. In CRTs the generated saw-tooth signals are reset by synchronization signals: the horizontal synchronization hsync and the vertical synchronization vsync.

The signals generated for a VGA screen are the basic signals needed to drive a CRT display. They comprise the digital hsync and vsync signals, as well as the analog red, green and blue color signals to drive the electron guns while the electron beam is scanning the screen. The analog signals indicate the proportion of each of the primary colors at the specific point on the screen. In the Digilent boards only two analog levels are used for each color.

Due to legacy and compatibility reasons, current LCD displays use the same VGA signals as a traditional CRT screen, although a direct digital interface could be envisioned here as well. (The DVI (Digital Visual Interface) is such a new industry standard direct digital video interface.

movement of a series of pixels to form a horizontal line

movementof a numberof linesto forma verticalfram

visible part of a linefrontporch

backporch

frontporch

backporch

visiblepartof a frame

Fig. 3. 2. Movement of the electron beam on a CRT screen.



The Basics of VGA signals

The Digilent reference manuals give a concise overview and introduction of the VGA video signals. In what follows, we will use the same naming conventions as adopted by Digilent Inc.

For the VGA video signals, two synchronization signals are required: the horizontal synchronization signal: hsync and the vertical synchronization signal: vsync.

Both of these signals have similar waveforms as depicted in figure 3.3. Of course the timings are different. The signals are normally active high, but at regular times emit a low synchronization pulse.

The global period of the synchronization signal is Ts. As a time reference for the synchronization signals in this text, we will use the instant at which the video signal becomes visible on the screen. These are the instances with the red colored signals in fig. 3.2.. Tdisp is the time interval at which the video signal is visible on the screen. The synchronization pulses have a duration of Tpw. In a CRT the pulse causes the saw-tooth generator for the horizontal or vertical deflection coils to be reset, causing the beam to return to the left (for the horizontal sync) or to the top (for the vertical sync) signals.

The times just before and immediately following the synchronization pulses are normally not shown on the display. They are called the back porch and the front porch. The time durations of the back porch and front porch are respectively called: Tbp and Tfp.

Ts

TTTT pw fpdisp bp

Video Synchronization SignalsTime reference

"backporch"

"frontporch"

Fig 3.3. Basic format for synchronization signals.

The relation of the beam on the screen and the synchronization signals is well illustrated by Fig. 3.4. This figure also illustrates the coordinates of a number of screen pixels for a 640 x 480 VGA display.

In the Digilent reference manuals, the timing information for a 640 x 480 video signal when using a 25 MHz clock is reported.



For this lab, we will use the on-board 50 MHz clock. In the sections that follow an overview of the timing characteristics is given for the 640 x 480 as well as the 800 x 600 video signals. These signals can be generated easily by a 50 MHz clock. For higher screen resolutions, higher clock frequencies are needed. (The DLL blocks inside of the Xilinx FPGAs can be used to generate higher frequency clocks internally on the chip. This will however not be done in this lab).

Fig. 3.4. relationship of display of a horizontal line and the horizontal synchronization signal.



Synchronization signals for a 800 x 600 video signal.

The Digilent boards use a 50 MHz clock. This 50MHz is exactly the same as the basic pixel frequency in a 800 x 600 display. The timing characteristics for the 800 x 600 hsync signal are given in table 3.1. below.

Symbol

Name

Time duration

Number of 50Mhz Clock

periods

50MHz Clock periods from

Time reference

Tdisp Display Time 16s 800 799 Tfp Front Porch 320ns 16 815

Tpw Pulse Width 2.4s 120 935 Tbp Back Porch 2.08s 104 1039 Ts Sync pulse time 20.8s 1040 1039

Table 3.1. Horizontal synchronization signal characteristics for 800 x 600 video generation, using a 50MHz clock.

The timing characteristics for the 800 x 600 vsync signal are given in table 3.2. The 800 x 600 video signal uses a frame time Ts of 13.853ms. This corresponds to a frame rate of 72Hz.

Symbol

Name

Time duration

Number of lines lines from Time reference

Tdisp Display Time 12.48ms 600 599

Tfp Front Porch 740s 37 636 Tpw Pulse Width 120s 6 642 Tbp Back Porch 460s 23 665 Ts Sync pulse time 13.853ms 666 665

Table 3.2. Vertical synchronization signal characteristics for 800 x 600 video generation, using a 50MHz clock.



Interface to 8-color VGA screen

The table below gives the overview of the connections of the VGA connector to the FPGA.

SoCLab name Description Pegasus2 D2SB-DIO4 (in C1-C2)

D2FT-DIO5 (in C1-C2)

Spartan-3

red vga red P33 P201 A3 R12

green vga green P31 P202 C2 T12

blue vga blue P30 P203 B3 R11

hsync hsync P29 P199 A4 R9

vsync vsync P27 P200 C4 T10

The basic connection on the Digilent boards allow for 1 bit per primary color (red, green and blue). This leads to 23 =8 combinations. In the assumption that all resistors are installed on the NCTUIO1 boards, 8 bits can be used per primary color. This corresponds to 23 *8 = 16,777,216 different colors.

The Interface to the VGA screen is done via a 15-SubD connector as shown in figure 3.4.a.

Fig. 3.4.a. 15 SubD connector used to connect a VGA monitor.



A word of caution!

Use of an intelligent computer switch cable

To do these experiments we will need to connect a VGA screen to the VGA 9-SubD connector on our experimentation boards. During the debugging phase of the VGA controller it is often desired to be able to connect a VGA screen to the FPGA board. As the VGA display for the computer is normally used for this, this would mean a frequent plugging and unplugging of the VGA cable in and out of the computer.

We will use a computer KVM1-switch cable supplied in the Lab. This is an intelligent cable allowing to hook up two computers to a single display, keyboard and mouse. We will connect our computer and our Digilent boards in this way. Assume that the computer is connected to one port and the FPGA board to the other port. By typing one can switch from the computer to the FPGA board and backwards.

Be careful when experimenting with VGA signals on CRTs!

The VGA signals have originally been designed to be used with Cathode Ray Tubes (CRTs) such as used in traditional television sets. The signals are directly used to deflect the electron beam on the screen. When the synchronization signals that are generated are too high for the underlying electronics, they can damage (older) CRTs, as too high voltages are generated in the deflection coils with inappropriate high frequencies.

Such a warning holds when you are experimenting with FPGAs connected to old CRTs. It also holds when you are developing new graphics software drivers for specific programmable graphics display cards (e.g. for Linux), or when you are using wrong configurations with too high frequencies in MS-Windows.

Modern LCD computer displays, still use the VGA signals that have originally been designed for CRTs. As there are no deflection coils in LCD screens, the same problems of possible damage do not occur here.

1 KVM (Keyboard, Video, Mouse)



Design of a VGA controller.

Experiment 1: Design a vga_controller module

Design a 800 x 600 vga_controller using the on-board 50MHz clock to generate the horizontal- and vertical control signals: hsync and vsync respectively. In a 72Hz frame rate 800 x 600 display the pixel clock frequency is 50MHz. This is the same as the frequency of the clock generator on the main FPGA board. In this controller also generate two counters indicating the pixel_row and pixel_col. These counter values can afterwards be used for generating specific on-screen information such as text and graphics. This coincidence is because of the careful choice of the reference time with respect to the horizontal and vertical synchronization signals. The reference times are chosen such that the counters start at 0 with the 0-th pixel in a row or a column.

Fig. 3.4b. Symbol for the vga_controller module.

Generate a signal called visible that indicates when the video signal is generating a signal that is visible on the screen (this means that is 1 when writing the visible part and that is 0 otherwise, during the blanking periods.

Generate a Verilog module called vga_controller with the following template:

module vga_controller(clock, reset, pixel_col, pixel_row, visible,



hsync, vsync); input clock; // assumed to operate at 'clock_frequency' input reset; // reset signal output [10:0] pixel_col; output [9:0] pixel_row; output visible; // signal asserted when signal is visible output hsync, vsync; endmodule

From the timing signals of table 3.3. and table 3.4. the timing diagram for the hsync signal is given in fig. 3.5.

Ts

TTTT pw fpdisp bp

HorizontalClock Period Count

0815

935

1039

800 16 120 104

Reference Time799

Fig. 3.5. Timing diagram for the hsync signal for a 800 x 600 display.

In the vga_controller module, the hsync signal can be generated based on the pixel_col counter that increments with every clock period. When pixel_col reaches the end of the horizontal synchronization signal clock cycle (at count 1039) reset the counter back to 0 for the next clock cycle. In this way, we can generate the 1040 clock cycles for one hsync signal period. As can be seen from fig. 3.5. the hsync signal can be generated based on the pixel_col counter values by some combinatorial logic.

At every hsync pulse also generate a single clock cycle pulse called line_start_pulse that can be used to increment the pixel_row counter that is needed for the generation of the vertical synchronization signal. Take care that for the whole hsync period (consisting of 1040 clock cycles) you only generate a line_start_pulse that is only valid during ONE



clock cycle. This is to avoid that the the pixel_row row counter would count too fast! Notice that such line_start_pulse can simply be generated by combinatorial logic based on a specific value of the pixel_col counter.

Ts

TTTT pw fpdisp bp

VerticalLine Count

0636

642

665

600 37 6 23

Reference Time599

Fig. 3.6. Timing diagram for the vsync signal for a 800 x 600 display.

The vertical synchronization signal vsync can be generated in a similar way as the horizontal synchronization signal hsync. Use the line_start_pulse to have the row_counter being incremented. At row_counter equal to 665 reset the row_counter to 0. Derive the vsync signal in the same way as done before for the hsync.

Use the vga_controller module in a display test application.

Design a Verilog module where the vga_controller is used. The visible signal of the vga_controller module indicates if the generated video signal is visible or not. This can be used to generate the primary colors: red, green and blue on the VGA display.

Your first VGA screen Verilog test code could contain the following code snippet:

always @(posedge clock) if (visible) begin red = switch[1]; green = switch[2]; blue = switch[3]; end else begin red = 0; green = 0;



blue = 0; end

With this code, several color combinations can be tested by means of the 8 combinations of three switches.

The .ucf Design Configuration files can be downloaded from the website (both for D2SB and D2FT).

Now generate horizontal color bars

When the vga_controller signal visible is 1, the VGA signal is visible on the screen. At that time the specific pixel position on the screen is given by the coordinates (pixel_col, pixel_row).

pixel_col takes the range from 0 (left most column) to 799 (right most column).

pixel_row takes the range from 0 (top row) to 599 (bottom row).

These signals can be used for displaying specific pixel color information at specific places on the screen.

You could augment the code snippet in the previous section to generate horizontal color bars. This could be done by the following code snippet:

red = pixel_row[6]; green = pixel_row[7]; blue = pixel_row[8];

Experiment with this!

A worked out solution can be found in the file vgabars.zip in the associated files area of lab3.



Experiment: Generate a color checker board pattern!

In this experiment, generate a color checker board pattern. For this you will use the pixel_row as well as the pixel_col.

Experiment: Bouncing Ball

Generate a Bouncing Ball on the screen. The bouncing ball will be represented by a square box, having 32 x 32 pixels. When the ball hits the border of the screen it bounces back on the screen. This is illustrated in figure 3.7. Assume that the ball in position (1) moves in the direction of the arrow. When it hits the screen boundary in position (2) it will change the direction of movement towards position (3).

Hints: use a counter as designed in Lab 2 to time the bouncing ball. The ball should of course not move too quick, as we will not be able to see it move.

Use a column and row position register for the place of the ball. At each count of the time counter change the row- and column- position of the ball. If this update results in a hitting of the border, change the direction of movement for that direction.

(1)

(2)

(3)

VGA screen

Fig. 3.7. Bouncing Ball experiment.



A character generator.

In many applications, characters are displayed on a screen. Characters can be represented as a two dimensional array of pixels. Fig. 3.8 illustrates how the @ character can be composed in a 16 x 16 character matrix.

Several characters of a specific character set can be represented in an array. The SoCLab predesigned fontrom module consists of a 128 character array. For the characters from 32 till 126, the ASCII encoding is being used. For the remaining encodings other characters have been selected. An overview of the 128 characters represented in the SoCLab fontrom module is given in Appendix 3.b.

The fontrom Read Only Memory (ROM) makes use a Block RAM modules as available in the Xilinx FPGAs.

Fig. 3.8 16 x 16 bit Character bitmap for the @ sign. (ASCII code 32)

The fontrom is a Xilinx ROM module with a 15 bits address addr[14:0] and a 1 bit output dout . The 15 address bits is composed of the following parts:

addr[14:8] : 7-bit character address, can select one of the 128 characters.

addr[7:4] : 4-bit font row address

addr[3:0] : 4-bit font column address



Figure 3.9 shows a symbol for the fontrom. At the positive edge of the clk clock signal, the dout pixel corresponding to the address addr will be generated.

Fig. 3.9. fontrom module.

The SoCLab fontrom is a predefined module. Its interface definition in Verilog looks as follows:

module font_rom (addr, clk, dout); input [14 : 0] addr; input clk; output [0 : 0] dout; endmodule

The fontrom can be used in an application by a module instantiation, as for example:

font_rom font_rom(fontaddress, clock, pixelout);

When this font_rom instantiation is added to a Verilog description, the Project navigator will indicate that the module is unknown. This is illustrated in fig. 3. 10.



Fig 3.10. Module font_rom is instantiated in vgasystem_0.v but not yet defined.

The fontrom character ROM is an application of a predefined module that can be used as a building block in other designs. In actual SoC designs predefined building blocks are often used and re-used, as this allows to shorten the design cycle. Several companies are currently commercializing a number of such reusable building blocks. In this case they are also referred to as: IP blocks (Intellectual Property blocks).

Xilinx includes several libraries of predefined blocks as well. In later labs, the use of Xilinx IP blocks as available in the Core Generator module will be introduced.

In this experiment, the font_rom ROM module is used. The files describing the font_rom module, as available in the compressed fontrom.zip file located in the lab3 directory need to be copied to the project directory at hand.

The fontrom module can than be added to the design files by right clicking on the Verilog file name using the fontrom module in the Sources for Project window pane of the Project Navigator. Hereafter select Add Source . In the following file selection box select the font_rom.xco Xilinx core definition file. (This file is part of the contents of the fontrom.zip file. Hereafter the icon near font_rom in the Sources for Project window pane of the Project Navigator changes to the icon for Core Generator.



Fig. 3.11. Module font_rom defined.

At this moment all the necessary information is available and the description can be compiled and synthesized.

Experiment: generate all characters in the fontrom on the VGA display.

Use 6 switches on the Digilent boards to define the colors of the VGA display. Use switch[3:1] for the foreground colors of the characters, use switch[6:4] for the background colors.

Hint: for the generation of the characters on the screen, use can be made of the pixel_row[9:0] and pixel_col[9:0] counters. A simple solution is to position the characters on the screen in multiples of 16 pixel squares, as is illustrated in fig. 3.12. The 16 x 16 pixels in the character bitmap can then be addressed by the lower order 4 bits of the row and column counters: pixel_col[3:0] and pixel_row[3:0]. The characters themselves as shown on specific locations on the screen can be addressed by the higher order bits: pixel_col[9:4] and pixel_col[9:4].



@

16 pixels (addressed by pixel_col[3:0])

16 pixels(pixel_row[3:0])

characters addressed by pixel_col[9:4]

charactersaddressed bypixel_row[9:4]

VGA Screen

Fig 3.12 Addressing of characters on the VGA screen by using the pixel_row and pixel_col counters.

A completed design using the character generator can be found in the vgasystem1.zip archive of the associated lab files area for Lab3. In that setup all characters are generated on the screen. The color the characters is defined by switch[1:3] and the background color is defined by switch[4:6].

The overall vgasystem1.v Verilog description is given below:

module vgasystem_1(red,green,blue,hsync,vsync,clock,reset,switch); output red; output green; output blue; output hsync; output vsync; input clock; input reset; input switch; wire [6:1] switch;



wire [0:0] pixelout; wire [10:0] pixel_col; // column number of pixel on the screen wire [9:0] pixel_row; // row number of pixel on the screen wire [14:0] fontaddress; // address to the 32K x 1 font ROM wire [3:0] f_pixel_hor; // horizontal pixel address in 16x16 font wire [3:0] f_pixel_ver; // vertical pixel address in 16x16 font wire [5:0] char_col; // column number of a character wire [4:0] char_row; // row number of a character reg red, green, blue; vga_controller vga_ctrl(clock, reset, pixel_col, pixel_row, active, hsync, vsync); font_rom font_rom(fontaddress, clock, pixelout); assign f_pixel_hor = pixel_col[3:0]; assign f_pixel_ver = pixel_row[3:0]; assign char_col = pixel_col[9:4]; assign char_row = pixel_row[8:4]; assign fontaddress = {char_row[1:0], char_col[4:0], f_pixel_ver, f_pixel_hor}; always @(posedge clock) if (active) if (pixelout == 1) begin red = switch[1]; green = switch[2]; blue = switch[3]; end else begin red = ~switch[4]; // inverted so that something can be green = ~switch[5]; // shown in case all switches in the blue = ~switch[6]; // same position. end else begin red = 0; green = 0; blue = 0; end



endmodule

Experiment with the switches to set the foreground and background colors.

Experiment: display the ASCII characters as set by the switches.

Update the design vgasystem1.zip mentioned above, such that the screen is filled with characters according to the setting of switch[7:1]. Use blue characters on a white background. Of course, in this experiment the switches can not be used anymore for the setting of the colors.

Experiment: display enlarged characters.

The fontrom consiss of a 16x16 character ROM memory. The 16x16 characters can be enlarged to be displayed in a 32x32 character field by stretching every pixel to 2x2 pixels. Of course the quality of the original 16x16 characters remains the same as the original pixels will become small 2x2 squares.

Update the design in vgasystem1.zip so that stretched 32x32 pixel characters are displayed on the screen. For this experiment the way the fontrom is addressed has to be updated of course.

In the original vgasystem1 all of the 128 characters of the fontrom can be shown in 4 rows on the display. As the characters are enlarged the characters have to be organized to be displayed in 8 rows now.

Experiment: a continuous flowing banner.

Make a continuously flowing banner of 64 x 64 characters. Use the sequence of characters of the fontrom for this purpose. Use the 16 x 16 character bitmaps to generate the 64 x 64 large characters as shown on the VGA display. Only show one line of flowing text. The other part of the screen should have the background color.

The flow of the characters should be smooth. This means that characters should not jump from one character to the other but gradually flow over the screen.

Further applications.

Based on the vga_controller module several graphics applications can be built. Examples are:

- The current applications directly generate the characters from the position counters: pixel_row and pixel_col. In an actual application a video buffer memory will be used



in which the text to be displayed is stored. The video buffer is a RAM memory. In following labs, we will use RAM blocks to store the text in the video memory.

- Generate images using the NCTUIO1 FPGA interface board.

- Make a graphics computer game. An example could be the famous pong first computer game.



Appendix 3.a VGA Timing information.

Synchronization signals for a 640 x 480 video signal.

The Digilent boards use a 50 MHz clock. The timing characteristics for the 640 x 480 hsync signal are given in the table below.

Symbol

Name

Time duration

Number of 50Mhz Clock

periods

50MHz Clock periods from

Time reference

Tdisp Display Time 25.6s 1280 1279 Tfp Front Porch 640ns 32 1311

Tpw Pulse Width 3.84s 192 1503 Tbp Back Porch 1.92s 96 1599 Ts Sync pulse time 32s 1600 1599

Table 1. Horizontal synchronization signal characteristics for 640 x 480 video generation, using a 50MHz clock.

The timing characteristics for the 640 x 480 vsync signal are given in table 3.2. The 640 x 480 video signal uses a 60 Hz frame rate. This means that every 1/60 sec = 16.666ms a new frame is being displayed.

Symbol

Name

Time duration

Number of lines lines from Time reference

Tdisp Display Time 15.36ms 480 479

Tfp Front Porch 320s 10 489 Tpw Pulse Width 64s 2 491 Tbp Back Porch 928s 29 520 Ts Sync pulse time 16.66ms 521 520



Table 2. Vertical synchronization signal characteristics for 640 x 480 video generation, using a 50MHz clock.

More information on VGA signal timing

More information on signal timings for computer displays can be found at:

http://www.epanorama.net/documents/pc/vga_timing.html



Appendix 3.b. fontrom Character Table

MSB

LSB

0 1 2 3 4 5 6 7

0 0 @ P ` p

1 ! 1 A Q a q

2 2 B R b r

3 # 3 C S c s

4 $ 4 D T d t

5 % 5 E U e u

6 & 6 F V f v

7 7 G W g w

8 ( 8 H X h x

9 ) 9 I Y i y

A * : J Z j z

B + ; K [ k {

C , < L \ l |

D - = M ] m }

E . > N ^ n ~

F / ? O _ o

vga lab 800x600

Documents