Connected Cloud Challenge - IoT based Advertisement BillBoards/Hordings - #BlogPost-7

10 May 2020

TFT Display Bitmap Custom Image:

As we have seen in the previous blog we can modify or create our own code to display custom images on TFT screen of PSoC 6.

Let's get started with code that needs to be modified.

First, start with main_cm4.c file :

void ShowBitmap(void)
{
    /* Set background color to black and clear screen */
    GUI_SetBkColor(GUI_BLACK);
    GUI_Clear();


    /* Display the bitmap image on the screen */
    GUI_DrawBitmap(&bmdefault, 0, 4); // here you need to define the name of the image (bmdefault)


    /* Set font size, font color to black */
    GUI_SetFont(GUI_FONT_16B_1);
    GUI_SetColor(GUI_BLACK);


    /* Set text mode to transparent, underlined and center aligned */
    GUI_SetTextMode(GUI_TM_TRANS);
    GUI_SetTextAlign(GUI_TA_HCENTER);
    GUI_SetTextStyle(GUI_TS_UNDERLINE);


    /* Print the page title text */
    //GUI_DispStringAt("Bitmap Display Text", 160, 10);
}

But still, we have not defined this image reference --> here directly we have used it in code.

The reference that needs to be defined in bitmaps.h

#ifndef __BITMAPS_H
#define __BITMAPS_H


#include <project.h>
#include "GUI.h"


/* Reference to bitmap images */
extern GUI_CONST_STORAGE GUI_BITMAP bmdefault;  //need to define image name same as with you added into Resource file
extern GUI_CONST_STORAGE GUI_BITMAP bmKS1241172;  
extern GUI_CONST_STORAGE GUI_BITMAP bmCypressLogoFullColor_PNG_316pixels;


#endif /* __BITMAPS_H */


/* [] END OF FILE */

Till now we have defined Image and used that image into code.

Ques:

How image will be stored into PSoC 6 memory and how it will be displayed on TFT screen.

For that, we need to convert our image into 320*213 scale (X-axis* Y-axis)

Then need to convert that image into Bitmap for EmWin library compatible so that the controller/system can process it and display it into TFT screen using this EmWin library. You read more about the library from this link.

Here is an image that I have created to display. Which I have defined as "default" in the code sample.