分享一款GUI开发神器

关注+星标公众,不错过精彩内容

f4de0836c88ad72a6ec18e1e7c23f750.gif

转自 | 嵌入式大杂烩

GT-HMI

GT-HMI(Human Machine Interface) 国产开源 GUI 框架及永久免费设计软件。

gitee:https://gitee.com/genitop/GT-HMI-Engine

官网:https://www.hmi.gaotongfont.cn/sy

开源许可协议:MIT

它提供创建具有易于使用的图形元素,精美的视觉效果和低内存占用的嵌入式 GUI 所需的一切。针对国内市场及用户需求,使用习惯进行了优化设计,为国内工程师量身打造!

产品由中国高通 GENITOP 倾心打造,继承了中国高通 30 年的汉显技术及汉字技术积累。产品分为上位机 GT-HMI Designer 和下位机 GT-HMI Engine。

GT HMI Designer是一款功能强大的嵌入式人机界面设计软件。它提供直观的可视化设计界面,支持多种常用控件和丰富的交互功能。此外,它还支持多国语言界面设计和强大的仿真功能。通过GT HMI Designer,可以轻松设计出美观、交互性强的界面,满足各种应用场景的需求。

GT HMI Engine是一款功能强大、高性能、多平台、多语言、稳定可靠的嵌入式人机界面引擎,提供丰富的控件和强大的交互功能。

特性

  • 上位机设计软件 GT-HMI Designer 永久免费,下位机技术框架 GT-HMI Engine 开源,使用无拘束;

  • GT-HMI Designer 内嵌下位机技术框架编译器,可自动生成下位机代码;

  • 提供 GT-HMI 模块,已适配 GT-HMI 上下位机软件及驱动,可以用于前期开发调试,也可以直接作为显示模块使用;

  • 多平台兼容,移植便捷;

  • 上位机设计软件 GT-HMI Designer;

  • 可直接生成交互代码,免去写代码的繁琐工作;

  • 模拟器仿真即见即所得;

  • 内置了大量常用的组件,如按钮、文本框、进度条、单选框等;

  • 支持高通全系列点阵/矢量字库,支持中外文及小语种,多种字号及字体;

  • 内置中英文及数字输入法;

  • 持续更新的 GUI 示例库和 UI 资源库;

  • 下位机技术框架 GT-HMI Engine;

  • 纯 C 语言编写,使用无门槛;

  • 小巧高效,不限平台,最小仅需 24K RAM+32K FLASH,可运行在 Cortex-ARM M0\M3 等小资源平台;

  • 移植便捷,切换平台只需移植定时器、TP 和 LCD 接口,并提供移植教程及示例;

  • 丰富详实的例程,配套的开发套件易于上手;

  • 支持自定义功能开发,可用 GT-HMI Engine 自定义控件和功能,组合进 GT-HMI Designer 生成的标准代码;

  • 带系统(如 RTOS、Linux 等)和裸机均可使用。

软件架构

软件架构说明

目录说明
doc/相关文档说明资料
driver/底层驱动相关的移植代码
examples/控件调用示例
sources/gui 内部使用的 images 素材                                   
test/单元测试代码
src/gui 框架代码
|-gt_conf.h配置
|-core/gui 核心代码
|-extra/拓展控件
|-font/字体
|-hal/中间件,中间层
|-others/不好分类的代码
|-utils/工具类
|-widgets/控件
|-|-gt_conf_widgets.h                      控件开关宏 

演示示例

87316215d1e9cbbfe76200f08add4ba8.png

1ae02760f40ef8035a033ee5764ff81b.png

多国语言示例

#include "gt_ui.h"


// screen_home
gt_obj_st * screen_home = NULL;
static gt_obj_st * lab1 = NULL;
static gt_obj_st * rect1 = NULL;
static gt_obj_st * btn1 = NULL;
static gt_obj_st * btn2 = NULL;
static gt_obj_st * btn3 = NULL;
static gt_obj_st * btn4 = NULL;
static gt_obj_st * btn5 = NULL;
static gt_obj_st * btn7 = NULL;
static gt_obj_st * btn8 = NULL;
static gt_obj_st * btn9 = NULL;
static gt_obj_st * btn10 = NULL;

static void btn1_0_cb(gt_event_st * e) {
    gt_init_screen_1();
}

static void btn2_0_cb(gt_event_st * e) {
    gt_init_screen_2();
}

static void btn3_0_cb(gt_event_st * e) {
    gt_init_screen_3();
}

static void btn4_0_cb(gt_event_st * e) {
    gt_init_screen_4();
}

static void btn5_0_cb(gt_event_st * e) {
    gt_init_screen_5();
}

static void btn7_0_cb(gt_event_st * e) {
    gt_init_screen_7();
}

static void btn8_0_cb(gt_event_st * e) {
    gt_init_screen_8();
}

