<< 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

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.

This is a simple sketch that just writes Hello World to a VGA monitor.

#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() {

}


Color Bar Example

It's real easy to make a color bar with the VGA Library.

#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() {

}

LCD Example

Did you know you can easily convert existing sketches that use the LiquidCrystal library to VGA output? Give it a try:

#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);
}

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.

#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() {

}

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:

Bricks Example

Alvaro put together this example sketch to show the types of things you can use in making games.

Sketch Links:

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.

  

Share |