LittleVGL 可以运行在浏览器上了

晕哥 · 2019-02-11 13:58:17

项目地址: https://github.com/littlevgl/emscripten

演示地址: https://littlevgl.com/demo-basic
演示地址: https://littlevgl.com/demo-theme-night
演示地址: https://littlevgl.com/demo-theme-material
演示地址: https://littlevgl.com/demo-touchpadless

晕哥 · 2019-02-11 14:48:25

1. 安装 Emscripten SDK

cd /opt
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
git pull
./emsdk install latest
./emsdk activate latest
source ./emsdk_env.sh

下载emscripten项目源码编译:

cd /opt
git clone https://github.com/littlevgl/emscripten.git
cd emscripten
git submodule update --init --recursive
make

以下三个文件是编译生成:

lvgl.html
lvgl.js
lvgl.wasm

浏览器打开 lvgl.html

ubuntu 14.04 编译失败:

root@debugdump:/opt/emscripten# make
 CC  lvgl/lv_draw/lv_draw_line.c
emscripten:INFO: generating system asset: is_vanilla.txt... (this will be cached in "/root/.emscripten_cache/is_vanilla.txt" for subsequent builds)
/opt/emsdk/clang/e1.38.26_64bit/llc: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by /opt/emsdk/clang/e1.38.26_64bit/llc)
/opt/emsdk/clang/e1.38.26_64bit/llc: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by /opt/emsdk/clang/e1.38.26_64bit/llc)
emscripten:INFO:  - ok
/opt/emsdk/clang/e1.38.26_64bit/clang++: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by /opt/emsdk/clang/e1.38.26_64bit/clang++)
/opt/emsdk/clang/e1.38.26_64bit/clang++: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by /opt/emsdk/clang/e1.38.26_64bit/clang++)
shared:ERROR: '/opt/emsdk/clang/e1.38.26_64bit/clang++ --version' failed (1)
make: *** [lvgl/lv_draw/lv_draw_line.o] Error 1
root@debugdump:/opt/emscripten# ls /usr/lib/x86_64-linux-gnu/libstdc++.so.6*
/usr/lib/x86_64-linux-gnu/libstdc++.so.6  /usr/lib/x86_64-linux-gnu/libstdc++.so.6.0.19
root@debugdump:/opt/emscripten# ls /usr/lib/x86_64-linux-gnu/libstdc++.so.6* -l
lrwxrwxrwx 1 root root     19 Feb 14  2018 /usr/lib/x86_64-linux-gnu/libstdc++.so.6 -> libstdc++.so.6.0.19
-rw-r--r-- 1 root root 979056 Feb 14  2018 /usr/lib/x86_64-linux-gnu/libstdc++.so.6.0.19
root@debugdump:/opt/emscripten#

ubuntu 16.04 编译没有问题:

root@ubuntu:/opt/emscripten# make
 CC  lvgl/lv_draw/lv_draw_line.c
