/************************************************************//** * * @file: main.cpp * @author: Martin Fouilleul * @date: 30/07/2022 * @revision: * *****************************************************************/ #include #include #include #define _USE_MATH_DEFINES //NOTE: necessary for MSVC #include #include"milepost.h" #define LOG_SUBSYSTEM "Main" void debug_print_indent(int indent) { for(int i=0; ipattern.l, selector, ui_selector, listElt) { switch(selector->kind) { case UI_SEL_ANY: printf("any: "); break; case UI_SEL_OWNER: printf("owner: "); break; case UI_SEL_TEXT: printf("text='%.*s': ", (int)selector->text.len, selector->text.ptr); break; case UI_SEL_TAG: printf("tag=0x%llx: ", selector->tag.hash); break; case UI_SEL_STATUS: { if(selector->status & UI_HOVER) { printf("hover: "); } if(selector->status & UI_ACTIVE) { printf("active: "); } if(selector->status & UI_DRAGGING) { printf("dragging: "); } } break; case UI_SEL_KEY: printf("key=0x%llx: ", selector->key.hash); break; default: printf("unknown: "); break; } } printf("=> font size = %f\n", rule->style->fontSize); } void debug_print_size(ui_box* box, ui_axis axis, int indent) { debug_print_indent(indent); printf("size %s: ", axis == UI_AXIS_X ? "x" : "y"); f32 value = box->targetStyle->size.c[axis].value; switch(box->targetStyle->size.c[axis].kind) { case UI_SIZE_TEXT: printf("text\n"); break; case UI_SIZE_CHILDREN: printf("children\n"); break; case UI_SIZE_PARENT: printf("parent: %f\n", value); break; case UI_SIZE_PARENT_MINUS_PIXELS: printf("parent minus pixels: %f\n", value); break; case UI_SIZE_PIXELS: printf("pixels: %f\n", value); break; } } void debug_print_styles(ui_box* box, int indent) { debug_print_indent(indent); printf("### box '%.*s'\n", (int)box->string.len, box->string.ptr); indent++; debug_print_indent(indent); printf("font size: %f\n", box->targetStyle->fontSize); debug_print_size(box, UI_AXIS_X, indent); debug_print_size(box, UI_AXIS_Y, indent); if(!list_empty(&box->beforeRules)) { debug_print_indent(indent); printf("before rules:\n"); for_list(&box->beforeRules, rule, ui_style_rule, boxElt) { debug_print_indent(indent+1); debug_print_rule(rule); } } if(!list_empty(&box->afterRules)) { debug_print_indent(indent); printf("after rules:\n"); for_list(&box->afterRules, rule, ui_style_rule, boxElt) { debug_print_indent(indent+1); debug_print_rule(rule); } } if(!list_empty(&box->children)) { debug_print_indent(indent); printf("children:\n"); indent++; for_list(&box->children, child, ui_box, listElt) { debug_print_styles(child, indent); } } } mg_font create_font() { //NOTE(martin): create font str8 fontPath = mp_app_get_resource_path(mem_scratch(), "../resources/OpenSansLatinSubset.ttf"); char* fontPathCString = str8_to_cstring(mem_scratch(), fontPath); FILE* fontFile = fopen(fontPathCString, "r"); if(!fontFile) { LOG_ERROR("Could not load font file '%s': %s\n", fontPathCString, strerror(errno)); return(mg_font_nil()); } unsigned char* fontData = 0; fseek(fontFile, 0, SEEK_END); u32 fontDataSize = ftell(fontFile); rewind(fontFile); fontData = (unsigned char*)malloc(fontDataSize); fread(fontData, 1, fontDataSize, fontFile); fclose(fontFile); 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}; mg_font font = mg_font_create_from_memory(fontDataSize, fontData, 5, ranges); free(fontData); return(font); } 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()) int main() { LogLevel(LOG_LEVEL_WARNING); mp_init(); mp_clock_init(); //TODO put that in mp_init()? ui_init(); mp_rect windowRect = {.x = 100, .y = 100, .w = 810, .h = 610}; mp_window window = mp_window_create(windowRect, "test", 0); mp_rect contentRect = mp_window_get_content_rect(window); //NOTE: create surface mg_surface surface = mg_surface_create_for_window(window, MG_BACKEND_DEFAULT); mg_surface_swap_interval(surface, 0); //TODO: create canvas mg_canvas canvas = mg_canvas_create(surface); if(mg_canvas_is_nil(canvas)) { printf("Error: couldn't create canvas\n"); return(-1); } mg_font font = create_font(); mem_arena textArena = {0}; mem_arena_init(&textArena); // start app mp_window_bring_to_front(window); mp_window_focus(window); while(!mp_should_quit()) { bool printDebugStyle = false; f64 startTime = mp_get_time(MP_CLOCK_MONOTONIC); mp_pump_events(0); mp_event event = {0}; while(mp_next_event(&event)) { switch(event.type) { case MP_EVENT_WINDOW_CLOSE: { mp_request_quit(); } break; case MP_EVENT_KEYBOARD_KEY: { if(event.key.action == MP_KEY_PRESS && event.key.code == MP_KEY_P) { printDebugStyle = true; } } break; default: break; } } //TEST UI ui_style defaultStyle = {.bgColor = {0}, .color = {1, 1, 1, 1}, .font = font, .fontSize = 16, .borderColor = {1, 0, 0, 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_flags debugFlags = UI_FLAG_DRAW_BORDER; ui_box* root = 0; ui_frame(&defaultStyle, defaultMask) { root = ui_box_top(); 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", debugFlags) { ui_style_next(&(ui_style){.fontSize = 26}, UI_STYLE_FONT_SIZE); ui_label("Milepost 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) { printf("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", debugFlags) { ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5}, .size.height = {UI_SIZE_PARENT, 1}, .borderColor = {0, 0, 1, 1}}, UI_STYLE_SIZE |UI_STYLE_BORDER_COLOR); ui_container("left", debugFlags) { 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", debugFlags) { ui_style_next(&(ui_style){.size.width = {UI_SIZE_PARENT, 0.5}, .size.height = {UI_SIZE_PARENT, 1}}, UI_STYLE_SIZE); widget_view("Buttons") { ui_button("Button 1"); ui_button("Button 2"); ui_button("Button 3"); } 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", debugFlags) { 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", debugFlags) { 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") { 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"); } } } } } } } } if(printDebugStyle) { debug_print_styles(root, 0); } mg_surface_prepare(surface); ui_draw(); mg_flush(); mg_surface_present(surface); mem_arena_clear(mem_scratch()); } mp_terminate(); return(0); }