GUI Server

[nuta]

Goals

• Declarative UI inspired by Flutter and Swift UI.
• No app-local pixel rendering: Apps share its content state (see an example below) with the GUI server. Unlike Wayland protocol, pixel rendering is done in GUI server.
  • This reduces the binary size of apps: we use relatively large (but high-quality) 2D graphics libraries like Cairo!

ToDo

• virtio_gpu: Implement gpu_device interface
• ps2 mouse device driver
• ps2 keyboard device driver
• gui server
  • mouse cursor
  • window compositing
  • libui
  • gui interface
  • render window
  • mouse event handling
  • keyboard event handling
  • menu bar
  • start menu
• wallpaper
• date

GPU device interface

namespace gpu_device {
    rpc set_mode() -> (num_buffers: size);
    rpc num_buffers() -> (num_buffers: size);
    rpc get_buffer(index: size) -> (shm: handle);
    rpc show_buffer(index: size) -> ();
}

Application code

#include <ui.h>

ui_text_t button_text;

void button_clicked(ui_event_t ev, ui_button_t button) {
    ui_button_set_text(button_text, "Clicked!");
}

void render_ui(void) {
    ui_window_t win = ui_window();
    ui_window_set_size(200, 300);
    ui_window_set_title("My first application");
    ui_canvas_t canvas = ui_window_get_canvas(win);

    ui_text_t text = ui_text();
    ui_text_set_body(text, "Hello World");
    ui_text_set_size(text, UI_SIZE_H1);
    ui_text_set_rgba(text, 255, 0, 0, 255);
    ui_draw_text(canvas, text, 10, 10);

    ui_button_t button = ui_button();
    button_text = ui_text();
    ui_text_set_body(button_text, "Click here");
    ui_button_set_text(button_text);
    ui_on_click(button_text , button_clicked);
    ui_draw_button();
}

Content

Window {
    title: "My first application",
    size: Size {
        width: 200,
        height: 300,
    },
    canvas: Canvas {
        items: [
            Text {
                body: "Hello",
                color: Rgba(0, 0, 0, 0),
                handlers: { ... }
            },
            Button {
                text: Text {
                    body: "Hello",
                    color: Rgba(0, 0, 0, 0),
                    handlers: { ... }
                },
                handlers: {
                    click: button_clicked,
                ]
            }
        ]
    }
}