目录
一、前言
awtk-widget-chart-view 是 AWTK 提供的图表自定义控件,该控件包含:曲线图、柱状图和饼图。前段时
间记录了该控件适配 AWTK-MVVM C版本的过程,具体请参考:awtk-widget-chart-view-mvvm C版本适配笔记,这次记录一下适配 JS 版本的过程。
AWTK是 ZLG 开发的开源 GUI 引擎,官网地址:https://www.zlg.cn/index/pub/awtk.html。
AWTK GitHub 仓库:http://github.com/zlgopen/awtk-mvvm
AWTK-MVVM是一套用C语言开发的,专门为嵌入式平台优化的MVVM框架。它实现了数据绑定、命令绑定和窗口导航等基本功能。
AWTK-MVVM GitHub 仓库:http://github.com/zlgopen/awtk-mvvm
二、适配 JS 版本的序列点数据(FIFO)
chart view 图表控件的绝大部分属性都可使用 awtk-mvvm 缺省的方法进行绑定,但 series 控件 fifo 属性比较特殊,它是一个自定义的先进先出队列,用于储存图表的序列点数据。因此,数据绑定时,需要指定一个特殊的 Model。C 语言中可以调用 serties_fifo_default_create() 接口创建该 Model;JS语言中则需使用 JS 的 Array,本项目所实现的自定义 binder 会将 Array 适配为 series 所需的 fifo。
简单理解,即基于 JS 的原生 Array 数据类型实现一个 C 版本的先进先出队列 FIFO,也就是 series_fifo_js ,此处基于 JerryScript 实现 JS 与 C 之间的适配。
JerryScript 是一个轻量级的 JavaScript 引擎,它可以运行在受限制的设备上,官网地址:https://jerryscript.net/。
2.1 series_fifo_js 的接口
series_fifo_js 的接口如下:
#ifndef TK_SERIES_FIFO_JS_H
#define TK_SERIES_FIFO_JS_H
#include "base/series_fifo.h"
#include "mvvm/jerryscript/object_js_default.h"
BEGIN_C_DECLS
struct _series_fifo_js_t;
typedef struct _series_fifo_js_t series_fifo_js_t;
typedef ret_t (*series_fifo_jsobj_set_t)(object_t* obj, jsvalue_t jsindex, jsvalue_t array);
/**
* @class series_fifo_js_t
* @parent series_fifo_t
*
* 将jerry script Array适配成series_fifo。
*
*/
struct _series_fifo_js_t {
series_fifo_t base;
/**
* @property {uint32_t} capacity
* @annotation ["readable"]
* FIFO的容量大小。
*/
uint32_t capacity;
/**
* @property {uint32_t} unit_size
* @annotation ["readable"]
* FIFO中单个元素的大小。
*/
uint32_t unit_size;
/**
* @property {uint32_t} capacity
* @annotation ["readable"]
* FIFO的容量大小。
*/
series_fifo_jsobj_set_t jsobj_set;
/*private*/
object_t* native_obj;
uint8_t* temp;
uint8_t* event_data;
};
/**
* @method series_fifo_js_create
* 创建series_fifo_js对象。
*
* @annotation ["constructor"]
* @param {object_t} native_obj jerry script Array的obj对象。
* @param {uint32_t} capacity FIFO的初始容量。
* @param {const char*} type FIFO数据类型。
*
* @return {object_t*} 返回object对象。
*/
object_t* series_fifo_js_create(object_t* native_obj, uint32_t capacity, const char* type);
/* helper function */
ret_t series_fifo_jsobj_set(object_t* obj, jsvalue_t jsindex, jsvalue_t array);
ret_t series_fifo_jsobj_push(object_t* obj, jsvalue_t array);
#define SERIES_FIFO_JS(obj) (series_fifo_js_t*)(obj)
END_C_DECLS
#endif /*TK_SERIES_FIFO_JS_H*/
2.1 series_fifo_js 的实现
series_fifo_js 的实现如下:
#include "tkc/mem.h"
#include "tkc/utils.h"
#include "tkc/value.h"
#include "series_fifo_js.h"
#include "base/series_fifo_default.h"
#define FIFO_DATA_VALUE "value"
#define FIFO_DATA_COLOR "color"
#define FIFO_DATA_MIN "min"
#define FIFO_DATA_MAX "max"
static int series_fifo_js_base_compare(object_t* obj, const void* a, const void* b) {
series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
return_value_if_fail(fifo != NULL, RET_BAD_PARAMS);
return memcmp(a, b, fifo->unit_size);
}
static void* series_fifo_js_default_get(object_t* obj, uint32_t index) {
series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
jsvalue_t elem = jsobj_get_prop_value_by_index(jsobj, index);
if (jsvalue_check(elem) == RET_OK) {
float_t data = 0;
jsvalue_t value = jsobj_get_prop_value(elem, FIFO_DATA_VALUE);
data = jsvalue_to_number(value);
memcpy(fifo->temp, &data, sizeof(float_t));
jsvalue_unref(value);
jsvalue_unref(elem);
}
return fifo->temp;
}
static void* series_fifo_js_colorful_get(object_t* obj, uint32_t index) {
series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
jsvalue_t elem = jsobj_get_prop_value_by_index(jsobj, index);
if (jsvalue_check(elem) == RET_OK) {
series_data_colorful_t data = {
0};
jsvalue_t value = jsobj_get_prop_value(elem, FIFO_DATA_VALUE);
jsvalue_t color = jsobj_get_prop_value(elem, FIFO_DATA_COLOR);
data.v = jsvalue_to_number(value);
data.c.color = jsvalue_to_number(color);
memcpy(fifo->temp, &data, sizeof(series_data_colorful_t));
jsvalue_unref(value);
jsvalue_unref(color);
jsvalue_unref(elem);
}
return fifo->temp;
}
static void* series_fifo_js_minmax_get(object_t* obj, uint32_t index) {
series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
jsvalue_t elem = jsobj_get_prop_value_by_index(jsobj, index);
if (jsvalue_check(elem) == RET_OK) {
series_data_minmax_t data = {
0};
jsvalue_t min_v = jsobj_get_prop_value(elem, FIFO_DATA_MIN);
jsvalue_t max_v = jsobj_get_prop_value(elem, FIFO_DATA_MAX);
data.min = jsvalue_to_number(min_v);
data.max = jsvalue_to_number(max_v);
memcpy(fifo->temp, &data, sizeof(series_data_minmax_t));
jsvalue_unref(min_v);
jsvalue_unref(max_v);
jsvalue_unref(elem);
}
return fifo->temp;
}
static uint8_t* series_fifo_js_prepare_set(object_t* obj, uint32_t* index, const void* data,
uint32_t* nr) {
int32_t i = 0;
int32_t over_nr = 0;
series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
uint32_t unit_size = fifo->unit_size;
uint8_t* start = (uint8_t*)(data);
jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
jsvalue_t shift = jsobj_get_prop_value(jsobj, "shift");
jsvalue_t args[1];
if (*nr > fifo->capacity) {
if (start != NULL) {
start += (*nr - fifo->capacity) * unit_size;
}
*nr = fifo->capacity;
}
over_nr = *index + *nr - fifo->capacity;
if (over_nr > 0) {
args[0] = JS_UNDEFINED;
for (i = 0; i < over_nr; i++) {
jsvalue_unref(jsfunc_call(shift, jsobj, args, 1));
}
*index -= over_nr;
jsvalue_unref(args[0]);
}
jsvalue_unref(shift);
return start;
}
static ret_t series_fifo_js_default_set(object_t* obj, uint32_t index, const void* data,
uint32_t nr) {
value_t v;
int32_t i = 0;
series_fifo_js_t* fifo = SERIES_FIFO_JS(obj);
uint32_t unit_size = fifo->unit_size;
jsvalue_t jsobj = object_get_prop_uint32(obj, JSOBJ_PROP_NATIVE_OBJ, 0);
jsvalue_t splice = jsobj_get_prop_value(jsobj, "splice");
uint8_t* start = series_fifo_js_prepare_set(obj, &index, data, &nr);
jsvalue_t args[3];
for (i = 0; i < nr; i++) {
float_t elem = 0;
if (start != NULL) {
memcpy(&elem, start + unit_size * i, unit_size);
}
args[0] = jsvalue_from_number(index + i);
args[1] = jsvalue_from_number(1);
args[2] = JS_EMPTY_OBJ;
value_set_float(&v, elem);
jsobj_set_prop(args[2], FIFO_DATA_VALUE, &v, NULL);
jsvalue_unref(jsfunc_call(splice, jsobj, args, 3));
jsvalue_unref(args[0]