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.");預覽效果

到此這篇關(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)源碼,針對每種方法通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2021-07-07
Webpack 之 babel-loader文件預處理器詳解
這篇文章主要介紹了Webpack 之 babel-loader文件預處理器詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果
這篇文章主要介紹了JS實現(xiàn)頁面滾動到關(guān)閉時的位置與不滾動效果,滾動有兩種方案,其一,利用路由中的meta,在離開頁面時緩存 top 信息,其二,利用keep-alive緩存整個頁面。但是僅限于沒有實時數(shù)據(jù)變動的頁面,需要的朋友可以參考下本文2022-06-06
JS獲取圖片實際寬高及根據(jù)圖片大小進行自適應(yīng)
圖片實際寬高使用js進行獲取以及根據(jù)圖片大小進行自適應(yīng),此功能個人感覺比較實用,在此貢獻出來,希望對大家有所幫助2013-08-08
Bootstrap select下拉聯(lián)動(jQuery cxselect)
這篇文章主要為大家詳細介紹了Bootstrap select下拉聯(lián)動,JQuery插件之cxselect,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01