static void btn9_0_cb(gt_event_st * e) {
    gt_init_screen_9();
}

static void btn10_0_cb(gt_event_st * e) {
    gt_init_screen_10();
}

void gt_init_screen_home(void)
{
    screen_home = gt_obj_create(NULL);
    gt_screen_set_bgcolor(screen_home, gt_color_hex(0xFFFFFF));
    // lab1
    lab1 = gt_label_create(screen_home);
    gt_obj_set_pos(lab1, 295, 16);
    gt_obj_set_size(lab1, 118, 40);
    gt_label_set_font_color(lab1, gt_color_hex(0x000000));
    gt_label_set_font_size(lab1, 24);
    gt_label_set_font_family_cn(lab1, 16);
    gt_label_set_font_align(lab1, GT_ALIGN_LEFT);
    gt_label_set_text(lab1, "语言设置");
    // rect1
    rect1 = gt_rect_create(screen_home);
    gt_obj_set_pos(rect1, 8, 55);
    gt_obj_set_size(rect1, 660, 1);
    gt_rect_set_radius(rect1, 0);
    gt_rect_set_bg_color(rect1, gt_color_hex(0xdbdbdb));
    gt_rect_set_color_border(rect1, gt_color_hex(0xdbdbdb));
    gt_rect_set_fill(rect1, 1);
    gt_rect_set_border(rect1, 0);
    // btn1
    btn1 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn1, 29, 76);
    gt_obj_set_size(btn1, 160, 43);
    gt_btn_set_font_color(btn1, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn1, 24);
    gt_btn_set_font_family_cn(btn1, 16);
    gt_btn_set_font_family_en(btn1, 84);
    gt_btn_set_font_align(btn1, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn1, 5, 0);
    gt_btn_set_font_thick_en(btn1, 30);
    gt_btn_set_font_thick_cn(btn1, 30);
    gt_btn_set_font_gray(btn1, 1);
    gt_btn_set_text(btn1, "中文");
    gt_btn_set_color_background(btn1, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn1, 8);
    gt_obj_add_event_cb(btn1, btn1_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    // btn2
    btn2 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn2, 264, 76);
    gt_obj_set_size(btn2, 160, 43);
    gt_btn_set_font_color(btn2, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn2, 24);
    gt_btn_set_font_family_cn(btn2, 16);
    gt_btn_set_font_family_en(btn2, 84);
    gt_btn_set_font_align(btn2, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn2, 5, 0);
    gt_btn_set_font_thick_en(btn2, 30);
    gt_btn_set_font_thick_cn(btn2, 30);
    gt_btn_set_font_gray(btn2, 1);
    gt_btn_set_text(btn2, "日语");
    gt_btn_set_color_background(btn2, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn2, 8);
    gt_obj_add_event_cb(btn2, btn2_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    // btn3
    btn3 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn3, 489, 76);
    gt_obj_set_size(btn3, 160, 41);
    gt_btn_set_font_color(btn3, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn3, 24);
    gt_btn_set_font_family_cn(btn3, 16);
    gt_btn_set_font_family_en(btn3, 84);
    gt_btn_set_font_align(btn3, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn3, 5, 0);
    gt_btn_set_font_thick_en(btn3, 30);
    gt_btn_set_font_thick_cn(btn3, 30);
    gt_btn_set_font_gray(btn3, 1);
    gt_btn_set_text(btn3, "韩语");
    gt_btn_set_color_background(btn3, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn3, 8);
    gt_obj_add_event_cb(btn3, btn3_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    // btn4
    btn4 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn4, 29, 158);
    gt_obj_set_size(btn4, 160, 43);
    gt_btn_set_font_color(btn4, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn4, 24);
    gt_btn_set_font_family_cn(btn4, 16);
    gt_btn_set_font_family_en(btn4, 41);
    gt_btn_set_font_align(btn4, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn4, 5, 0);
    gt_btn_set_text(btn4, "英语");
    gt_btn_set_color_background(btn4, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn4, 8);
    gt_obj_add_event_cb(btn4, btn4_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn5
    btn5 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn5, 263, 158);
    gt_obj_set_size(btn5, 160, 43);
    gt_btn_set_font_color(btn5, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn5, 24);
    gt_btn_set_font_family_cn(btn5, 16);
    gt_btn_set_font_family_en(btn5, 53);
    gt_btn_set_font_align(btn5, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn5, 5, 0);
    gt_btn_set_text(btn5, "法语");
    gt_btn_set_color_background(btn5, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn5, 8);
    gt_obj_add_event_cb(btn5, btn5_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn7
    btn7 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn7, 30, 238);
    gt_obj_set_size(btn7, 160, 43);
    gt_btn_set_font_color(btn7, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn7, 24);
    gt_btn_set_font_family_cn(btn7, 16);
    gt_btn_set_font_family_en(btn7, 53);
    gt_btn_set_font_align(btn7, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn7, 5, 0);
    gt_btn_set_text(btn7, "西班牙语");
    gt_btn_set_color_background(btn7, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn7, 8);
    gt_obj_add_event_cb(btn7, btn7_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn8
    btn8 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn8, 263, 238);
    gt_obj_set_size(btn8, 160, 43);
    gt_btn_set_font_color(btn8, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn8, 24);
    gt_btn_set_font_family_cn(btn8, 16);
    gt_btn_set_font_family_en(btn8, 41);
    gt_btn_set_font_align(btn8, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn8, 5, 0);
    gt_btn_set_text(btn8, "泰语");
    gt_btn_set_color_background(btn8, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn8, 8);
    gt_obj_add_event_cb(btn8, btn8_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn9
    btn9 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn9, 490, 238);
    gt_obj_set_size(btn9, 160, 43);
    gt_btn_set_font_color(btn9, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn9, 24);
    gt_btn_set_font_family_cn(btn9, 16);
    gt_btn_set_font_family_en(btn9, 75);
    gt_btn_set_font_align(btn9, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn9, 5, 0);
    gt_btn_set_text(btn9, "阿拉伯语");
    gt_btn_set_color_background(btn9, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn9, 8);
    gt_obj_add_event_cb(btn9, btn9_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn10
    btn10 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn10, 489, 158);
    gt_obj_set_size(btn10, 160, 43);
    gt_btn_set_font_color(btn10, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn10, 24);
    gt_btn_set_font_family_cn(btn10, 16);
    gt_btn_set_font_family_en(btn10, 60);
    gt_btn_set_font_align(btn10, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn10, 5, 0);
    gt_btn_set_text(btn10, "俄语");
    gt_btn_set_color_background(btn10, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn10, 8);
    gt_obj_add_event_cb(btn10, btn10_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    gt_disp_load_scr_anim(screen_home, GT_SCR_ANIM_TYPE_NONE, 500, 0, true);

}

