Issuses Making the Javacript Port

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

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.

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?

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

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

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

image

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

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?

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

Out of interest did you have any suggestions regarding this?

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.