quickjs調(diào)用lvgl函數(shù)的示例代碼
實現(xiàn)本次使用quickjs的最主要目的,就是通過程序動態(tài)加載js,然后調(diào)用lvgl函數(shù)庫,實現(xiàn)渲染。以達到類似小程序的效果。后續(xù)還會實現(xiàn)類似小程序效果,通過quickjs解析xml(html),編譯成js然后調(diào)用lvgl庫,實現(xiàn)界面渲染。通過quickjs會調(diào)用c語言提供的底層功能,如wifi、藍牙、串口uart、iic、isp、pwd、led等等硬件io功能。
下面寫一些例子,只做技術(shù)驗證
lvgl_export.h
#include <string.h> #include <stdlib.h> #include "quickjs-libc.h" #include "cutils.h" #include "lvgl.h" #define lv_obj_ptr_t uintptr_t extern JSModuleDef *js_init_module_lvgl(JSContext *ctx, const char *module_name); int JS_ToInt8(JSContext *ctx, int8_t *pres, JSValueConst val); int JS_ToUint8(JSContext *ctx, uint8_t *pres, JSValueConst val); int JS_ToInt16(JSContext *ctx, int16_t *pres, JSValueConst val); int JS_ToUint16(JSContext *ctx, uint16_t *pres, JSValueConst val); int JS_ToPointer(JSContext *ctx, lv_obj_ptr_t *pres, JSValueConst val); static inline JSValue JS_NewPointer(JSContext *ctx, lv_obj_ptr_t val);
lvgl_export.c
#include "lvgl_export.h" static JSValue lvgl_obj_create(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * parent = (lv_obj_t *)p; lv_obj_t * obj = lv_obj_create(parent); return JS_NewPointer(ctx, (lv_obj_ptr_t)obj); } static JSValue lvgl_label_create(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * parent = (lv_obj_t *)p; lv_obj_t * lbl = lv_label_create(parent); return JS_NewPointer(ctx, (lv_obj_ptr_t)lbl); } static JSValue lvgl_label_set_text(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * lbl = (lv_obj_t *)p; const char * str = JS_ToCString(ctx, argv[1]); lv_label_set_text(lbl, str); return JS_NULL; } static JSValue lvgl_scr_load(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * lbl = (lv_obj_t *)p; lv_scr_load(lbl); return JS_NULL; } static JSValue lvgl_obj_set_pos(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 3) { lv_coord_t x = 0; JS_ToInt16(ctx, &x, argv[1]); lv_coord_t y = 0; JS_ToInt16(ctx, &y, argv[2]); lv_obj_set_pos(obj, x, y); } } static JSValue lvgl_obj_set_size(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 3) { lv_coord_t w = 0; JS_ToInt16(ctx, &w, argv[1]); lv_coord_t h = 0; JS_ToInt16(ctx, &h, argv[2]); lv_obj_set_size(obj, w, h); } } static JSValue lvgl_obj_set_style_bg_color(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 2) { uint32_t color = 0; JS_ToUint32(ctx, &color, argv[1]); lv_color_t c = lv_color_hex(color); lv_obj_set_style_bg_color(obj, c, LV_PART_MAIN|LV_STATE_DEFAULT); }else if(argc == 3){ uint32_t color = 0; JS_ToUint32(ctx, &color, argv[1]); lv_color_t c = lv_color_hex(color); uint32_t mark = 0; JS_ToUint32(ctx, &mark, argv[2]); lv_obj_set_style_bg_color(obj, c, mark); } } static JSValue lvgl_obj_set_style_bg_opa(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 2) { uint8_t opa = 0; JS_ToUint8(ctx, &opa, argv[1]); lv_obj_set_style_bg_opa(obj, opa, LV_PART_MAIN|LV_STATE_DEFAULT); }else if(argc == 3){ uint8_t opa = 0; JS_ToUint8(ctx, &opa, argv[1]); uint32_t mark = 0; JS_ToUint32(ctx, &mark, argv[2]); lv_obj_set_style_bg_opa(obj, opa, mark); } } static const JSCFunctionListEntry js_lvgl_funcs[] = { JS_PROP_STRING_DEF("test", "test..", JS_PROP_C_W_E), JS_CFUNC_DEF("lvgl_obj_create", 1, lvgl_obj_create), JS_CFUNC_DEF("lvgl_label_create", 1, lvgl_label_create), JS_CFUNC_DEF("lvgl_label_set_text", 2, lvgl_label_set_text), JS_CFUNC_DEF("lvgl_obj_set_pos", 3, lvgl_obj_set_pos), JS_CFUNC_DEF("lvgl_obj_set_size", 3, lvgl_obj_set_size), JS_CFUNC_DEF("lvgl_obj_set_style_bg_color", 3, lvgl_obj_set_style_bg_color), JS_CFUNC_DEF("lvgl_obj_set_style_bg_opa", 3, lvgl_obj_set_style_bg_opa), JS_CFUNC_DEF("lvgl_scr_load", 1, lvgl_scr_load), }; static int js_lvgl_init(JSContext *ctx, JSModuleDef *m) { return JS_SetModuleExportList(ctx, m, js_lvgl_funcs, countof(js_lvgl_funcs)); } JSModuleDef *js_init_module_lvgl(JSContext *ctx, const char *module_name) { JSModuleDef *m; m = JS_NewCModule(ctx, module_name, js_lvgl_init); if (!m) return NULL; JS_AddModuleExportList(ctx, m, js_lvgl_funcs, countof(js_lvgl_funcs)); return m; } int JS_ToInt8(JSContext *ctx, int8_t *pres, JSValueConst val) { uint32_t v; int ret = JS_ToInt32(ctx, &v, val); *pres = v > 0x7f? 0x7f : v < -0x80? -0x80 : v; return ret; } int JS_ToUint8(JSContext *ctx, uint8_t *pres, JSValueConst val) { uint32_t v; int ret = JS_ToUint32(ctx, &v, val); *pres = v > 0xff? 0xff : v; return ret; } int JS_ToInt16(JSContext *ctx, int16_t *pres, JSValueConst val) { int32_t v; int ret = JS_ToInt32(ctx, &v, val); *pres = v > 0x7fff? 0x7fff : v < -0x8000? -0x8000 : v; return ret; } int JS_ToUint16(JSContext *ctx, uint16_t *pres, JSValueConst val) { uint32_t v; int ret = JS_ToUint32(ctx, &v, val); *pres = v > 0xffff? 0xffff : v; return v; } int JS_ToPointer(JSContext *ctx, lv_obj_ptr_t *pres, JSValueConst val) { if (sizeof(lv_obj_ptr_t) == 8) { return JS_ToInt64(ctx, (uint64_t *)pres, val); } else { return JS_ToInt32(ctx, (uint32_t *)pres, val); } } static inline JSValue JS_NewPointer(JSContext *ctx, lv_obj_ptr_t val) { if (sizeof(lv_obj_ptr_t) == 8) { return JS_NewInt64(ctx, val); } else { return JS_NewInt32(ctx, val); } }
#include "lvgl_export.h" static JSValue lvgl_obj_create(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * parent = (lv_obj_t *)p; lv_obj_t * obj = lv_obj_create(parent); return JS_NewPointer(ctx, (lv_obj_ptr_t)obj); } static JSValue lvgl_label_create(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * parent = (lv_obj_t *)p; lv_obj_t * lbl = lv_label_create(parent); return JS_NewPointer(ctx, (lv_obj_ptr_t)lbl); } static JSValue lvgl_label_set_text(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * lbl = (lv_obj_t *)p; const char * str = JS_ToCString(ctx, argv[1]); lv_label_set_text(lbl, str); return JS_NULL; } static JSValue lvgl_scr_load(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * lbl = (lv_obj_t *)p; lv_scr_load(lbl); return JS_NULL; } static JSValue lvgl_obj_set_pos(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 3) { lv_coord_t x = 0; JS_ToInt16(ctx, &x, argv[1]); lv_coord_t y = 0; JS_ToInt16(ctx, &y, argv[2]); lv_obj_set_pos(obj, x, y); } } static JSValue lvgl_obj_set_size(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 3) { lv_coord_t w = 0; JS_ToInt16(ctx, &w, argv[1]); lv_coord_t h = 0; JS_ToInt16(ctx, &h, argv[2]); lv_obj_set_size(obj, w, h); } } static JSValue lvgl_obj_set_style_bg_color(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 2) { uint32_t color = 0; JS_ToUint32(ctx, &color, argv[1]); lv_color_t c = lv_color_hex(color); lv_obj_set_style_bg_color(obj, c, LV_PART_MAIN|LV_STATE_DEFAULT); }else if(argc == 3){ uint32_t color = 0; JS_ToUint32(ctx, &color, argv[1]); lv_color_t c = lv_color_hex(color); uint32_t mark = 0; JS_ToUint32(ctx, &mark, argv[2]); lv_obj_set_style_bg_color(obj, c, mark); } } static JSValue lvgl_obj_set_style_bg_opa(JSContext *ctx, JSValueConst this_val, int argc, JSValueConst *argv) { lv_obj_ptr_t p; JS_ToPointer(ctx, &p, argv[0]); lv_obj_t * obj = (lv_obj_t *)p; if (argc == 2) { uint8_t opa = 0; JS_ToUint8(ctx, &opa, argv[1]); lv_obj_set_style_bg_opa(obj, opa, LV_PART_MAIN|LV_STATE_DEFAULT); }else if(argc == 3){ uint8_t opa = 0; JS_ToUint8(ctx, &opa, argv[1]); uint32_t mark = 0; JS_ToUint32(ctx, &mark, argv[2]); lv_obj_set_style_bg_opa(obj, opa, mark); } } static const JSCFunctionListEntry js_lvgl_funcs[] = { JS_PROP_STRING_DEF("test", "test..", JS_PROP_C_W_E), JS_CFUNC_DEF("lvgl_obj_create", 1, lvgl_obj_create), JS_CFUNC_DEF("lvgl_label_create", 1, lvgl_label_create), JS_CFUNC_DEF("lvgl_label_set_text", 2, lvgl_label_set_text), JS_CFUNC_DEF("lvgl_obj_set_pos", 3, lvgl_obj_set_pos), JS_CFUNC_DEF("lvgl_obj_set_size", 3, lvgl_obj_set_size), JS_CFUNC_DEF("lvgl_obj_set_style_bg_color", 3, lvgl_obj_set_style_bg_color), JS_CFUNC_DEF("lvgl_obj_set_style_bg_opa", 3, lvgl_obj_set_style_bg_opa), JS_CFUNC_DEF("lvgl_scr_load", 1, lvgl_scr_load), }; static int js_lvgl_init(JSContext *ctx, JSModuleDef *m) { return JS_SetModuleExportList(ctx, m, js_lvgl_funcs, countof(js_lvgl_funcs)); } JSModuleDef *js_init_module_lvgl(JSContext *ctx, const char *module_name) { JSModuleDef *m; m = JS_NewCModule(ctx, module_name, js_lvgl_init); if (!m) return NULL; JS_AddModuleExportList(ctx, m, js_lvgl_funcs, countof(js_lvgl_funcs)); return m; } int JS_ToInt8(JSContext *ctx, int8_t *pres, JSValueConst val) { uint32_t v; int ret = JS_ToInt32(ctx, &v, val); *pres = v > 0x7f? 0x7f : v < -0x80? -0x80 : v; return ret; } int JS_ToUint8(JSContext *ctx, uint8_t *pres, JSValueConst val) { uint32_t v; int ret = JS_ToUint32(ctx, &v, val); *pres = v > 0xff? 0xff : v; return ret; } int JS_ToInt16(JSContext *ctx, int16_t *pres, JSValueConst val) { int32_t v; int ret = JS_ToInt32(ctx, &v, val); *pres = v > 0x7fff? 0x7fff : v < -0x8000? -0x8000 : v; return ret; } int JS_ToUint16(JSContext *ctx, uint16_t *pres, JSValueConst val) { uint32_t v; int ret = JS_ToUint32(ctx, &v, val); *pres = v > 0xffff? 0xffff : v; return v; } int JS_ToPointer(JSContext *ctx, lv_obj_ptr_t *pres, JSValueConst val) { if (sizeof(lv_obj_ptr_t) == 8) { return JS_ToInt64(ctx, (uint64_t *)pres, val); } else { return JS_ToInt32(ctx, (uint32_t *)pres, val); } } static inline JSValue JS_NewPointer(JSContext *ctx, lv_obj_ptr_t val) { if (sizeof(lv_obj_ptr_t) == 8) { return JS_NewInt64(ctx, val); } else { return JS_NewInt32(ctx, val); } }
custom.c 關(guān)鍵代碼
JSRuntime *rt = NULL; JSContext *ctx = NULL; void lvgl_js_init() { printf("lvgl_js_init\n"); rt = JS_NewRuntime(); js_std_init_handlers(rt); ctx = JS_NewContext(rt); js_init_module_std(ctx, "std"); js_init_module_os(ctx, "os"); js_init_module_lvgl(ctx, "lvgl"); const char *str = "import * as std from 'std';\n" "import * as lvgl from 'lvgl';\n" "import * as os from 'os';\n" "globalThis.std = std;\n" "globalThis.lvgl = lvgl;\n" "var console = {};\n" "console.log = function(value){std.printf(value + '\\n');}\n" "globalThis.console = console\n" ""; JSValue init_compile = JS_Eval(ctx, str, strlen(str), "<input>", JS_EVAL_TYPE_MODULE | JS_EVAL_FLAG_COMPILE_ONLY); js_module_set_import_meta(ctx, init_compile, 1, 1); JSValue init_run = JS_EvalFunction(ctx, init_compile); } void run_js(){ //讀取文件,并運行js FILE *fp = fopen("test.js", "r"); if(fp == NULL){ printf("open file error\n"); return; } fseek(fp, 0, SEEK_END); int len = ftell(fp); fseek(fp, 0, SEEK_SET); len = len + 1; char *buf = (char *)malloc(len); memset(buf, 0, len); fread(buf, 1, len, fp); printf("============CODE==========\n"); printf("FILE: %d \n\n%s\n", len, buf); printf("==========================\n"); fclose(fp); JSValue result = JS_Eval(ctx, buf, strlen(buf), "test", JS_EVAL_TYPE_MODULE); js_std_loop(ctx); int clen; int to_int_32; if ((to_int_32 = JS_ToInt32(ctx, &clen, result)) != 0) { js_std_dump_error(ctx); } } /** * Create a demo application */ void custom_init(lv_ui *ui) { /* Add your codes here */ lvgl_js_init(); run_js(); }
test.js
import * as lvgl from 'lvgl'; //如果要在cmd控制臺輸出中文, 在控制臺執(zhí)行chcp 65001切換至utf-8 console.log("JS Dev utf-8"); var screen = lvgl.lvgl_obj_create(); //這個作為頁面 var lbl = lvgl.lvgl_label_create(screen); lvgl.lvgl_label_set_text(lbl, "HELLO"); lvgl.lvgl_obj_set_pos(lbl, 150, 10); lvgl.lvgl_obj_set_size(lbl, 100, 100); lvgl.lvgl_obj_set_style_bg_opa(lbl, 255); lvgl.lvgl_obj_set_style_bg_color(lbl, 0x2195f6); var lbl = lvgl.lvgl_label_create(screen); lvgl.lvgl_label_set_text(lbl, "WORLD"); lvgl.lvgl_obj_set_pos(lbl, 200, 150); lvgl.lvgl_obj_set_size(lbl, 100, 50); lvgl.lvgl_obj_set_style_bg_opa(lbl, 200); lvgl.lvgl_obj_set_style_bg_color(lbl, 0x2195f6); lvgl.lvgl_scr_load(screen); console.log("End.");
預(yù)覽效果
到此這篇關(guān)于quickjs調(diào)用lvgl函數(shù)的文章就介紹到這了,更多相關(guān)quickjs調(diào)用lvgl函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript常用數(shù)組去重實戰(zhàn)源碼
本文給大家分享js常用8種數(shù)組去重實戰(zhàn)源碼,針對每種方法通過實例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2021-07-07Webpack 之 babel-loader文件預(yù)處理器詳解
這篇文章主要介紹了Webpack 之 babel-loader文件預(yù)處理器詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果
這篇文章主要介紹了JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果,滾動有兩種方案,其一,利用路由中的meta,在離開頁面時緩存 top 信息,其二,利用keep-alive緩存整個頁面。但是僅限于沒有實時數(shù)據(jù)變動的頁面,需要的朋友可以參考下本文2022-06-06JS獲取圖片實際寬高及根據(jù)圖片大小進行自適應(yīng)
圖片實際寬高使用js進行獲取以及根據(jù)圖片大小進行自適應(yīng),此功能個人感覺比較實用,在此貢獻出來,希望對大家有所幫助2013-08-08Bootstrap select下拉聯(lián)動(jQuery cxselect)
這篇文章主要為大家詳細(xì)介紹了Bootstrap select下拉聯(lián)動,JQuery插件之cxselect,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01