/// Labels for Call and Cancel Buttons
const call_labels = [_][]const u8{
  "Call",
  "Cancel" 
};

/// Create the Call and Cancel Buttons
/// https://docs.lvgl.io/8.3/examples.html#simple-buttons
fn createCallButtons(cont: *c.lv_obj_t) !void {

  // For each Button: Call and Connect...
  // `text` is the Button Text
  for (call_labels) |text| {

    // Create a Button of 250 x 100 pixels
    const btn = c.lv_btn_create(cont);
    c.lv_obj_set_size(btn, 250, 100);

    // Center the Button Label: Call or Cancel
    const label = c.lv_label_create(btn);
    c.lv_label_set_text(label, text.ptr);
    c.lv_obj_center(label);

    // Convert the Button Text from Zig Pointer to C Pointer
    const data = @intToPtr(
      *anyopaque,          // Convert to `void *` C Pointer
      @ptrToInt(text.ptr)  // Convert from Zig Pointer
    );

    // Set the Event Callback Function and Callback Data for the Button
    _ = c.lv_obj_add_event_cb(
      btn,             // LVGL Button
      eventHandler,    // Callback Function
      c.LV_EVENT_ALL,  // Handle all events
      data             // Callback Data (Button Text)
    );
  }
}

/// Labels for Digit Buttons
const digit_labels = [_][]const u8{
  "1", "2", "3", "4", "5", "6",
  "7", "8", "9", "*", "0", "#"
};

/// Create the Digit Buttons
/// https://docs.lvgl.io/8.3/examples.html#simple-buttons
fn createDigitButtons(cont: *c.lv_obj_t) !void {

  // For each Digit Button...
  // `text` is the Button Text
  for (digit_labels) |text| {

    // Create a Button of 150 x 120 pixels
    const btn = c.lv_btn_create(cont);
    c.lv_obj_set_size(btn, 150, 120);

    // Center the Button Label
    const label = c.lv_label_create(btn);
    c.lv_label_set_text(label, text.ptr);
    c.lv_obj_center(label);

    // Convert the Button Text from Zig Pointer to C Pointer
    const data = @intToPtr(
      *anyopaque,          // Convert to `void *` C Pointer
      @ptrToInt(text.ptr)  // Convert from Zig Pointer
    );

    // Set the Event Callback Function and Callback Data for the Button
    _ = c.lv_obj_add_event_cb(
      btn,             // LVGL Button
      eventHandler,    // Callback Function
      c.LV_EVENT_ALL,  // Handle all events
      data             // Callback Data (Button Text)
    );
  }
}