emscripten:INFO: generating system asset: is_vanilla.txt... (this will be cached in "/root/.emscripten_cache/is_vanilla.txt" for subsequent builds)
emscripten:INFO:  - ok
shared:INFO: (Emscripten: Running sanity checks)
root:WARNING: retrieving port: sdl2 from https://github.com/emscripten-ports/SDL2/archive/version_17.zip
root:WARNING: unpacking port: sdl2
emscripten:INFO: generating port: sdl2.bc... (this will be cached in "/root/.emscripten_cache/asmjs/sdl2.bc" for subsequent builds)
emscripten:INFO:  - ok
 CC  lvgl/lv_draw/lv_draw_rbasic.c
 CC  lvgl/lv_draw/lv_draw_img.c
 CC  lvgl/lv_draw/lv_draw_arc.c
 CC  lvgl/lv_draw/lv_draw_rect.c
 CC  lvgl/lv_draw/lv_draw_triangle.c
 CC  lvgl/lv_draw/lv_draw.c
 CC  lvgl/lv_draw/lv_draw_label.c
 CC  lvgl/lv_draw/lv_draw_vbasic.c
 CC  lvgl/lv_fonts/lv_font_builtin.c
 CC  lvgl/lv_fonts/lv_font_dejavu_20.c
 CC  lvgl/lv_fonts/lv_font_dejavu_40.c
 CC  lvgl/lv_fonts/lv_font_dejavu_30_latin_sup.c
 CC  lvgl/lv_fonts/lv_font_dejavu_10_cyrillic.c
 CC  lvgl/lv_fonts/lv_font_monospace_8.c
 CC  lvgl/lv_fonts/lv_font_dejavu_10_latin_sup.c
 CC  lvgl/lv_fonts/lv_font_symbol_40.c
 CC  lvgl/lv_fonts/lv_font_symbol_10.c
 CC  lvgl/lv_fonts/lv_font_dejavu_10.c
 CC  lvgl/lv_fonts/lv_font_dejavu_40_cyrillic.c
 CC  lvgl/lv_fonts/lv_font_dejavu_20_cyrillic.c
 CC  lvgl/lv_fonts/lv_font_dejavu_30_cyrillic.c
 CC  lvgl/lv_fonts/lv_font_dejavu_20_latin_sup.c
 CC  lvgl/lv_fonts/lv_font_dejavu_40_latin_sup.c
 CC  lvgl/lv_fonts/lv_font_symbol_30.c
 CC  lvgl/lv_fonts/lv_font_symbol_20.c
 CC  lvgl/lv_fonts/lv_font_dejavu_30.c
 CC  lvgl/lv_objx/lv_cont.c
 CC  lvgl/lv_objx/lv_img.c
 CC  lvgl/lv_objx/lv_kb.c
 CC  lvgl/lv_objx/lv_table.c
 CC  lvgl/lv_objx/lv_roller.c
 CC  lvgl/lv_objx/lv_cb.c
 CC  lvgl/lv_objx/lv_led.c
 CC  lvgl/lv_objx/lv_calendar.c
 CC  lvgl/lv_objx/lv_gauge.c
 CC  lvgl/lv_objx/lv_page.c
 CC  lvgl/lv_objx/lv_list.c
 CC  lvgl/lv_objx/lv_bar.c
 CC  lvgl/lv_objx/lv_tabview.c
 CC  lvgl/lv_objx/lv_mbox.c
 CC  lvgl/lv_objx/lv_objx_templ.c
 CC  lvgl/lv_objx/lv_sw.c
 CC  lvgl/lv_objx/lv_label.c
 CC  lvgl/lv_objx/lv_slider.c
 CC  lvgl/lv_objx/lv_ddlist.c
 CC  lvgl/lv_objx/lv_imgbtn.c
 CC  lvgl/lv_objx/lv_line.c
 CC  lvgl/lv_objx/lv_chart.c
 CC  lvgl/lv_objx/lv_btnm.c
 CC  lvgl/lv_objx/lv_arc.c
 CC  lvgl/lv_objx/lv_preload.c
 CC  lvgl/lv_objx/lv_win.c
 CC  lvgl/lv_objx/lv_lmeter.c
 CC  lvgl/lv_objx/lv_btn.c
 CC  lvgl/lv_objx/lv_ta.c
 CC  lvgl/lv_misc/lv_log.c
 CC  lvgl/lv_misc/lv_fs.c
 CC  lvgl/lv_misc/lv_task.c
 CC  lvgl/lv_misc/lv_circ.c
 CC  lvgl/lv_misc/lv_anim.c
 CC  lvgl/lv_misc/lv_color.c
 CC  lvgl/lv_misc/lv_txt.c
 CC  lvgl/lv_misc/lv_math.c
 CC  lvgl/lv_misc/lv_mem.c
 CC  lvgl/lv_misc/lv_font.c
 CC  lvgl/lv_misc/lv_ll.c
 CC  lvgl/lv_misc/lv_area.c
 CC  lvgl/lv_misc/lv_templ.c
 CC  lvgl/lv_misc/lv_ufs.c
 CC  lvgl/lv_misc/lv_gc.c
 CC  lvgl/lv_hal/lv_hal_tick.c
 CC  lvgl/lv_hal/lv_hal_indev.c
 CC  lvgl/lv_hal/lv_hal_disp.c
 CC  lvgl/lv_themes/lv_theme_mono.c
 CC  lvgl/lv_themes/lv_theme_templ.c
 CC  lvgl/lv_themes/lv_theme_material.c
 CC  lvgl/lv_themes/lv_theme.c
 CC  lvgl/lv_themes/lv_theme_night.c
 CC  lvgl/lv_themes/lv_theme_zen.c
 CC  lvgl/lv_themes/lv_theme_nemo.c
 CC  lvgl/lv_themes/lv_theme_alien.c
 CC  lvgl/lv_themes/lv_theme_default.c
 CC  lvgl/lv_core/lv_group.c
 CC  lvgl/lv_core/lv_style.c
 CC  lvgl/lv_core/lv_indev.c
 CC  lvgl/lv_core/lv_vdb.c
 CC  lvgl/lv_core/lv_obj.c
 CC  lvgl/lv_core/lv_refr.c
 CC  lv_examples/lv_tests/lv_test_theme/lv_test_theme_1.c
 CC  lv_examples/lv_tests/lv_test_theme/lv_test_theme_2.c
 CC  lv_examples/lv_tests/lv_test_stress/lv_test_stress.c
 CC  lv_examples/lv_tests/lv_test_objx/lv_test_img/img_flower_icon.c
 CC  lv_examples/lv_tests/lv_test_objx/lv_test_arc/lv_test_arc.c
 CC  lv_examples/lv_tests/lv_test_group/lv_test_group.c
 CC  lv_examples/lv_apps/demo/demo.c
 CC  lv_examples/lv_apps/demo/img_bubble_pattern.c
 CC  lv_drivers/display/monitor.c
 CC  lv_drivers/indev/mouse.c
 CC  lv_drivers/indev/keyboard.c
 CC  lv_drivers/indev/mousewheel.c
 CC  main.c
 CC  mouse_cursor_icon.c
 LINK  lvgl.html
