## Download and compile the Zig Program for our Mandelbrot Demo
git clone --recursive https://github.com/lupyuen/pinephone-lvgl-zig
cd pinephone-lvgl-zig/demo
zig build-lib \
  mandelbrot.zig \
  -target wasm32-freestanding \
  -dynamic \
  -rdynamic

// Import Print Function from JavaScript into Zig
extern fn print(i32) void;

// Print a number to JavaScript Console. Warning: This is slow!
if (iterations == 1) { print(iterations); }

// Export JavaScript Functions to Zig
let importObject = {
  // JavaScript Environment exported to Zig
  env: {
    // JavaScript Print Function exported to Zig
    print: function(x) { console.log(x); }
  }
};

// Load our WebAssembly Module
// and export our Print Function to Zig
let Game = await WebAssembly.instantiateStreaming(
  fetch("mandelbrot.wasm"),  // Load our WebAssembly Module
  importObject               // Export our Print Function to Zig
);

/// LVGL App in Zig that renders a Text Label 
fn createWidgetsWrapped() !void {

  // Get the Active Screen
  var screen = try lvgl.getActiveScreen();

  // Create a Label Widget
  var label = try screen.createLabel();

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

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

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

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

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

  // Align the label to the center of the screen, shift 30 pixels up
  label.alignObject(c.LV_ALIGN_CENTER, 0, -30);
}

## Compile the Zig App `lvgltest.zig`
## for PinePhone (Armv8-A with Cortex-A53)
zig build-obj \
  -target aarch64-freestanding-none \
  -mcpu cortex_a53 \
  -isystem "../nuttx/include" \
  -I "../apps/include" \
  -I "../apps/graphics/lvgl" \
  ... \
  lvgltest.zig

## Copy the Compiled Zig App to NuttX RTOS
## and overwrite `lv_demo_widgets.*.o`
cp lvgltest.o \
  ../apps/graphics/lvgl/lvgl/demos/widgets/lv_demo_widgets.*.o

## Omitted: Link the Compiled Zig App with NuttX RTOS

## Compile the Zig App `lvglwasm.zig`
## for WebAssembly
zig build-lib \
  -target wasm32-freestanding \
  -dynamic \
  -rdynamic \
  -isystem "../nuttx/include" \
  -I "../apps/include" \
  -I "../apps/graphics/lvgl" \
  ...\
  lvglwasm.zig

Uncaught (in promise) LinkError:
WebAssembly.instantiate():
Import #1 module="env" function="lv_label_create" error:
function import requires a callable

## Compile LVGL from C to WebAssembly
zig cc \
  -target wasm32-freestanding \
  -dynamic \
  -rdynamic \
  -lc \
  -DFAR= \
  -DLV_MEM_CUSTOM=1 \
  -DLV_FONT_MONTSERRAT_20=1 \
  -DLV_FONT_DEFAULT_MONTSERRAT_20=1 \
  -DLV_USE_LOG=1 \
  -DLV_LOG_LEVEL=LV_LOG_LEVEL_TRACE \
  "-DLV_ASSERT_HANDLER={void lv_assert_handler(void); lv_assert_handler();}" \
  ... \
  lvgl/src/widgets/lv_label.c \
  -o ../../../pinephone-lvgl-zig/lv_label.o

## Compile the Zig App `lvglwasm.zig` for WebAssembly
## and link with `lv_label.o` from LVGL Library
zig build-lib \
  -target wasm32-freestanding \
  -dynamic \
  -rdynamic \
  -lc \
  -DFAR= \
  -DLV_MEM_CUSTOM=1 \
  -DLV_FONT_MONTSERRAT_20=1 \
  -DLV_FONT_DEFAULT_MONTSERRAT_20=1 \
  -DLV_USE_LOG=1 \
  -DLV_LOG_LEVEL=LV_LOG_LEVEL_TRACE \
  "-DLV_ASSERT_HANDLER={void lv_assert_handler(void); lv_assert_handler();}" \
  ... \
  lvglwasm.zig \
  lv_label.o

