quickjs调用lvgl函数的示例代码

更新时间：2023年11月29日 09:59:28 作者：无脑仔的小明

这篇文章主要介绍了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 沙箱详情

微信小程序3种位置API的使用方法详解
这篇文章主要介绍了微信小程序3种位置API的使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-08-08
三种Webpack打包方式(小结)
这篇文章主要介绍了三种Webpack打包方式(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
Javascript的表单验证长度
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证长度，需要的朋友参考下吧
2016-03-03
prototype框架中美元符号$用法分析
这篇文章主要介绍了prototype框架中美元符号$用法,结合实例形式较为详细的分析了$符号的使用技巧与相关注意事项,需要的朋友可以参考下
2016-01-01
Javascript 两种刷新方法以及区别和适用范围
这篇文章主要介绍了Javascript 两种刷新方法以及区别和适用范围的相关资料,需要的朋友可以参考下
2017-01-01
微信小程序之几种常见的弹框提示信息实现详解
这篇文章主要介绍了微信小程序之几种常见的弹框提示信息实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-07-07
JS实现图片切换特效
这篇文章主要为大家详细介绍了JS实现图片切换特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
DWR内存兼容及无法调用问题解决方案
这篇文章主要介绍了DWR内存兼容及无法调用问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
javascript实现将文件保存到本地方法汇总
本文给大家汇总介绍了3中使用javascript实现将文件保存到本地的方法，非常的简单实用，有需要的小伙伴可以参考下。
2015-07-07
js字符串截取指定字符前面/后面的字符串代码
在页面数据处理的过程中都会不可避免的使用字符串的截取操作,下面这篇文章主要给大家介绍了关于js字符串截取指定字符前面/后面的字符串,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-06-06

quickjs调用lvgl函数的示例代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具