emscripten:INFO: generating system library: libdlmalloc.bc... (this will be cached in "/root/.emscripten_cache/asmjs/libdlmalloc.bc" for subsequent builds)
emscripten:INFO:  - ok
emscripten:INFO: generating system library: libgl.bc... (this will be cached in "/root/.emscripten_cache/asmjs/libgl.bc" for subsequent builds)
emscripten:INFO:  - ok
emscripten:INFO: generating system library: libc.bc... (this will be cached in "/root/.emscripten_cache/asmjs/libc.bc" for subsequent builds)
emscripten:INFO:  - ok
emscripten:INFO: generating system library: libcompiler_rt.a... (this will be cached in "/root/.emscripten_cache/asmjs/libcompiler_rt.a" for subsequent builds)
emscripten:INFO:  - ok
emscripten:INFO: generating system library: libc-wasm.bc... (this will be cached in "/root/.emscripten_cache/asmjs/libc-wasm.bc" for subsequent builds)
emscripten:INFO:  - ok
emscripten:INFO: generating system library: libc-extras.bc... (this will be cached in "/root/.emscripten_cache/asmjs/libc-extras.bc" for subsequent builds)
emscripten:INFO:  - ok
emscripten:INFO: generating system asset: generated_struct_info.json... (this will be cached in "/root/.emscripten_cache/asmjs/generated_struct_info.json" for subsequent builds)
emscripten:INFO:  - ok
root@ubuntu:/opt/emscripten#

Dillon · 2019-02-11 19:22:27

真棒?，三星手机自带浏览器可以直接运行例子

不安分的少年 · 2019-02-19 14:50:53

可以说是很six了

john78 · 2020-09-05 16:26:27

编译好了lvgl.html、lvgl.js、lvgl.wasm三个文件也有了，但是filefox,Google Chrome,Ie都没有显示啊，只有空白

哇酷小二 · 2020-09-05 16:31:43

john78 说：

编译好了lvgl.html、lvgl.js、lvgl.wasm三个文件也有了，但是filefox,Google Chrome,Ie都没有显示啊，只有空白

打开官网，确定一下浏览器有没有问题: https://lvgl.io/demos

john78 · 2020-09-05 16:47:29

https://lvgl.io/demos 正常啊

john78 · 2020-09-05 16:49:19

lvgl.html、lvgl.js、lvgl.wasm-----------哪有这个3个文件，我比较下

哇酷小二 · 2020-09-05 17:03:43

john78 说：

lvgl.html、lvgl.js、lvgl.wasm-----------哪有这个3个文件，我比较下

我这台电脑没有找到，你直接比较lvgl online demo服务器上面的文件。

john78 · 2020-09-05 17:22:29

发现两个错误，不知道怎么处理了
wasm streaming compile failed: TypeError: Response has unsupported MIME type
falling back to ArrayBuffer instantiation

AresDing · 2022-06-24 10:30:39

全屏或者大分辨率 canvas报错

kin · 2022-07-09 23:35:44

大分辨率时出错，不显示

Lvy · 2022-07-12 07:43:15

lvgl还是7.0的时候用过一会，好久没用了现在做的这么炫啦

tocurd · 2022-07-12 11:52:54

web开发用vue不香吗

kin · 2022-07-12 18:23:43

tocurd 说：

web开发用vue不香吗

主要是为了可以使用同一套代码，省去多次开发的成本。

海石生风 · 2022-07-12 19:26:40

kin 说：

tocurd 说：
web开发用vue不香吗
主要是为了可以使用同一套代码，省去多次开发的成本。

把C做的GUI编译到浏览器上确实没什么实用价值，最多是拿来方便演示：不用安装、不用考虑运行环境的兼容性。

acom2024 · 2024-01-29 16:56:58

@晕哥说：

下载emscripten项目源码编译:
cd /opt
git clone https://github.com/littlevgl/emscripten.git
cd emscripten
git submodule update --init --recursive
make

git clone emscripten.git 后，目录下没有Makefile, make不了

用README.md 的方法也报错：

root@lc-es-vm:/home/test/lv_web_emscripten/cmbuild# emcmake cmake ..
File "/home/test/emsdk/upstream/emscripten/emcmake.py", line 45
args.append(f'-DCMAKE_CROSSCOMPILING_EMULATOR={node_js}')
^
SyntaxError: invalid syntax

怎么处理？python 文件有语法错误？python 文件应没有问题的，是哪个环境不对吗？

最近编辑记录 acom2024 (2024-01-29 17:11:38)

海石生风 · 2024-01-30 11:28:39

这个python脚本所使用的是 >=3.6版本，你这2.7.12差太远了。python3不兼容python2

acom2024 · 2024-01-30 13:53:52

海石生风说：

这个python脚本所使用的是 >=3.6版本，你这2.7.12差太远了。python3不兼容python2

好的，谢谢，我安装个3.7 试试！

WhyCan Forum(哇酷开发者社区)

楼主 #1 2019-02-11 13:58:17 分享评论