Button Click is OK yay!

Author: lupyuen

build.sh

@@ -103,7 +103,6 @@ function build_zig {
     -DLV_USE_LOG=1 \
     -DLV_LOG_LEVEL=LV_LOG_LEVEL_TRACE \
     -DLV_LOG_TRACE_OBJ_CREATE=1 \
-    -DLV_LOG_TRACE_TIMER=1 \
     "-DLV_ASSERT_HANDLER={void lv_assert_handler(void); lv_assert_handler();}" \
     -I . \
     \
@@ -248,7 +247,6 @@ function compile_lvgl {
     -DLV_USE_LOG=1 \
     -DLV_LOG_LEVEL=LV_LOG_LEVEL_TRACE \
     -DLV_LOG_TRACE_OBJ_CREATE=1 \
-    -DLV_LOG_TRACE_TIMER=1 \
     "-DLV_ASSERT_HANDLER={void lv_assert_handler(void); lv_assert_handler();}" \
     \
     -c \
@@ -309,7 +307,6 @@ function build_feature_phone {
     -DLV_USE_LOG=1 \
     -DLV_LOG_LEVEL=LV_LOG_LEVEL_TRACE \
     -DLV_LOG_TRACE_OBJ_CREATE=1 \
-    -DLV_LOG_TRACE_TIMER=1 \
     "-DLV_ASSERT_HANDLER={void lv_assert_handler(void); lv_assert_handler();}" \
     -I . \
     \

feature-phone.js

@@ -36,7 +36,8 @@ const importObject = {
 
             // Get the WebAssembly Pointer to the LVGL Canvas Buffer
             console.log("render: start");
-            const bufferOffset = wasm.instance.exports.getCanvasBuffer();
+            const bufferOffset = wasm.instance.exports
+                .getCanvasBuffer();
             console.log({ bufferOffset });
 
             // Load the WebAssembly Pointer into a JavaScript Image Data
@@ -73,13 +74,34 @@ const context = canvas.getContext("2d");
 const imageData = context.createImageData(canvas.width, canvas.height);
 context.clearRect(0, 0, canvas.width, canvas.height);
 
+// Handle Mouse Down on HTML Canvas
+canvas.addEventListener("mousedown", (e) => {
+    // Notify Zig of Mouse Down
+    const x = e.offsetX;
+    const y = e.offsetY;
+    console.log({mousedown: {x, y}});
+    wasm.instance.exports
+        .notifyInput(1, x, y);
+});
+
+// Handle Mouse Up on HTML Canvas
+canvas.addEventListener("mouseup", (e) => {
+    // Notify Zig of Mouse Up
+    x = e.offsetX;
+    y = e.offsetY;
+    console.log({mouseup: {x, y}});
+    wasm.instance.exports
+        .notifyInput(0, x, y);
+});
+
 // Main Function
 function main() {
     console.log("main: start");
     const start_ms = Date.now();
 
     // Render the LVGL Widgets in Zig
-    wasm.instance.exports.lv_demo_widgets();
+    wasm.instance.exports
+        .lv_demo_widgets();
 
     // Render Loop
     const loop = function() {
@@ -88,11 +110,12 @@ function main() {
         const elapsed_ms = Date.now() - start_ms;
 
         // Handle LVGL Tasks to update the display
-        wasm.instance.exports.handleTimer(elapsed_ms);
+        wasm.instance.exports
+            .handleTimer(elapsed_ms);
 
         // Loop to next frame
-        // TODO: window.requestAnimationFrame(loop);
-        window.setTimeout(loop, 1000);
+        window.requestAnimationFrame(loop);
+        // Previously: window.setTimeout(loop, 100);
     };
 
     // Start the Render Loop

feature-phone.wasm

@@ -198,6 +198,7 @@ fn createButton() void {
 /// https://docs.lvgl.io/8.3/examples.html#simple-buttons
 export fn eventHandler(e: ?*c.lv_event_t) void {
     const code = c.lv_event_get_code(e);
+    // debug("eventHandler: code={}", .{code});
     if (code == c.LV_EVENT_CLICKED) {
         debug("eventHandler: clicked", .{});
     } else if (code == c.LV_EVENT_VALUE_CHANGED) {
@@ -238,6 +239,7 @@ export fn readInput(drv: [*c]c.lv_indev_drv_t, data: [*c]c.lv_indev_data_t) void
     if (input_updated) {
         input_updated = false;
         c.set_input_data(data, input_state, input_x, input_y);
+        debug("readInput: state={}, x={}, y={}", .{ input_state, input_x, input_y });
     }
 }