AWTK 开源串口屏开发(18) - 用 C 语言自定义命令

AWTK-HMI 内置了不少模型,利用这些模型开发应用程序,不需要编写代码即可实现常见的应用。但是,有时候我们需要自定义一些命令,以实现一些特殊的功能。

本文档介绍如何使用 C 语言自定义命令。

在这里插入图片描述

1. 实现 hmi_model_cmd_t 接口

1.1 exec 函数

本函数用于执行命令。函数原型如下:

typedef ret_t (*hmi_model_cmd_exec_t)(hmi_model_cmd_t* cmd, tk_object_t* obj, const char* args);

参数:

  • cmd: 命令对象
  • obj: 默认模型对象
  • args: 参数

返回:

  • RET_OBJECT_CHANGED 表示模型对象发生了变化,界面自动更新。
  • RET_OK 表示命令执行成功,但模型对象没有发生变化。
  • 其他值表示命令执行失败。

1.2 can_exec 函数

本函数用于判断命令是否可以执行。函数原型如下:

typedef bool_t (*hmi_model_cmd_can_exec_t)(hmi_model_cmd_t* cmd, tk_object_t* obj, const char* args);

参数:

  • cmd: 命令对象
  • obj: 默认模型对象
  • args: 参数

返回:

  • TRUE 表示命令可以执行。
  • FALSE 表示命令不能执行。

1.3 声明命令对象

命令对象一般定义为全局变量。

示例

static const hmi_model_cmd_t s_inc_temp_cmd = { 
    .name = "inc_temp",
    .exec = inc_temp_exec,
    .can_exec = inc_temp_can_exec,
};

2.注册命令

调用函数 hmi_model_add_cmd 注册命令。

ret_t custom_cmds_init(void) {
  tk_object_t* model = hmi_service_get_default_model();
  hmi_model_add_cmd(model, &s_inc_temp_cmd);

  return RET_OK;
}

3.完整示例

下面的代码实现了一个命令 inc_temp,用于增加温度属性的值。温度的值小于 100 时,命令可以执行。

#define PROP_TEMP "温度"

static ret_t inc_temp_exec(hmi_model_cmd_t* cmd, tk_object_t* obj, const char* args) {
  int temp = tk_object_get_prop_int(obj, PROP_TEMP, 0);
  tk_object_set_prop_int(obj, PROP_TEMP, temp + 1);

  return RET_OBJECT_CHANGED;
}

static bool_t inc_temp_can_exec(hmi_model_cmd_t* cmd, tk_object_t* obj, const char* args) {
  int temp = tk_object_get_prop_int(obj, PROP_TEMP, 0);
  return temp < 100;
}

static const hmi_model_cmd_t s_inc_temp_cmd = { 
    .name = "inc_temp",
    .exec = inc_temp_exec,
    .can_exec = inc_temp_can_exec,
};

ret_t custom_cmds_init(void) {
  tk_object_t* model = hmi_service_get_default_model();
  hmi_model_add_cmd(model, &s_inc_temp_cmd);

  return RET_OK;
}

完整示例请参考:demo_custom_cmd

  • 8
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ElementUI 的 `el-cascader` 组件提供了一个 `options` 属性,可以接收一个数组来渲染级联选择器的选项。因此,我们可以通过自定义这个数组来实现自定义级联选择器的数据源。 `element-china-area-data` 是一个开源的中国省市区级联选择器数据源,我们可以通过引入这个数据源来快速实现中国地区选择功能。具体实现步骤如下: 1. 安装 `element-china-area-data`:可以通过 npm 或 yarn 安装,例如: ``` npm install element-china-area-data --save ``` 2. 在需要使用级联选择器的组件中引入 `element-china-area-data` ```javascript import chinaAreaData from 'element-china-area-data'; ``` 3. 自定义级联选择器的 options 数组,示例代码如下: ```javascript // 省份数据 const provinceOptions = chinaAreaData['86']; // 城市数据 const cityOptions = chinaAreaData[provinceValue]; // 区县数据 const districtOptions = cityOptions.find(item => item.value === cityValue).children; // 定义 options 数组 const options = [ { value: '86', label: '中国', children: provinceOptions.map(province => ({ value: province.value, label: province.label, children: province.children.map(city => ({ value: city.value, label: city.label, children: city.children.map(district => ({ value: district.value, label: district.label, })), })), })), }, ]; ``` 注:`provinceValue` 和 `cityValue` 是当前省份和城市的值,可以通过 `el-cascader` 组件的 `v-model` 双向绑定获取。 4. 在 `el-cascader` 组件中使用自定义的 options 数组: ```html <el-cascader v-model="selected" :options="options" :props="{ value: 'value', label: 'label', children: 'children' }" ></el-cascader> ``` 注:`:props` 属性用于指定级联选择器的 value、label 和 children 属性名,与 options 数组的数据结构对应。 通过以上步骤,我们就可以快速实现一个中国省市区级联选择器,并可自定义数据源。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值