Introduction: The LCD UI Module

The LCD UI module is an 8x2 backlit LCD with a mini-joystick, an extra 'big red button', and a bicolor LED for additional feedback. It's an easy way to add interactivity to your project. The LCD is HD44780 compatible and wired for a 4-bit interface.

This module was featured in the September's Nuts And Volts Spin Zone column - you can download a pdf of the column from Parallax (pdf), or download code samples (zip).

The LCD UI Module is compatible with other Gadget Gangster Platform Modules and it has standard spacing, so you can add it to any protoboard or a breadboard.

You can download the schematic & PCB design or buy the kit on Gadget Gangster.

Build time is about 45 minutes. Warm up your soldering iron and go to the next step!

Step 1: Parts List

While your soldering iron is warming up, check to make sure you have the following parts:

Parts list

  • 1x 40 Pin header strip. Using your dikes, trim this into 2x16 pin sections and 2x4 pin sections.
  • 1x 2x8 Pin Socket.
  • 1x 2x8 Pin header. The kit comes with box headers, but bare pin headers work just fine.
  • 1x 2n3904 NPN transistor.
  • 1x Switch Cap. Any color is fine, but red looks cooler.
  • 1x 12mm tactile switch.
  • 1x 4-direction + depress mini joystick. This one is a bit uncommon, but you can pick it up from mouser.
  • 1x 8x2 Char LCD display with backlight (HD44780 compatible, which is the de facto standard for LCD character displays).
  • 1x Red - Green Bicolor LED. The kit comes with a 2 lead LED, but the board also support 3 lead LED's.
  • 1x Gadget Gangster LCD UI PCB. You can buy the bare PCB here.
  • 1x 10k ohm thumbwheel potentiometer. This controls the contrast of the LCD
  • 1x 8pin bussed 10k ohm resistor network.
  • 1x 47 ohm resistor (Yellow - Violet - Black)
  • 8x 220 ohm resistors (Red - Red - Brown)
  • 4x 2.2k ohm resistors (Red - Red - Red)
  • 1x 470 ohm resistor (Yellow - Violet - Brown)

Step 2: 220 Ohm Resistors

Start by adding the 220 ohm resistors (Red - Red - Brown) at the spots R1 - R8. Resistors aren't polarized, so it doesn't matter which direction you insert them.

Step 3: 2.2k Ohm Resistors

Add all four of the 2.2k ohm resistors (red - red - red) at the spots R11:R14.

Step 4: 47 Ohm Resistor

The 47 ohm resistor (Yellow - Violet - Black) goes at R10. This resistor limits the current flowing to the backlight of the LCD.

Step 5: 470 Ohm Resistor

This is your last discrete resistor, it goes at R9. It's 470 ohms (Yellow - Violet - Brown). It connects to P8.

If you'd like to control the backlight on the LCD - bring P8 high to turn the backlight on. You can also modulate P8 to change the brightness of the backlight or make it fade in / fade out.

Step 6: Contrast Control

Add the potentiometer under 'contrast', as indicated in the picture. Rotating this pot will control the contrast of the LCD.

Step 7: Bi-Color LED

Add the bicolor LED as shown in the photo. The shorter lead goes on bottom, the longer lead goes on top.

A bicolor LED actually has 2 colors built in. To make the LED green, bring P16 high and sink P17. To make the LED red, sink P16 and bring P17 high. By flipping rapidly back and forth, you can make it yellow.

Step 8: Setting Up the Pin Headers

The pin headers will let you slide the LCD UI module on a breadboard or another Gadget Gangster Platform module.

It's helpful to get the pins straight - the easiest way to get them straight is to use another module (or breadboard) as a jig.

In the photo below, I'm sliding the pin headers into a Propeller Platform module. In the next step, I'll drop the LCD UI module on top and solder the pin headers to the LCD UI module.

Step 9: Soldering on the Pin Headers

Now that the pin headers are in the 'jig', drop the LCD UI board on top. Solder the pin headers to the LCD UI board, let the solder cool and pull the board out of your jig.

The connection between modules is pretty firm. To pull the modules apart, just rock the top module back and forth.

Step 10: Bussed Resistor

next up is the bussed resistor. Identify the first pin on the bussed resistor - it's marked with a little arrow on the side of the bussed resistor body.

Step 11: Adding the Bussed Resistor

PIN 1 should go through the square hole, as indicated in the image below

Step 12: Add the Transistor

The transistor is connected to the backlight of the LCD and to P8. By bringing P8 high, you can turn the backlight on.

Connect the transistor as shown in the photo, the flat side of the transistor points to the right, as shown in the silkscreen on the board.

Step 13: Box Header

Add the box headers as shown on the photo. These pins will connect to the LCD display.

The box headers in the kit have a notch on one side - it doesn't matter which side the notch faces. You can also use regular pin headers instead of box headers.

Step 14: Adding the Switches

There are two switches, a 4 way + depress and a 12 mm push-button tactile switch.

P23 = the 12 mm push-button tactile switch
P22 = depress on the 4 way + depress button
P21 = right on the 4 way
P20 = left on the 4 way
P19 = down on the 4 way
P18 = up on the 4 way

When the pins go high, that means they've been depressed.

Step 15: All Done!

Add the switch cover to the top switch, as shown on the photo.

Add the 2x8 pin socket to the bottom of the LCD module. Also add the switch cover to the 12mm switch, as shown in the photo.

That's it, you're done! If you're using the Propeller Platform Module, you can download this little program from Nuts and Volts to test it out.

The LCD UI module is feautured in the September column of 'The Spin Zone' in Nuts and Volts. Anyone can download the column from Parallax (here, although it's not up just yet), or Nuts and Volts subscribers can read the column here.