LCD Graphics 10:10 LCD Graphics Today we discuss the LCD display in detail, with the objective of simple graphics programming. We start with the hardware. - The display is a 128 x 128 pixel resolution TFT display with integrated controller. That means that there's a chip inside of the display module that handles the low-level interfacing to the TFT display. - The interface between the LCD and the MSP432P4 is a serial interface of type SPI. - The display chip can drive up to 262K colors (ie. 18 bits per pixel). - To control the display chip, the MSP432 sends a series of low-level SPI commands (reading/writing bytes that form command sequences). - The architecture of the graphics display system is as follows Graphics Application | | MSP GRAPHICS LIBRARY - rectangles - circles - strings - etc .. TFT Panel | | | | Low Level Graphics LCD Chip w SPI - Drawing 1 pixel - set low-level LCD aspects - Drawing multiple pixels - Set pixels - Horiz & Vertical Lines - Turn display on/off - Filled Rectangles | - Clearscreen | - ColorTranslate | | | SPI Interface | - read/write byte | | | | | +-------------- SPI ---------------+ - Because the display is controlled through SPI, it is not as fast as a display on eg a laptop. For example, displaying video will be difficult. However, displaying graphics shapes will work fine. 10:20 The Texas Instruments Graphics Library (MSP GRAPHICS) - Because display modules are frequently needed in embedded systems (that contain MSP microcontrollers), TI has create a standard graphics interface called the MSP GRAPHICS LIBRARY. - This library is different from Driverlib; it comes with its own documentation and source code. - The MSP Graphics source code can be found on /c/ti/simplelink_msp432p4_sdk_1_60_00_12/source/ti/grlib - The MSP Graphics library makes use of a low-level graphics library that handles the direct interface to the TFT panel; the MSP Graphics Library itself is device independent. - The graphics library is described in detail in a graphics library manual - In the following, we will discuss several components of the graphics library. 10:22 Creating a graphics application. MSP GRLIB (accessed via grlib.h) + font files | fontcm12.c | ... (153 files) CrystalFontz128x128_ST773.c | | HAL_MSP_EXP432P401R_Crystalfontz...c The main application needs to include the following include file: #include #include "LcdDriver/Crystalfontz128x128_ST7735.h" In addition, the following C files will be used: - font files - CrystalFontz ... - HAL_ ... 10:24 Graphics Context Every graphics application contains a graphics context. The graphics context remembers the most important settings of a graphics application, parameters which apply to every graphics command. The graphics context includes - Foreground color - Background color - Font - Clipping Region - The interface to the low-level library (function pointers) *** Color: - Color is always specified as a 24-bit RGB color as follows uint32_t k -> 0x00RRGGBB - Color gets translated by the low-level displayu driver to the color capabilities of the display, which is less than 8 bits per color. - The advantage is that code can be written using generic 24-bit RGB specifications. For example, in grlib.h we can find a large collection of color specifications such as #define GRAPHICS_COLOR_DARK_CYAN 0x00008B8B #define GRAPHICS_COLOR_DODGER_BLUE 0x001E90FF #define GRAPHICS_COLOR_FIRE_BRICK 0x00B22222 ... etc So fire brick has 0xB2 for red, 0x22 for green, 0x22 for blue *** Fonts: - Font data is specified in a file as a bit map - Each font file corresponds to a letter type at a given hight - The file names use the following encoding: font[font_type][point][bold/italic].c For example: fontcmtt16.c A teletype font of point 16 fontcmtt16b.c A bold teletype font of point 16 The font types are the following: cm computer modern (~times roman) cmsc computer modern small caps cmss computer modern sans serif (~helvetica) cmtt computer modern teletype (~courier new) The point sizes vary from 12 to 48 - Only cmtt has a constant character spacing; the others are 'proportionally spaced' which means that the space for each character depends on the letter. - To get an idea of the size of the characters, you can open the font file and look for the Graphics_font structure For example, for CMTT16 we find: Maximum width of the font = 7 Height of the font = 16 Baseline of the font = 12 7 --- +-----------------+ --- | | | | | | | | | | 12 | | 16 | | | | +------------------------ baseline | | | | | | | | --- +-----------------+ - In lab 2, we're using the cmtt16 font on a grid of 16x8 characters. *** Clipping region When we draw large areas of the display, this can results in extensive communications between the MSP432 and the TFT graphics chip. Often, we are interested in updating only part of the display, a viewport in a larger region that measures of to 128x128 pixels. By setting a clipping region, all drawing commands are restricted to the selected clip region. Plotting commands outside of this region will not affect the display. Let's take a look at the InitGraphics call. Note that it makes use of a graphics context global variable, g_sContext. Other plotting functions have to make use of this context. Graphics_Context g_sContext; void InitGraphics() { // Set up the low-level interface Crystalfontz128x128_Init(); Crystalfontz128x128_SetOrientation(LCD_ORIENTATION_UP); // set up the context Graphics_initContext(&g_sContext, &g_sCrystalfontz128x128, &g_sCrystalfontz128x128_funcs); Graphics_setForegroundColor(&g_sContext, GRAPHICS_COLOR_WHITE); Graphics_setBackgroundColor(&g_sContext, GRAPHICS_COLOR_BLUE); GrContextFontSet(&g_sContext, &g_sFontCmtt16); // clears the display Graphics_clearDisplay(&g_sContext); } 10:30 Plotting Lines and Circles Once the graphics context is set up, a broad range of plotting functions becomes available. These functions are described in the MSP graphics manual - Circle API - Line API - Rectangle API The plotting functions make use of a coordinate system; upper left is (0,0) while lower right is (127, 127). For example, the following plots half a circle in the center with radius 30 pixels: Graphics_Rectangle R; R.xMin = 0; R.xMax = 63; R.yMin = 0; R.yMax = 127; Graphics_setClipRegion(&g_sContext, &R); Graphics_fillCircle(&g_sContext, 63, 63, 30); The following plots lines that slowly cycle through the colors blue through green: unsigned colormix(unsigned r,unsigned g,unsigned b) { return ((r & 0xff) << 16) | ((g & 0xff) << 8) | (b & 0xff); } for (i=0; i<128; i++) { r = 25; g = i*2; b = 256 - i*2; Graphics_setForegroundColor(&g_sContext, colormix(r,g,b)); Graphics_drawLineH(&g_sContext, 0, 127, i); } 10:35 String API This API draws strings onto the LCD screen. Drawing strings requires the selection of a font. void Graphics_drawString( const Graphics_Context *context, int8_t *string, int32_t length, int32_t x, int32_t y, bool opaque) Opaqueness allows to prevent plotting of background color, or else include it. Drawing a string in graphics context can be difficult because strings are counted in characters rather than in pixels. To help with this conversion, there are a few helper functions. - Graphics_getStringBaseline(const Graphics_Context *context) - Graphics_getStringHeight (const Graphics_Context *context) - Graphics_getStringWidth (const Graphics_Context *context, const int8_t *string, int32_t length) This allows you to determine the 'bounding box' that is needed to plot a string. Finally, it is possible to draw a string centered: void Graphics_drawStringCentered(const Graphics_Context *context, int8_t *string, int32_t length, int32_t x, int32_t y, bool opaque) In that case, the x, y position of a string is marked as the middle-top: +---------------------X------------------+ | | +----------------------------------------+ 10:40 Bitmap Images It's also possible to display bitmap images. This are rectangle areas where each individual pixel is specified by color - in other words, these are pictures! Before describing the API, we have to mention the following essentials of a picture: - A picture has a format compressed or uncompressed 8, 4, 2, or 1 bit per pixel - A picture has a width of X pixels - A picture has a height of Y pixels - A picture has a palette A palette is a lookup table that maps picture pixel colors to display colors. - For example, at 1 bit per pixel, the palette will contain just two colors (usually black and white). - At 8 bit per pixel, the palette will contain 256 colors. In embedded systems, a designer will make an effort to make images as small as possible, in order to save precious memory storage. Hence, pictures may be stored compressed, and at fewer bits per pixel. Images with few bits per pixel, and compressed images, will take longer to display: translating the bits to pixel values costs time. The compression of images is done using run-length coding. We leave compression aside for now, and may discuss it later. To create the bitmap data structure from an image, TI provides a tool called imagereformer. The tool is part of the TI graphics library http://software-dl.ti.com/msp430/msp430_public_sw/mcu/msp430/Graphics_Library/latest/index_FDS.html The tool reads in a graphics format (eg PNG) and produces a C file which contains - pixel data - palette (at a chosen bits-per-pixel format) - image data structure The resulting C file can be directly imported into the program. Caveat: 1/ At the top of the program, replace #include "grlib.h" with #include 2/ At the bottom of the program, replace const tImage ... with const Graphics_Image ... * Demonstration 1/ Convert max.png in image reformer to max.c 2/ Compile max.c together with rest of program 10:55 Conclusions - Hierarchy of the graphics system (software and hardware) - MSP GRAPHICS LIBRARY - Graphics Context Lines, Rectangles, Circles Strings Images - Image Reformer Utility