Drawing With the Graphic LCD Phidget

In this project, you will learn how to draw pixels, lines and rectangles using the Graphic LCD!

Supplies

• Graphic LCD Phidget
• VINT Hub

Step 1: Basics - Size

Before you begin drawing with the Graphic LCD, it is important to understand a few things about the device. To start, the LCD is 64 x 128 pixels.

Step 2: Basics - Origin

When drawing, the origin is in the top left corner.

Step 3: Basics - Pixel

So, for example, if you wanted to draw a pixel right in the middle, it would have the following coordinates (64,32). The x coordinate is 64 (half of 128) and y coordinate is 32 (half of 64).

Step 4: Drawing Lines - Python

Now that you have a basic understanding of the layout, let’s start by drawing a straight line. Copy the code below into a new Python script.

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

#Create
lcd = LCD()

#Open
lcd.openWaitForAttachment(1000)

#Use your Phidgets
lcd.drawLine(0,32,128,32) #Divide screen in half
lcd.flush()<br>

Step 5: Drawing Lines - Java

Code for Java is available below:

package graphiclcd;

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

public class GraphicLCD{
    public static void main(String[] args) throws Exception{
        
        //Create
        LCD lcd = new LCD();
        
        //Open
        lcd.open(1000);
        
        //Use your Phidgets
        lcd.drawLine(0, 32, 128, 32); //Divide screen in half
        lcd.flush();
    }
}<br>

Step 6: Drawing Lines - Code Review

When drawing lines with the Graphic LCD Phidget, you have to pass four values:

• x1: the x-coordinate of the first point
• y1: the y-coordinate of the first point
• x2: the x-coordinate of the second point
• y2: the y-coordinate of the second point

Step 7: Drawing Rectangles - Python

Now that you know how to draw a straight line, try drawing a rectangle. Copy the code below into a new Python script.

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

#Create
lcd = LCD()

#Open
lcd.openWaitForAttachment(1000)

#Use your Phidgets
lcd.drawRect(25,5,35,50,False,False)
lcd.flush()<br>

Step 8: Drawing Rectangles - Java

Code for Java is available below:

package graphiclcd;

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

public class GraphicLCD{
    public static void main(String[] args) throws Exception{
        
        //Create
        LCD lcd = new LCD();
        
        //Open
        lcd.open(1000);
        
        //Use your Phidgets
        lcd.drawRect(25, 5, 35, 50, false, false);
        lcd.flush();
    }
}<br>

Step 9: Drawing Rectangles - Code Review

When drawing rectangles with the Graphic LCD Phidget, you have to pass six values:

• x1: the x-coordinate of the top left corner of the rectangle
• y1: the y-coordinate of the top left corner of the rectangle
• x2: the x-coordinate of the bottom right corner of the rectangle
• x2: the y-coordinate of the bottom right corner of the rectangle
• Filled: set to true to fill in the rectangle, otherwise a single pixel oiutline
• Inverted: Set true to clear the region instead of drawing

Step 10: Drawing Pixels - Python

Next, learn how to draw individual pixels.Copy the code below into a new Python project.

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

#Create
lcd = LCD()

#Open
lcd.openWaitForAttachment(1000)

#Use your Phidgets
lcd.drawPixel(64,32,True)
lcd.flush()

Step 11: Drawing Pixels - Java

Code for Java is available below:

package graphiclcd;

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

public class GraphicLCD{
    public static void main(String[] args) throws Exception{
        
        //Create
        LCD lcd = new LCD();
        
        //Open
        lcd.open(1000);
        
        //Use your Phidgets
        lcd.drawPixel(64, 32, LCDPixelState.ON);
        lcd.flush();
    }
}

Step 12: Drawing Pixels - Review

When drawing pixels with the Graphic LCD Phidget, you have to pass three values:

• x: the x-coordinate of the top left corner of the rectangle
• y: the y-coordinate of the top left corner of the rectangle
• Pixel State: set whether the pixel is filled in or not.

Step 13: Learn More

Learn more at phidgets.com/education

Are you a teacher? Sign up for a FREE kit here: phidgets.com/education/free