矢量字库示例

921e6c98036dcbfe20b43072ca26d1da.png

7e57ad9b1b0868771cf774c0d5bf9ed6.png

#include "gt_ui.h"


// screen_home
gt_obj_st * screen_home = NULL;
static gt_obj_st * lab1 = NULL;
static gt_obj_st * rect1 = NULL;
static gt_obj_st * btn1 = NULL;
static gt_obj_st * btn2 = NULL;
static gt_obj_st * btn3 = NULL;
static gt_obj_st * btn4 = NULL;
static gt_obj_st * btn5 = NULL;
static gt_obj_st * btn7 = NULL;
static gt_obj_st * btn8 = NULL;
static gt_obj_st * btn9 = NULL;
static gt_obj_st * btn10 = NULL;

static void btn1_0_cb(gt_event_st * e) {
    gt_init_screen_1();
}

static void btn2_0_cb(gt_event_st * e) {
    gt_init_screen_2();
}

static void btn3_0_cb(gt_event_st * e) {
    gt_init_screen_3();
}

static void btn4_0_cb(gt_event_st * e) {
    gt_init_screen_4();
}

static void btn5_0_cb(gt_event_st * e) {
    gt_init_screen_5();
}

static void btn7_0_cb(gt_event_st * e) {
    gt_init_screen_7();
}

static void btn8_0_cb(gt_event_st * e) {
    gt_init_screen_8();
}

static void btn9_0_cb(gt_event_st * e) {
    gt_init_screen_9();
}

static void btn10_0_cb(gt_event_st * e) {
    gt_init_screen_6();
}

