Projects

Bitmaps with the Graphic LCD

In this project, you will learn how to use bitmaps with the Graphic LCD!

Start

Setup Bitmap Overview Write Code Generating Bitmaps Practice

Setup

Before getting started, make sure you have the following parts.

Sensors / LCD1100

Graphic LCD Phidget

Cables/ 3018

USB cable

Controllers / hub0000

VINT Hub

Cables/ 3003

Phidget cable

Bitmap Overview

You can create a bitmap by defining an array of ones and zeros. The ones and zeros represent the state of individual pixels where ones are colored in and zeros are not.

For example, in Python a bitmap of a small, 5x8 heart would look something like this:

  
heart = [0,0,0,0,0,
         0,1,0,1,0,
         1,1,1,1,1,
         1,1,1,1,1,
         0,1,1,1,0,
         0,0,1,0,0,
         0,0,0,0,0,
         0,0,0,0,0];

You can create large or small bitmaps to display whatever images you would like.

Write Code (Java)

Copy the code below into a new Java project. If you need a reminder of how to do this, revisit the Getting Started Course.

Not your programming language? Set your preferences so we can display relevant code examples

  
//Add Phidgets Library
import com.phidget22.*;

public class GraphicLCD{
    public static void main(String[] args) throws Exception{
        
        //Define bitmap
        byte[] smiley = new byte[] {
            0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
            0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
            0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
            0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0,
            0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
            1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1,
            1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
            1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
            1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
            0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0,
            0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0,
            0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0,
            0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
            0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0
        };
        
        //Create
        LCD lcd = new LCD();
        
        //Open
        lcd.open(1000);
        
        //Use your Phidgets
        lcd.writeBitmap(56, 24, 16, 16, smiley);
        lcd.flush();
    }
}

  
package graphiclcd;

//Add Phidgets Library
import com.phidget22.*;

public class GraphicLCD{
    public static void main(String[] args) throws Exception{
        
        //Define bitmap
        byte[] smiley = new byte[] {
            0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
            0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
            0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
            0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0,
            0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
            1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
            1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1,
            1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
            1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
            1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
            0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0,
            0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0,
            0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0,
            0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
            0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0
        };
        
        //Create
        LCD lcd = new LCD();
        
        //Open
        lcd.open(1000);
        
        //Use your Phidgets
        lcd.writeBitmap(56, 24, 16, 16, smiley);
        lcd.flush();
    }
}

  
//Add Phidgets Library 
import com.phidget22.*;

//Define
LCD lcd;
      
byte[] smiley = new byte[] {
  0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
  0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
  0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
  0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0,
  0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,
  1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
  1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
  1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1,
  1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
  1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
  1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
  0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0,
  0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0,
  0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0,
  0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
  0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0
};

void setup(){
  try{
    
    //Create
    lcd = new LCD();
    
    //Open
    lcd.open(1000);
    
    //Use your LED
    lcd.writeBitmap(56, 24, 16, 16, smiley);
    lcd.flush();
    
  }catch(Exception e){
    //Handle Exceptions
    e.printStackTrace();
  }
}

void draw(){
  //Do nothing
}

Write Code (Python)

Copy the code below into a new Python project. If you need a reminder of how to do this, revisit the Getting Started Course.

Not your programming language? Set your preferences so we can display relevant code examples

  
#Add Phidgets Library
from Phidget22.Phidget import *
from Phidget22.Devices.LCD import *

#Define bitmap
smiley = [
    0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 
    0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 
    0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 
    0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 
    0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0, 
    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 
    1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 
    1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 
    1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 
    1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 
    1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 
    0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 
    0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0, 
    0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 
    0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 
    0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0
]

#Create
ch = LCD()

#Open
ch.openWaitForAttachment(1000)

#Use your Phidgets
ch.writeBitmap(56, 24, 16, 16, smiley) #write bitmap, centered, 16x16
ch.flush()

Write Code (C#)

Copy the code below into a new C# project. If you need a reminder of how to do this, revisit the Getting Started Course.

Not your programming language? Set your preferences so we can display relevant code examples

  
//Add Phidgets Library
using Phidget22;

namespace GraphicLCD
{
    class Program
    {
        static void Main(string[] args)
        {
            //Define bitmap
            byte[] smiley = new byte[] {
                0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0,
                0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
                0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0,
                0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0,
                0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 0,
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
                1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1,
                1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1,
                1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1,
                1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
                1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1,
                0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0,
                0, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 0,
                0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0,
                0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0,
                0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0
            };

            //Create
            LCD lcd = new LCD();

            //Open
            lcd.Open(1000);

            //Use your Phidgets
            lcd.WriteBitmap(56, 24, 16, 16, smiley);
            lcd.Flush();

            //Prevent console from closing immediately
            System.Threading.Thread.Sleep(5000);
        }
    }
}

Write Code (Swift)

Copy the code below into a new Swift project. If you need a reminder of how to do this, revisit the Getting Started Course.

Not your programming language? Set your preferences so we can display relevant code examples

  
import Cocoa
//Add Phidgets Library
import Phidget22Swift

class ViewController: NSViewController {

    @IBOutlet weak var sensorLabel: NSTextField!
    
    //Create
    let lcd = LCD()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        do{
            //Open
            try lcd.open()
        }catch{
            print(error)
        }
    }
    @IBAction func draw(_ sender: Any) {
        do{
            try lcd.drawLine(x1: 0, y1: 32, x2: 128, y2: 32)
            try lcd.flush()
        }catch{
            print(error)
        }
    }
}

Run your code. You will see a smiley face appear in the middle of your screen.

Code Review

When writing bitmaps with the Graphic LCD Phidget, you have to pass five values:

x position: the x-coordinate of the top left corner of the bitmap
y position: the y-coordinate of the top left corner of the bitmap
x size: the length of each row of the bitmap.
y size: the number of rows in the bitmap.
bitmap: the bitmap to be drawn.

As shown in the code above, there is a 16x16 smiley face to be drawn and the x and y positions are set so the smiley is centered on the screen.

Generating Custom Bitmaps

There are many different ways to generate a bitmap image. One way is to use the website Piskel.

After you have created your drawing, you can export the image and download a C file.

Open the C file in any editor and simply replace all instances of 0x00000000 with 0 and all instances of 0xff000000 with 1. You will then have an array you can copy directly into your programs.

Practice

Try generating your own custom bitmap and displaying it on your Graphic LCD Phidget.

Back to Projects