Issuses Making the Javacript Port

minyiky · December 20, 2021, 6:43pm

Hi all,

I am currently trying to set up a web based simulator for a device I am building. This is all very new to me but my understanding is that the best way to achieve this is via the javascript port. To this end I have been trying to build it but have run into a few issues. As a side note I have successfully built both the unix and esp32 ports.

When following the instructions I run into issues at different points depending on what route I take.

1) Using branch: lvgl_javascript

Using this branch I seem to run into some issues when running git submodule update --init --recursive

Prior to running this command I had run git submodule deinit --all -f To ensure I was working from a blank slate.

Upon running this i get the following issues:

fatal: could not get a repository handle for submodule 'hw/mcu/nxp'
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/pico-sdk/lib/tinyusb/hw/mcu/nxp/../../../../../../../../.git/modules/micropython/modules/lib/pico-sdk/modules/tinyusb/modules/hw/mcu/nxp
Unable to fetch in submodule path 'lib/pico-sdk/lib/tinyusb/hw/mcu/nxp'
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/pico-sdk/lib/tinyusb/hw/mcu/nxp/../../../../../../../../.git/modules/micropython/modules/lib/pico-sdk/modules/tinyusb/modules/hw/mcu/nxp
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/pico-sdk/lib/tinyusb/hw/mcu/nxp/../../../../../../../../.git/modules/micropython/modules/lib/pico-sdk/modules/tinyusb/modules/hw/mcu/nxp
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/pico-sdk/lib/tinyusb/hw/mcu/nxp/../../../../../../../../.git/modules/micropython/modules/lib/pico-sdk/modules/tinyusb/modules/hw/mcu/nxp
Fetched in submodule path 'lib/pico-sdk/lib/tinyusb/hw/mcu/nxp', but it did not contain b618cb1d521cc9e133bdcd0fca154dee2d925dfe. Direct fetching of that commit failed.
Failed to recurse into submodule path 'lib/pico-sdk/lib/tinyusb'
Submodule path 'lib/stm32lib': checked out '302c52794d2f579903f4e49cbad1f5d3a7f401ad'
Submodule path 'lib/tinyusb': checked out 'a6b916ba85bef6aad50f1652532b02984dfe2484'
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/tinyusb/hw/mcu/nxp/../../../../../../.git/modules/micropython/modules/lib/tinyusb/modules/hw/mcu/nxp
Failed to clone 'hw/mcu/nxp'. Retry scheduled
BUG: submodule considered for cloning, doesn't need cloning any more?
Submodule path 'lib/tinyusb/hw/mcu/microchip': checked out '66b5a11995025426224e0ba6f377322e6e8893b6'
Submodule path 'lib/tinyusb/hw/mcu/microchip/samd/asf4': checked out '039b5f3bbc3f4ba4421e581db290560d59fef625'
Submodule path 'lib/tinyusb/hw/mcu/nordic/nrfx': checked out '7a4c9d946cf1801771fc180acdbf7b878f270093'
Submodule path 'lib/tinyusb/hw/mcu/nuvoton': checked out 'dc96fff794d14818c93ea1d4d760d51a014d70c5'
fatal: could not get a repository handle for submodule 'hw/mcu/nxp'
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/tinyusb/hw/mcu/nxp/../../../../../../.git/modules/micropython/modules/lib/tinyusb/modules/hw/mcu/nxp
Unable to fetch in submodule path 'lib/tinyusb/hw/mcu/nxp'
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/tinyusb/hw/mcu/nxp/../../../../../../.git/modules/micropython/modules/lib/tinyusb/modules/hw/mcu/nxp
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/tinyusb/hw/mcu/nxp/../../../../../../.git/modules/micropython/modules/lib/tinyusb/modules/hw/mcu/nxp
fatal: not a git repository: /home/*****/Workspace/espy_dive_docker/micropython/lib/tinyusb/hw/mcu/nxp/../../../../../../.git/modules/micropython/modules/lib/tinyusb/modules/hw/mcu/nxp
Fetched in submodule path 'lib/tinyusb/hw/mcu/nxp', but it did not contain b618cb1d521cc9e133bdcd0fca154dee2d925dfe. Direct fetching of that commit failed.
Failed to recurse into submodule path 'lib/pico-sdk'
Failed to recurse into submodule path 'lib/tinyusb'

