Pico VGA Board 1.0

Greetings everyone, and welcome back!

Today I’ve got something super interesting to show you—the Pico VGA Board.

The heart of this project is a Raspberry Pi PICO W paired with a D-SUB15 connector, and with this setup, we can use a regular TFT monitor as a massive display for pretty much anything we want.

The whole project is loosely based around an existing VGA library for PICO, which was made to work with CRT monitors. I made some changes to it so it can be used with modern LCD VGA Monitors.

This Instructables covers the complete build process of the PICO VGA Board and walks you through the whole code process.

These are the materials used in this project

1. Custom PCB Board
2. D-SUB 15 VGA Connector
3. DC Barrel jack
4. 330 Ohms Resistor 1206 Package
5. 10k Resistor 0805 Package
6. 1K Resistor 1206 Package
7. LED Green 0603
8. Female header Pins CON20 x 2
9. PICO 1 or PICO W (any with RP2040)

Before starting this project, we first need to understand how VGA ports actually work. VGA, or Video Graphics Array, is an analog video interface that sends image data from a device, such as our Raspberry Pi Pico, to a monitor. Unlike HDMI or DisplayPort, VGA does not send digital packets; instead, it continuously streams voltages that represent colors and timing.

VGA uses three analog signals: Red, Green, and Blue. Each of these signal lines carries a voltage that typically ranges from 0 to 0.7V. At 0V, there is no intensity, and at 0.7V, the monitor displays full intensity.

By combining these three signal lines, the monitor recreates every pixel color. For example, if red is set to 0.7V while green and blue are at 0V, the result is pure red. If all three are set to 0.7V, the result is white.

In addition to RGB signals, VGA uses two digital signals: HSYNC (Horizontal Sync), which tells the monitor when a new line starts, and VSYNC (Vertical Sync), which indicates when a new frame begins.

The monitor draws the image by first rendering pixels from left to right in a single line. An HSYNC pulse then moves it to the next line, and this process repeats for all lines. A VSYNC pulse starts a new frame. This entire process happens approximately 60 times per second (60 Hz).

A VGA connector, also known as a D-Sub 15 (DB15) connector, consists of 15 pins. Pin 1 is for Red, Pin 2 for Green, Pin 3 for Blue, Pin 13 for HSYNC, and Pin 14 for VSYNC. The remaining pins are used for ground and other auxiliary functions.

This project started when I came across a really interesting idea of using a VGA monitor with a Raspberry Pi Pico.

While exploring this, I found a Pico VGA library by Pancrea85. However, the original library was designed primarily for CRT monitors and didn’t work reliably with modern LCD VGA displays.

After making several modifications and adding a few example sketches, I created my own version of the library. This version is adapted for better compatibility with modern displays and can be easily installed and used from the GitHub link below.

https://github.com/razorArnov/PICO-VGA-BOARD

This is the basic wiring diagram used to interface a VGA monitor with the Raspberry Pi Pico.

1. Pin 1 (Red) of the VGA connector is connected to GPIO18, with four 1kΩ resistors in parallel placed between them.
2. Pin 2 (Green) is connected to GPIO19, with the same four 1kΩ resistors in parallel.
3. Pin 3 (Blue) is connected to GPIO20, again using four 1kΩ resistors in parallel.

The resistance value controls brightness. Higher total resistance results in a dimmer image, while lower resistance increases brightness. An ideal combined resistance is typically in the 200–400Ω range.

1. Pins 5, 6, 7, 8, and 10 are all connected to GND.
2. Pin 13 (HSYNC) is connected to GPIO16.
3. Pin 14 (VSYNC) is connected to GPIO17.

Using the VGA–Pico wiring diagram, we created a simple makeshift breadboard setup. A VGA connector was interfaced using jumper wires, which were connected to a prototype board containing resistor arrays for the RGB and sync lines. These signals were then linked to the Raspberry Pi Pico mounted on a breadboard, forming a complete test setup for VGA output.

After completing the wiring, we uploaded a custom demo sketch that recreates a Linux-style terminal inspired by Fallout’s RobCo terminals, featuring the same iconic green color theme.

Below is the demo code.

Here's a small breakout for the code.

First we begin by defining Border thickness and spacing from edges.

Next, we added two font scales, BIG for the fallout header and SMALL for the terminal info.