void gt_init_screen_home(void)
{
    screen_home = gt_obj_create(NULL);
    gt_screen_set_bgcolor(screen_home, gt_color_hex(0xFFFFFF));
    // lab1
    lab1 = gt_label_create(screen_home);
    gt_obj_set_pos(lab1, 207, 10);
    gt_obj_set_size(lab1, 309, 40);
    gt_label_set_font_color(lab1, gt_color_hex(0x000000));
    gt_label_set_font_size(lab1, 24);
    gt_label_set_font_family_cn(lab1, 80);
    gt_label_set_font_align(lab1, GT_ALIGN_LEFT);
    gt_label_set_font_thick_en(lab1, 30);
    gt_label_set_font_thick_cn(lab1, 30);
    gt_label_set_font_gray(lab1, 4);
    gt_label_set_text(lab1, "矢量字库,灰度与多字形");
    // rect1
    rect1 = gt_rect_create(screen_home);
    gt_obj_set_pos(rect1, 8, 55);
    gt_obj_set_size(rect1, 660, 1);
    gt_rect_set_radius(rect1, 0);
    gt_rect_set_bg_color(rect1, gt_color_hex(0xdbdbdb));
    gt_rect_set_color_border(rect1, gt_color_hex(0xdbdbdb));
    gt_rect_set_fill(rect1, 1);
    gt_rect_set_border(rect1, 0);
    // btn1
    btn1 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn1, 33, 78);
    gt_obj_set_size(btn1, 160, 43);
    gt_btn_set_font_color(btn1, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn1, 24);
    gt_btn_set_font_family_cn(btn1, 80);
    gt_btn_set_font_family_en(btn1, 84);
    gt_btn_set_font_align(btn1, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn1, 0, 0);
    gt_btn_set_font_thick_en(btn1, 30);
    gt_btn_set_font_thick_cn(btn1, 30);
    gt_btn_set_font_gray(btn1, 4);
    gt_btn_set_text(btn1, "中文宋体");
    gt_btn_set_color_background(btn1, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn1, 8);
    gt_obj_add_event_cb(btn1, btn1_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    // btn2
    btn2 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn2, 266, 76);
    gt_obj_set_size(btn2, 160, 43);
    gt_btn_set_font_color(btn2, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn2, 24);
    gt_btn_set_font_family_cn(btn2, 80);
    gt_btn_set_font_family_en(btn2, 84);
    gt_btn_set_font_align(btn2, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn2, 0, 0);
    gt_btn_set_font_thick_en(btn2, 30);
    gt_btn_set_font_thick_cn(btn2, 30);
    gt_btn_set_font_gray(btn2, 4);
    gt_btn_set_text(btn2, "中文黑体");
    gt_btn_set_color_background(btn2, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn2, 8);
    gt_obj_add_event_cb(btn2, btn2_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    // btn3
    btn3 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn3, 493, 76);
    gt_obj_set_size(btn3, 160, 41);
    gt_btn_set_font_color(btn3, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn3, 24);
    gt_btn_set_font_family_cn(btn3, 80);
    gt_btn_set_font_family_en(btn3, 84);
    gt_btn_set_font_align(btn3, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn3, 0, 0);
    gt_btn_set_font_thick_en(btn3, 30);
    gt_btn_set_font_thick_cn(btn3, 30);
    gt_btn_set_font_gray(btn3, 4);
    gt_btn_set_text(btn3, "英文斜体");
    gt_btn_set_color_background(btn3, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn3, 8);
    gt_obj_add_event_cb(btn3, btn3_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    // btn4
    btn4 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn4, 33, 160);
    gt_obj_set_size(btn4, 160, 43);
    gt_btn_set_font_color(btn4, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn4, 24);
    gt_btn_set_font_family_cn(btn4, 80);
    gt_btn_set_font_family_en(btn4, 41);
    gt_btn_set_font_align(btn4, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn4, 0, 0);
    gt_btn_set_font_thick_en(btn4, 30);
    gt_btn_set_font_thick_cn(btn4, 30);
    gt_btn_set_font_gray(btn4, 4);
    gt_btn_set_text(btn4, "英文手写体");
    gt_btn_set_color_background(btn4, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn4, 8);
    gt_obj_add_event_cb(btn4, btn4_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn5
    btn5 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn5, 265, 160);
    gt_obj_set_size(btn5, 160, 43);
    gt_btn_set_font_color(btn5, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn5, 24);
    gt_btn_set_font_family_cn(btn5, 80);
    gt_btn_set_font_family_en(btn5, 53);
    gt_btn_set_font_align(btn5, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn5, 0, 0);
    gt_btn_set_font_thick_en(btn5, 30);
    gt_btn_set_font_thick_cn(btn5, 30);
    gt_btn_set_font_gray(btn5, 4);
    gt_btn_set_text(btn5, "日文黑体");
    gt_btn_set_color_background(btn5, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn5, 8);
    gt_obj_add_event_cb(btn5, btn5_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn7
    btn7 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn7, 32, 240);
    gt_obj_set_size(btn7, 160, 43);
    gt_btn_set_font_color(btn7, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn7, 24);
    gt_btn_set_font_family_cn(btn7, 80);
    gt_btn_set_font_family_en(btn7, 53);
    gt_btn_set_font_align(btn7, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn7, 0, 0);
    gt_btn_set_font_thick_en(btn7, 30);
    gt_btn_set_font_thick_cn(btn7, 30);
    gt_btn_set_font_gray(btn7, 4);
    gt_btn_set_text(btn7, "俄文");
    gt_btn_set_color_background(btn7, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn7, 8);
    gt_obj_add_event_cb(btn7, btn7_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn8
    btn8 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn8, 267, 240);
    gt_obj_set_size(btn8, 160, 43);
    gt_btn_set_font_color(btn8, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn8, 24);
    gt_btn_set_font_family_cn(btn8, 80);
    gt_btn_set_font_family_en(btn8, 41);
    gt_btn_set_font_align(btn8, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn8, 0, 0);
    gt_btn_set_font_thick_en(btn8, 30);
    gt_btn_set_font_thick_cn(btn8, 30);
    gt_btn_set_font_gray(btn8, 4);
    gt_btn_set_text(btn8, "泰文");
    gt_btn_set_color_background(btn8, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn8, 8);
    gt_obj_add_event_cb(btn8, btn8_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn9
    btn9 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn9, 494, 240);
    gt_obj_set_size(btn9, 160, 43);
    gt_btn_set_font_color(btn9, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn9, 24);
    gt_btn_set_font_family_cn(btn9, 80);
    gt_btn_set_font_family_en(btn9, 75);
    gt_btn_set_font_align(btn9, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn9, 0, 0);
    gt_btn_set_font_thick_en(btn9, 30);
    gt_btn_set_font_thick_cn(btn9, 30);
    gt_btn_set_font_gray(btn9, 4);
    gt_btn_set_text(btn9, "阿拉伯文");
    gt_btn_set_color_background(btn9, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn9, 8);
    gt_obj_add_event_cb(btn9, btn9_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    // btn10
    btn10 = gt_btn_create(screen_home);
    gt_obj_set_pos(btn10, 495, 160);
    gt_obj_set_size(btn10, 160, 43);
    gt_btn_set_font_color(btn10, gt_color_hex(0x000000));
    gt_btn_set_font_size(btn10, 24);
    gt_btn_set_font_family_cn(btn10, 80);
    gt_btn_set_font_family_en(btn10, 60);
    gt_btn_set_font_align(btn10, GT_ALIGN_CENTER_MID);
    gt_btn_set_space(btn10, 0, 0);
    gt_btn_set_font_thick_en(btn10, 30);
    gt_btn_set_font_thick_cn(btn10, 30);
    gt_btn_set_font_gray(btn10, 4);
    gt_btn_set_text(btn10, "韩文黑体");
    gt_btn_set_color_background(btn10, gt_color_hex(0xddeeff));
    gt_btn_set_radius(btn10, 8);
    gt_obj_add_event_cb(btn10, btn10_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);


    gt_disp_load_scr_anim(screen_home, GT_SCR_ANIM_TYPE_NONE, 500, 0, true);

}

