Rendering canvas

lupyuen · May 28, 2023 · d584f43 · d584f43
1 parent 046c8a4
commit d584f43
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 18 deletions.
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;