lvgl · shlomozippel · Apr 8, 2025 · May 8, 2025 · May 9, 2025 · May 9, 2025
diff --git a/ports/esp32/boards/ESP32_GENERIC_S3/manifest.py b/ports/esp32/boards/ESP32_GENERIC_S3/manifest.py
@@ -0,0 +1,2 @@
+include("$(PORT_DIR)/boards/manifest.py")
+include("$(MPY_DIR)/user_modules/lv_binding_micropython/ports/esp32")
diff --git a/ports/esp32/boards/ESP32_GENERIC_S3/mpconfigboard.cmake b/ports/esp32/boards/ESP32_GENERIC_S3/mpconfigboard.cmake
@@ -8,3 +8,7 @@ set(SDKCONFIG_DEFAULTS
     boards/sdkconfig.spiram_sx
     boards/ESP32_GENERIC_S3/sdkconfig.board
 )
+
+set(LV_CFLAGS -DLV_COLOR_DEPTH=16 -DLV_COLOR_16_SWAP=1)
+
+set(MICROPY_FROZEN_MANIFEST ${MICROPY_BOARD_DIR}/manifest.py)
diff --git a/ports/esp32/esp32_common.cmake b/ports/esp32/esp32_common.cmake
@@ -11,7 +11,7 @@ endif()
 # Include core source components.
 include(${MICROPY_DIR}/py/py.cmake)
 
-set(USER_C_MODULES "${MICROPY_DIR}/user_modules/lv_binding_micropython/micropython.cmake")
+list(APPEND USER_C_MODULES "${MICROPY_DIR}/user_modules/lv_binding_micropython/micropython.cmake")
 
 # CMAKE_BUILD_EARLY_EXPANSION is set during the component-discovery phase of
 # `idf.py build`, so none of the extmod/usermod (and in reality, most of the

diff --git a/ports/webassembly/Makefile b/ports/webassembly/Makefile
@@ -46,6 +46,7 @@ INC += -I$(BUILD)
 INC += -I$(VARIANT_DIR)
 
 CFLAGS += -std=c99 -Wall -Werror -Wdouble-promotion -Wfloat-conversion
+CFLAGS += -Wno-unused-function
 CFLAGS += -Os -DNDEBUG
 CFLAGS += $(INC)
 
@@ -77,7 +78,8 @@ EXPORTED_RUNTIME_METHODS_EXTRA += ,\
 	getValue,\
 	lengthBytesUTF8,\
 	setValue,\
-	stringToUTF8
+	stringToUTF8, \
+	setMainLoop
 
 JSFLAGS += -s EXPORTED_FUNCTIONS="\
 	_free,\
@@ -95,6 +97,7 @@ JSFLAGS += --js-library library.js
 JSFLAGS += -s SUPPORT_LONGJMP=emscripten
 JSFLAGS += -s MODULARIZE -s EXPORT_NAME=_createMicroPythonModule
 
+
 ################################################################################
 # Source files and libraries.
 
@@ -130,7 +133,7 @@ OBJ += $(addprefix $(BUILD)/, $(SRC_C:.c=.o))
 ################################################################################
 # Main targets.
 
-.PHONY: all repl min test test_min
+.PHONY: all repl min test test_min 
 
 all: $(BUILD)/micropython.mjs
 

diff --git a/ports/webassembly/api.js b/ports/webassembly/api.js
@@ -35,12 +35,15 @@
 // - stderr: same behaviour as stdout but for error output.
 // - linebuffer: whether to buffer line-by-line to stdout/stderr.
 export async function loadMicroPython(options) {
-    const { pystack, heapsize, url, stdin, stdout, stderr, linebuffer } =
+    const { pystack, heapsize, url, stdin, stdout, stderr, linebuffer, canvasRef } =
         Object.assign(
             { pystack: 2 * 1024, heapsize: 1024 * 1024, linebuffer: true },
             options,
         );
     let Module = {};
+    if (canvasRef) {
+        Module.canvas = canvasRef;
+    }
     Module.locateFile = (path, scriptDirectory) =>
         url || scriptDirectory + path;
     Module._textDecoder = new TextDecoder();
@@ -105,6 +108,7 @@ export async function loadMicroPython(options) {
         [pystack, heapsize],
     );
     Module.ccall("proxy_c_init", "null", [], []);
+
     return {
         _module: Module,
         PyProxy: PyProxy,

diff --git a/ports/webassembly/index.html b/ports/webassembly/index.html
@@ -0,0 +1,84 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>µPy + term.js REPL</title>
+  <!-- xterm.js CSS -->
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/[email protected]/css/xterm.css"
+  />
+
+  <style>
+    body, html {
+      margin: 0; padding: 0;
+      height: 100%; width: 100%;
+      display: flex; flex-direction: column;
+    }
+    #repl {
+      flex: 1;
+      display: flex;
+      overflow: hidden;
+    }
+    #term {
+      flex: 1;
+    }
+    #canvas {
+      width: 400px;
+      height: 100%;
+      border-left: 1px solid #444;
+    }
+  </style>
+</head>
+<body>
+    <div id="repl">
+        <div id="term"></div>
+        <canvas id="canvas"></canvas>
+      </div>
+
+  <script src="https://unpkg.com/[email protected]/lib/xterm.js"></script>
+
+  <script type="module">
+    import {
+      loadMicroPython,
+    } from './build-lvgl/micropython.mjs';
+
+    // instantiate term.js
+    const term = new Terminal({
+      cols: 80, rows: 24,
+      cursorBlink: true,
+      convertEol: true
+    });
+    term.open(document.getElementById('term'));
+
+    function writeToTerm(data) {
+        term.write(data);
+}    
+    // load the wasm VM, wiring stdout/stderr into our term
+    const mpReady = loadMicroPython({
+      stdout: writeToTerm,
+      stderr: writeToTerm,
+      linebuffer: false,
+    });
+
+    mpReady.then(mp => {
+        // set up the canvas for SDL2
+        Module['canvas'] = (function() {
+            var canvas = window.top.document.getElementById('canvas');
+			return canvas;
+		})();
+
+        // initialize the builtin REPL state
+        mp.replInit();
+
+        // feed each keypress into the µPy REPL processor
+        term.onKey(async ({ key, domEvent }) => {
+            const code = key.charCodeAt(0);
+            const done = await mp.replProcessCharWithAsyncify(code);
+            // TODO: handle if (done) 
+        });
+    });
+
+  </script>
+</body>
+</html>
diff --git a/ports/webassembly/variants/lvgl/manifest.py b/ports/webassembly/variants/lvgl/manifest.py
@@ -0,0 +1,2 @@
+include("$(PORT_DIR)/variants/pyscript/manifest.py")
+freeze("$(PORT_DIR)/variants/lvgl/modules")
diff --git a/ports/webassembly/variants/lvgl/modules/display_driver.py b/ports/webassembly/variants/lvgl/modules/display_driver.py
@@ -0,0 +1,2 @@
+from display_driver_utils import driver
+drv = driver()
diff --git a/ports/webassembly/variants/lvgl/modules/display_driver_utils.py b/ports/webassembly/variants/lvgl/modules/display_driver_utils.py
@@ -0,0 +1,137 @@
+import usys as sys
+sys.path.append('') # See: https://github.com/micropython/micropython/issues/6419
+
+import lvgl as lv
+
+try:
+    import lv_utils
+    lv_utils_available = True
+except:
+    lv_utils_available = False
+
+ORIENT_LANDSCAPE = False
+ORIENT_PORTRAIT  = True
+
+class driver:
+
+    def __init__(self,width=420,height=320,orientation=ORIENT_PORTRAIT, asynchronous=False, exception_sink=None, defaultGroup=True):
+
+        if not lv.is_initialized():
+            lv.init()
+
+        self.group = lv.group_create()
+        if defaultGroup:
+            self.group.set_default()
+
+        self.width = width
+        self.height = height
+        self.orientation = orientation
+        self.asynchronous = asynchronous
+        self.exception_sink = exception_sink
+        self.disp = None
+        self.touch = None
+        self.type = None
+        if not (lv_utils_available and lv_utils.event_loop.is_running()):
+            self.init_gui()
+
+    def init_gui_SDL(self):
+        if lv_utils_available:
+            self.event_loop = lv_utils.event_loop(asynchronous=self.asynchronous, exception_sink=self.exception_sink)
+
+        lv.sdl_window_create(self.width, self.height)
+        self.mouse = lv.sdl_mouse_create()
+        self.keyboard = lv.sdl_keyboard_create()
+        self.keyboard.set_group(self.group)
+        self.type = "SDL"
+        print("Running the SDL lvgl version")
+
+    def init_gui_ili9341(self):
+
+        # Initialize ILI9341 display
+
+        from ili9XXX import ili9341,LANDSCAPE
+        from xpt2046 import xpt2046
+        #import espidf as esp
+
+        if lv_utils_available:
+            self.event_loop = lv_utils.event_loop(asynchronous=self.asynchronous, exception_sink=self.exception_sink)
+
+        if self.orientation == ORIENT_PORTRAIT:
+            print ("Running the ili9341 lvgl version in portrait mode")
+
+            # Initialize ILI9341 display in prtrait mode
+            # the following are the settings for the Lolin tft 2.4 display
+            # self.disp = ili9341(miso=19,mosi=23,clk=18, cs=26, dc=5, rst=-1, power=-1, backlight=-1, spihost=esp.VSPI_HOST)
+            # self.touch = xpt2046(spihost=esp.VSPI_HOST,cal_x0=3751, cal_x1 = 210, cal_y0=3906, cal_y1 = 283, transpose=True)
+
+            self.disp = ili9341()
+            self.touch = xpt2046()
+
+        elif self.orientation == ORIENT_LANDSCAPE:
+            print ("Running the ili9341 lvgl version in landscape mode")
+            # Initialize ILI9341 display
+            # the following are the settings for the Lolin tft 2.4 display
+            # self.disp = ili9341(miso=19,mosi=23,clk=18, cs=26, dc=5, rst=-1, power=-1, backlight=-1, backlight_on=0,
+            #                     spihost=esp.VSPI_HOST, width=320, height=240, rot=LANDSCAPE)
+            # self.touch = xpt2046(spihost=esp.VSPI_HOST,cal_x0=3799, cal_x1 = 353, cal_y0=220, cal_y1 = 3719, transpose=False)
+
+            # Register xpt2046 touch driver
+            self.disp = ili9341(width=320, height=240, rot=LANDSCAPE)
+            self.touch = xpt2046(cal_x0=3799, cal_x1 = 353, cal_y0=220, cal_y1 = 3719,transpose = False)
+
+        else:
+            raise RuntimeError("Invalid orientation")
+
+        self.type="ili9341"
+
+        '''
+        # Register raw resistive touch driver (remove xpt2046 initialization first)
+        import rtch
+        touch = rtch.touch(xp = 32, yp = 33, xm = 25, ym = 26, touch_rail = 27, touch_sense = 33)
+        touch.init()
+        self.indev_drv = lv.indev_create()
+        self.indev_drv.set_type(lv.INDEV_TYPE.POINTER)
+        self.indev_drv.set_read_cb(touch.read)
+        '''
+
+    def init_gui_twatch(self):
+
+            import ttgo
+            from axp_constants import AXP202_VBUS_VOL_ADC1,AXP202_VBUS_CUR_ADC1,AXP202_BATT_CUR_ADC1,AXP202_BATT_VOL_ADC1
+
+            watch = ttgo.Watch()
+            tft = watch.tft
+            power = watch.pmu
+            power.adc1Enable(AXP202_VBUS_VOL_ADC1
+                             | AXP202_VBUS_CUR_ADC1 
+                             | AXP202_BATT_CUR_ADC1
+                             | AXP202_BATT_VOL_ADC1, True)
+            watch.lvgl_begin()
+            watch.tft.backlight_fade(100)
+
+            self.type="t-watch"            
+            print("Running lvgl on the LilyGo t-watch 2020")
+
+    def init_gui(self):
+
+        # Identify platform and initialize it
+
+        try:
+            self.init_gui_twatch()
+            return
+        except:
+            pass
+
+        try:
+            self.init_gui_ili9341()
+            return
+        except ImportError:
+            pass
+
+        try:
+            self.init_gui_SDL()
+            return
+        except ImportError:
+            pass
+
+        raise RuntimeError("Could not find a suitable display driver!")
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		include("$(PORT_DIR)/boards/manifest.py")
		include("$(MPY_DIR)/user_modules/lv_binding_micropython/ports/esp32")
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		include("$(PORT_DIR)/variants/pyscript/manifest.py")
		freeze("$(PORT_DIR)/variants/lvgl/modules")
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		from display_driver_utils import driver
		drv = driver()