幻灯片示例动画

3c2d303f348d0726518a1e9a743df9a6.gif
#include "gt_ui.h"


// screen_home
gt_obj_st * screen_home = NULL;
static gt_obj_st * lab1 = NULL;
static gt_obj_st * img1 = NULL;
static gt_obj_st * player1 = NULL;
static gt_obj_st * svg1 = NULL;
static gt_obj_st * svg2 = NULL;

static void svg1_0_cb(gt_event_st * e) {
    gt_player_turn_prev(player1);
}

static void svg2_0_cb(gt_event_st * e) {
    gt_player_turn_next(player1);
}

void gt_init_screen_home(void)
{
    screen_home = gt_obj_create(NULL);
    gt_screen_set_bgcolor(screen_home, gt_color_hex(0xFFFFFF));
    // lab1
    lab1 = gt_label_create(screen_home);
    gt_obj_set_pos(lab1, 223, 71);
    gt_obj_set_size(lab1, 96, 51);
    gt_label_set_font_color(lab1, gt_color_hex(0x6e6e6e));
    gt_label_set_font_size(lab1, 32);
    gt_label_set_font_family_cn(lab1, 19);
    gt_label_set_font_align(lab1, GT_ALIGN_LEFT);
    gt_label_set_text(lab1, "风速");
    // img1
    img1 = gt_img_create(screen_home);
    gt_obj_set_pos(img1, 157, 75);
    gt_obj_set_size(img1, 42, 40);
    gt_img_set_src(img1, "f:img_42x40_9.png");
    // player1
    player1 = gt_player_create(screen_home);
    gt_obj_set_pos(player1, 153, 136);
    gt_obj_set_size(player1, 161, 66);
    gt_player_add_item(player1, "f:img_161x66_4.png", sizeof("f:img_161x66_4.png"));
    gt_player_add_item(player1, "f:img_161x66_5.png", sizeof("f:img_161x66_5.png"));
    gt_player_add_item(player1, "f:img_161x66_6.png", sizeof("f:img_161x66_6.png"));
    gt_player_add_item(player1, "f:img_161x66_7.png", sizeof("f:img_161x66_7.png"));
    gt_player_add_item(player1, "f:img_161x66_8.png", sizeof("f:img_161x66_8.png"));
    gt_player_set_type(player1, GT_PLAYER_TYPE_IMG);
    gt_player_set_mode(player1, GT_PLAYER_MODE_LOOP);
    /  svg1
    svg1 = gt_img_create(screen_home);
    gt_obj_set_pos(svg1, 76, 149);
    gt_obj_set_size(svg1, 48, 48);
    gt_img_set_src(svg1, "f:img_48x48_minus_0_3.png");
    gt_obj_add_event_cb(svg1, svg1_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    // svg2
    svg2 = gt_img_create(screen_home);
    gt_obj_set_pos(svg2, 341, 148);
    gt_obj_set_size(svg2, 48, 48);
    gt_img_set_src(svg2, "f:img_48x48_plus_0_4.png");
    gt_obj_add_event_cb(svg2, svg2_0_cb, GT_EVENT_TYPE_INPUT_RELEASED, NULL);
    gt_disp_load_scr_anim(screen_home, GT_SCR_ANIM_TYPE_NONE, 500, 0, true);

}

键盘控件示例动画

1090fd3dcc36724406963cc4a3b94331.png

#include "gt_ui.h"


// screen_home
gt_obj_st * screen_home = NULL;
static gt_obj_st * input1 = NULL;
static gt_obj_st * keyboard1 = NULL;

void gt_init_screen_home(void)
{
    screen_home = gt_obj_create(NULL);
    gt_screen_set_bgcolor(screen_home, gt_color_hex(0xFFFFFF));
    // input1
    input1 = gt_input_create(screen_home);
    gt_obj_set_pos(input1, 117, 38);
    gt_obj_set_size(input1, 249, 84);
    gt_input_set_font_color(input1, gt_color_hex(0x000000));
    gt_input_set_font_size(input1, 16);
    gt_input_set_font_family_cn(input1, 3);
    gt_input_set_font_family_en(input1, 39);
    gt_input_set_font_align(input1, GT_ALIGN_LEFT);
    gt_input_set_placeholder(input1, "placeholder");
    gt_input_set_bg_color(input1, gt_color_hex(0xffffff));
    // keyboard1
    keyboard1 = gt_keypad_create(screen_home);
    gt_obj_set_pos(keyboard1, 89, 138);
    gt_obj_set_size(keyboard1, 309, 170);
    gt_keypad_set_font_color(keyboard1, gt_color_hex(0xffffff));
    gt_keypad_set_font_size(keyboard1, 16);
    gt_keypad_set_font_align(keyboard1, GT_ALIGN_CENTER_MID);
    gt_keypad_set_color_background(keyboard1, gt_color_hex(0x242424));
    gt_keypad_set_target(keyboard1, input1);
    gt_disp_load_scr_anim(screen_home, GT_SCR_ANIM_TYPE_NONE, 500, 0, true);

}

图片按钮控件示例动画

70c6f8ae57cece3f161a12398140ad0b.gif
#include "gt_ui.h"


/** screen_home */
gt_obj_st * screen_home = NULL;
static gt_obj_st * imgbtn1 = NULL;

void gt_init_screen_home(void)
{
    screen_home = gt_obj_create(NULL);
    gt_screen_set_bgcolor(screen_home, gt_color_hex(0xFFFFFF));
    /** imgbtn1 */
    imgbtn1 = gt_imgbtn_create(screen_home);
    gt_obj_set_pos(imgbtn1, 142, 136);
    gt_obj_set_size(imgbtn1, 185, 50);
    gt_imgbtn_set_src(imgbtn1, "f:img_185x50_10.png");
    gt_imgbtn_set_src_press(imgbtn1, "f:img_185x50_3.png");
    gt_disp_load_scr_anim(screen_home, GT_SCR_ANIM_TYPE_NONE, 500, 0, true);

}

------------ END ------------

9ac30ae580e83fb9333773e25d4a4b0e.gif

●专栏《嵌入式工具

●专栏《嵌入式开发》

●专栏《Keil教程》

●嵌入式专栏精选教程

关注公众号回复“加群”按规则加入技术交流群,回复“1024”查看更多内容。

点击“阅读原文”查看更多分享。

05-23 16:00:49.311 25132-25512 A0c0d0/JSAPP I result {"code":200,"msg":"操作成功","data":[{"id":1,"name":"华为Mate 60 Pro","model":"ALN-AL80","imageUrl":"https://img.alicdn.com/imgextra/i3/2213047591560/O1CN01QNx6eB1NOWu3oeUfn_!!2213047591560.jpg_q50.jpg_.webp","shortDescription":"麒麟9000S 卫星通信","price":6999.00,"subsidizedPrice":6499.00,"sales":15000,"rating":4.90,"stock":500,"isAvailable":0,"brand":"华为"},{"id":2,"name":"华为P60 Art","model":"NOH-AN80","imageUrl":"https://img.alicdn.com/imgextra/i4/2609173245/O1CN011h2L1I1ZqGCdlsYlJ_!!2609173245.jpg_q50.jpg_.webp","shortDescription":"超聚光XMAGE影像","price":7988.00,"subsidizedPrice":7588.00,"sales":12000,"rating":4.80,"stock":300,"isAvailable":0,"brand":"华为"},{"id":3,"name":"华为nova 12","model":"BAC-AL00","imageUrl":"https://picasso.alicdn.com/imgextra/O1CNA1bnbda21Vuba4TjLYB_!!2838892713-0-psf.jpg_.webp","shortDescription":"前置双摄人像","price":2999.00,"subsidizedPrice":2699.00,"sales":50000,"rating":4.70,"stock":1000,"isAvailable":0,"brand":"华为"},{"id":4,"name":"荣耀Magic6 Pro","model":"PGT-AN30","imageUrl":"https://img.alicdn.com/imgextra/i2/263726286/O1CN01ko93gt1wJ2hQAORAB_!!4611686018427380942-0-item_pic.jpg_.webp","shortDescription":"骁龙8 Gen3 青海湖电池","price":5699.00,"subsidizedPrice":5399.00,"sales":25000,"rating":4.80,"stock":600,"isAvailable":0,"brand":"荣耀"},{"id":5,"name":"荣耀X50 GT","model":"ANY-AN00","imageUrl":"https://img.alicdn.com/imgextra/i3/3851598352/O1CN01UHPfyv2BZGwPnHUlx_!!0-item_pic.jpg_q50.jpg_.webp","shortDescription":"1.5K护眼曲屏","price":1999.00,"subsidizedPrice":1799.00,"sales":80000,"rating":4.60,"stock":1500,"isAvailable":0,"brand":"荣耀"},{"id":6,"name":"荣耀90 Pro","model":"REA-AN20","imageUrl":"https://img.alicdn.com/imgextra/i3/1114511827/O1CN01r3ngr41PMof7MhFhY_!!4611686018427386323-0-item_pic.jpg_q50.jpg_.webp","shortDescription":"2亿像素写真相机","price":3299.00,"subsidizedPrice":2999.00,"sales":40000,"rating":4.70,"stock":800,"isAvailable":0,"brand":"荣耀"},{"id":7,"name":"荣耀Play7T Pro","model":"CMA-AN40","imageUrl":"https://img.alicdn.com/imgextra/i1/1907069314/O1CN019jd3kt2IfrnZ6J0AH_!!1907069314.jpg_q50.jpg_.webp","shortDescription":"40W快充 OLED屏","price":1799.00,"subsidizedPrice":1599.00,"sales":120000,"rating":4.50,"stock":2000,"isAvailable":0,"brand":"荣耀"},{"id":8,"name":"华为畅享70 Pro","model":"CMA-AN70","imageUrl":"https://android-api.oss-cn-beijing.aliyuncs.com/logo.jpg","shortDescription":"7000mAh长续航","price":1599.00,"subsidizedPrice":1399.00,"sales":150000,"rating":4.40,"stock":3000,"isAvailable":0,"brand":"华为"},{"id":9,"name":"华为Mate X5","model":"TET-AN80","imageUrl":"https://android-api.oss-cn-beijing.aliyuncs.com/logo.jpg","shortDescription":"折叠屏 玄武钢化","price":12999.00,"subsidizedPrice":12499.00,"sales":5000,"rating":4.90,"stock":100,"isAvailable":0,"brand":"华为"},{"id":10,"name":"荣耀Magic Vs2","model":"CMA-AN80","imageUrl":"https://android-api.oss-cn-beijing.aliyuncs.com/logo.jpg","shortDescription":"轻薄折叠屏","price":8999.00,"subsidizedPrice":8499.00,"sales":10000,"rating":4.70,"stock":300,"isAvailable":0,"brand":"荣耀"},{"id":11,"name":"iPhone 15 Pro Max","model":"A3108","imageUrl":"https://android-api.oss-cn-beijing.aliyuncs.com/logo.jpg","shortDescription":"A17 Pro 钛金属","price":9999.00,"subsidizedPrice":null,"sales":80000,"rating":4.80,"stock":200,"isAvailable":0,"brand":"苹果"},{"id":12,"name":"iPhone 15","model":"A3092","imageUrl":"https://android-api.oss-cn-beijing.aliyuncs.com/logo.jpg","shortDescription":"A16芯片 灵动岛","price":5999.00,"subsidizedPrice":null,"sales":150000,"rating":4.80,"stock":5000,"isAvailable":0,"brand":"苹果"},{"id":13,"name":"iPhone 15 Plus","model":"A3096","imageUrl":"https://android-api.oss-cn-beijing.aliyuncs.com/logo.jpg","shortDescription":"6.7英寸大屏","price":6999.00,"subsidizedPrice":null,"sales":80000,"rating":4.70,"stock":3000,"isAvailable":0,"brand":"苹果"},{"id":14,"name":"iPhone SE 4","model":"A2785","imageUrl":"https://android-api.oss-cn-beijing.aliyun 05-23 16:00:49.311 25132-25512 A0c0d0/JSAPP I result [object Object] 05-23 16:00:49.359 25132-25512 C03f00/ArkCompiler E [ArkRuntime Log] TypeError: is not callable 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log]Lifetime: 0.000000s 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log]Js-Engine: ark 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log]page: pages/Index.js 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log]Error message: is not callable 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log]Stacktrace: 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log] at forEachUpdateFunction (/devcloud/slavespace/usr1/081f8aba80800f0f0fcec015bd66c7e0/harmony_code/codearts_workspace/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:4352:1) 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log] at anonymous (entry|entry|1.0.0|src/main/ets/pages/Index.ts:144:13) 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log] at updateFunc (/devcloud/slavespace/usr1/081f8aba80800f0f0fcec015bd66c7e0/harmony_code/codearts_workspace/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:6812:1) 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log] at UpdateElement (/devcloud/slavespace/usr1/081f8aba80800f0f0fcec015bd66c7e0/harmony_code/codearts_workspace/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:6514:1) 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log] at anonymous (/devcloud/slavespace/usr1/081f8aba80800f0f0fcec015bd66c7e0/harmony_code/codearts_workspace/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:6741:1) 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log] at updateDirtyElements (/devcloud/slavespace/usr1/081f8aba80800f0f0fcec015bd66c7e0/harmony_code/codearts_workspace/foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/engine/stateMgmt.js:6736:1) 05-23 16:00:49.361 25132-25512 C03900/Ace E [Engine Log] at rerender (entry|entry|1.0.0|src/main/ets/pages/Index.ts:152:9)
05-24
### 关于 HarmonyOS 或 ArkCompiler 中 'is not callable' 的 TypeError 问题 在 HarmonyOS 和 ArkCompiler 开发环境中遇到 `TypeError: is not callable` 错误通常表明尝试调用的对象并非函数或可调用对象。这种错误可能由多种原因引起,例如变量名冲突、未正确定义的回调函数或者对 `null` 值进行了不当操作。 #### 可能的原因分析 1. **变量覆盖了内置方法或函数** 如果开发者无意间将某些全局名称重新赋值为其他类型的值(如 `null`),可能会导致该错误。例如,在 JavaScript 环境下,如果重写了 `Array.prototype.map` 方法并将其设置为 `null`,那么后续对该方法的调用会失败[^4]。 2. **异步编程中的上下文丢失** 在使用箭头函数或其他形式绑定事件处理器时,如果没有正确处理 this 上下文,则可能导致原本期望作为函数执行的内容变成了 undefined 或 null。这种情况常见于 React 组件生命周期方法以及 Vue.js 自定义指令场景中[^5]。 3. **API 返回值异常** 当从外部服务获取数据时,若返回的结果不符合预期结构——比如应该是一个函数却实际接收到的是 null ——也会引发此类错误消息提示[^6]。 4. **Null 安全性问题** 类似于 MySQL 数据库设计里提到允许字段为空 (NULL)[^2], 在程序逻辑层面也需要考虑如何优雅地应对可能出现的 Null 情况。如果不小心试图直接调用了被赋予 Null 的属性或方法就会抛出类似的运行期错误。 #### 解决方案建议 针对以上几种可能性提供相应的解决方案如下: - #### 验证目标是否确实具备可调用特性 在每次准备调用前先验证其类型是否属于 Function 。可以利用 typeof 运算符来进行初步判断。 ```javascript const maybeFunction = someCondition ? () => {} : null; if(typeof maybeFunction === 'function') { maybeFunction(); } ``` - #### 使用 Optional Chaining 提高健壮性 ES2020 引入了一个新功能叫做 optional chaining (`?.`) ,它可以帮助我们更简洁安全地访问深层嵌套对象而不用担心中间环节存在 null/undefined 导致崩溃风险。 ```javascript let result = possiblyUndefinedObject ?. methodToCall(); // 不会报错即使object不存在 ``` - #### 明确区分命名空间内的同名实体 尽量避免自定义标识符与框架内部保留字发生碰撞;另外通过模块化组织代码也能有效减少这类隐患的发生几率。 - #### 调试工具辅助定位具体位置 利用断点调试技术逐步跟踪哪一部分代码最终触发了这个特定异常,并针对性修复源头问题所在之处。 ```javascript try{ potentiallyProblematicCode(); }catch(e){ console.error('Error occurred:', e); } ``` ### 总结 通过对 HarmonyOS / ArkCompiler 平台开发过程中常见的 “not callable” 类型错误现象剖析可知,这往往涉及到基本概念理解偏差或者是编码习惯上的疏漏所致。采取适当预防措施加上良好实践能够显著降低遭遇这些问题的概率。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值