GDI

This module provides the graphic API to display strings, images and basic shapes. More...

Overview

This module provides the graphic API to display strings, images and basic shapes.

Terms and Acronyms

Terms	Details
GDI	Graphics Device Interface. For more information, please refer to Wikipedia.

How to use this module

• Step 1: Create a UI project.
  Create a UI project according to the LinkIt for RTOS get started guide.
  Example:
  Copy "project\mt2523_hdk\templates\freertos_initialize_main_features" to "project\mt2523_hdk\apps".
  Change the folder name to "basic_ui".
• Step 2: Prepare the UI resource.
  For more information about the resource files, please refer to "\tools\PC_tool_Win1.zip\Resgen_tool\readme.txt".
  Note: Launch the resource tool in a Windows environment. Use the resource tool to create the resource files and copy all resource files (the output files of the resource tool) to the project folder on Linux.
  Example:
  • Configure the font resource.
    Enable English language (#define MMI_LANG_ENGLISH) in the file ".\Resgen_tool\custom_resource\font\language_config.txt".
    Add an English font file (MTK_English_22.bdf) and the MediaTek proprietary font file (MTK_Proprietary_14.bdf) in the file ".\Resgen_tool\custom_resource\font\res_gen_font.cpp".
    

    int main(int argc, char* argv[])
    {
        InitialFontEngine(FONT_DATA_OUTPUT_PATH);
    
        // Add an English font file.
        AddFont(
            ("English"), ("*#0044#"), ("en-US"),
            FONT_DATA_FILE_PATH(MTK_English_22.bdf),
            MCT_SMALL_FONT | MCT_MEDIUM_FONT | MCT_LARGE_FONT,
            0, 0);
    
        // Add MediaTek proprietary font file.
        AddFont(
            "gMTKProprietaryFont", NULL, NULL,
            FONT_DATA_FILE_PATH(MTK_Proprietary_14.bdf),
            MCT_SMALL_FONT | MCT_MEDIUM_FONT | MCT_LARGE_FONT,
            0, 0);
    
        GenerateFontResFile();
        DeinitialFontEngine();
        return 0;
    }

  • Configure the image resource.
    Put all image files (if any) in the folder ".\Resgen_tool\custom_resource\images".
    
  • Compile the resource files.
    Run the following command in resource gen folder.
    >make resgen
  • Copy the output resource files.
    Copy all output resource files to the project folder on Linux.

       basic_ui\inc:
           custom_image_data_resource.h
           custom_resource_def.h
           L_English_small.h
           L_gMTKProprietaryFont_small.h
       basic_ui\src:
           custom_image_data_resource.c
           custom_image_map.c
           custom_image_resource.c
           FontRes.c
     

  • Add resource files in the Makefile.
    

    # Resource files
    APP_FILES = $(APP_PATH_SRC)/custom_image_data_resource.c \
                $(APP_PATH_SRC)/custom_image_map.c \
                $(APP_PATH_SRC)/custom_image_resource.c\
                $(APP_PATH_SRC)/FontRes.c

• Step 3: Add the UI module.
  
  • Add GDI module Makefile.
    

    #gdi files
    -include $(SOURCE_DIR)/middleware/MTK/gdi/module.mk

  • Add the UI screen file.
    

    # Basic UI files
    APP_FILES += $(APP_PATH_SRC)/main_screen.c
    APP_FILES += $(APP_PATH_SRC)/ui_demo_task.c

  • Check the other modules.
    

    # Keypad configuration, if the keypad is required.
    -include $(SOURCE_DIR)/driver/board/mt25x3_hdk/keypad/module.mk
    # Touch panel configuration, if the touch panel is required.
    -include $(SOURCE_DIR)/driver/board/mt25x3_hdk/touch_panel/module.mk
    #Backlight
    CFLAGS += -I$(SOURCE_DIR)/driver/board/mt25x3_hdk/backlight

• Step 4: Create the UI task.
  

  • int main(void)
    {
        system_init();
        demo_app_start();// Create a UI task in your main function.
        vTaskStartScheduler();
        for (;;);
    }
    
    // Initialize the UI task.
    void ui_task_main(void*arg)
    {
        ui_task_message_struct_t queue_item;
        ui_task_cntx.event_queue = xQueueCreate(UI_TASK_QUEUE_SIZE , sizeof( ui_task_message_struct_t ));
    
        main_screen_init(); // Initialize the main screen.
        main_screen_show(); // Display the main screen.
    
        while (1) {
            if (xQueueReceive(ui_task_cntx.event_queue, &queue_item, portMAX_DELAY)) {
                ui_task_msg_handler(&queue_item);
            }
        }
    }
    
    // Create a UI task.
    TaskHandle_t demo_app_start()
    {
        TaskHandle_t task_handler;
        xTaskCreate((TaskFunction_t) ui_task_main,
                     UI_TASK_NAME,
                     UI_TASK_STACK_SIZE/(( uint32_t )sizeof( StackType_t )),
                     NULL,
                     UI_TASK_PRIORITY,
                     &task_handler );
        return task_handler;
    }

• Step 5: Display the main screen.
  

  • #include "gdi.h"
    #include "gdi_font_engine.h"
    #include "custom_resource_def.h"
    #include "main_screen.h"
    #include "memory_attribute.h"
    #include "mt25x3_hdk_lcd.h"
    #include "bsp_lcd.h"
    #include "mt25x3_hdk_backlight.h"
    
    #define DEFAULT_LCD_W 320
    #define DEFAULT_LCD_H 320
    static uint32_t LCD_WIDTH = 320;
    static uint32_t LCD_HEIGHT = 320;
    ATTR_RWDATA_IN_NONCACHED_RAM_4BYTE_ALIGN unsigned char layer_buffer[DEFAULT_LCD_W*DEFAULT_LCD_H*2];
    
    void main_screen_init(){
        bsp_lcd_init(0xF800);
        bsp_backlight_init();
        bsp_lcd_get_parameter(LCM_IOCTRL_QUERY__LCM_HEIGHT, &LCD_WIDTH); // Get the LCD size.
        bsp_lcd_get_parameter(LCM_IOCTRL_QUERY__LCM_WIDTH, &LCD_HEIGHT);
        gdi_init(LCD_WIDTH, LCD_HEIGHT, GDI_COLOR_FORMAT_16, layer_buffer); // Initialize the GDI buffer.
    }
    
    uint8_t* convert_string_to_wstring(uint8_t* string)
    {
        static uint8_t wstring[50];
        int32_t index = 0;
        if (!string) {
            return NULL;
        }
        while (*string) {
            wstring[index] = *string;
            wstring[index + 1] = 0;
            string++;
            index+=2;
        }
        return wstring;
    }
    
    void main_screen_show (){
        gdi_font_engine_display_string_info_t param;
    
        // Set the font size and color.
        gdi_font_engine_color_t font_color = {0, 255, 255, 255};
        gdi_font_engine_set_font_size(GDI_FONT_ENGINE_FONT_MEDIUM);
        gdi_font_engine_set_text_color(font_color);
    
        // Set the screen background color.
        gdi_draw_filled_rectangle(0,0,LCD_WIDTH,LCD_HEIGHT,gdi_get_color_from_argb(0, 0, 0, 0));
    
        // Draw an image (source ID IMAGE_ID_BT_DISCONNECT_BMP) at position of (20, 140).
        gdi_image_draw_by_id(20,140,IMAGE_ID_BT_DISCONNECT_BMP);
    
        // Draw the string "Hello World!" at position of (100, 150).
        param.x = 100;
        param.y = 150;
        param.string = convert_string_to_wstring((uint8_t*) "Hello World!");
        param.length = strlen("Hello World!");
        param.baseline_height = -1;
        gdi_font_engine_display_string(&param);
    
        // Update the screen.
        gdi_lcd_update_screen(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    }

• Step 6: Check the UI output.
  Basic UI screen will be shown on the HDK's display.
  
  

Modules
	Font engine
	This section provides APIs to get string information and draw string with specified font size and font color.
	Graphics
	This section provides APIs to display images and basic shapes, such as points, lines, rectangles, circles and polygons.