HOLTEK HT32F52367 GUI Builder User Guide

HT32F52367 GUI Builder

Product Information

Specifications

  • Product Name: HT32 GUI-Builder
  • Revision: V1.00
  • Date: June 13, 2025

Product Usage Instructions

1. Overview

The HT32 GUI-Builder is a software tool designed to assist in
creating graphical user interfaces for development boards.

2. System Requirements

The system requirements for using the HT32 GUI-Builder are:

  • Operating System: Windows 7 or later
  • Processor: Intel Core i3 or equivalent
  • Memory: 4GB RAM
  • Storage: 500MB available space

3. Hardware Support

The HT32 GUI-Builder supports development boards compatible with
Holtek Firmware Library.

4. Installation Instructions

To install the HT32 GUI-Builder, download the setup file from
the official website and follow the on-screen instructions.

5. Functional Summary

The software provides various widgets and tools to create
interactive user interfaces.

6. Quick Start

  1. Open the HT32 GUI-Builder software.
  2. Create a new project by selecting the board part number and
    screen parameters.
  3. Drag widgets from the toolbar to the canvas area.
  4. Add image and font resources.
  5. Adjust widget attributes such as position, size, color, and
    font.
  6. Preview the design in the simulator window.
  7. Generate code, compile, and download it to the development
    board for testing.

7. Detailed Functional Introduction

7.1 Menu

The menu functions of the HT32 GUI-Builder include:

  • [New]: Create a new screen configuration.
  • [Recent]: Access recently opened files.
  • [Open]: Open a screen configuration
    project.
7.2 Software Interface

The software interface consists of a canvas area for designing
user interfaces, a toolbar for selecting widgets, and an attribute
panel for adjusting widget properties.

Frequently Asked Questions (FAQ)

Q: Can I use custom fonts in my project?

A: Yes, the HT32 GUI-Builder includes an LVGL font converter for
using custom fonts. Refer to the Font Converter chapter for more
information.

