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 */
GUI_SetBkColor(GUI_DARKCYAN);
GUI_Clear();
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 */
GUI_SetFont(GUI_FONT_8X10_ASCII);
same way the color can be change by
/* Set Color*/
GUI_GUI_SetColor(GUI_ORANGE);
To display the text in particular position the X,Y coordinates can be set by
/* Display Text */
GUI_DispStringAt("LPCXpresso54608",60,20);
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.
Thanks
Ashok R
NXP Semiconductors
Original Attachment has been moved to: lpcxpresso54608_emWin_p01.zip
