<< ZPUino Introduction | Papilio Introduction | VGA Liquid Crystal Demo >>
Overview
Did you know that with the raw power of the Papilio's FPGA, the ZPUino, and a VGA Wing you can write sketches with VGA output? You can use VGA output to write text, boxes, virtual LCD's, menus, and even games. The best part is that everything you see is Open Source! Keep reading to get started with VGA output on the Papilio.
ZPUino Soft Processor
The ZPUino is a 32 bit processor running at 100Mhz with an integrated VGA display adapter and YM2149 sound processor. Everything is controlled by a sketch and an easy to use VGA library from the Arduino IDE.
Hardware
The ZPUino soft processor with an integrated VGA controller runs on the Open Source Papilio One 500K FPGA board and works with the following Wings:
Library Reference
- VGA Library - Easy to use VGA library to use in your sketches.
- VGALiquidCrystal Library - Lets you convert existing LCD sketches to VGA output.
Setup your Environment
Visit the ZPUino Introduction page and follow the ZPUino Getting Started section to setup your Papilio for use with the ZPUino so you can check out these VGA demos.
Hello World VGA Sketch on the ZPUino.
http://youtu.be/MocpV6b5FYs
This is a simple sketch that just writes Hello World to a VGA monitor.
(:source lang=c :)
- include "VGA.h"
void setup() {
VGA.clear(); VGA.setBackgroundColor(BLACK); VGA.setColor(RED); VGA.printtext(30,0,"Papilio/ZPUino"); VGA.printtext(35,10,"Hello World");
}
void loop() {
} (:sourcend:)
Color Bar Example
It's real easy to make a color bar with the VGA Library.
(:source lang=c :)
- include "VGA.h"
int textarea = 20; int colors[] = {RED,GREEN,BLUE,YELLOW,PURPLE,CYAN,WHITE,BLACK}; int width = VGA.getHSize(); int height = VGA.getVSize(); int column = width/8;
void setup() {
VGA.clear();
VGA.setBackgroundColor(BLACK);
VGA.setColor(RED);
VGA.printtext(25,0,"Papilio/ZPUino");
VGA.printtext(25,10,"Color Bar Test");
for ( int i=0; i<8; i++ )
{
VGA.setColor(colors[i]);
VGA.drawRect(i*column, textarea, column, height-textarea);
}
}
void loop() {
} (:sourcend:)
LCD Example
Did you know you can easily convert existing sketches that use the LiquidCrystal library to VGA output? Give it a try:
(:source lang=c :)
- include <VGA.h>
- include <VGALiquidCrystal.h>
VGALiquidCrystal lcd(1,1,1,1,1,1);
void setup() {
VGA.clear();
// set up the LCD's number of columns and rows:
lcd.begin(16,2);
// clear the LCD screen:
lcd.clear();
lcd.setCursor(0,0);
lcd.print("PAPILIO LCD DEMO");
lcd.setCursor(1,1);
lcd.print("ZPUINO INSIDE!");
delay(3000);
}
void loop() {
lcd.scrollDisplayLeft(); delay(100);
} (:sourcend:)
More Complex Examples
The following examples are more complex and we recommend downloading the sketches from GitHub.
Background Image Example
You can even put a custom image in the background using a special tool to convert images and the SmallFS filesystem.
This sketch requires that the PapilioImage.dat file exists in the sketch directory. It is best to download the entire sketch from GitHub.
(:source lang=c :)
- include "VGA.h"
- include "SmallFS.h"
void blitImage(const char *name) {
VGA.blitStreamInit(0, 0, VGA.getHSize());
SmallFSFile entry = SmallFS.open(name);
if (entry.valid()) {
entry.readCallback( entry.size(), &VGA.blitStream, (void*)&VGA );
}
}
void setup() {
VGA.clear();
if (SmallFS.begin()<0) {
Serial.println("No SmalLFS found, aborting.");
while(1);
}
blitImage("PapilioImage.dat");
}
void loop() {
} (:sourcend:)
Space Invaders LCD Example
It's real easy to use the VGALiquidCrystal Library to convert LCD code to VGA code. We downloaded this sketch from the web and converted it to VGA output by changing a couple of lines.
The source code for our modified sketch can be found in the spaceinvaders_simple directory.
Space Invaders LCD w/Background Example
Once you've converted a LCD sketch it's easy to spruce it up with a Background and other VGA Library features.
The source code for our modified sketch can be found in the spaceinvaders_image directory.
Menu Example Complex
You can also create menus for the VGALiquidCrystal library using the Menubackend library as outlined here.
Sketch Links:
- Source Code on GitHub
- Folder Name - Menu_Example_Complex
Bricks Example
Alvaro put together this example sketch to show the types of things you can use in making games.
Sketch Links:
- Source Code on GitHub
- Folder Name - Bricks_Example
Zetris Example
Alvaro put together this example sketch that recreates the classic Tetris video game. It includes audio and interactive elements built with the VGA library.
For More information visit the Zetris Page.