“`

HT32 GUI-Builder User Guide
Revision: V1.00 Date: June 13, 2025

HT32 GUI-Builder User Guide
Table of Contents
1. Overview……………………………………………………………………………………………… 3 2. System Requirements ………………………………………………………………………….. 3 3. Hardware Support………………………………………………………………………………… 3 4. Installation Instructions ……………………………………………………………………….. 3 5. Functional Summary ……………………………………………………………………………. 4 6. Quick Start…………………………………………………………………………………………… 4 7. Detailed Functional Introduction…………………………………………………………… 5
7.1 Menu ………………………………………………………………………………………………………………………5 7.2 Software Interface …………………………………………………………………………………………………….8
8. Font Converter …………………………………………………………………………………… 10 9. Settings……………………………………………………………………………………………… 12 10. File Structure……………………………………………………………………………………. 14 11. Example Description ………………………………………………………………………… 15 12. FAQ …………………………………………………………………………………………………. 19
Q1: How to improve the delay problem in screen refresh? ………………………………………………… 19 Q2: How to deal with the large size image?……………………………………………………………………..20 Q3: How to increase the memory space to add more widgets to the screen?………………………. 20 Q4: The generated code does not run correctly?……………………………………………………………… 21 Q5: Why is the EBI data width of the HT32F52367 8-bit? …………………………………………………. 21 Q6: How to add display driver or input device?…………………………………………………………………21

Rev. 1.00

2

June 13, 2025

HT32 GUI-Builder User Guide
1. Overview
The HT32 GUI-Builder is a graphical interface builder designed for Holtek’s 32-bit microcontrollers to help developers quickly design and deploy human-machine interface applications. With intuitive dragand-drop operations, users can easily configure visual elements such as buttons, text labels, icons, etc., and complete complex GUI designs without having to write large amounts of interface code. This software supports Holtek’s 32-bit microcontroller series and perfectly combines with LVGL (Light and Versatile Graphics Library) to provide rich graphic widgets and efficient rendering engine. The HT32 GUI-Builder can automatically generate project files that comply with the LVGL framework. Users can simply import the generated project into the development environment, then compile, download and run the project, significantly reducing development time.
2. System Requirements
· HT32 microcontroller: Flash Memory 256K and above / SRAM 32K and above · Operating system: Windows 64-bit OS · Development environment: Keil Vision / HT32-IDE
3. Hardware Support
The HT32 GUI-Builder supports the following Holtek MCUs: · HT32F52367: 256K Flash / 32K RAM · HT32F12365: 256K Flash / 64K RAM · HT32F12366: 256K Flash / 128K RAM · HT32F42386: 512K Flash / 196K RAM · HT32F49395: 1024K Flash / 224K RAM Supported LCDs: · ESK32-A2A31: 2.8-inch (320×240) TFT-LCD · ESK32-A4A31: 5-inch (800×480) TFT-LCD · ESK32-A4A32: 4.3-inch (480×272) TFT-LCD
4. Installation Instructions
· Install on Microsoft WIN7/WIN8/WIN10/WIN11 operating system. · The system needs to install the .NET Framework 3.5. If it has not been installed, please download
and install it from Microsoft’s official website: https://www.microsoft.com/zh-tw/download/details.aspx?id=21 · During the installation process, follow the prompts and keep clicking “Next” to complete the installation.

Rev. 1.00

3

June 13, 2025

HT32 GUI-Builder User Guide

5. Functional Summary
The HT32 GUI-Builder includes the following main functions: · Drag-and-drop widgets: It supports a wide range of drag-and-drop widgets, making it easy for
users to quickly design the interface. · Multi-screen support: It supports to switch between multiple screens. · Image and font management: Images can be stored in the internal Flash memory or the SD card.
Fonts can be customized via the Font Converter. · Simulator view: Users can preview the UI design effect in real time through the simulator.
Command Menu

Used Widgets
Available Widgets

Screen

Widget Common Attributes
Widget Special Attributes
Widget Style

Information Display & Resource Area

Widget Event

6. Quick Start
(1) Open the HT32 GUI-Builder to enter the main interface. (2) Click [New], then select the development board part number / screen and other parameters in the
pop-up Settings window to create a project. (3) Select the desired widgets (e.g. button, label, progress bar, etc.) from the left toolbar and drag
them to the canvas area.
(4) Add image/font resources. (5) Select any widget on the canvas and adjust its attributes, such as position, size, color, pattern,
font, etc., on the attribute panel on the right side of the software interface. (6) Click [Play] to view the design in the simulator window and interact with the screen with the
keyboard and mouse.
(7) Click [Code] to generate a complete program, use it with the Holtek Firmware Library, compile the program in the development environment and download it to the development board for testing.
(8) If the screen is partially changed, it supports to only generate the UI code to avoid overwriting the code already written by the user.

Rev. 1.00

4

June 13, 2025

HT32 GUI-Builder User Guide

7. Detailed Functional Introduction

7.1 Menu

Function

[New] [Recent]

Description Create a new screen configuration.
Recently opened files.

[Open] Open a screen configuration project (.hgb). Resource files [project].Assets and [project].Fonts must be in the same directory.
[Import] The HT32 GUI-Builder has integrated samples of completed event processing. Projects generated through the Import function can generate event processing files synchronously when generating code, thus completing the functional development quickly.
[Save] Save the screen configuration project (.hgb). The image and font files in the resource area will be saved to the [project].Assets and [project].Fonts directories at the same time. [+Scrn] Create a new screen. The main program will load the first screen, and users need to switch to other screens in the code by themselves.

Rev. 1.00

5

June 13, 2025

Function [-Scrn] [Copy] [Paste] [Cut] [Delete]

HT32 GUI-Builder User Guide
Description Delete the selected screen. Copy the selected widget. Paste the copied widget. Cut the selected widget. Delete the selected widget.

[Font] LVGL font converter. Refer to the “Font Converter” chapter. [Code] Generate a Keil project. The generated folder should be copied to {Holtek Standard Peripheral Firmware Library}application{any folder}, then execute _CreateProject.bat under this folder.

Rev. 1.00

6

June 13, 2025

HT32 GUI-Builder User Guide
Function
[UI Code] Regenerate the screen-related code.

Description
Relevant files include: lvgl_ui.c lvgl_ui.h lvgl_screen_n.c lvgl_screen_n.h And the files under the Images/Fonts folders
Do not add your own code to these files to avoid the code being overwritten by the HT32 GUI-Builder.
Configuration Screen

[Play] Simulate the currently selected screen. After entering the simulation screen, you can use the mouse to trigger the event of the widget, or you can use a physical keyboard to enter content directly.

Simulation Screen

[Setting] Set hardware-related parameters. Refer to the “Settings” chapter for more details.

Rev. 1.00

7

June 13, 2025

7.2 Software Interface
Function

HT32 GUI-Builder User Guide
Description

Basic/Controller [Widget] Drag and drop the desired widgets to the LCD screen.

Parent/Child Widget [Group] and Widget Ordering Grouping is done by dragging the child widget to the parent widget in the [Used Widgets] area. When the parent widget moves, the child widget will move with it. In addition to [Group], you can also change the order of objects by dragging them.
[Assets]/[Fonts] Area Click [Add Image Files] to add images to the [Assets] area before they can be used in the widget. The default conversion format for images added to the [Assets] area is 16-bit true color. Users can right-click on the image to select 1/2/4/8-bit indexed color format to reduce the space required for the image. These formats can be selected for low color requirements such as icons. Fonts are added to the [Fonts] area via the Font Converter, please refer to the “Font Converter” chapter for more details.

Rev. 1.00

8

June 13, 2025

HT32 GUI-Builder User Guide
Function
Widget [Common Attributes]/[Special Attributes] Area This area includes the widget position/size, flags and states. For more descriptions about [Flags] and [States], please refer to the LVGL official website. In addition, different widgets have their own attributes, the right figure shows the attributes of Label. Please also refer to the LVGL document for the detailed attributes of each widget.
Widget [Style] Area The appearance and color of widgets, etc., can be changed with Style Settings. The yellow box shows the common style settings for all widgets, while the others are different for each widget. A widget consists of several parts. For example, a Switch consists of Main, Indicator and Knob, each of which can be set independently. The widget can also be configured to have different styles for different states. For example, the Disabled or Pressed states can have different style settings.
Widget [Event] Area After the desired events are selected, only the framework to receive the events is generated in lvgl_event.c. Users can perform different tasks after the widget receives the event. For more details, refer to the “Example Description” chapter.

Description

[Screen] Zoom In/Out Area Move the mouse cursor to the LCD screen area, hold down the Ctrl key and scroll up the middle mouse button wheel to zoom in the screen, scroll down to zoom out the screen area.

Screen

Rev. 1.00

9

June 13, 2025

HT32 GUI-Builder User Guide
8. Font Converter
The LVGL uses UTF-8 encoding to display Unicode characters for all languages. Users can create C array or binary code from any TTF or WOFF fonts via the Font Converter. You can select Unicode character range and specify the BPP (bits per pixel) to produce new fonts for your GUI projects.

Browse Font Folder Select the folder where the font files locate.
Select Font Resource Select the font listed in the Font folder from the drop-down menu.
Size Define the font size.
Name The name used to set font in the program.
BPP Determine the edge blurring of letters. The fewer the number of bits, the more blurred the letter edges.
Range Customize a letter range, i.e. the range and/or characters you want to include, e.g. 0x20-0x7F.
Symbols The list of characters to include. For example, Hello Holtek ABC0123ÁÉ.
Convert After the fonts are successfully created, a font information file (.fnt), a .c file and a .bin file will be generated under the [Fonts] folder, and the fonts will appear in the [Fonts] area at the same time. If the selected font file does not contain the font of the input symbol, an error will be displayed. The .fnt file records the font information. Users can open this file to edit relevant parameters and then regenerate the .c file and .bin file. The HT32 GUI-Builder will include the .c file to set fonts, if you want to use the .bin file, please refer to the LVGL official website.

Rev. 1.00

10

June 13, 2025

HT32 GUI-Builder User Guide
[Fonts] Area Users can right-click on a font in the [Fonts] area to delete the font.
Note: Fonts are project-based, and the created custom font file is saved when saving the project. If it is not saved, it will be cleared when a new project is opened.
Open Open the font information file (.fnt). Font Setting If a widget requires to set the font attribute, the [Text] settings will appear in the [Widget Style] area. In addition to the custom fonts in the drop-down list, there are also the montserrat fonts provided by LVGL to choose from.
Note that the HT32 GUI-Builder generates the source code file in UTF-8 with a Byte Order Mark (BOM), and Keil will ignore the –locale and –[no_] multibyte_chars options and interpret the file as UTF-8 or UTF-16. However, if the file is modified and saved in the Keil Editor, it will be saved as the encoding mode set in the configuration interface, as shown below. Even if the encoding mode has been set to UTF8, it is not possible to compile UTF-8 because there is no BOM.

Rev. 1.00

11

June 13, 2025

9. Settings

HT32 GUI-Builder User Guide

Width/Height Set the length and width of the screen which must match the hardware.
Depth Set the color depth which must match the hardware.
Rotation Set the LCD direction.
Theme Mode Set the base theme of the LVGL to dark mode or light mode.
LVGL Select LVGL version. There are currently version 8.3.8 and version 9.2.2 available.
Board Select the currently supported hardware and display driver.
SD FatFs If the [SD FatFs] option is enabled, you can select whether to fetch the widget’s image from the SD card by checking the [FAT] option. If you choose to fetch image from the SD card, you need to copy the .bin file from the [Images] folder to the SD card before executing the firmware. The disk drive letter for SD card is S.

Rev. 1.00

12

June 13, 2025

HT32 GUI-Builder User Guide

Img Folder If [SD FatFs] is enabled and [Img Folder] is checked, when the widget’s image is selected to be fetched from the SD card, the path changes to S:/[Image Folder], such as S:/EX5/Image.bin If the [Img Folder] option is not checked, the image file should be placed under the S: root directory.
External Storage · ESK32-A4A10(m4)+ESK32-A4A31(16-bit) core: HT32F42386 · ESK32-A4A10(m4)+ESK32-A4A32(16-bit) core: HT32F42386 When the above demo boards are selected, you can select External SRAM, then the generated program will configure the full-screen display buffer in the external SRAM to speed up the display. · ESK32-A4A11(m4)+ESK32-A4A31(16-bit) core: HT32F49395 · ESK32-A4A11(m4)+ESK32-A4A32(16-bit) core: HT32F49395 When selecting the above demo boards, users can select External SRAM as well as External Flash. If External Flash is selected, all the generated image data will be stored in the External Flash.
Add Input Device Different boards support different input devices. · ESK32-2x001A(m0)+ESK32-A2A31(8-bit) core: HT32F52367 · ESK32-2x001A(m3)+ESK32-A2A31(16-bit) core: HT32F12366 · ESK32-2x001A(m4)+ESK32-A2A31(16-bit) core: HT32F42386 For example, select the above demo boards and use Wakeup/Key1/Key2 to implement the Keypad and Button functions.
Keypad: Wakeup = Enter key Key1 = Previous key Key2 = Next key
Button: In the lv_port_indev.c file, modify btn_points under lv_port_indev_init to set the position on the screen where the event occurs when a key is pressed.
Note: If the ESK32-2x001A(m0)+ESK32-A2A31(8-bit) board is selected, the EBI 8-bit data width will be used because of the hardware. Please refer to Q4 of the FAQ chapter for details.
· ESK32-A4A10(m4)+ESK32-A4A31(16-bit) core: HT32F42386 · ESK32-A4A10(m4)+ESK32-A4A32(16-bit) core: HT32F42386 · ESK32-A4A11(m4)+ESK32-A4A31(16-bit) core: HT32F49395 · ESK32-A4A11(m4)+ESK32-A4A32(16-bit) core: HT32F49395 When selecting the above demo boards, use Button0~2 to implement the Keypad and Button functions and use GT911 to implement the Touchpad and Mouse functions. Keypad:
Button0 = Enter key Button1 = Previous key Button2 = Next key · ESK32-31401(m4)+ESK32-A4A31(16-bit) core: HT32F49395 · ESK32-31401(m4)+ESK32-A4A32(16-bit) core: HT32F49395

Rev. 1.00

13

June 13, 2025

HT32 GUI-Builder User Guide
When selecting the above display boards, the Touchpad and Mouse functions are implemented with the GT911. For input devices that are not supported by the hardware, only frameworks are generated. For detailed instructions, refer to the “Example Description” chapter. Generated Color Formats The HT32 GUI-Builder supports five image color formats: True Color, Indexed 8 Bits, Indexed 4 Bits, Indexed 2 Bits and Indexed 1 Bit. Users can choose one of the color formats to apply to the screen. However, when generating code, users can select: (1) Output only the used color format
(2) Output the selected color formats
This makes it easier to adjust the color of the display during the firmware development.
10. File Structure
If you want to add your own display driver or input device, you need to first understand the project file structure generated by the HT32 GUI-Builder.

· main.c: Main program file · lvgl_ui.c/lvgl_screen.c: Screen widget-related file

Rev. 1.00

14

June 13, 2025

HT32 GUI-Builder User Guide
· lvgl_event.c: Event processing · [board]: Hardware-related drivers · [FatFs]: File system files · [Images]: Image files · [Fonts]: Font files · [lvgl-master]: LVGL library · Customizable drivers:
gpio.h: Display/touch and key pin definitions ht32_board_config.h: SD card interface pin definitions lcd_driver.h: Display driver function definition, including length/width and resolution. This file
also includes the .c files of the display driver source code and touch function source code. i2c1_gt911.c: Touch function source code, which is included in the lcd_driver.h file. icd_drvier_ssd1963: Display driver source code, which is included in the lcd_driver.h file. lv_port_indev.c: Input driver lv_port_disp.c: Display driver sdio_sd.c: SD card interface driver Users who want to define their own hardware interfaces need to modify the above files and complete the related functions in the .c file. The LVGL uses UTF-8 encoding to display Unicode characters for all languages, so the HT32 GUIBuilder generates the source code file in UTF-8 encoding with a Byte Order Mark (BOM). When regenerating the UI code, the following files are also regenerated: lvgl_ui.c lvgl_ui.h lvgl_screen_n.c lvgl_screen_n.h And the files under the Images/Fonts folders Do not add your own code to these files to avoid the code being overwritten by the HT32 GUI-Builder.
11. Example Description
This chapter takes the 2x001a-1.hgb (Keypad) as an example for description.
label_0

image_0

switch_0

button_0 & label_2

Rev. 1.00

15

label_1
button_1 & label_3
June 13, 2025

HT32 GUI-Builder User Guide
(1) label_0: Set the label attribute to Scroll Circular to make the characters run.
(2) Create font files. If there are Chinese characters in the label, you need to set the Chinese font. Use the font conversion tool to create the font for the five Chinese characters of ” “. As shown in the figure, the NotoSansTC_Regular_14 font will be generated.

(3) In TextText Font under Style, set the label font to NotoSansTC_Regular_14. (4) label_1: Set the label attribute to Scroll Circular to make the characters run.
Set the Text style under Style to red/center/underline/montserrat 28.

Rev. 1.00

16

June 13, 2025

HT32 GUI-Builder User Guide
(5) image_0: There are two ways to add an image to the screen. One is to drag the image directly from the [Assets] area to the screen. The other is to first add an Image widget by a drag-and-drop operation, and then select the image that has been added to the project in the Widget Special Attributes [Image] area. If the project has enabled the SD FatFs option, you can also choose whether to fetch the image from the file system. If the FAT option is checked, the .bin file in the [Images] folder needs to be copied to the SD card before the firmware is executed.

(6) Set label_2 as a child of button_0 and label_3 as a child of button_1 by drag-and-drop operations. (7) Select button_0 and check the CLICKED option under EVENT, same to button_1.
(8) Select Dark Mode and check KeyPad in [Settings].

Rev. 1.00

17

June 13, 2025

HT32 GUI-Builder User Guide
(9) Click [Save] to save the project, then click [Code] to generate code. (10) Copy the generated folder to {Holtek Standard Peripheral Firmware Library}application{any
folder}, and execute _CreateProject.bat to generate the Keil uVision IDE project. (11) lv_port_indev.c is the framework file of the input devices and can be modified according to the
hardware configuration. In this example, the HT32 GUI-Builder uses Key1/Key2/Wakeup on the ESK32-2x001A demo board to automatically generate the following code for KeyPad:

Key1 is the Previous key and pressing Key1 will move back to select a different widget. Key2 is the Next key and pressing Key2 will move on to select a different widget. Wakeup is the Enter key and pressing Wakeup will trigger the Click event.

Rev. 1.00

18

June 13, 2025

HT32 GUI-Builder User Guide
(12) lvgl_event.c is the framework file for the widget receiving an event, user can add the code in the red boxes as shown below, if button_0 is pressed, the Switch will be switched to On, if button_1 is pressed, the Switch will be switched back to Off.

Note: 2x001a-1 Example: For event processing, refer to lvgl_event.c in the folder. 2x001a-2 Example: For clock pointer rotation, refer to main.c in the folder. a4a10 Example: For text color and space setting, refer to lvgl_event.c in the folder.

12. FAQ
Q1: How to improve the delay problem in screen refresh?
(1) Adjust the display buffer size · The larger the display buffer, the more efficient the single refresh is, but it occupies more RAM space. · Set the buffer size in lv_port_disp_init(lv_port_disp.c): static lv_disp_draw_buf_t draw_buf_dsc_1; static lv_color_t buf_1[DISP_HOR_RES * 10]; lv_disp_draw_buf_init(&draw_buf_dsc_1, buf_1, NULL, DISP_HOR_RES * 10); disp_drv.flush_cb = disp_flush; disp_drv.draw_buf = &draw_buf_dsc_1; · Set the buffer size to at least the number of bits for a raw of screen (width* 1). · If the RAM is sufficient, set to 1/4 or more of the screen size.
(2) Reduce the refresh rate · Reduce the refresh rate of LVGL to minimize unnecessary redraws. · Modify LV_DISP_DEF_REFR_PERIOD(V8) or LV_DEF_REFR_PERIOD(V9) in the lv_conf.h file.
(3) Reduce the object layers · The more layers of widgets in LVGL, the more complex the rendering process becomes. · Minimize nested widgets.

Rev. 1.00

19

June 13, 2025

HT32 GUI-Builder User Guide

(4) Use transparency and style properly · Reduce unnecessary transparency: lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, 0); · Reduce the use of gradient backgrounds and complex styles (e.g. Shadow and Radius).

(5) Do not use animation
Animations may trigger frequent redraws, affecting performance.
The LVGL counts the widgets and areas that need to be redrawn at each refresh. Complex drawing with many invalid areas will result in longer processing intervals. Ensure that only the updated areas are redrawn, not the entire screen. If multiple animations update the same area at the same time, it will increase the number of unnecessary redraws, so you need to optimize the animation logic manually.

Q2: How to deal with the large size image?
The image may come from:
Variable in the program: It is usually a C array containing pixel data placed in the internal Flash. Externally stored files: Such as image files stored in the SD card. The project must support the file system.
A 320×240 image with a color depth of 16-bit requires 320×240×3 bytes, or up to 225K. It is impractical to store such a large image in the internal Flash.
If you check [SD FatFs] in [Settings] to enable the file system of SD card, the widget that needs an image can choose to fetch image from the SD card. Before executing the firmware, copy the .bin file from the [Images] folder to the SD card. However, since the images are from files, the system refresh speed is limited by the reading speed of the SD card. For example, when using the HT32F12366 @ 96MHz to read a 320×240 image, the speed is only about 4fps, which is unsuitable for fast and large-area refresh.

Q3: How to increase the memory space to add more widgets to the screen?

The code generated by the HT32 GUI-Builder sets the following parameters in lv_conf.h:

#define LV_MEM_CUSTOM 1

(V8)

#define LV_USE_STDLIB_MALLOC LV_STDLIB_CLIB

(V9)

This means to use standard C functions to manage memory: malloc/free/realloc, which needs to configure the [Heap] size.

The number of widgets that can be added varies depending on the widget type. Users can increase or decrease the [Heap] size according to their application needs.

Rev. 1.00

20

June 13, 2025

HT32 GUI-Builder User Guide
Q4: The generated code does not run correctly? A. If the [FAT] option has been selected in the image setting, ensure that the image files have been stored in the SD card and the path is correct. B. Check that whether too many widgets are added, resulting in insufficient space in the [Heap]. Please refer to Q3 to increase the [Heap] size. C. If the widget is set with shadow or radius, it will need a larger [Heap] size for calculation, please refer to Q3 to increase the [Heap] size as well.
Q5: Why is the EBI data width of the HT32F52367 8-bit? When the ESK32-2x001A board is paired with the HT32F52367, Key1 is pin-shared with EBI’s AD9. In order to prevent the screen from not working when the Button or Keypad input device is enabled, EBI 8-bit data width is used by default. The SW1 on the back of the screen module ESK32-A2A31 needs to be set to 1000 to support EBI 8-bit.

16-bit Mode

8-bit Mode

If the Button or Keypad input device is not enabled, user can modify lv_drvier.h to change the EBI data width to 16-bit to increase the refresh speed.

#ifndef TFT_BIT_MODE

#define TFT_BIT_MODE

(TFT_16_BIT_MODE)

#endif

Q6: How to add display driver or input device?
Take the ESK32-A4A31 5.0-inch (800×480) LCD capacitive touch panel supported by HT32 GUIBuilder as an example, the display driver IC is the SSD1963 and the touch driver IC is the GT911. · gpio.h: Display/touch and key pin definitions. · lcd_driver.h: Display driver function definition, including length/width and resolution. This file
also includes the .c files of the display driver source code and touch function source code.
#include “ht32.h” #include “gpio.h”

#define DISP_HOR_RES #define DISP_VER_RES #define BYTE_PER_PIXEL

480

Used in lv_port_disp.c to

272

calculate the display buffer size

3

#define LCD_NORMAL #define LCD_LEFT_90 #define LCD_RIGHT_90 #define LCD_ROTATE_180
#define TFT_DIRECTION

(0) //left to right, top to bottom (1) //top to bottom, right to left (2) //bottom to top, left to right (3) //right to left, bottom to top
(0)

The LCD driver must support four-direction switching; TFT_DIRECTION is used to define the screen direction

Rev. 1.00

21

June 13, 2025

HT32 GUI-Builder User Guide
void TFT_Init(void); void TFT_Config(void); void TFT_WriteRAMPrior(void); void TFT_WriteRAM(u32 RGB_Set); void TFT_SetDisplayArea(u16 Xstart, u16 Ystart, u16 Xend, u16 Yend);
TFT_Init is used to initialize EBI and pins, TFT_Config is used to initialize the TFT screen, these functions are called by disp_init in the lv_port_disp.c file. TFT_SetDisplayArea/ TFT_WriteRAMPrior/ TFT_WriteRAM are called by disp_flush in the lv_port_disp.c file, which are used to implement the screen refresh function.
#include “lcd_driver_st6201.c” It is used to implement the above five functions. #include “i2c1_gt911.c” Touch function source file void Touch_Init(void) bool is_pressed() void get_xy(lv_coord_t * x, lv_coord_t * y) Implement the above three functions to be called by the lv_port_indev.c file.
· icd_drvier_ssd1963: Display driver source code, which is included in the lcd_driver.h file. · i2c1_gt911.c: Touch function source code, which belongs to input device and is included in the
lcd_driver.h file. · lv_port_indev.c:
#ifdef _TOUCHPAD_ static void touchpad_init(void); static void touchpad_read(lv_indev_t * indev, lv_indev_data_t * data); static bool touchpad_is_pressed(void); static void touchpad_get_xy(int32_t * x, int32_t * y); #endif
#ifdef _MOUSE_ static void mouse_init(void); static void mouse_read(lv_indev_t * indev, lv_indev_data_t * data); static bool mouse_is_pressed(void); static void mouse_get_xy(int32_t * x, int32_t * y); #endif
Touchpad and Mouse are similar input devices.
touchpad_init/mouse_init calls Touch_Init to initialize the I2C/pins and GT911. touchpad_is_pressed/mouse_is_pressed calls is_pressed to determine whether the touch pad has been pressed or not.
touchpad_get_xy/mouse_get_xy calls get_xy to obtain the position where the touch pad is pressed. touchpad_read/mouse_read calls is_pressed and get_xy to obtain the state and position simultaneously.

Rev. 1.00

22

June 13, 2025

HT32 GUI-Builder User Guide

Copyright© 2025 by HOLTEK SEMICONDUCTOR INC. All Rights Reserved.
The information provided in this document has been produced with reasonable care and attention before publication, however, HOLTEK does not guarantee that the information is completely accurate. The information contained in this publication is provided for reference only and may be superseded by updates. HOLTEK disclaims any expressed, implied or statutory warranties, including but not limited to suitability for commercialization, satisfactory quality, specifications, characteristics, functions, fitness for a particular purpose, and non-infringement of any thirdparty’s rights. HOLTEK disclaims all liability arising from the information and its application. In addition, HOLTEK does not recommend the use of HOLTEK’s products where there is a risk of personal hazard due to malfunction or other reasons. HOLTEK hereby declares that it does not authorise the use of these products in life-saving, life-sustaining or safety critical components. Any use of HOLTEK’s products in life-saving/sustaining or safety applications is entirely at the buyer’s risk, and the buyer agrees to defend, indemnify and hold HOLTEK harmless from any damages, claims, suits, or expenses resulting from such use. The information provided in this document, including but not limited to the content, data, examples, materials, graphs, and trademarks, is the intellectual property of HOLTEK (and its licensors, where applicable) and is protected by copyright law and other intellectual property laws. No license, express or implied, to any intellectual property right, is granted by HOLTEK herein. HOLTEK reserves the right to revise the information described in the document at any time without prior notice. For the latest information, please contact us.

Rev. 1.00

23

June 13, 2025

Documents / Resources

HOLTEK HT32F52367 GUI Builder [pdf] User Guide
HT32F52367 GUI Builder, HT32F52367, GUI Builder, Builder

References

Leave a comment

Your email address will not be published. Required fields are marked *