The DFRobot LCD4884 LCD Shield

Hello readers

This article is my response to a request on how to use the LCD4884 LCD shield from DFRobot in China. It is a simple way of displaying text and the odd graphic, as well as another way to accept user input. Here is the shield in question:

From a hardware perspective the LCD has a resolution of 84 by 48 pixels, with a blue back light. It can easily display six rows of fourteen alphanumeric characters, or two rows of six very large characters. Furthermore, it can display bitmap images that are appropriately sized. At the top-left of the shield digital pins eight to thirteen have been expanded with matching Vcc and GND pins, and at the bottom right the same has been done with analogue pins one through to five. Therefore if using this shield, you will lose digital pins two through to seven and analogue zero.

Along the bottom-left of the shield are solder pads for some other I/O options, however I couldn’t find any documentation on how these are used. Below the LCD is a small four-way joystick that also has an integral button. This is connected to analog pin zero via a resistor network. This joystick can be used for user input and also to create some nifty menu systems. To the right is a power-on LED which is really too bright, I would recommend sanding it a little to reduce the intensity, or just melting it off with a soldering iron.

The shield requires an Arduino library which can be downloaded from the shield’s wiki page. There is also a good demonstration sketch on the wiki, however some of our readers may find this to be somewhat complex. Therefore where possible I will break down and explain the functions in order to simplify use of the shield, then use them in a demonstration sketch.

Controlling the backlight is very easy, just use digitalWrite(7, HIGH/LOW) to turn it on and off. Don’t forget to put pinMode(7, OUTPUT) in void setup();.

Reading the joystick position is accomplished via analogRead(0);. It returns the following values as such:

  • Up – 505
  • Down – 0
  • Left – 740
  • Right – 330
  • pressed in – 144
  • Idle (no action) – 1023

By using analogRead(0) and if… statements you can read the joystick in a simple way. Don’t forget to allow for some tolerance in the readings. Attempts to press the button while forcing a direction did not return any different values. In the example sketch later on, you can see how this is implemented. Always remember to insert:


in void setup() to create an instance of the LCD, and

#include <LCD4884.h>

at the start of your sketch to enable the library.

Now to display text on the LCD. Here is an example of the standard font text:

Using the standard font, we can position text using the following function:

lcd.LCD_write_string(x,y,"insert text here", MENU_NORMAL); // ignore MENU_NORMAL for now

The parameter x is for the x-coordinate of the first character – measured in pixels, not characters. However y is the coordinate in character lines (!). The screen can display six lines of fourteen characters. To display the larger font, for example:

use the following:

lcd.LCD_write_string_big(x,y, "012345", MENU_NORMAL);

Unfortunately the library only supports the digits 0~9, +, – and decimal point. You can modify the file font_big.h in the library folder and create your own characters. Once again the x parameter is the number of pixels across to place the first character, and y is 0 for the top line and 3 for the bottom line. Notice that the characters in this font are proportional, however the maximum number of digits to plan for in one line would be six.

To clear the display, use:


By now you will be able to display text, control the backlight and read the joystick. The following demonstration sketch (download) puts it all together so far:

#include <LCD4884.h>int z=0;int dd=200; void setup()
lcd.LCD_init(); // creates instance of LCD
lcd.LCD_clear(); // blanks the display
pinMode(7, OUTPUT);
void loop()
{  // first some text display
for (int a=0; a<5; a++)
digitalWrite(7, LOW);
digitalWrite(7, HIGH);
for (int a=0; a<6; a++)
lcd.LCD_write_string(0,a,"01234567980123", MENU_NORMAL); // ignore MENU_NORMAL for now
lcd.LCD_clear();   // blanks the display
lcd.LCD_write_string_big(0, 0, "012345", MENU_NORMAL);
lcd.LCD_write_string_big(0, 3, "-+-+-+", MENU_NORMAL);
lcd.LCD_clear();  // now to read the joystick using analogRead(0). Press RESET whien finished
if (z==0)
lcd.LCD_write_string(2,2,"Down", MENU_NORMAL);
}     else
if (z>0 && z<150)
lcd.LCD_write_string(2,2,"OK   ", MENU_NORMAL);
}       else
if (z>150 && z<350)
lcd.LCD_write_string(2,2,"Right", MENU_NORMAL);
}         else
if (z>350 && z<510)
lcd.LCD_write_string(2,2,"Up   ", MENU_NORMAL);
}         else
if (z>510 && z<750)
lcd.LCD_write_string(2,2,"Left ", MENU_NORMAL);
}           else
if (z>750)
lcd.LCD_write_string(2,2,"nil  ", MENU_NORMAL);
}  while (1>0);

Question – How many standard characters can be displayed on the LCD in this article?

Next is to create and display bitmap images. Images can be up to 84 x 48 pixels in size. There are no shades of grey in the images, just pixels on or off. To display a bitmap is a convoluted process but can be mastered. We need to convert a bitmap image into hexadecimal numbers which are then stored in a text file for inclusion into the sketch. To do so, follow these steps:

Create your monochrome image using an editor such as Gimp. Make sure your file name ends with .bmp. Such as:

Next, download the BMP2ASM program from this website. [Sorry, could only find a Windows version]. Open your .bmp file as created above, and you will see a whole bunch of hexadecimal numbers at the bottom of the window:

Turn on the check boxes labelled “Stretch”, “Use Prefix” and “Use suffix”. Then click “Convert”. Have a look in your folder and you will find a text file with an extension .asm. Open this file in a text editor such as Notepad. Remove all the instances of “dt”, as well as the top line with the file path and name. Finally, put commas at the end of each line.

You should now be left with a file of hexadecimal numbers. Encase these numbers in the form of an array as such:

What we have done is places the hexadecimal numbers inside the

unsigned char hellobmp[]= {}

declaration. To make life simpler, ensure the filename (ending with .h) is the same as the variable name, as in this example it is called hellobmp(.h). And make sure you have saved this file in the same folder as the sketch that will use it.

Finally, we include the hellobmp.h file in our example sketch to display the image:

#include "LCD4884.h"
#include "hellobmp.h" // this file needs to be in the same folder as your sketch
void setup()
  lcd.LCD_init(); // creates instance of LCD
  lcd.LCD_clear(); // blanks the display
void loop()
   lcd.LCD_draw_bmp_pixel(0,0, hellobmp, 84,48);
   do { } while (1>0); // do nothing

Notice in the function lcd.LCD_draw_bmp_pixel the filename hellobmp is the same as in the #include declaration is the same as the hellobmp.h file we created. They all need to match. Furthermore, the four numerical parameters are the bitmap’s top-left x-y and bottom-right x-y coordinates on the LCD. So after all that, here is the result:

So there you have it. If you have any questions about this LCD shield contact DF Studio, or ask a question in our Google Group. If anyone from DFStudio or DFRobot is reading this, shame on you for not publishing easy to understand documentation for your own products.

Nevertheless, have fun, stay safe, be good to each other – and make something! :)

By John Boxall

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s