Skip to content

Commit d584f43

Browse files
committed
Rendering canvas
1 parent 046c8a4 commit d584f43

File tree

6 files changed

+60
-18
lines changed

6 files changed

+60
-18
lines changed

display.c

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,25 @@
66
#include <lvgl/lvgl.h>
77
#include "display.h"
88

9-
// Display Buffer
9+
// Canvas Buffer for rendering LVGL Display
1010
#define HOR_RES 720 // Horizontal Resolution
1111
#define VER_RES 1280 // Vertical Resolution
1212
#define BUFFER_ROWS VER_RES // Number of rows to buffer
1313
#define BUFFER_SIZE (HOR_RES * BUFFER_ROWS)
14-
static lv_color_t display_buffer[BUFFER_SIZE];
14+
static lv_color_t canvas_buffer[BUFFER_SIZE];
15+
16+
lv_color_t *get_canvas_buffer(void)
17+
{
18+
int count = 0;
19+
for (int i = 0; i < BUFFER_SIZE; i++) {
20+
if (canvas_buffer[i].full != 0xfff5f5f5) { // TODO
21+
lv_log("get_canvas_buffer: 0x%x", canvas_buffer[i].full);
22+
count++;
23+
}
24+
}
25+
lv_log("get_canvas_buffer: %d", count);
26+
return canvas_buffer;
27+
}
1528

1629
/****************************************************************************
1730
* Name: get_disp_drv
@@ -89,5 +102,5 @@ void init_disp_drv(
89102
void init_disp_buf(lv_disp_draw_buf_t *disp_buf)
90103
{
91104
LV_ASSERT(disp_buf != NULL);
92-
lv_disp_draw_buf_init(disp_buf, display_buffer, NULL, BUFFER_SIZE);
105+
lv_disp_draw_buf_init(disp_buf, canvas_buffer, NULL, BUFFER_SIZE);
93106
}

display.h

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
lv_color_t *get_canvas_buffer(void);
2+
13
/****************************************************************************
24
* Name: get_disp_drv
35
*

lvglwasm.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
<!-- From https://dev.to/sleibrock/webassembly-with-zig-pt-ii-ei7 -->
33
<html>
44
<head>
5-
<title>Game Demo</title>
5+
<title>LVGL in WebAssembly with Zig</title>
66
</head>
77
<body>
8-
<h3>Game Demo</h3>
9-
<canvas id="game_canvas" width="640" height="480">
8+
<h3>LVGL in WebAssembly with Zig</h3>
9+
<canvas id="game_canvas" width="720" height="1280">
1010
Browser does not support HTML5 canvas element
1111
</canvas>
1212
</body>

lvglwasm.js

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,36 @@ request.send();
1313

1414
// On Loading the WebAssembly Module...
1515
request.onload = function() {
16+
const wasmMemoryArray = new Uint8Array(wasmMemory.buffer);
17+
1618
var bytes = request.response;
1719
WebAssembly.instantiate(bytes, {
1820
// JavaScript Environment exported to Zig
1921
env: {
20-
// JavaScript Print Function exported to Zig
21-
print: function(x) { console.log(x); },
22+
// Render the LVGL Canvas from Zig to HTML
23+
// https://github.com/daneelsan/minimal-zig-wasm-canvas/blob/master/script.js
24+
render: function() {
25+
console.log("render: start");
26+
const bufferOffset = wasm.instance.exports.getCanvasBuffer();
27+
console.log({ bufferOffset });
28+
const imageDataArray = wasmMemoryArray.slice(
29+
bufferOffset,
30+
bufferOffset + (canvas.width * canvas.height) * 4
31+
);
32+
imageData.data.set(imageDataArray);
33+
34+
context.clearRect(0, 0, canvas.width, canvas.height);
35+
context.putImageData(imageData, 0, 0);
36+
console.log("render: end");
37+
},
2238

2339
// Write to JavaScript Console from Zig
24-
jsConsoleLogWrite: function (ptr, len) {
40+
jsConsoleLogWrite: function(ptr, len) {
2541
console_log_buffer += wasm.getString(ptr, len);
2642
},
2743

2844
// Flush JavaScript Console from Zig
29-
jsConsoleLogFlush: function () {
45+
jsConsoleLogFlush: function() {
3046
console.log(console_log_buffer);
3147
console_log_buffer = "";
3248
},
@@ -41,9 +57,17 @@ request.onload = function() {
4157
});
4258
};
4359

60+
// WebAssembly Memory for copying the LVGL Canvas from Zig
61+
var wasmMemory = new WebAssembly.Memory({
62+
initial: 2 /* pages */,
63+
maximum: 2 /* pages */,
64+
});
65+
4466
// Get the HTML Canvas Context
4567
const canvas = window.document.getElementById("game_canvas");
46-
const ctx = canvas.getContext('2d');
68+
const context = canvas.getContext("2d");
69+
const imageData = context.createImageData(canvas.width, canvas.height);
70+
context.clearRect(0, 0, canvas.width, canvas.height);
4771

4872
// Main Loop
4973
const main = function() {

lvglwasm.wasm

994 Bytes
Binary file not shown.

lvglwasm.zig

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -90,14 +90,18 @@ export fn flushDisplay(disp_drv: ?*c.lv_disp_drv_t, area: [*c]const c.lv_area_t,
9090
debug("flushDisplay: start", .{});
9191
defer debug("flushDisplay: end", .{});
9292

93+
// Call the Web Browser JavaScript o render the LVGL Canvas Buffer
94+
render();
95+
9396
// Notify LVGL that the display is flushed
9497
c.lv_disp_flush_ready(disp_drv);
9598
}
9699

97-
// Return a WebAssembly Pointer to the Display Buffer
98-
// export fn getCheckerboardBufferPointer() [*]u8 {
99-
// return @ptrCast([*]u8, &checkerboard_buffer);
100-
// }
100+
/// Return a WebAssembly Pointer to the LVGL Canvas Buffer for JavaScript Rendering
101+
export fn getCanvasBuffer() [*]u8 {
102+
const buf = c.get_canvas_buffer();
103+
return @ptrCast([*]u8, buf);
104+
}
101105

102106
///////////////////////////////////////////////////////////////////////////////
103107
// Create Widgets
@@ -266,9 +270,8 @@ pub fn log(
266270
///////////////////////////////////////////////////////////////////////////////
267271
// Imported Functions and Variables
268272

269-
/// Extern functions refer to the exterior JS namespace
270-
/// when importing wasm code, the `print` func must be provided
271-
extern fn print(i32) void;
273+
/// JavaScript Functions imported into Zig WebAssembly
274+
extern fn render() void;
272275

273276
/// Aliases for Zig Standard Library
274277
const assert = std.debug.assert;

0 commit comments

Comments
 (0)