Uncaught (in promise) LinkError: 
WebAssembly.instantiate(): 
Import #0 module="env" function="lv_obj_clear_flag" error:
function import requires a callable

widgets/lv_label.c
core/lv_obj.c
misc/lv_mem.c
core/lv_event.c
core/lv_obj_style.c
core/lv_obj_pos.c
misc/lv_txt.c
draw/lv_draw_label.c
core/lv_obj_draw.c
misc/lv_area.c
core/lv_obj_scroll.c
font/lv_font.c
core/lv_obj_class.c
(Many many more)

## Compile our LVGL Display Driver from C to WebAssembly with Zig Compiler
compile_lvgl ../../../../../pinephone-lvgl-zig/display.c display.o

## Compile LVGL Library from C to WebAssembly with Zig Compiler
compile_lvgl font/lv_font_montserrat_14.c lv_font_montserrat_14.o
compile_lvgl font/lv_font_montserrat_20.c lv_font_montserrat_20.o
compile_lvgl widgets/lv_label.c lv_label.o
compile_lvgl core/lv_obj.c lv_obj.o
compile_lvgl misc/lv_mem.c lv_mem.o
## Many many more

## Compile the Zig App `lvglwasm.zig` for WebAssembly
## and link with LVGL Library compiled for WebAssembly
zig build-lib \
  -target wasm32-freestanding \
  ... \
  lvglwasm.zig \
  display.o \
  lv_font_montserrat_14.o \
  lv_font_montserrat_20.o \
  lv_label.o \
  lv_mem.o \
  ...

Uncaught (in promise) LinkError: 
WebAssembly.instantiate(): 
Import #0 module="env" function="strlen" error: 
function import requires a callable

Uncaught (in promise) LinkError: 
WebAssembly.instantiate(): 
Import #0 module="env" function="millis" error: 
function import requires a callable

/// TODO: Return the number of elapsed milliseconds
export fn millis() u32 {
  elapsed_ms += 1;
  return elapsed_ms;
}

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

/// On Assertion Failure, ask Zig to print a Stack Trace and halt
export fn lv_assert_handler() void {
  @panic("*** lv_assert_handler: ASSERTION FAILED");
}

/// Custom Logger for LVGL that writes to JavaScript Console
export fn custom_logger(buf: [*c]const u8) void {
  wasmlog.Console.log("{s}", .{buf});
}

/// Main Function for our Zig LVGL App
pub export fn lv_demo_widgets() void {

  // Set the Custom Logger for LVGL
  c.lv_log_register_print_cb(custom_logger);

  // Init LVGL
  c.lv_init();

/// Custom Logger for LVGL that writes to JavaScript Console
export fn custom_logger(buf: [*c]const u8) void {
  wasmlog.Console.log("{s}", .{buf});
}

// Export JavaScript Functions to Zig
const importObject = {
  // JavaScript Functions exported to Zig
  env: {
    // 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 = "";
    },

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

  // Init the WebAssembly Instance
  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;
    const text_decoder = new TextDecoder();
    return text_decoder.decode(
      new Uint8Array(memory.buffer, ptr, len)
    );
  },
};

