首页 > 网络编程 > JavaScript > javascript技巧 > quickjs调用lvgl函数

quickjs调用lvgl函数的示例代码

2023-11-29 09:17:57 作者：无脑仔的小明

这篇文章主要介绍了quickjs调用lvgl函数,实现本次使用quickjs的最主要目的，就是通过程序动态加载js，然后调用lvgl函数库，实现渲染，需要的朋友可以参考下

实现本次使用quickjs的最主要目的，就是通过程序动态加载js，然后调用lvgl函数库，实现渲染。以达到类似小程序的效果。后续还会实现类似小程序效果，通过quickjs解析xml(html)，编译成js然后调用lvgl库，实现界面渲染。通过quickjs会调用c语言提供的底层功能，如wifi、蓝牙、串口uart、iic、isp、pwd、led等等硬件io功能。

下面写一些例子，只做技术验证

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 关键代码

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控制台输出中文， 在控制台执行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.");

预览效果

到此这篇关于quickjs调用lvgl函数的文章就介绍到这了,更多相关quickjs调用lvgl函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

quickjs 封装 JavaScript 沙箱详情