Here are the Cursor Variables, which are used to create a blinking cursor effect.

This is for Text Position Tracking. small_row = 18 pushes the Linux test lower on the screen and prevents overlap with the big header.

We use the void drawBorder() function for drawing a rectangular green border around texts. drawHLine() is for horizontal lines, drawVLine() is vertical lines.

Also, this loops to make the border thicker.

Using the below function, we are able to print large text. (scale 2)

Similarly, using the below function, small texts are printed, and smaller fonts are used (scale 1).

For Blinking Cursor, this draws a block-style underline cursor.

If Visible, this draws green; if hidden, it erases.

In Setup, VGA is initialized, Border is drawn, and every print job is done, from Big texts to small texts, all are printed in Setup.

Big Texts

Small Texts

In the Loop, cursor blinking logic is being run continuously.

After making sure that the breadboard setup is functioning nicely, we next move on to stage two of this project, which is to prepare a proper board for the setup.

We begin the PCB design process by preparing the schematic first. Here, we recreated the connection of the D-Sub 15 connector with the Pico wiring. In this, we paired Pico GPIO18, GPIO19, and GPIO20 with Pin 1, Pin 2, and Pin 3 of the VGA connector, with three resistors placed in between.

We will be adding a single 330Ω resistor on each R, G, and B line. Each RGB line has three resistors connected in parallel, so we can easily adjust the resistance value by adding or removing any resistor. We just need to make sure all three resistor values in R, G, and B are the same.

Pin 13, which is HSYNC, is connected to GPIO16, and Pin 14, which is VSYNC, is connected to GPIO17. Pins 5, 6, 7, 8, and 10 are all connected to GND.

We have also added a CON15 connector, which is linked to all VGA pins from Pin 1 to Pin 15, in case we need to break out each pin of the VGA D-Sub connector.

For the Pico, we have added a few connectors connected to unused GPIO pins so we can use these pins for future projects.

For power, we added an LM317, which is an adjustable three-pin positive voltage regulator capable of supplying more than 1.5A over an output voltage range of 1.25V to 37V.

https://www.ti.com/lit/ds/symlink/lm317.pdf

We have set up the LM317 in such a way that when we input 12V, we get a stable 5V for powering the Pico.

After completing the PCB schematic and preparing the PCB, we exported the Gerber data and sent it for manufacturing.

After completing the PCB design, Gerber data for the PCB was sent to HQ NextPCB, and an order was placed for RED Solder mask boards with a white silkscreen.

After placing the order, the PCBs were received within a week, and the PCB quality was pretty great.

In addition, I have to bring in HQDFM to you, which helped me a lot through many projects. Huaqiu’s in-house engineers developed the free Design for Manufacturing software, HQDFM, revolutionizing how PCB designers visualize and verify their designs.

Take advantage of NextPCB's Accelerator campaign and get 2 free assembled RP2040-based PCBs for your innovative projects.

https://www.nextpcb.com/blog/rp2040-free-pcba-prototypes-nextpcb-accelerator

This offer covers all costs, including logistics, making it easier and more affordable to bring your ideas to life. SMT services can be expensive, but NextPCB is here to help you overcome that hurdle. Simply share your relevant project, and they'll take care of the rest. Don't miss out on this amazing opportunity to advance your tech creations!

Also, NextPCB has its own Gerber Viewer and DFM analysis software.

Your designs are improved by their HQDFM software (DFM) services. Since I find it annoying to have to wait around for DFM reports from manufacturers, HQDFM is the most efficient method for performing a pre-event self-check.

This is what I see in the online Gerber Viewer. It's decent for a quick look, but not entirely clear. For full functionality—like detailed DFM analysis for PCBA—you’ll need to download the desktop software. The web version only offers a basic DFM report.

With comprehensive Design for Manufacture (DFM) analysis features, HQDFM is a free, sophisticated online PCB Gerber file viewer.

With over 15 years of industry experience, it offers valuable insights into advanced manufacturing processes. If you’re looking for reliable PCB services at a budget-friendly price, HQ NextPCB is definitely worth checking out.