[Warn] lv_disp_get_scr_act:
no display registered to get its active screen
(in lv_disp.c line #54)

// Nope, can't allocate LVGL Display Driver in Zig!
// `lv_disp_drv_t` is an Opaque Type

var disp_drv = c.lv_disp_drv_t{};
c.lv_disp_drv_init(&disp_drv);

/// Main Function for our Zig LVGL App
pub export fn lv_demo_widgets() void {

  // Create the Memory Allocator for malloc
  memory_allocator = std.heap.FixedBufferAllocator
    .init(&memory_buffer);

  // Set the Custom Logger for LVGL
  c.lv_log_register_print_cb(custom_logger);

  // Init LVGL
  c.lv_init();

  // Fetch pointers to Display Driver and Display Buffer,
  // exported by our C Functions
  const disp_drv = c.get_disp_drv();
  const disp_buf = c.get_disp_buf();

  // Init Display Buffer and Display Driver as pointers,
  // by calling our C Functions
  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 as a pointer
  const disp = c.lv_disp_drv_register(disp_drv);

  // Create the widgets for display
  createWidgetsWrapped() catch |e| {
    // In case of error, quit
    std.log.err("createWidgetsWrapped failed: {}", .{e});
    return;
  };

  // Up Next: Handle LVGL Tasks

/// Main Function for our Zig LVGL App
pub export fn lv_demo_widgets() void {

  // Omitted: Init LVGL Display

  // Create the widgets for display
  createWidgetsWrapped() catch |e| {
    // In case of error, quit
    std.log.err("createWidgetsWrapped failed: {}", .{e});
    return;
  };

  // Handle LVGL Tasks
  // TODO: Call this from Web Browser JavaScript,
  // so that our Web Browser won't block
  var i: usize = 0;
  while (i < 5) : (i += 1) {
    _ = c.lv_timer_handler();
  }

// Init LVGL
c.lv_init();

// Fetch pointers to Display Driver and Display Buffer,
// exported by our C Functions
const disp_drv = c.get_disp_drv();
const disp_buf = c.get_disp_buf();

// Init Display Buffer and Display Driver as pointers,
// by calling our C Functions
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
);

// Init the LVGL Display Buffer in C, because Zig
// can't access the fields of the Opaque Type
void init_disp_buf(lv_disp_draw_buf_t *disp_buf) {
  lv_disp_draw_buf_init(
    disp_buf,       // LVGL Display Buffer
    canvas_buffer,  // Render the pixels to our LVGL Canvas Buffer
    NULL,           // No Secondary Buffer
    BUFFER_SIZE     // Buffer the entire display (720 x 1280 pixels)
  );
}

// Init Display Driver as pointer,
// by calling our C Function
c.init_disp_drv(
  disp_drv,  // Display Driver
  disp_buf,  // Display Buffer
  flushDisplay,  // Callback Function to Flush Display
  720,  // Horizontal Resolution
  1280  // Vertical Resolution
);

/// LVGL calls this Callback Function to flush our display
export fn flushDisplay(
  disp_drv: ?*c.lv_disp_drv_t,      // LVGL Display Driver
  area:     [*c]const c.lv_area_t,  // LVGL Display Area
  color_p:  [*c]c.lv_color_t        // LVGL Display Buffer
) void {

  // Call the Web Browser JavaScript
  // to render the LVGL Canvas Buffer
  render();

  // Notify LVGL that the display has been flushed.
  // Remember to call `lv_disp_flush_ready`
  // or Web Browser will hang on reload!
  c.lv_disp_flush_ready(disp_drv);
}

// 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);
}

// Canvas Buffer for rendering LVGL Display
// TODO: Swap the RGB Bytes in LVGL, the colours are inverted for HTML Canvas
#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 canvas_buffer[BUFFER_SIZE];

// Return a pointer to the LVGL Canvas Buffer
lv_color_t *get_canvas_buffer(void) {
  return canvas_buffer;
}

// C Standard Library from zig-macos-x86_64-0.10.0-dev.2351+b64a1d5ab/lib/zig/c.zig
export fn strlen(s: [*:0]const u8) callconv(.C) usize {
  return std.mem.len(s);
}

// Also memset, memcpy, strcpy...

main: start
loop: start
lv_demo_widgets: start
before lv_init
[Info]	lv_init: begin 	(in lv_obj.c line #102)
[Trace]	lv_mem_alloc: allocating 76 bytes 	(in lv_mem.c line #127)
[Trace]	lv_mem_alloc: allocated at 0x1a700 	(in lv_mem.c line #160)
[Trace]	lv_mem_alloc: allocating 28 bytes 	(in lv_mem.c line #127)
[Trace]	lv_mem_alloc: allocated at 0x1a750 	(in lv_mem.c line #160)
[Warn]	lv_init: Log level is set to 'Trace' which makes LVGL much slower 	(in lv_obj.c line #176)
[Trace]	lv_mem_realloc: reallocating 0x14 with 8 size 	(in lv_mem.c line #196)
[Error]	block_next: Asserted at expression: !block_is_last(block) 	(in lv_tlsf.c line #459)

004a5b4a:0x29ab2 Uncaught (in promise) RuntimeError: unreachable
  at std.builtin.default_panic (004a5b4a:0x29ab2)
  at lv_assert_handler (004a5b4a:0x2ac6c)
  at block_next (004a5b4a:0xd5b3)
  at lv_tlsf_realloc (004a5b4a:0xe226)
  at lv_mem_realloc (004a5b4a:0x20f1)
  at lv_layout_register (004a5b4a:0x75d8)
  at lv_flex_init (004a5b4a:0x16afe)
  at lv_extra_init (004a5b4a:0x16ae5)
  at lv_init (004a5b4a:0x3f28)
  at lv_demo_widgets (004a5b4a:0x29bb9)

/// Main Function for our Zig LVGL App
pub export fn lv_demo_widgets() void {

  // Create the Memory Allocator for malloc
  memory_allocator = std.heap.FixedBufferAllocator
    .init(&memory_buffer);

/// Zig replacement for malloc
export fn malloc(size: usize) ?*anyopaque {
  // TODO: Save the slice length
  const mem = memory_allocator.allocator().alloc(u8, size) catch {
    @panic("*** malloc error: out of memory");
  };
  return mem.ptr;
}

/// Zig replacement for realloc
export fn realloc(old_mem: [*c]u8, size: usize) ?*anyopaque {
  // TODO: Call realloc instead
  const mem = memory_allocator.allocator().alloc(u8, size) catch {
    @panic("*** realloc error: out of memory");
  };
  _ = memcpy(mem.ptr, old_mem, size);
  if (old_mem != null) {
    // TODO: How to free without the slice length?
    // memory_allocator.allocator().free(old_mem[0..???]);
  }
  return mem.ptr;
}

/// Zig replacement for free
export fn free(mem: [*c]u8) void {
  if (mem == null) {
    @panic("*** free error: pointer is null");
  }
  // TODO: How to free without the slice length?
  // memory_allocator.allocator().free(mem[0..???]);
}

/// Memory Allocator for malloc
var memory_allocator: std.heap.FixedBufferAllocator = undefined;

/// Memory Buffer for malloc
var memory_buffer = std.mem.zeroes([1024 * 1024]u8);

## Compile LVGL Fonts from C to WebAssembly with Zig Compiler
compile_lvgl font/lv_font_montserrat_14.c lv_font_montserrat_14
compile_lvgl font/lv_font_montserrat_20.c lv_font_montserrat_20

## Compile the Zig LVGL App for WebAssembly 
## and link with LVGL Fonts
zig build-lib \
  -DLV_FONT_MONTSERRAT_14=1 \
  -DLV_FONT_MONTSERRAT_20=1 \
  -DLV_FONT_DEFAULT_MONTSERRAT_20=1 \
  -DLV_USE_FONT_PLACEHOLDER=1 \
  ...
  lv_font_montserrat_14.o \
  lv_font_montserrat_20.o \

[Info]	lv_init: begin 	(in lv_obj.c line #102)
[Trace]	lv_init: finished 	(in lv_obj.c line #183)
before lv_disp_drv_register
[Warn]	lv_obj_get_disp: No screen found 	(in lv_obj_tree.c line #290)
[Info]	lv_obj_create: begin 	(in lv_obj.c line #206)
[Trace]	lv_obj_class_create_obj: Creating object with 0x12014 class on 0 parent 	(in lv_obj_class.c line #45)
[Warn]	lv_obj_get_disp: No screen found 	(in lv_obj_tree.c line #290)