408 lines
13 KiB
C
408 lines
13 KiB
C
#include"keys.h"
|
|
#include"graphics.h"
|
|
#include"ui.h"
|
|
|
|
#include"orca.h"
|
|
|
|
vec2 frameSize = {100, 100};
|
|
|
|
mg_surface surface;
|
|
mg_canvas canvas;
|
|
mg_font font;
|
|
ui_context ui;
|
|
mem_arena textArena = {0};
|
|
|
|
mg_surface mg_surface_main(void);
|
|
|
|
ORCA_EXPORT void OnInit(void)
|
|
{
|
|
//TODO create surface for main window
|
|
surface = mg_surface_main();
|
|
canvas = mg_canvas_create();
|
|
ui_init(&ui);
|
|
|
|
//NOTE: load font
|
|
{
|
|
file_handle file = file_open(STR8("/OpenSansLatinSubset.ttf"), FILE_ACCESS_READ, 0);
|
|
if(file_last_error(file) != IO_OK)
|
|
{
|
|
log_error("Couldn't open file OpenSansLatinSubset.ttf\n");
|
|
}
|
|
u64 size = file_size(file);
|
|
char* buffer = mem_arena_alloc(mem_scratch(), size);
|
|
file_read(file, size, buffer);
|
|
file_close(file);
|
|
unicode_range ranges[5] = {UNICODE_RANGE_BASIC_LATIN,
|
|
UNICODE_RANGE_C1_CONTROLS_AND_LATIN_1_SUPPLEMENT,
|
|
UNICODE_RANGE_LATIN_EXTENDED_A,
|
|
UNICODE_RANGE_LATIN_EXTENDED_B,
|
|
UNICODE_RANGE_SPECIALS};
|
|
// TODO: Decide whether we're using strings or explicit pointer + length
|
|
font = mg_font_create_from_memory(size, (byte*)buffer, 5, ranges);
|
|
}
|
|
|
|
mem_arena_clear(mem_scratch());
|
|
mem_arena_init(&textArena);
|
|
}
|
|
|
|
ORCA_EXPORT void OnFrameResize(u32 width, u32 height)
|
|
{
|
|
log_info("frame resize %u, %u", width, height);
|
|
frameSize.x = width;
|
|
frameSize.y = height;
|
|
}
|
|
|
|
ORCA_EXPORT void OnRawEvent(mp_event *event)
|
|
{
|
|
ui_process_event(event);
|
|
}
|
|
|
|
void widget_begin_view(char* str)
|
|
{
|
|
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_Y,
|
|
.layout.spacing = 10,
|
|
.layout.margin.x = 10,
|
|
.layout.margin.y = 10,
|
|
.layout.align.x = UI_ALIGN_CENTER,
|
|
.layout.align.y = UI_ALIGN_START},
|
|
UI_STYLE_LAYOUT);
|
|
|
|
ui_box_begin(str, UI_FLAG_DRAW_BORDER);
|
|
ui_label(str);
|
|
|
|
}
|
|
|
|
void widget_end_view(void)
|
|
{
|
|
ui_box_end();
|
|
}
|
|
|
|
#define widget_view(s) defer_loop(widget_begin_view(s), widget_end_view())
|
|
|
|
ORCA_EXPORT void OnFrameRefresh(void)
|
|
{
|
|
ui_style defaultStyle = {.bgColor = {0},
|
|
.color = {1, 1, 1, 1},
|
|
.font = font,
|
|
.fontSize = 16,
|
|
.borderColor = {0.278, 0.333, 0.412, 1},
|
|
.borderSize = 2};
|
|
|
|
ui_style_mask defaultMask = UI_STYLE_BG_COLOR
|
|
| UI_STYLE_COLOR
|
|
| UI_STYLE_BORDER_COLOR
|
|
| UI_STYLE_BORDER_SIZE
|
|
| UI_STYLE_FONT
|
|
| UI_STYLE_FONT_SIZE;
|
|
|
|
ui_frame(frameSize, &defaultStyle, defaultMask)
|
|
{
|
|
ui_style_match_before(ui_pattern_all(), &defaultStyle, defaultMask);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 1},
|
|
.layout.axis = UI_AXIS_Y,
|
|
.layout.align.x = UI_ALIGN_CENTER,
|
|
.layout.align.y = UI_ALIGN_START,
|
|
.layout.spacing = 10,
|
|
.layout.margin.x = 10,
|
|
.layout.margin.y = 10,
|
|
.bgColor = {0.11, 0.11, 0.11, 1}},
|
|
UI_STYLE_SIZE
|
|
| UI_STYLE_LAYOUT
|
|
| UI_STYLE_BG_COLOR);
|
|
|
|
ui_container("background", UI_FLAG_DRAW_BACKGROUND)
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_CHILDREN},
|
|
.layout.align.x = UI_ALIGN_CENTER},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_LAYOUT_ALIGN_X);
|
|
ui_container("title", 0)
|
|
{
|
|
ui_style_next(&(ui_style){.fontSize = 26}, UI_STYLE_FONT_SIZE);
|
|
ui_label("Orca UI Demo");
|
|
|
|
if(ui_box_sig(ui_box_top()).hovering)
|
|
{
|
|
ui_tooltip("tooltip")
|
|
{
|
|
ui_style_next(&(ui_style){.bgColor = {1, 0.99, 0.82, 1}},
|
|
UI_STYLE_BG_COLOR);
|
|
|
|
ui_container("background", UI_FLAG_DRAW_BACKGROUND)
|
|
{
|
|
ui_style_next(&(ui_style){.color = {0, 0, 0, 1}},
|
|
UI_STYLE_COLOR);
|
|
|
|
ui_label("That is a tooltip!");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
ui_menu_bar("Menu bar")
|
|
{
|
|
ui_menu("Menu 1")
|
|
{
|
|
if(ui_menu_button("Option 1.1").pressed)
|
|
{
|
|
log_info("Pressed option 1.1\n");
|
|
}
|
|
ui_menu_button("Option 1.2");
|
|
ui_menu_button("Option 1.3");
|
|
ui_menu_button("Option 1.4");
|
|
}
|
|
|
|
ui_menu("Menu 2")
|
|
{
|
|
ui_menu_button("Option 2.1");
|
|
ui_menu_button("Option 2.2");
|
|
ui_menu_button("Option 2.3");
|
|
ui_menu_button("Option 2.4");
|
|
}
|
|
|
|
ui_menu("Menu 3")
|
|
{
|
|
ui_menu_button("Option 3.1");
|
|
ui_menu_button("Option 3.2");
|
|
ui_menu_button("Option 3.3");
|
|
ui_menu_button("Option 3.4");
|
|
}
|
|
}
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 1, 1}},
|
|
UI_STYLE_SIZE);
|
|
|
|
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X}, UI_STYLE_LAYOUT_AXIS);
|
|
ui_container("contents", 0)
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
|
|
.size.height = {UI_SIZE_PARENT, 1}},
|
|
UI_STYLE_SIZE);
|
|
|
|
ui_container("left", 0)
|
|
{
|
|
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
|
|
.layout.spacing = 10,
|
|
.layout.margin.x = 10,
|
|
.layout.margin.y = 10,
|
|
.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 0.5}},
|
|
UI_STYLE_LAYOUT_AXIS
|
|
|UI_STYLE_LAYOUT_SPACING
|
|
|UI_STYLE_LAYOUT_MARGIN_X
|
|
|UI_STYLE_LAYOUT_MARGIN_Y
|
|
|UI_STYLE_SIZE);
|
|
|
|
ui_container("up", 0)
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
|
|
.size.height = {UI_SIZE_PARENT, 1}},
|
|
UI_STYLE_SIZE);
|
|
widget_view("Buttons")
|
|
{
|
|
if(ui_button("Button A").clicked)
|
|
{
|
|
log_info("A clicked");
|
|
}
|
|
|
|
if(ui_button("Button B").clicked)
|
|
{
|
|
log_info("B clicked");
|
|
}
|
|
|
|
if(ui_button("Button C").clicked)
|
|
{
|
|
log_info("C clicked");
|
|
}
|
|
}
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
|
|
.size.height = {UI_SIZE_PARENT, 1}},
|
|
UI_STYLE_SIZE);
|
|
|
|
|
|
ui_pattern pattern = {0};
|
|
ui_pattern_push(mem_scratch(), &pattern, (ui_selector){.kind = UI_SEL_TAG, .tag = ui_tag_make("checkbox")});
|
|
ui_style_match_after(pattern,
|
|
&(ui_style){.bgColor = {0, 1, 0, 1},
|
|
.color = {1, 1, 1, 1}},
|
|
UI_STYLE_COLOR | UI_STYLE_BG_COLOR);
|
|
|
|
widget_view("checkboxes")
|
|
{
|
|
static bool check1 = true;
|
|
static bool check2 = false;
|
|
static bool check3 = false;
|
|
|
|
ui_checkbox("check1", &check1);
|
|
ui_checkbox("check2", &check2);
|
|
ui_checkbox("check3", &check3);
|
|
}
|
|
}
|
|
|
|
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
|
|
.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 0.5}},
|
|
UI_STYLE_LAYOUT_AXIS
|
|
|UI_STYLE_SIZE);
|
|
|
|
ui_container("down", 0)
|
|
{
|
|
widget_view("Vertical Sliders")
|
|
{
|
|
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
|
|
.layout.spacing = 10},
|
|
UI_STYLE_LAYOUT_AXIS
|
|
|UI_STYLE_LAYOUT_SPACING);
|
|
ui_container("contents", 0)
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
|
|
.size.height = {UI_SIZE_PIXELS, 200}},
|
|
UI_STYLE_SIZE);
|
|
static f32 slider1 = 0;
|
|
ui_slider("slider1", 0.2, &slider1);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
|
|
.size.height = {UI_SIZE_PIXELS, 200}},
|
|
UI_STYLE_SIZE);
|
|
static f32 slider2 = 0;
|
|
ui_slider("slider2", 0.2, &slider2);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 20},
|
|
.size.height = {UI_SIZE_PIXELS, 200}},
|
|
UI_STYLE_SIZE);
|
|
static f32 slider3 = 0;
|
|
ui_slider("slider3", 0.2, &slider3);
|
|
}
|
|
}
|
|
|
|
widget_view("Horizontal Sliders")
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
|
|
.size.height = {UI_SIZE_PIXELS, 20}},
|
|
UI_STYLE_SIZE);
|
|
static f32 slider1 = 0;
|
|
ui_slider("slider1", 0.2, &slider1);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
|
|
.size.height = {UI_SIZE_PIXELS, 20}},
|
|
UI_STYLE_SIZE);
|
|
static f32 slider2 = 0;
|
|
ui_slider("slider2", 0.2, &slider2);
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 200},
|
|
.size.height = {UI_SIZE_PIXELS, 20}},
|
|
UI_STYLE_SIZE);
|
|
static f32 slider3 = 0;
|
|
ui_slider("slider3", 0.2, &slider3);
|
|
}
|
|
}
|
|
}
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5},
|
|
.size.height = {UI_SIZE_PARENT, 1}},
|
|
UI_STYLE_SIZE);
|
|
|
|
ui_container("right", 0)
|
|
{
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 0.33}},
|
|
UI_STYLE_SIZE);
|
|
widget_view("Text box")
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PIXELS, 300},
|
|
.size.height = {UI_SIZE_TEXT}},
|
|
UI_STYLE_SIZE);
|
|
static str8 text = {0};
|
|
ui_text_box_result res = ui_text_box("textbox", mem_scratch(), text);
|
|
if(res.changed)
|
|
{
|
|
mem_arena_clear(&textArena);
|
|
text = str8_push_copy(&textArena, res.text);
|
|
}
|
|
}
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 0.33}},
|
|
UI_STYLE_SIZE);
|
|
widget_view("Test")
|
|
{
|
|
ui_pattern pattern = {0};
|
|
ui_pattern_push(mem_scratch(), &pattern, (ui_selector){.kind = UI_SEL_TEXT, .text = STR8("panel")});
|
|
ui_style_match_after(pattern, &(ui_style){.bgColor = {0.3, 0.3, 1, 1}}, UI_STYLE_BG_COLOR);
|
|
|
|
static int selected = 0;
|
|
str8 options[] = {STR8("option 1"),
|
|
STR8("option 2"),
|
|
STR8("long option 3"),
|
|
STR8("option 4"),
|
|
STR8("option 5")};
|
|
ui_select_popup_info info = {.selectedIndex = selected,
|
|
.optionCount = 5,
|
|
.options = options};
|
|
|
|
ui_select_popup_info result = ui_select_popup("popup", &info);
|
|
selected = result.selectedIndex;
|
|
}
|
|
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 0.33}},
|
|
UI_STYLE_SIZE);
|
|
widget_view("Color")
|
|
{
|
|
ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 1},
|
|
.size.height = {UI_SIZE_PARENT, 0.7},
|
|
.layout.axis = UI_AXIS_X},
|
|
UI_STYLE_SIZE
|
|
|UI_STYLE_LAYOUT_AXIS);
|
|
|
|
ui_panel("Panel", UI_FLAG_DRAW_BORDER)
|
|
{
|
|
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X},
|
|
UI_STYLE_LAYOUT_AXIS);
|
|
ui_container("contents", 0)
|
|
{
|
|
ui_style_next(&(ui_style){.layout.spacing = 20},
|
|
UI_STYLE_LAYOUT_SPACING);
|
|
ui_container("buttons", 0)
|
|
{
|
|
ui_button("Button A");
|
|
ui_button("Button B");
|
|
ui_button("Button C");
|
|
ui_button("Button D");
|
|
}
|
|
|
|
ui_style_next(&(ui_style){.layout.axis = UI_AXIS_X,
|
|
.layout.spacing = 20},
|
|
UI_STYLE_LAYOUT_SPACING
|
|
|UI_STYLE_LAYOUT_AXIS);
|
|
|
|
ui_container("buttons2", 0)
|
|
{
|
|
ui_button("Button A");
|
|
ui_button("Button B");
|
|
ui_button("Button C");
|
|
ui_button("Button D");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
mg_canvas_set_current(canvas);
|
|
mg_surface_prepare(surface);
|
|
ui_draw();
|
|
mg_render(surface, canvas);
|
|
mg_surface_present(surface);
|
|
}
|