Ashok Ra

Getting start with LPCXpresso54608 & emWin Graphics;

Discussion created by Ashok Ra on Feb 28, 2017
Latest reply on Dec 23, 2019 by KETAN SHAH

This tutorial explains some basic knowledge about drawing texts and images on  LPCXpresso54608 TFT screen using emWin library.


Tools Required:

->MCUXpresso IDE

->LPCXpresso54608 SDK 2.0.0

->emWin Library for MCUXpresso IDE ,It comes with SDK package (SDK_2.0.0_LPCXpresso54608\middleware\emwin_5.38\emWin_library\MCUXpresso\libemWin_M4F.a)

->Image to C code converter  (NXP-emWin538-libraries\Utility\BmpCvtNXP.exe)


LPCXpresso54608 Kit:

The Kit comes with default touch screen demo. you can find the user manual here 

To enable the on-board debugging (Link2) option , the Jumper [JP5] should be open.


Setup SDK in MCUXpresso:

Download the latest MCUXpresso from here . and install it.

Download SDK from here

The 1st thing is to add LPCXpresso54608 SDK into MCUXpresso IDE by simply dragging the zip file into SDK tab

After the installation the SDK packages will be show in the editor like below

next step Import the example project attached in this post,

one import is done, the project files will be show in the project explorer

It has board files,drivers, emwin lib's and utilities etc,

In main_app.c Clock ,Board and LCD initialization are done before initialization the emWin lib (GUI_Init())

then clearing the screen and setting the background color using emWin prototypes.

    /* Solid color display */

Draw Text:

The emWin lib has many predefined font sizes and colors in GUI.h. In this example we going to use 3 different size fonts.

Text "LPCXpresso54608" uses "GUI_FONT_8X16X3X3"

Text "Powered by emWin" uses "GUI_FONT_8X16X2X2"  and

Text web address uses "GUI_FONT_8X10_ASCII"

you can change the font by below Api

    /* Set Font */


same way the color can be change by 

    /* Set Color*/


To display the text in particular position the X,Y coordinates can be set by

   /* Display Text */



Draw Image:

The emWin supports png,jpeg,bmp and other few formats

we going to see how to display the bmp bitmap on the display.

First step you need to create image data (hex data) from pictures.

Run BmpCvtNXP.exe and open the image , i used 120x60 sized png file

in the next step convert this image to BPP 24bit format . you have many option here to convert into different formats

in the next step File->Save as Bitmap ".c" file

and now the promotion box will be displayed to choose the format , select true color 24bpp and give ok.

The C file will be generated and add to the project ,you can give rename the file/variable if required.

    /* from bm_nxp_logo_120x60.cfile*/

   extern GUI_CONST_STORAGE GUI_BITMAP bmnxp_logo_120x60;

Now you can draw the image using of below API at particular position

  /* Display Image */

    GUI_DrawBitmap(&bmnxp_logo_120x60, 180, 140);


finally run compile the code and flash the firmware through on-board debugging.

and now your creation will be displayed on the LCD screen.


for queries please feel free to comment here.



Ashok R

NXP Semiconductors

Original Attachment has been moved to: