Rendering canvas

lupyuen · lupyuen · commit d584f43c6354 · 2023-05-28T18:55:49.000+08:00
diff --git a/display.c b/display.c
@@ -6,12 +6,25 @@
 #include <lvgl/lvgl.h>
 #include "display.h"
 
-// Display Buffer
+// Canvas Buffer for rendering LVGL Display
 #define HOR_RES     720      // Horizontal Resolution
 #define VER_RES     1280     // Vertical Resolution
 #define BUFFER_ROWS VER_RES  // Number of rows to buffer
 #define BUFFER_SIZE (HOR_RES * BUFFER_ROWS)
-static lv_color_t display_buffer[BUFFER_SIZE];
+static lv_color_t canvas_buffer[BUFFER_SIZE];
+
+lv_color_t *get_canvas_buffer(void)
+{
+  int count = 0;
+  for (int i = 0; i < BUFFER_SIZE; i++) {
+    if (canvas_buffer[i].full != 0xfff5f5f5) {  // TODO
+      lv_log("get_canvas_buffer: 0x%x", canvas_buffer[i].full);
+      count++; 
+    }
+  }
+  lv_log("get_canvas_buffer: %d", count);
+  return canvas_buffer;
+}
 
 /****************************************************************************
  * Name: get_disp_drv
@@ -89,5 +102,5 @@ void init_disp_drv(
 void init_disp_buf(lv_disp_draw_buf_t *disp_buf)
 {
   LV_ASSERT(disp_buf != NULL);
-  lv_disp_draw_buf_init(disp_buf, display_buffer, NULL, BUFFER_SIZE);
+  lv_disp_draw_buf_init(disp_buf, canvas_buffer, NULL, BUFFER_SIZE);
 }
diff --git a/display.h b/display.h
@@ -1,3 +1,5 @@
+lv_color_t *get_canvas_buffer(void);
+
 /****************************************************************************
  * Name: get_disp_drv
  *
diff --git a/lvglwasm.html b/lvglwasm.html
@@ -2,11 +2,11 @@
 <!-- From https://dev.to/sleibrock/webassembly-with-zig-pt-ii-ei7 -->
 <html>
   <head>
-    <title>Game Demo</title>
+    <title>LVGL in WebAssembly with Zig</title>
   </head>
   <body>
-    <h3>Game Demo</h3>
-    <canvas id="game_canvas" width="640" height="480">
+    <h3>LVGL in WebAssembly with Zig</h3>
+    <canvas id="game_canvas" width="720" height="1280">
       Browser does not support HTML5 canvas element
     </canvas>
   </body>
diff --git a/lvglwasm.js b/lvglwasm.js
@@ -13,20 +13,36 @@ request.send();
 
 // On Loading the WebAssembly Module...
 request.onload = function() {
+    const wasmMemoryArray = new Uint8Array(wasmMemory.buffer);
+
     var bytes = request.response;
     WebAssembly.instantiate(bytes, {
         // JavaScript Environment exported to Zig
         env: {
-            // JavaScript Print Function exported to Zig
-            print: function(x) { console.log(x); },
+            // Render the LVGL Canvas from Zig to HTML
+            // https://github.com/daneelsan/minimal-zig-wasm-canvas/blob/master/script.js
+            render: function() {
+                console.log("render: start");
+                const bufferOffset = wasm.instance.exports.getCanvasBuffer();
+                console.log({ bufferOffset });
+                const imageDataArray = wasmMemoryArray.slice(
+                    bufferOffset,
+                    bufferOffset + (canvas.width * canvas.height) * 4
+                );
+                imageData.data.set(imageDataArray);
+        
+                context.clearRect(0, 0, canvas.width, canvas.height);
+                context.putImageData(imageData, 0, 0);
+                console.log("render: end");
+            },
 
             // Write to JavaScript Console from Zig
-            jsConsoleLogWrite: function (ptr, len) {
+            jsConsoleLogWrite: function(ptr, len) {
                 console_log_buffer += wasm.getString(ptr, len);
             },
 
             // Flush JavaScript Console from Zig
-            jsConsoleLogFlush: function () {
+            jsConsoleLogFlush: function() {
                 console.log(console_log_buffer);
                 console_log_buffer = "";
             },
@@ -41,9 +57,17 @@ request.onload = function() {
     });
 };
 
+// WebAssembly Memory for copying the LVGL Canvas from Zig
+var wasmMemory = new WebAssembly.Memory({
+    initial: 2 /* pages */,
+    maximum: 2 /* pages */,
+});
+
 // Get the HTML Canvas Context
 const canvas = window.document.getElementById("game_canvas");
-const ctx = canvas.getContext('2d');
+const context = canvas.getContext("2d");
+const imageData = context.createImageData(canvas.width, canvas.height);
+context.clearRect(0, 0, canvas.width, canvas.height);
 
 // Main Loop
 const main = function() {
diff --git a/lvglwasm.wasm b/lvglwasm.wasm
diff --git a/lvglwasm.zig b/lvglwasm.zig
@@ -90,14 +90,18 @@ export fn flushDisplay(disp_drv: ?*c.lv_disp_drv_t, area: [*c]const c.lv_area_t,
     debug("flushDisplay: start", .{});
     defer debug("flushDisplay: end", .{});
 
+    // Call the Web Browser JavaScript o render the LVGL Canvas Buffer
+    render();
+
     // Notify LVGL that the display is flushed
     c.lv_disp_flush_ready(disp_drv);
 }
 
-// Return a WebAssembly Pointer to the Display Buffer
-// export fn getCheckerboardBufferPointer() [*]u8 {
-//     return @ptrCast([*]u8, &checkerboard_buffer);
-// }
+/// Return a WebAssembly Pointer to the LVGL Canvas Buffer for JavaScript Rendering
+export fn getCanvasBuffer() [*]u8 {
+    const buf = c.get_canvas_buffer();
+    return @ptrCast([*]u8, buf);
+}
 
 ///////////////////////////////////////////////////////////////////////////////
 //  Create Widgets
@@ -266,9 +270,8 @@ pub fn log(
 ///////////////////////////////////////////////////////////////////////////////
 //  Imported Functions and Variables
 
-/// Extern functions refer to the exterior JS namespace
-/// when importing wasm code, the `print` func must be provided
-extern fn print(i32) void;
+/// JavaScript Functions imported into Zig WebAssembly
+extern fn render() void;
 
 /// Aliases for Zig Standard Library
 const assert = std.debug.assert;

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+lv_color_t *get_canvas_buffer(void);`
	`2`	`+`
`1`	`3`	`/****************************************************************************`
`2`	`4`	`* Name: get_disp_drv`
`3`	`5`	`*`