A PIC User Interface


A Graphical User Interface for the PIC18F
For a long time, I have wanted to give my PIC projects a decent user interface, something beyond a few buttons and flashing LEDs. I recently discovered a very low cost color LCD display available for $15 at www.sparkfun.com (part number LCD-00569) and for as little as $10 on ebay.

Unlike the picture here, the display shows very crisp graphics and colors. The resolution is 130 x 130 pixels, each individually addressable with 8 or 12 bit colors. The display is small, having outside dimensions of 1.35" x 1.58". The size of the screen is only 1.2" x 1.2", but it is large enough to display menus, pictures and text messages.

This document describes the PIC user interface that I have created. I've made the source code, along with the schematic / pcb layout open source. All of the files can be downloaded below. To see how the user interface looks and works, there is short movie on YouTube: http://www.youtube.com/watch?v=TDNtWvRc730

Interfacing the LCD:
Connecting the display to a PIC is fairly straight forward, requiring a couple of voltage regulators and a level shifter. The LCD has a built in LED backlight that runs on 7 volts. The display uses 3.3v logic and requires a 3.3v regulator to power it. I use PICs that run on 5 volts, so a chip that shifts the TTL logic levels down to 3.3v is needed. In addition to the display, my user interface requires four buttons. Here is how the LCD and buttons connect to the PIC:

1 de 10

11/11/2010 12:43

It is a little more money. but it is assembled and includes the display. Circuit Board: Electrical connections are made to the LCD display via a tiny 10 pin connector. I choose to design my own PCB. The picture on the right is of a breakout board from their website.3 and 7 volt regulators. The picture below shows my board after I assembled it.expresspcb.org/PICUserInterface/ The PIC is clocked with a 10Mhz crystal and configured internally with a 4x PLC. The mating connector can be purchased from Sparkfun (part number LCD-00570) for $2. 2 de 10 11/11/2010 12:43 . having just . but if you don't want to.A PIC User Interface http://www. are 3.reifel. and the 74HC4050 level shifter. I designed my board using the free schematic and PCB layout tools from www. This type of connector requires that it be soldered to a circuit board. I order the bare boards directly from ExpressPCB. resulting in a 40Mhz clock rate.5mm spacing between the leads. Unfortunately this surface mount connector is also very small. using their $51 MiniBoard service. After laying out the circuit. you can buy a carrier board from Sparkfun. Mounted on the back of the board.com. behind the LCD.

text and bitmaps. All of the code is written in C. To program the chip and debug. lines.c and UserInterface. all of the path names in the project will be preserved.com/ExpressPCBHtm/Download. Text can be drawn using one of five fonts and justified left.htm Developing the Software: The software presented here was developed using Microchip’s MPLAB Integrated Development Environment. right or centered. you will need the software from ExpressPCB. It free from their website: http://www. using the free version of Microchip’s C18 compiler. circles. 3 de 10 11/11/2010 12:43 . They include functions for drawing pixels.org/PICUserInterface/ You will find a PDF schematic of this board here: Schematic page 1 Schematic page 2 Here are the schematic and circuit board files in the ExpressPCB format: Schematic and PCB To open the schematic and PCB files. The complete PIC source code for the user interface.c LCDDriver.expresspcb. including an example program can be downloaded here: PICUserInterface. By placing the files here.zip It is recommended that these files be unzipped into the directory c:\PICUserInterface. Note: The MPLAB project is configured for: General / Diagnostics level: Errors only General / Default storage class: Auto General / Enabled integer promotions unchecked Memory Model / Small code model (<= 64K) Memory Model / Large data model (all RAM banks) Memory Model / Single-bank stack model Optimization / Custom / All checked except Procedural abstraction Writing to the Display: The majority of the user interface is written in two .c contains the routines that write directly to the screen. Microchip’s ICD2 was used.A PIC User Interface http://www.reifel.C files: LCDDriver.