/// Create the LVGL Widgets that will be rendered on the display
fn createWidgets() !void {

  // Omitted: Create the Style for the Containers
  ...

  // Create the Container for Display
  // https://docs.lvgl.io/8.3/layouts/flex.html#arrange-items-in-rows-with-wrap-and-even-spacing
  const display_cont = c.lv_obj_create(
    c.lv_scr_act()  // Get Active Screen
  ).?;              // If a Null Pointer is returned, stop

  // Set the Container Size (700 x 150 pixels), Alignment and Style
  c.lv_obj_set_size(display_cont, 700, 150);
  c.lv_obj_align(display_cont, c.LV_ALIGN_TOP_MID, 0, 5);
  c.lv_obj_add_style(display_cont, &cont_style, 0);

  // Create the Container for Call / Cancel Buttons (700 x 200 pixels)
  const call_cont = c.lv_obj_create(c.lv_scr_act()).?;
  c.lv_obj_set_size(call_cont, 700, 200);
  c.lv_obj_align_to(call_cont, display_cont, c.LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  c.lv_obj_add_style(call_cont, &cont_style, 0);

  // Create the Container for Digit Buttons (700 x 800 pixels)
  const digit_cont = c.lv_obj_create(c.lv_scr_act()).?;
  c.lv_obj_set_size(digit_cont, 700, 800);
  c.lv_obj_align_to(digit_cont, call_cont, c.LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
  c.lv_obj_add_style(digit_cont, &cont_style, 0);

  // Create the Display Label
  try createDisplayLabel(display_cont);

  // Create the Call and Cancel Buttons
  try createCallButtons(call_cont);

  // Create the Digit Buttons
  try createDigitButtons(digit_cont);

c.lv_obj_add_style(display_cont, &cont_style, 0);
c.lv_obj_add_style(call_cont,    &cont_style, 0);
c.lv_obj_add_style(digit_cont,   &cont_style, 0);

// LVGL Style for Containers
var cont_style: c.lv_style_t = undefined;

// Create the Style for the Containers
// https://docs.lvgl.io/8.3/layouts/flex.html#arrange-items-in-rows-with-wrap-and-even-spacing
cont_style = std.mem.zeroes(c.lv_style_t);
c.lv_style_init(&cont_style);
c.lv_style_set_flex_flow(&cont_style, c.LV_FLEX_FLOW_ROW_WRAP);
c.lv_style_set_flex_main_place(&cont_style, c.LV_FLEX_ALIGN_SPACE_EVENLY);
c.lv_style_set_layout(&cont_style, c.LV_LAYOUT_FLEX);

/// LVGL Display Text (64 bytes, null-terminated)
var display_text = std.mem.zeroes([64:0]u8);

/// LVGL Display Label
var display_label: lvgl.Label = undefined;

/// Create the Display Label
fn createDisplayLabel(cont: *c.lv_obj_t) !void {

  // Init the Display Text to `+`
  display_text[0] = '+';

  // Get the Container
  var container = lvgl.Object.init(cont);

  // Create a Label Widget
  display_label = try container.createLabel();

  // Wrap long lines in the label text
  display_label.setLongMode(c.LV_LABEL_LONG_WRAP);

  // Interpret color codes in the label text
  display_label.setRecolor(true);

  // Center align the label text
  display_label.setAlign(c.LV_TEXT_ALIGN_CENTER);

  // Set the label text and colors
  display_label.setText(
    "#ff0000 HELLO# "   ++ // Red Text
    "#00aa00 LVGL ON# " ++ // Green Text
    "#0000ff PINEPHONE!# " // Blue Text
  );

  // Set the label width
  display_label.setWidth(200);

  // Align the label to the top middle
  display_label.alignObject(c.LV_ALIGN_TOP_MID, 0, 0);
}

## Build the Feature Phone Zig LVGL App for WebAssembly 
zig build-lib \
  -target wasm32-freestanding \
  -dynamic \
  -rdynamic \
  -lc \
  -DFAR= \
  -DLV_MEM_CUSTOM=1 \
  feature-phone.zig \
  display.o \
  lv_font_montserrat_14.o \
  lv_font_montserrat_20.o \
  lv_label.o \
  ...

// For each Button: `text` is the Button Text
for (call_labels) |text| {

  // Create a Button of 250 x 100 pixels
  const btn = c.lv_btn_create(cont);
  ...

  // Convert the Button Text from Zig Pointer to C Pointer
  const data = @intToPtr(
    *anyopaque,          // Convert to `void *` C Pointer
    @ptrToInt(text.ptr)  // Convert from Zig Pointer
  );

  // Set the Event Callback Function and Callback Data for the Button
  _ = c.lv_obj_add_event_cb(
    btn,             // LVGL Button
    eventHandler,    // Callback Function
    c.LV_EVENT_ALL,  // Handle all events
    data             // Callback Data (Button Text)
  );

/// Handle LVGL Button Event
/// https://docs.lvgl.io/8.3/examples.html#simple-buttons
export fn eventHandler(e: ?*c.lv_event_t) void {

  // Get the Event Code
  const code = c.lv_event_get_code(e);

  // If Button was clicked...
  if (code == c.LV_EVENT_CLICKED) {

    // Get the length of Display Text (index of null)
    const len = std.mem.indexOfSentinel(u8, 0, &display_text);

    // Get the Button Text (from Callback Data)
    const data = c.lv_event_get_user_data(e);
    const text = @ptrCast([*:0]u8, data);
    const span = std.mem.span(text);

  // Handle the identified button...
  if (std.mem.eql(u8, span, "Call")) {
    // Omitted: Handle Call Button
    ...
  } else if (std.mem.eql(u8, span, "Cancel")) {
    // Omitted: Handle Cancel Button
    ...
  } else {
    // Handle Digit Button:
    // Append the digit clicked to the text
    display_text[len] = text[0];
    c.lv_label_set_text(
      display_label.obj,    // LVGL Label
      display_text[0.. :0]  // Get Null-Terminated String
    );
  }

  } else if (std.mem.eql(u8, span, "Cancel")) {
    // Handle Cancel Button:
    // Erase the last digit
    if (len >= 2) {
      display_text[len - 1] = 0;
      c.lv_label_set_text(
        display_label.obj,    // LVGL Label
        display_text[0.. :0]  // Get Null-Terminated String
      );
    }

  if (std.mem.eql(u8, span, "Call")) {
    // Handle Call Button:
    // Call the number
    const call_number = display_text[0..len :0];  // Get Null-Terminated String
    debug("Call {s}", .{call_number});

/// Import the functions specific to WebAssembly
/// and Apache NuttX RTOS into the Global Namespace
pub usingnamespace

  // Depending on the Target CPU Architecture...
  switch (builtin.cpu.arch) {

    // Import WebAssembly-Specific Functions from `wasm.zig`
    .wasm32, .wasm64 => @import("wasm.zig"),

    // Or import NuttX-Specific Functions from `nuttx.zig`
    else => @import("nuttx.zig"),
  };

## TODO: Change ".." to your NuttX Project Directory
## Compile the Zig LVGL App for PinePhone 
## (armv8-a with cortex-a53)
zig build-obj \
  --verbose-cimport \
  -target aarch64-freestanding-none \
  -mcpu cortex_a53 \
  -isystem "../nuttx/include" \
  -I "../apps/graphics/lvgl" \
  feature-phone.zig \
  ...

## Copy the compiled Zig LVGL App to NuttX and overwrite `lv_demo_widgets.*.o`
cp feature-phone.o \
  ../apps/graphics/lvgl/lvgl/demos/widgets/lv_demo_widgets.*.o

## Link the compiled Zig LVGL App with NuttX
## https://lupyuen.codeberg.page/articles/lvgl2#appendix-build-apache-nuttx-rtos-for-pinephone
## https://lupyuen.codeberg.page/articles/lvgl2#appendix-boot-apache-nuttx-rtos-on-pinephone
cd ../nuttx
make

NuttShell (NSH) NuttX-12.0.3
nsh> lvgldemo

<!doctype html>
<!-- From https://dev.to/sleibrock/webassembly-with-zig-pt-ii-ei7 -->
<html>
  <head>
    <title>Feature Phone UI: LVGL in WebAssembly with Zig</title>
  </head>
  <body style="margin: 0; background-color: lightgrey;">

    <!-- HTML Canvas for rendering LVGL Display -->
    <canvas id="lvgl_canvas" width="720" height="1280">
      Browser does not support HTML5 canvas element
    </canvas>

  </body>
  <!-- Load and execute the LVGL JavaScript -->
  <script src="feature-phone.js"></script>
</html>

// Render LVGL in WebAssembly, compiled with Zig Compiler. Based on...
// https://github.com/daneelsan/minimal-zig-wasm-canvas/blob/master/script.js
// https://github.com/daneelsan/zig-wasm-logger/blob/master/script.js

// Load the WebAssembly Module and start the Main Function
async function bootstrap() {

  // Load the WebAssembly Module `feature-phone.wasm`
  // https://developer.mozilla.org/en-US/docs/WebAssembly/JavaScript_interface/instantiateStreaming
  const result = await WebAssembly.instantiateStreaming(
    fetch("feature-phone.wasm"),
    importObject
  );

  // Store references to WebAssembly Functions
  // and Memory exported by Zig
  wasm.init(result);

  // Start the Main Function
  main();
}

// Start the loading of WebAssembly Module
bootstrap();

// Log WebAssembly Messages from Zig to JavaScript Console
// https://github.com/daneelsan/zig-wasm-logger/blob/master/script.js
const text_decoder = new TextDecoder();
let console_log_buffer = "";

// WebAssembly Helper Functions
const wasm = {
  // WebAssembly Instance
  instance: undefined,

  // Init the WebAssembly Instance.
  // Store references to WebAssembly Functions and Memory exported by Zig
  init: function (obj) {
    this.instance = obj.instance;
  },

  // Fetch the Zig String from a WebAssembly Pointer
  getString: function (ptr, len) {
    const memory = this.instance.exports.memory;
    return text_decoder.decode(
      new Uint8Array(memory.buffer, ptr, len)
    );
  },
};

// Export JavaScript Functions to Zig
const importObject = {
  // JavaScript Functions exported to Zig
  env: {
    // Render the LVGL Canvas from Zig to HTML
    // https://github.com/daneelsan/minimal-zig-wasm-canvas/blob/master/script.js
    render: function() {  // TODO: Add width and height

      // Get the WebAssembly Pointer to the LVGL Canvas Buffer
      const bufferOffset = wasm.instance.exports
        .getCanvasBuffer();

      // Load the WebAssembly Pointer into a JavaScript Image Data
      const memory = wasm.instance.exports.memory;
      const ptr = bufferOffset;
      const len = (canvas.width * canvas.height) * 4;
      const imageDataArray = new Uint8Array(memory.buffer, ptr, len)
      imageData.data.set(imageDataArray);

      // Render the Image Data to the HTML Canvas
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.putImageData(imageData, 0, 0);
    },

    // Write to JavaScript Console from Zig
    // https://github.com/daneelsan/zig-wasm-logger/blob/master/script.js
    jsConsoleLogWrite: function(ptr, len) {
      console_log_buffer += wasm.getString(ptr, len);
    },

    // Flush JavaScript Console from Zig
    // https://github.com/daneelsan/zig-wasm-logger/blob/master/script.js
    jsConsoleLogFlush: function() {
      console.log(console_log_buffer);
      console_log_buffer = "";
    },
  }
};

// Get the HTML Canvas Context and Image Data
const canvas = window.document.getElementById("lvgl_canvas");
const context = canvas.getContext("2d");
const imageData = context.createImageData(canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);

// Main Function
function main() {
  // Remember the Start Time
  const start_ms = Date.now();

  // Fetch the imported Zig Functions
  const zig = wasm.instance.exports;

  // Init the LVGL Display and Input
  // https://lupyuen.codeberg.page/articles/lvgl4#appendix-initialise-lvgl
  zig.initDisplay();

  // Render the LVGL Widgets in Zig
  zig.lv_demo_widgets();

  // Render Loop
  const loop = function() {

    // Compute the Elapsed Milliseconds
    const elapsed_ms = Date.now() - start_ms;

    // Handle LVGL Tasks to update the display
    // https://lupyuen.codeberg.page/articles/lvgl4#appendix-handle-lvgl-timer
    zig.handleTimer(elapsed_ms);

    // Loop to next frame
    window.requestAnimationFrame(loop);
  };

  // Start the Render Loop
  loop();
};

// Main Function
function main() {
  // Fetch the imported Zig Functions
  const zig = wasm.instance.exports;

  // Init the LVGL Display and Input
  // https://lupyuen.codeberg.page/articles/lvgl4#appendix-initialise-lvgl
  zig.initDisplay();

  // Render the LVGL Widgets in Zig
  zig.lv_demo_widgets();

/// Init the LVGL Display and Input
pub export fn initDisplay() void {

  // Create the Memory Allocator for malloc
  // https://lupyuen.codeberg.page/articles/lvgl3#appendix-lvgl-memory-allocation
  memory_allocator = std.heap.FixedBufferAllocator.init(&memory_buffer);

  // Set the Custom Logger for LVGL
  // https://lupyuen.codeberg.page/articles/lvgl3#webassembly-logger-for-lvgl
  c.lv_log_register_print_cb(custom_logger);

  // Init LVGL
  // https://lupyuen.codeberg.page/articles/lvgl3#initialise-lvgl-display
  c.lv_init();

  // Fetch pointers to Display Driver and Display Buffer
  const disp_drv = c.get_disp_drv();
  const disp_buf = c.get_disp_buf();

  // Init Display Buffer and Display Driver as pointers
  // https://lupyuen.codeberg.page/articles/lvgl3#initialise-lvgl-display
  c.init_disp_buf(disp_buf);
  c.init_disp_drv(
    disp_drv,     // Display Driver
    disp_buf,     // Display Buffer
    flushDisplay, // Callback Function to Flush Display
    720,          // Horizontal Resolution
    1280          // Vertical Resolution
  );

  // Register the Display Driver
  // https://lupyuen.codeberg.page/articles/lvgl3#initialise-lvgl-display
  const disp = c.lv_disp_drv_register(disp_drv);
  _ = disp;

  // Register the Input Device
  // https://lupyuen.codeberg.page/articles/lvgl4#appendix-initialise-lvgl-input
  indev_drv = std.mem.zeroes(c.lv_indev_drv_t);
  c.lv_indev_drv_init(&indev_drv);
  indev_drv.type    = c.LV_INDEV_TYPE_POINTER;
  indev_drv.read_cb = readInput;
  _ = c.register_input(&indev_drv);
}

/// LVGL Input Device Driver
var indev_drv: c.lv_indev_drv_t = undefined;

/// Init the LVGL Display and Input
pub export fn initDisplay() void {

  // Omitted: Register the Display Driver
  // https://lupyuen.codeberg.page/articles/lvgl3#initialise-lvgl-display
  ...

  // Init the Input Device Driver
  // https://docs.lvgl.io/8.3/porting/indev.html
  indev_drv = std.mem.zeroes(c.lv_indev_drv_t);
  c.lv_indev_drv_init(&indev_drv);

  // Set the Input Driver Type and Callback Function
  indev_drv.type    = c.LV_INDEV_TYPE_POINTER;
  indev_drv.read_cb = readInput;

  // Register the Input Device
  _ = c.register_input(&indev_drv);
}

// Register the LVGL Input Device Driver
// and return the LVGL Input Device
// https://docs.lvgl.io/8.3/porting/indev.html
void *register_input(lv_indev_drv_t *indev_drv) {
  lv_indev_t *indev = lv_indev_drv_register(indev_drv);
  LV_ASSERT(indev != NULL);
  return indev;
}

// Handle Mouse Down on HTML Canvas
canvas.addEventListener("mousedown", (e) => {
  // Notify Zig of Mouse Down
  const x = e.offsetX;
  const y = e.offsetY;
  wasm.instance.exports
    .notifyInput(1, x, y);  // TODO: Handle LVGL not ready
});

// Handle Mouse Up on HTML Canvas
canvas.addEventListener("mouseup", (e) => {
  // Notify Zig of Mouse Up
  x = e.offsetX;
  y = e.offsetY;
  wasm.instance.exports
    .notifyInput(0, x, y);  // TODO: Handle LVGL not ready
});

// Handle Touch Start on HTML Canvas
canvas.addEventListener("touchstart", (e) => {
  // Notify Zig of Touch Start
  e.preventDefault();
  const touches = e.changedTouches;
  if (touches.length == 0) { return; }

  // Assume that HTML Canvas is at (0,0)
  const x = touches[0].pageX;
  const y = touches[0].pageY;
  wasm.instance.exports
    .notifyInput(1, x, y);  // TODO: Handle LVGL not ready
});

// Handle Touch End on HTML Canvas
canvas.addEventListener("touchend", (e) => {
  // Notify Zig of Touch End
  e.preventDefault();
  const touches = e.changedTouches;
  if (touches.length == 0) { return; }

  // Assume that HTML Canvas is at (0,0)
  const x = touches[0].pageX;
  const y = touches[0].pageY;
  wasm.instance.exports
    .notifyInput(0, x, y);  // TODO: Handle LVGL not ready
});

/// Called by JavaScript to notify Mouse Down and Mouse Up.
/// Return 1 if we're still waiting for LVGL to process the last input.
export fn notifyInput(pressed: i32, x: i32, y: i32) i32 {

  // If LVGL hasn't processed the last input, try again later
  if (input_updated) { return 1; }

  // Save the Input State and Input Coordinates
  if (pressed == 0) { input_state = c.LV_INDEV_STATE_RELEASED; }
  else              { input_state = c.LV_INDEV_STATE_PRESSED; }
  input_x = @intCast(c.lv_coord_t, x);
  input_y = @intCast(c.lv_coord_t, y);
  input_updated = true;
  return 0;
}

/// True if LVGL Input State has been updated
var input_updated: bool = false;

/// LVGL Input State and Coordinates
var input_state: c.lv_indev_state_t = 0;
var input_x: c.lv_coord_t = 0;
var input_y: c.lv_coord_t = 0;

/// Init the LVGL Display and Input
pub export fn initDisplay() void {
  ...
  // Set the Input Driver Type and Callback Function
  indev_drv.type    = c.LV_INDEV_TYPE_POINTER;
  indev_drv.read_cb = readInput;

/// LVGL Callback Function to read Input Device
export fn readInput(
  drv:  [*c]c.lv_indev_drv_t,  // LVGL Input Device Driver
  data: [*c]c.lv_indev_data_t  // LVGL Input Data to be returned
) void {
  _ = drv;
  if (input_updated) {
    input_updated = false;

    // Set the LVGL Input Data to be returned
    c.set_input_data(
      data,         // LVGL Input Data
      input_state,  // Input State (Mouse Up or Down)
      input_x,      // Input X
      input_y       // Input Y
    );
  }
}

// Set the LVGL Input Device Data
// https://docs.lvgl.io/8.3/porting/indev.html#touchpad-mouse-or-any-pointer
void set_input_data(
  lv_indev_data_t *data,   // LVGL Input Data
  lv_indev_state_t state,  // Input State (Mouse Up or Down)
  lv_coord_t x,            // Input X
  lv_coord_t y             // Input Y
) {
  LV_ASSERT(data != NULL);
  data->state   = state;
  data->point.x = x;
  data->point.y = y;
}

// Main Function
function main() {
  // Remember the Start Time
  const start_ms = Date.now();

  // Fetch the imported Zig Functions
  const zig = wasm.instance.exports;

  // Init the LVGL Display and Input
  // https://lupyuen.codeberg.page/articles/lvgl4#appendix-initialise-lvgl
  zig.initDisplay();

  // Render the LVGL Widgets in Zig
  zig.lv_demo_widgets();

  // Render Loop
  const loop = function() {

    // Compute the Elapsed Milliseconds
    const elapsed_ms = Date.now() - start_ms;

    // Handle LVGL Tasks to update the display
    zig.handleTimer(elapsed_ms);

    // Loop to next frame
    window.requestAnimationFrame(loop);
  };

  // Start the Render Loop
  loop();
};

/// Called by JavaScript to execute LVGL Tasks
/// periodically, passing the Elapsed Milliseconds
export fn handleTimer(ms: i32) i32 {

  // Set the Elapsed Milliseconds,
  // don't allow time rewind
  if (ms > elapsed_ms) {
    elapsed_ms = @intCast(u32, ms);
  }

  // Handle LVGL Tasks
  _ = c.lv_timer_handler();
  return 0;
}

/// Return the number of elapsed milliseconds
/// https://lupyuen.codeberg.page/articles/lvgl3#lvgl-porting-layer-for-webassembly
export fn millis() u32 {
  elapsed_ms += 1;
  return elapsed_ms;
}

/// Number of elapsed milliseconds
var elapsed_ms: u32 = 0;

/// Import the LVGL Library from C
pub const c = @cImport({

  // NuttX Defines
  @cDefine("__NuttX__", "");
  @cDefine("NDEBUG", "");

  // NuttX Header Files
  @cInclude("arch/types.h");
  @cInclude("../../nuttx/include/limits.h");
  @cInclude("stdio.h");
  @cInclude("nuttx/config.h");
  @cInclude("sys/boardctl.h");
  @cInclude("unistd.h");
  @cInclude("stddef.h");
  @cInclude("stdlib.h");

  // LVGL Header Files
  @cInclude("lvgl/lvgl.h");

  // LVGL Display Interface for Zig
  @cInclude("display.h");
});

// Import into Namespace `c`
pub const c = @cImport({ ... });

// Call LVGL Function imported from C into Zig
const btn = c.lv_btn_create(cont);

/// Import the LVGL Module
const lvgl = @import("lvgl.zig");

/// Import the C Namespace
const c = lvgl.c;