I then get errors when running make -C ports/javascript/

2) Using branch: lvgl_javascript

Using this branch I used the same steps as previously and this time have no errors with initialising the sub modules

This time I get the following error when running make -C ports/javascript/

make: Entering directory '/home/*****/Workspace/espy_dive_docker/micropython/ports/javascript'
************  lvgl_javascript version ************
Use make V=1 or set BUILD_VERBOSE in your environment to increase build verbosity.
Warning: FROZEN_DIR is deprecated in favour of FROZEN_MANIFEST
LVGL-GEN build/lvgl/lv_mpy.c
cp ../../lib/lv_bindings/driver/png/lodepng/lodepng.cpp build/lodepng/lodepng.c
LODEPNG-GEN build/lodepng/mp_lodepng.c
GEN build/genhdr/mpversion.h
GEN build/genhdr/moduledefs.h
GEN build/genhdr/qstr.i.last
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
Traceback (most recent call last):
  File "../../py/makeqstrdefs.py", line 188, in <module>
    preprocess()
  File "../../py/makeqstrdefs.py", line 62, in preprocess
    for output in p.imap(pp(flags), chunks):
  File "/usr/lib/python3.7/multiprocessing/pool.py", line 748, in next
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
    raise value
  File "/usr/lib/python3.7/multiprocessing/pool.py", line 121, in worker
    result = (True, func(*args, **kwds))
  File "../../py/makeqstrdefs.py", line 46, in run
    return subprocess.check_output(args.pp + flags + files)
  File "/usr/lib/python3.7/subprocess.py", line 395, in check_output
    **kwargs).stdout
  File "/usr/lib/python3.7/subprocess.py", line 487, in run
    output=stdout, stderr=stderr)