----------. it automatically advances the coordinate with each pixel that you give it. You can get a better understanding by reviewing the source code presented here. The display uses the RAMWR command to auto increment and wrap.(131. bitmap data should be stored in arrays with the first byte representing the pixel in the upper left corner. James Lynch has written a great tutorial. For additional information. I setup the coordinate system with 0. this LCD uses an auto increment and wrap feature. To make writing to the screen faster.Y ----------> ___ _ _ _ _ _ _ _ _ _|_ _|_ _ | | (0.0 in the upper left corner. Next you send all of the pixels values in that block. going from top to bottom.131) ------------------------. then wrapping left to right.) This document does not go into detail explaining the low level communications of the Nokia display. This results in the useable coordinates running from 1 to 130. This choice was made to best support drawing fonts having variable character widths.131) At a low level.org/PICUserInterface/ It is possible to configure the LCD for different coordinate systems. then the pixel value. or the Y=0 and Y = 131 rows.0) |-------------------------| (131. the easiest way to write to a graphics display is to specify the X and Y coordinates of a pixel. then the lower right. The display does not show the X=0 and X=131 columns. I choose to mount the display with its connector tab on the top.reifel.A PIC User Interface http://www.0) | | | | | | | | | | | | | | Nokia 6100 display | X | | | | | | | | | | | | | | \|/ | | (0. My initialization code configures this command to write pixels in the Y direction. then advancing downward and to the right. having X move down and Y move to the right. It is available at: Nokia 6100 LCD Display Driver Tutorial The datasheet for the Philips controller chip used in the display is also a helpful resource: Philips PCF8833 Datasheet 4 de 10 11/11/2010 12:43 . (Note: Because of this wrapping method. It works by first setting the upper left coordinate. however this method is very inefficient.

"Enable sound". Each entry includes the menu text.c and is built on top of the LCDDriver. "Settings". and Sub Menus. configuration screens. Mounted on the right side of the display are the Up and Down buttons. {MENU_ITEM_TYPE_ALTERNATE. "Main menu". Here you can see examples of a menu. ShowAboutCommand}. This function is called with a pointer to the table that defines the menu. the Main menu shown above includes a Settings entry.c module. The middle of the screen is the DisplaySpace. {MENU_ITEM_TYPE_SUB_MENU. "About". 5 de 10 11/11/2010 12:43 . Along the top is the TitleBar. or the name of the application.reifel. The user interface divides the display into three sections.org/PICUserInterface/ The User Interface: As mentioned earlier. At the bottom of the screen is the ButtonBar. These menus here can have up to 6 entries.A PIC User Interface http://www. There are three types of menu entries: Commands. SetEnableSoundCallback}. Selecting it will present a sub menu of settings related commands. Calling the function UISelectMenuDisplay() draws a menu in the DisplaySpace. so the ButtonBar is used to label what they do. {MENU_ITEM_TYPE_COMMAND. Menus can also have sub menus. SelectApplication}. A typical main menu table might look like this: MENU_ITEM MainMenu[] = { {MENU_ITEM_TYPE_MAIN_MENU_HEADER. The function of the buttons mounted below the LCD change. The subroutine UIDrawTitleBar() is called to draw the TitleBar. Creating Menus: Menus give a user interface a clean and consistent approach to supporting applications that have numerous commands and configuration settings. This is where menus. each section is the full width of the screen. message box and a slider drawn in the DisplaySpace: The code that supports the user interface (menus. SettingsMenu}. sub menus. Typically the left button is labeled Select and the right Back. along with what to do when the menu item is selected by the user. messages boxes. along with the application's main displays are shown. The routine UIDrawButtonBar() is called to draw the ButtonBar. The intention of this user interface is to make adding menus. this user interface is built around an LCD display and four push buttons. Menus are constructed using a table of menu entries. Alternates. For example. messages boxes and sliders easy to any PIC18F device. It displays things like the name of the selected menu. providing an easy way to group related commands. message boxes. …) is in the file UserInterface. Two more buttons are mounted below.

then the numeric values are displayed in addition to the graphical slider. If the string is too wide to fit on one line of the LCD. A pointer to the function is third field in the entry. In between are the menu items. or -1000 to 1000). The Step argument indicates how much the value is incremented / decremented each time the user pushes a button. right or centered alignment. then the Back button is not displayed. The MinValue and MaxValue arguments sets the range for the number. the first line in a menu table indicates the type of menu: A MENU_ITEM_TYPE_MAIN_MENU_HEADER specifies the main menu. The choices are: Back Yes / No OK / Cancel A Slider allows the users to input a numeric value (such as 0 to 255. The callback function is executed when the user presses one of the two bottom buttons. The StepAutoRepeat value is added several times per second while the user holds down a button. The third field is a pointer back to the parent menu table (typically this would be the main menu). The source string can be located in ROM or RAM. it alternates the selection (i.reifel.A PIC User Interface http://www. A MENU_ITEM_TYPE_SUB_MENU_HEADER is used in the first line of a sub menu table. as indicated by the StringType argument. "". A MENU_ITEM_TYPE_SUB_MENU entry is used to select a different menu. For example. As described above. This is used to reselect the parent menu when the user presses the Back button. A MENU_ITEM_TYPE_ALTERNATE is used somewhat like a Radio Button in a dialog box. a main menu might reference a Settings sub menu. Each time the user clicks on this type of menu item. The second field is the text displayed on the TitleBar when the menu is shown.org/PICUserInterface/ {MENU_ITEM_TYPE_END_OF_MENU. Sliders show a graphical representation of the value that moves as the users presses the Up and Down buttons. The MessageType argument sets how the two buttons are labeled. or a Sub Menu. The third field in this entry points to a callback function that alternates the value. indicating that they are done with the sub menu. The third field in this entry points to the table that defines the sub menu. The table's last line marks the end of the table. It allows the user to select one of a fixed number of choices (such as On / Off. either a Main Menu. Messages Boxes and Sliders: In addition to menus. or High / Medium / Low). Medium and Low). The first and last lines are not displayed. If the arguments ShowMinMaxValuesFlg and ShowNumericValueFlg are set to TRUE. The Justify argument specifies left. Note: If the third field is 0. The first line in the table always specifies what type of menu it is. A MessageDisplay presents a text message. The third field is a pointer to a callback function executed when the user presses the Back button. A pointer to a callback function must be given in the CallbackFunc argument. there are a few other standard displays that can be shown in the DisplaySpace. (Sub menus that are menus that are called from a main menu. Typically this callback function would reselect the device's main application. 6 de 10 11/11/2010 12:43 . The function UISelectMessageDisplay() is called with the string to show. toggles between On and Off. Sliders are displayed by calling UISelectSliderDisplay(). 0}}. indicating that they are done with the menu. or another sub menu) The second field is the sub menu's title (which is displayed on the TitleBar).e. or rotates between High. A MENU_ITEM_TYPE_COMMAND entry indicates that a function will be executed when this menu item is selected. it will automatically be broken into multiple lines. The string can also contain '\r' characters to break the line.

% . 0xFF. 0xFF. 0xFF. 0xFF. : and a space. y = 1) // . 0xFF. The stock fonts are: Font_Small Font_SmallBold Font_Medium Font_MediumBold Font_LargeNumbers The LargeNumbers font only includes the characters: 0 1 2 3 4 5 6 7 8 9 . 0xFF. 0x00.. 0xFF. 0x00. such as an hourglass icon. 0xFF. 0x00. 0xFF. 0xFF. 0x00. 0xFF. 0x00. 0x00. 0x00. 0x00. 0xFF. 0x00. 0xFF. 0xFF. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0xFF. 0x00. The source code for the hourglass bitmap looks like this: // // Image: Hourglass // Data is packed with 1 pixel in 1 byte.reifel. 0x00. 0xFF. 0xFF. 0x00. 0x00. 0x00. 0x00. 0xFF. 0xFF. 0x00. 0x00. A choice of five fonts are in the file fonts. 0x00. 0xFF. 0xFF. 0xFF. 0x00. 0x00. Unfortunately. large pictures should be used very sparingly because of the massive amount of ROM space they require. 0xFF. 0x00. 0xFF. 0xFF. 0x00. the file images. 0xFF. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0x00. 0xFF.+ . 0xFF. 0xFF. 0x00. An RGB12 picture the size of the screen (130 x 130 pixels) eats up 25K of ROM. 0x00. 0xFF. 0xFF. 0x00. (x = 0. beginning with the upper left // pixel. 0x00. 0xFF. 0x00. 7 de 10 11/11/2010 12:43 . 2 = RGB8 // Byte1 = Image width (1 . 0x00. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0x00. 0x00. 0xFF. In the example project.130) // Byte2 = Image height (1 . 0xFF. one is a picture of a pretty woman. 0x00. 0x00. 0xFF. 0x00.c.org/PICUserInterface/ Bitmaps and Fonts: Pictures and fonts are compiled directly into the project’s source code. = remaining pixel data // rom byte Image_Hourglass[] = { 0x02. 0xFF. 0xFF. 0x00. 0x00. 0xFF. 0xFF. 0x00. 0xFF. 0x12. 0xFF. 0x00. 0x00. 0xFF. 0x00. 0xFF. 0x00. 0xFF. RGB12 bitmaps require 12 bits of storage per pixel but give a better representation of colors (rrrrggggbbbb). 0xFF. 0xFF. 0x00. 0x00.130) // Byte3 = Byte count of image (low byte) (excluding this 5 byte header) // Byte4 = Byte count of image (high byte) (excluding this 5 byte header) // Byte5 = rrrgggbb pixel 1. 0xFF. 0x00. 0x00. y = 0) // Byte6 = rrrgggbb pixel 2. 0xFF. 0x00. 0x00. 0x00. 0xFF. 0x00. then to the right // Byte0 = Bitmap type: 1 = RGB12. 0xFF. 0xFF. 0x00. 0x00. 0x00. 0xFF. 0x00. 0x00.A PIC User Interface http://www. 0xFF. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0xFF. 0xFF. 0xFF. 0xFF. Variable pitch fonts have a much prettier appearance and print more compactly than fixed pitch fonts. 0xFF. 0xFF. 0xFF. 0xFF. 0xFF. 0x00.e. 0xFF. 0x00. 0xFF. 0xFF.. 0x00. 0xFF. 0x00. 0xFF. 0xFF. can nicely dress up an application. 0x00. 0x00. Bitmaps can be saved using two color systems: RGB8 bitmaps represent each pixel with an 8 bit value (rrrgggbb). 0x00. 0xFF. 0x00. 0xFF. 0x00. 0xFF. 0xFF. 0xFF. 0xFF. 0xFF. 0xFF. 0x00. 0x00. 0xFF.c contains two sample bitmaps. 0xFF. They all have a variable pitch (i. 0x00. 0x00. 0xFF. 0xFF. 0xFF. 0xFF. 0x00. 0xFF. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0x00. the pixel order goes down. 0x00. 0xFF. 0xFF. 0x00. 0x00. 0x00. 0xFF. 0x00. and the other is an hourglass icon. 0x00. 0xFF. Including many small graphics. 0xFF. 0xFF. the i character is narrower than the w character). 0x00. 0xFF. (x = 0. 0xFF. 0xFF. 0x00. 0x00. 0x00. 0xFF. 0x00. 0xFF. 0xFF. 0xEA. 0xFF. 0xFF. 0xFF. 0x00. 0x00. 0x00. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0xFF. 0x00. 0x00. 0xFF. 0x00. 0xFF. 0x00. 0x00. 0xFF. 0xFF. 0x00. 0x0D. 0xFF.

.GIF file.reifel. 0xFF.exe The LCD’s Built in Controller Chip: One of the most appealing qualities of this display is its low cost.JPG or . in the words of James Lynch: "The major irritant in using this display is identifying the graphics controller.c include a reasonable selection of type faces that are practical for this LCD display. then copies it to the Windows clipboard. All of the characters in the ASCII set are automatically generated. The good news is that you do not need to understand the format of bitmaps and fonts in order to use. The Windows program LCDBitmapAndFontCreator. Add this data to your PIC project by opening a . The installation program for the LCDBitmapAndFontCreator Windows applications is available here: LCDBitmapAndFontCreator. Here you can see that a bitmap of an hourglass image has been loaded.org/PICUserInterface/ 0xFF. For example. you can.A PIC User Interface http://www. Down. previewing lower case characters will help you to insure that the yellow band includes the decenders of a lower case y. You can view different text in the preview window by pressing the Sample Text button. Pressing the Load image file button allows you to select a . The Copy image data to clipboard button converts the image to textual data. used widely in Nokia cell phones. Then adjust the yellow band in the preview window to select what is captured. It is likely that you will not need any other fonts. then selecting Paste from the Edit menu. Press the Up. Do so by first choosing a font. The controls on the right side of the LCDBitmapAndFontCreator. The controls on the left side of the program are used to generate the data for pictures. It is inexpensive because it is an OEM part. One should note that the fonts created with this method are likely owned and copyrighted by Microsoft and should not be used in commercial applications. Do not worry about the right edge of the yellow band. there are two 8 de 10 11/11/2010 12:43 . Taller and Shorter buttons to set the top and bottom of the yellow band. 0x00}.C file in MPLAB.exe is shown below.BMP. However. or to create them. However if you want to make your own. 0xFF. They are generated with a Windows application written to support this user interface. Click the Left and Right buttons to set the left edge of the yellow band over the left edge of the first character.exe program are used. The fonts in the file fonts. 0xFF. 0x00.

I found that the documented method of programming this table did not result in correct colors. the controller chip used by the display can be identified as follows: Philips PCF8833 compatible controllers Have a red tab on the protective cover of the LCD Marked with one of these: UMSH-8118FD-1CS U. they indicated Red. Initially I could only display washed out colors. In my last Sparkfun order. The problem relates to colors. You will find this array is declared twice. In my email I asked that they check their stock to tell me "the color of the tab on the LCD’s protective cover". Looking at the datasheets for the Phillips and Epson controllers. My driver uses the LCD in two different color modes: 8 bit colors and 12 bit colors.T. This table matches the requirements as documented in the Philips datasheet. Unfortunately when ordering these displays. purchased from two different sources (Sparkfun and the Yallstore on ebay) and found the same results with both. In their reply. it does not seem possible to specify which controller you want. It may be necessary to use the commented out version for some LCD displays.c module.50. see James Lynch's document: Nokia 6100 LCD Display Driver Tutorial The Unexplained: In developing the LCDDriver. In LCDDriver. 9 de 10 11/11/2010 12:43 . so I placed my order. According to Sparkfun. The software driving the display must know which controller it is writing to. you will find that they are very similar. If your display uses the Epson controller. the color table is defined in the array RGB8ColorMap[]. For a discussion of the differences between the Philips and Epson versions of this display. the other one is commented out.org/PICUserInterface/ possibilities (Epson S1D15G00 or Philips PCF8833)".R. These are the functions that would need to be updated: LCDDriverInitialize() LCDSelectColorMode() LCDSetContrast() WriteCommandToLCD() WriteDataByteToLCD() along with the RGB8ColorMap color table and the list of #defines for the controller's command set.A PIC User Interface http://www. I discovered that a 48 byte table (rather than the 20 byte table documented) was needed. I tested this code with two versions of the Nokia 6100 LCD. it is possible to modify this software to support it. I found that my display adheres to the Philips datasheet in all ways except for the RGBSET command.reifel. either from Sparkfun or ebay. I wanted a display with the Phillips controller so I emailed them first. While I’m not sure a red tab will always guarantee the correct result. it has worked for me. Through experimentation. however there are differences. not getting the full range of brightness. I also found it necessary to setup a color table for the 12 bit mode. The Philips datasheet indicates that it is necessary to setup a color table (using the RGBSET command) with the 8 bit color mode.21 GE-8 The source code presented here is written for the Nokia 6100 LCD displays having a Philips controller. One has the data that works correctly with my displays. 080109-0010 LM355C11-B AT-A2-071227-F604-1 GE-12 Epson S1D15G10 compatible controllers Have a green tab on the protective cover of the LCD Marked with one of these: EV-LG-0298 73-01824 GMP355C0 0403 C-SNB6C1504.c.

Last edited: 7/20/2009 10 de 10 11/11/2010 12:43 . The line and circle drawing routines were derived from the 1962 algorithms of the famous Jack Bresenham. James Lynch's document Nokia 6100 LCD Display Driver Tutorial was extremely helpful.reifel.org/PICUserInterface/ Acknowledgements: In developing the LCDDriver.A PIC User Interface http://www.c module.

Sign up to vote on this title
UsefulNot useful