您尚未登录。

楼主 #1 2019-02-11 13:58:17

晕哥
管理员
所在地: 微信 whycan_cn
注册时间: 2017-09-06
已发帖子: 9,223
积分: 9197

离线

楼主 #2 2019-02-11 14:48:25

晕哥
管理员
所在地: 微信 whycan_cn
注册时间: 2017-09-06
已发帖子: 9,223
积分: 9197

Re: LittleVGL 可以运行在 浏览器上了

1. 安装 Emscripten SDK

  1. cd /opt

  2. git clone https://github.com/emscripten-core/emsdk.git

  3. cd emsdk

  4. git pull

  5. ./emsdk install latest

  6. ./emsdk activate latest

  7. source ./emsdk_env.sh



下载emscripten项目源码编译:

  1. cd /opt

  2. git clone https://github.com/littlevgl/emscripten.git

  3. cd emscripten

  4. git submodule update --init --recursive

  5. make

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

  1. lvgl.html

  2. lvgl.js

  3. lvgl.wasm


浏览器打开 lvgl.html
20190211145326.png

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#




离线

#3 2019-02-11 19:22:27

Dillon
会员
注册时间: 2017-12-15
已发帖子: 7
积分: 6.5

Re: LittleVGL 可以运行在 浏览器上了

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

离线

#4 2019-02-19 14:50:53

不安分的少年
会员
注册时间: 2019-02-19
已发帖子: 1
积分: 1

Re: LittleVGL 可以运行在 浏览器上了

可以说是很six了

离线

#5 2020-09-05 16:26:27

john78
会员
注册时间: 2018-07-19
已发帖子: 219
积分: 167

Re: LittleVGL 可以运行在 浏览器上了

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

离线

#6 2020-09-05 16:31:43

哇酷小二
wechat微信:whycan_cn
所在地: 你猜
注册时间: 2020-04-22
已发帖子: 3,378
积分: 1902
个人网站

Re: LittleVGL 可以运行在 浏览器上了

john78 说:

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

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





离线

#7 2020-09-05 16:47:29

john78
会员
注册时间: 2018-07-19
已发帖子: 219
积分: 167

Re: LittleVGL 可以运行在 浏览器上了

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

离线

#8 2020-09-05 16:49:19

john78
会员
注册时间: 2018-07-19
已发帖子: 219
积分: 167

Re: LittleVGL 可以运行在 浏览器上了

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

离线

#9 2020-09-05 17:03:43

哇酷小二
wechat微信:whycan_cn
所在地: 你猜
注册时间: 2020-04-22
已发帖子: 3,378
积分: 1902
个人网站

Re: LittleVGL 可以运行在 浏览器上了

john78 说:

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

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





离线

#10 2020-09-05 17:22:29

john78
会员
注册时间: 2018-07-19
已发帖子: 219
积分: 167

Re: LittleVGL 可以运行在 浏览器上了

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

离线

#11 2022-06-24 10:30:39

AresDing
会员
注册时间: 2022-06-14
已发帖子: 1
积分: 1

Re: LittleVGL 可以运行在 浏览器上了

全屏或者大分辨率 canvas报错

离线

#12 2022-07-09 23:35:44

kin
会员
注册时间: 2020-04-06
已发帖子: 26
积分: 40.5

Re: LittleVGL 可以运行在 浏览器上了

大分辨率时出错,不显示

离线

#13 2022-07-12 07:43:15

Lvy
会员
注册时间: 2017-11-25
已发帖子: 107
积分: 96.5

Re: LittleVGL 可以运行在 浏览器上了

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

离线

#14 2022-07-12 11:52:54

tocurd
会员
注册时间: 2021-08-14
已发帖子: 19
积分: 9

Re: LittleVGL 可以运行在 浏览器上了

web开发用vue不香吗

离线

#15 2022-07-12 18:23:43

kin
会员
注册时间: 2020-04-06
已发帖子: 26
积分: 40.5

Re: LittleVGL 可以运行在 浏览器上了

tocurd 说:

web开发用vue不香吗

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

离线

#16 2022-07-12 19:26:40

海石生风
会员
所在地: 深圳
注册时间: 2019-07-02
已发帖子: 513
积分: 634
个人网站

Re: LittleVGL 可以运行在 浏览器上了

kin 说:
tocurd 说:

web开发用vue不香吗

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

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

离线

#17 2024-01-29 16:56:58

acom2024
会员
所在地: 深圳
注册时间: 2024-01-25
已发帖子: 17
积分: 13
个人网站

Re: LittleVGL 可以运行在 浏览器上了

@晕哥  说:

下载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 的方法也报错:

lvgl_error1.png

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

lvgl_error2.png


python_msg.png

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

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

离线

#18 2024-01-30 11:28:39

海石生风
会员
所在地: 深圳
注册时间: 2019-07-02
已发帖子: 513
积分: 634
个人网站

Re: LittleVGL 可以运行在 浏览器上了

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

离线

#19 2024-01-30 13:53:52

acom2024
会员
所在地: 深圳
注册时间: 2024-01-25
已发帖子: 17
积分: 13
个人网站

Re: LittleVGL 可以运行在 浏览器上了

海石生风 说:

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

好的,谢谢,我安装个3.7 试试!

离线

页脚

工信部备案:粤ICP备20025096号 Powered by FluxBB

感谢为中文互联网持续输出优质内容的各位老铁们。 QQ: 516333132, 微信(wechat): whycan_cn (哇酷网/挖坑网/填坑网) service@whycan.cn