subprocess.CalledProcessError: Command '['emcc', '-x', 'c', '-E', '-D__CPP__', '-D__EMSCRIPTEN__', '-std=gnu99', '-Wall', '-Wno-error', '-Wdouble-promotion', '-Wfloat-conversion', '-O3', '-DNDEBUG', '-gsource-map', '-I../../lib/lv_bindings', '-I../../lib/lv_bindings/driver/png/lodepng', '-I.', '-I../..', '-Ibuild', '-fdata-sections', '-ffunction-sections', '-Wno-unused-function', '-DLODEPNG_NO_COMPILE_ENCODER', '-DLODEPNG_NO_COMPILE_DISK', '-DLODEPNG_NO_COMPILE_ALLOCATORS', '-DFFCONF_H="lib/oofatfs/ffconf.h"', '-DMICROPY_MODULE_FROZEN_STR', '-DNO_QSTR', '../../lib/lv_bindings/lvgl/src/core/lv_disp.c', '../../lib/lv_bindings/lvgl/src/core/lv_event.c', '../../lib/lv_bindings/lvgl/src/core/lv_group.c', '../../lib/lv_bindings/lvgl/src/core/lv_indev.c', '../../lib/lv_bindings/lvgl/src/core/lv_indev_scroll.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj_class.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj_draw.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj_pos.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj_scroll.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj_style.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj_style_gen.c', '../../lib/lv_bindings/lvgl/src/core/lv_obj_tree.c', '../../lib/lv_bindings/lvgl/src/core/lv_refr.c', '../../lib/lv_bindings/lvgl/src/core/lv_theme.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_arc.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_blend.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_img.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_label.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_line.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_mask.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_rect.c', '../../lib/lv_bindings/lvgl/src/draw/lv_draw_triangle.c', '../../lib/lv_bindings/lvgl/src/draw/lv_img_buf.c', '../../lib/lv_bindings/lvgl/src/draw/lv_img_cache.c', '../../lib/lv_bindings/lvgl/src/draw/lv_img_decoder.c', '../../lib/lv_bindings/lvgl/src/extra/layouts/flex/lv_flex.c', '../../lib/lv_bindings/lvgl/src/extra/layouts/grid/lv_grid.c', '../../lib/lv_bindings/lvgl/src/extra/libs/bmp/lv_bmp.c', '../../lib/lv_bindings/lvgl/src/extra/libs/freetype/lv_freetype.c', '../../lib/lv_bindings/lvgl/src/extra/libs/fsdrv/lv_fs_fatfs.c', '../../lib/lv_bindings/lvgl/src/extra/libs/fsdrv/lv_fs_posix.c', '../../lib/lv_bindings/lvgl/src/extra/libs/fsdrv/lv_fs_stdio.c', '../../lib/lv_bindings/lvgl/src/extra/libs/fsdrv/lv_fs_win32.c', '../../lib/lv_bindings/lvgl/src/extra/libs/gif/gifdec.c', '../../lib/lv_bindings/lvgl/src/extra/libs/gif/lv_gif.c', '../../lib/lv_bindings/lvgl/src/extra/libs/png/lodepng.c', '../../lib/lv_bindings/lvgl/src/extra/libs/png/lv_png.c', '../../lib/lv_bindings/lvgl/src/extra/libs/qrcode/lv_qrcode.c', '../../lib/lv_bindings/lvgl/src/extra/libs/qrcode/qrcodegen.c', '../../lib/lv_bindings/lvgl/src/extra/libs/rlottie/lv_rlottie.c', '../../lib/lv_bindings/lvgl/src/extra/libs/sjpg/lv_sjpg.c', '../../lib/lv_bindings/lvgl/src/extra/libs/sjpg/tjpgd.c', '../../lib/lv_bindings/lvgl/src/extra/lv_extra.c', '../../lib/lv_bindings/lvgl/src/extra/others/snapshot/lv_snapshot.c', '../../lib/lv_bindings/lvgl/src/extra/themes/basic/lv_theme_basic.c', '../../lib/lv_bindings/lvgl/src/extra/themes/default/lv_theme_default.c', '../../lib/lv_bindings/lvgl/src/extra/themes/mono/lv_theme_mono.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/animimg/lv_animimg.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/calendar/lv_calendar.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/calendar/lv_calendar_header_arrow.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/calendar/lv_calendar_header_dropdown.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/chart/lv_chart.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/colorwheel/lv_colorwheel.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/imgbtn/lv_imgbtn.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/keyboard/lv_keyboard.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/led/lv_led.c', '../../lib/lv_bindings/lvgl/src/extra/widgets/list/lv_list.c']' returned non-zero exit status 1.
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
Traceback (most recent call last):
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3308, in <module>
    sys.exit(run(sys.argv))
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 763, in run
    options, settings_changes, newargs = parse_args(newargs)
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 2343, in parse_args
    options.debug_level = validate_arg_level(requested_level, 4, 'Invalid debug level: ' + newargs[i])
  File "/home/*****/Workspace/emsdk/emscripten/1.38.31/emcc.py", line 3302, in validate_arg_level
    raise Exception(err_msg)
Exception: Invalid debug level: -gsource-map
make: *** [../../py/mkrules.mk:105: build/genhdr/qstr.i.last] Error 1
make: *** Deleting file 'build/genhdr/qstr.i.last'
make: Leaving directory '/home/*****/Workspace/espy_dive_docker/micropython/ports/javascript'

If anyone knows what might be causing this then I would really appreciate it.

Thanks

embeddedt · December 20, 2021, 7:04pm

The currently developed branch is lvgl_javascript_v8. I should probably archive some of the other branches or do something to make them less obvious.

A list of steps on how to set up and build this branch are here.

minyiky · December 20, 2021, 8:49pm

Thanks for the quick reply,

Just trying that and I get the following error on the make step

../../lib/lv_bindings/driver/SDL/SDL_monitor.c:19:10: fatal error: 'SDL2/SDL.h' file not found
#include MONITOR_SDL_INCLUDE_PATH
         ^~~~~~~~~~~~~~~~~~~~~~~~