1. We begin the PCB assembly process by first adding solder paste to each component’s pads one by one using a solder paste dispensing needle. Here, we are using 63/37 SnPb solder paste.
2. We then pick and place each SMD component in its correct location.
3. The PCB is then placed on a reflow hotplate, which heats the PCB from below up to the solder paste melting temperature. As soon as the PCB reaches that temperature, the solder paste melts, and all components are secured in their positions.
4. For the through-hole assembly process, we added the D-Sub 15 connector in its position, followed by the barrel DC jack, and two CON20 female header pins in place of the Pico. By turning the board over and using a soldering iron, we solder all the through-hole component leads, securing everything in position.
5. At last, we place the Pico W in its position over the female header pins. This completes the assembly process of the driver board.

Before getting started with the code, we connect our Pico VGA Board to a 24-inch monitor using a VGA cable. We plug the VGA cable from the monitor into the VGA port of our circuit and then connect the power adapter via the DC barrel jack connector.

We begin the demo of our setup by flashing PICO W with a Hello World code first.

This was a simple print statement like skeytch that prints hello world in three different colours, R, G, and B.

Here's a little code breakdown.

We begin by defining VGA resolution.

We defined the size of text scaling that enlarges the font size. Default fonts are 6x8 pixels, with a scale of 4; each character becomes 24x32 pixels.

This is a center text function that does three major things.

It first calculates the width of the text, then centers it horizontally, and then draws each character.

Also, I added a CRT Scanline effect using the following function.

How it works is super simple, it just draws a black horizontal line every 2 pixels, which creates a retro CRT Look.

In Setup, we print 3 coloured lines.

We apply the CRT effect using below function.

The loop is kept empty because this is a static display.

We then prepared a snake game sketch for this setup. The snake game code was taken from one of my previously created snake game console project, in which we are able to control the movement of the snake.

For this VGA demo, we made the snake move randomly, but button controls can be added, and perhaps we can prepare a Snake Game Console XL project with this setup, but that’s a bit off-topic.

Here’s the code breakdown.

We first define the screen and grid setup.

We also define VGA Resolution, where each cell consists of 12x12 pixels, and each grid becomes 53 columns x 40 rows.

Here is the structure of a snake.

Each snake segment stores its position.

Snake can grow up to 200 segments and start with a length of 5.

This is the Movement variables.

This places food randomly with safe grid bounds, also avoiding edges slightly.

This is the Reset Game function that clears the screen, resets the snake's length and direction, places the snake at the center, and spawns new food.

This is the Random Movement function, which has like 30% chance to change direction, and the setup prevents reversing direction.

Food is drawn by the following section.

We control the speed of the snake using delay(120);

Next is the Game of Life sketch, and here's a little code breakdown.

Code begins by defining the screen resolution, which is the following.

We next define the grid size for cells. Each cell is 8x8 Pixels, the grid becomes 640/8 = 80 columns and 480/8 = 60 rows.

Below is the buffer or core of our simulation. This prevents overwriting data while calculating.

Next up is drawing a cell logic. This first converts the grid position into screen pixels.

Using this, a square is drawn.

This is a random function that fills the grid randomly when the code starts.

This is the core logic of the game of life, which is counting neighbours. It checks all 8 surrounding cells.

Game Rules are set with the following.

Alive Cell survives if there are 2 or 3 neighbours. Dead cells become alive if there are exactly 3 neighbours.

Using the section below, we only redraw the cells that are changed instead of a full-screen redraw.

This is the copy state that moves next from the current frame.

In the setup, VGA is initialized, randomness is added, and the simulation starts.

In the loop, the simulation is updated continuously, and its speed is controlled. Lower delay means fast evolution, and higher delay results in a slower, easier-to-see evolution.

This setup works quite well, and with this, I’m even preparing a game project and a couple of sensor interface display-like projects. One of the reasons for making this Pico VGA Board was to use a full-size monitor with the Pico as a display for showing XYZ stuff, and with the help of our hardware, this is now super simple.

We just need to download and install my custom library, prepare the VGA Pico Board setup (whose details are all attached in this article), make your own VGA Pico Board, and just display XYZ stuff on a monitor. Super simple.

The board can be powered via the DC Barrel jack with a 12V Adaptor.

For now, this project has been completed, and it’s been a success. Make sure to check out the video I prepared for this project, and if you are interested in these display-related projects, check out my older work.

Thanks for reaching this far in the article, and I will be back with a new project real soon.