../../lib/lv_bindings/driver/SDL/lv_drv_conf.h:89:37: note: expanded from macro 'MONITOR_SDL_INCLUDE_PATH'
#define MONITOR_SDL_INCLUDE_PATH    <SDL2/SDL.h>    /*Eclipse: <SDL2/SDL.h>    Visual Studio: <SDL.h>*/
                                    ^~~~~~~~~~~~
<scratch space>:83:1: note: expanded from here
<SDL2/SDL.h>

Any ideas what might be causing this?

embeddedt · December 20, 2021, 10:52pm

Try running embuilder build sdl2 first. I thought that was handled automatically now but perhaps not.

minyiky · December 21, 2021, 11:18am

That seems to have done the trick to get it made.

I ran into one more error on npm run serve but was able to solve that by running npm install -g live-server

I now have the simulator page up but the display section is remaining blank and the repl is still in the loading state

On a separate note, is there any documention anywhere for running custom scripts using the javascript port of micropython and LVGL rather than opening the standard simulator

minyiky · December 21, 2021, 1:29pm

As an update toi this the following errors have shown when inspecting element:

embeddedt · December 21, 2021, 2:02pm

Thanks for the console screenshot, otherwise I’d have just asked for that next.

Did you run npm run clean and npm run bundle as well? You have to run make after npm run clean because of the way I’m handling the output directories at the moment. I should probably make that clearer in the documentation.

By custom scripts, do you mean running with only the REPL and display visible and not the editor?

minyiky · December 21, 2021, 2:08pm

Having run into a couple of errors I may well have not got the order completely right, I will try again from sratch and see where I get to.

Pretty much, I would like to be able to display a demo application for a board + display using a specified .py script, To be honest I wouldn’t even need the REPL for this instance.

This may become clearer however once I have the simulator fully working.

Update 1

Following all of the steps the standard simulator appears to be working. The additional steps I included were npm install live-server and embuilder build sdl2 between the npm install and npm run clean steps

Thanks @embeddedt for the help

minyiky · January 2, 2022, 6:40pm

Out of interest did you have any suggestions regarding this?

embeddedt · January 10, 2022, 9:53pm

Probably the easiest way for me to do this is to add a flag (as a query parameter in the URL) that hides all the UI elements and only shows the canvas itself. This would actually be useful for our purposes as well as I can then actually embed a MicroPython iframe on the documentation pages directly.

GC-RmG · March 10, 2022, 6:43pm

LVGL 8.1
WSL2
Ubuntu 20.04.4 LTS
Python 3.8.10

I also need a simulator for a device I am building so users
can have an interactive demo of the project.
I also need to creat manuals and taking screen shots of a monitor
is much easer than photographs of a TFT display.

I belive the build worked…

But the console has WebSocket issues

REPL say Loading…
and no image in Display area.

Start the development server…
npm run dev

What should I expect to happen after ‘npm run dev’.
Should I click on index.html with chrome, or do
I need to access via the Address Bar like localhost…

I am also hoping to use just a .py file for the simulator, no repl.

Note: Running on a local machine.

embeddedt · March 10, 2022, 11:40pm

It looks like you’re using an outdated version of the simulator. The latest version uses Webpack instead of Parcel. Older versions don’t have a properly working dev mode.

With the newer version installed, you can’t click on index.html with Chrome; browsers don’t allow JavaScript to load correctly from file:/// URLs anymore. However, the server should run at this URL: http://localhost:8080/ and your browser should normally open automatically when you run npm run dev.

GC-RmG · March 11, 2022, 10:12am

I followed this method…

How do I go about cleaning up /ports/javascript folder and fix?
Used DownGit… Try again

Update:
almost there…

No Display…
Any ideas for issue.

What is ‘npm run bundle’ for ?

GC-RmG · March 12, 2022, 8:23pm

Looked in help(“modules”) and no display_driver.

Is this included in this repo or do I need to make?

GC-RmG · March 13, 2022, 10:29am

So I tried using the SDL driver…

What now ?

I was using wrong SDL setup… NOW GOOD !

So where is the display_driver module?