hmn
/
orca
5
Fork 2
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

Make UI look nicer 

Design system by semi.design: https://semi.design/en-US/start/overview

SVG icon workflow:
- Find the SVG with devtools
- Copy curve path to https://yqnn.github.io/svg-path-editor/
- Scale X and Y by 1/size (usually 1/24)
- In `ui.c`, do offset and scale with a matrix transform, then the draw commands can use the exact numbers from the normalized SVG
This commit is contained in:
Ilia Demianenko 2023-09-06 22:20:59 -07:00
parent 0db1589dc6
commit aff03630da
3 changed files with 734 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
samples/ui/src/main.c
View File

@ -75,19 +75,9 @@ void widget_end_view(void)
ORCA_EXPORT void oc_on_frame_refresh(void) ORCA_EXPORT void oc_on_frame_refresh(void)
{ {
oc_ui_style defaultStyle = { .bgColor = { 0 }, oc_ui_style defaultStyle = { .font = font };
.color = { 1, 1, 1, 1 },
.font = font,
.fontSize = 16,
.borderColor = { 0.278, 0.333, 0.412, 1 },
.borderSize = 2 };
oc_ui_style_mask defaultMask = OC_UI_STYLE_BG_COLOR oc_ui_style_mask defaultMask = OC_UI_STYLE_FONT;
| OC_UI_STYLE_COLOR
| OC_UI_STYLE_BORDER_COLOR
| OC_UI_STYLE_BORDER_SIZE
| OC_UI_STYLE_FONT
| OC_UI_STYLE_FONT_SIZE;
oc_ui_frame(frameSize, &defaultStyle, defaultMask) oc_ui_frame(frameSize, &defaultStyle, defaultMask)
{ {
@ -98,21 +88,20 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
.layout.axis = OC_UI_AXIS_Y, .layout.axis = OC_UI_AXIS_Y,
.layout.align.x = OC_UI_ALIGN_CENTER, .layout.align.x = OC_UI_ALIGN_CENTER,
.layout.align.y = OC_UI_ALIGN_START, .layout.align.y = OC_UI_ALIGN_START,
.layout.spacing = 10, .layout.spacing = 10},
.layout.margin.x = 10,
.layout.margin.y = 10,
.bgColor = { 0.11, 0.11, 0.11, 1 } },
OC_UI_STYLE_SIZE OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT | OC_UI_STYLE_LAYOUT);
| OC_UI_STYLE_BG_COLOR);
oc_ui_container("background", OC_UI_FLAG_DRAW_BACKGROUND) oc_ui_container("background", OC_UI_FLAG_DRAW_BACKGROUND)
{ {
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PARENT, 1 }, oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PARENT, 1 },
.size.height = { OC_UI_SIZE_CHILDREN }, .size.height = { OC_UI_SIZE_CHILDREN },
.layout.align.x = OC_UI_ALIGN_CENTER }, .layout.align.x = OC_UI_ALIGN_CENTER,
.layout.margin.x = 10,
.layout.margin.y = 10 },
OC_UI_STYLE_SIZE OC_UI_STYLE_SIZE
| OC_UI_STYLE_LAYOUT_ALIGN_X); | OC_UI_STYLE_LAYOUT_ALIGN_X
| OC_UI_STYLE_LAYOUT_MARGINS);
oc_ui_container("title", 0) oc_ui_container("title", 0)
{ {
oc_ui_style_next(&(oc_ui_style){ .fontSize = 26 }, OC_UI_STYLE_FONT_SIZE); oc_ui_style_next(&(oc_ui_style){ .fontSize = 26 }, OC_UI_STYLE_FONT_SIZE);
@ -120,19 +109,7 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
if(oc_ui_box_sig(oc_ui_box_top()).hovering) if(oc_ui_box_sig(oc_ui_box_top()).hovering)
{ {
oc_ui_tooltip("tooltip") oc_ui_tooltip("That is a tooltip!");
{
oc_ui_style_next(&(oc_ui_style){ .bgColor = { 1, 0.99, 0.82, 1 } },
OC_UI_STYLE_BG_COLOR);
oc_ui_container("background", OC_UI_FLAG_DRAW_BACKGROUND)
{
oc_ui_style_next(&(oc_ui_style){ .color = { 0, 0, 0, 1 } },
OC_UI_STYLE_COLOR);
oc_ui_label("That is a tooltip!");
}
}
} }
} }
@ -167,8 +144,10 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
} }
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PARENT, 1 }, oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PARENT, 1 },
.size.height = { OC_UI_SIZE_PARENT, 1, 1 } }, .size.height = { OC_UI_SIZE_PARENT, 1, 1 },
OC_UI_STYLE_SIZE); .layout.margin.x = 10,
.layout.margin.y = 10 },
OC_UI_STYLE_SIZE | OC_UI_STYLE_LAYOUT_MARGINS);
oc_ui_style_next(&(oc_ui_style){ .layout.axis = OC_UI_AXIS_X }, OC_UI_STYLE_LAYOUT_AXIS); oc_ui_style_next(&(oc_ui_style){ .layout.axis = OC_UI_AXIS_X }, OC_UI_STYLE_LAYOUT_AXIS);
oc_ui_container("contents", 0) oc_ui_container("contents", 0)
@ -218,13 +197,6 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
.size.height = { OC_UI_SIZE_PARENT, 1 } }, .size.height = { OC_UI_SIZE_PARENT, 1 } },
OC_UI_STYLE_SIZE); OC_UI_STYLE_SIZE);
oc_ui_pattern pattern = { 0 };
oc_ui_pattern_push(oc_scratch(), &pattern, (oc_ui_selector){ .kind = OC_UI_SEL_TAG, .tag = oc_ui_tag_make("checkbox") });
oc_ui_style_match_after(pattern,
&(oc_ui_style){ .bgColor = { 0, 1, 0, 1 },
.color = { 1, 1, 1, 1 } },
OC_UI_STYLE_COLOR | OC_UI_STYLE_BG_COLOR);
widget_view("checkboxes") widget_view("checkboxes")
{ {
static bool check1 = true; static bool check1 = true;
@ -253,45 +225,39 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
| OC_UI_STYLE_LAYOUT_SPACING); | OC_UI_STYLE_LAYOUT_SPACING);
oc_ui_container("contents", 0) oc_ui_container("contents", 0)
{ {
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 20 }, oc_ui_style_next(&(oc_ui_style){ .size.height = { OC_UI_SIZE_PIXELS, 200 } },
.size.height = { OC_UI_SIZE_PIXELS, 200 } }, OC_UI_STYLE_SIZE_HEIGHT);
OC_UI_STYLE_SIZE);
static f32 slider1 = 0; static f32 slider1 = 0;
oc_ui_slider("slider1", 0.2, &slider1); oc_ui_slider("slider1", &slider1);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 20 }, oc_ui_style_next(&(oc_ui_style){ .size.height = { OC_UI_SIZE_PIXELS, 200 } },
.size.height = { OC_UI_SIZE_PIXELS, 200 } }, OC_UI_STYLE_SIZE_HEIGHT);
OC_UI_STYLE_SIZE);
static f32 slider2 = 0; static f32 slider2 = 0;
oc_ui_slider("slider2", 0.2, &slider2); oc_ui_slider("slider2", &slider2);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 20 }, oc_ui_style_next(&(oc_ui_style){ .size.height = { OC_UI_SIZE_PIXELS, 200 } },
.size.height = { OC_UI_SIZE_PIXELS, 200 } }, OC_UI_STYLE_SIZE_HEIGHT);
OC_UI_STYLE_SIZE);
static f32 slider3 = 0; static f32 slider3 = 0;
oc_ui_slider("slider3", 0.2, &slider3); oc_ui_slider("slider3", &slider3);
} }
} }
widget_view("Horizontal Sliders") widget_view("Horizontal Sliders")
{ {
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 }, oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 } },
.size.height = { OC_UI_SIZE_PIXELS, 20 } }, OC_UI_STYLE_SIZE_WIDTH);
OC_UI_STYLE_SIZE);
static f32 slider1 = 0; static f32 slider1 = 0;
oc_ui_slider("slider1", 0.2, &slider1); oc_ui_slider("slider1", &slider1);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 }, oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 } },
.size.height = { OC_UI_SIZE_PIXELS, 20 } }, OC_UI_STYLE_SIZE_WIDTH);
OC_UI_STYLE_SIZE);
static f32 slider2 = 0; static f32 slider2 = 0;
oc_ui_slider("slider2", 0.2, &slider2); oc_ui_slider("slider2", &slider2);
oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 }, oc_ui_style_next(&(oc_ui_style){ .size.width = { OC_UI_SIZE_PIXELS, 200 } },
.size.height = { OC_UI_SIZE_PIXELS, 20 } }, OC_UI_STYLE_SIZE_WIDTH);
OC_UI_STYLE_SIZE);
static f32 slider3 = 0; static f32 slider3 = 0;
oc_ui_slider("slider3", 0.2, &slider3); oc_ui_slider("slider3", &slider3);
} }
} }
} }
@ -325,16 +291,12 @@ ORCA_EXPORT void oc_on_frame_refresh(void)
OC_UI_STYLE_SIZE); OC_UI_STYLE_SIZE);
widget_view("Test") widget_view("Test")
{ {
oc_ui_pattern pattern = { 0 };
oc_ui_pattern_push(oc_scratch(), &pattern, (oc_ui_selector){ .kind = OC_UI_SEL_TEXT, .text = OC_STR8("panel") });
oc_ui_style_match_after(pattern, &(oc_ui_style){ .bgColor = { 0.3, 0.3, 1, 1 } }, OC_UI_STYLE_BG_COLOR);
static int selected = 0; static int selected = 0;
oc_str8 options[] = { OC_STR8("option 1"), oc_str8 options[] = { OC_STR8("Option 1"),
OC_STR8("option 2"), OC_STR8("Option 2"),
OC_STR8("long option 3"), OC_STR8("Long option 3"),
OC_STR8("option 4"), OC_STR8("Option 4"),
OC_STR8("option 5") }; OC_STR8("Option 5") };
oc_ui_select_popup_info info = { .selectedIndex = selected, oc_ui_select_popup_info info = { .selectedIndex = selected,
.optionCount = 5, .optionCount = 5,
.options = options }; .options = options };

870
src/ui/ui.c
View File

File diff suppressed because it is too large Load Diff

47
src/ui/ui.h
View File

@ -176,6 +176,26 @@ extern "C"
oc_ui_style_mask animationMask; oc_ui_style_mask animationMask;
} oc_ui_style; } oc_ui_style;
typedef struct oc_ui_theme
{
oc_color white;
oc_color primary;
oc_color primaryHover;
oc_color primaryActive;
oc_color fill0;
oc_color fill1;
oc_color fill2;
oc_color bg0;
oc_color bg1;
oc_color bg2;
oc_color bg3;
oc_color bg4;
oc_color text0;
oc_color text1;
oc_color text2;
oc_color text3;
} oc_ui_theme;
typedef struct oc_ui_tag typedef struct oc_ui_tag
{ {
u64 hash; u64 hash;
@ -527,15 +547,14 @@ extern "C"
ORCA_API oc_ui_sig oc_ui_button(const char* label); ORCA_API oc_ui_sig oc_ui_button(const char* label);
ORCA_API oc_ui_sig oc_ui_checkbox(const char* name, bool* checked); ORCA_API oc_ui_sig oc_ui_checkbox(const char* name, bool* checked);
ORCA_API oc_ui_box* oc_ui_slider(const char* label, f32 thumbRatio, f32* scrollValue); ORCA_API oc_ui_box* oc_ui_slider(const char* label, f32* value);
ORCA_API oc_ui_box* oc_ui_scrollbar(const char* label, f32 thumbRatio, f32* scrollValue);
ORCA_API void oc_ui_panel_begin(const char* name, oc_ui_flags flags); ORCA_API void oc_ui_panel_begin(const char* name, oc_ui_flags flags);
ORCA_API void oc_ui_panel_end(void); ORCA_API void oc_ui_panel_end(void);
#define oc_ui_panel(s, f) oc_defer_loop(oc_ui_panel_begin(s, f), oc_ui_panel_end()) #define oc_ui_panel(s, f) oc_defer_loop(oc_ui_panel_begin(s, f), oc_ui_panel_end())
ORCA_API oc_ui_sig oc_ui_tooltip_begin(const char* name); ORCA_API void oc_ui_tooltip(const char* label);
ORCA_API void oc_ui_tooltip_end(void);
#define oc_ui_tooltip(name) oc_defer_loop(oc_ui_tooltip_begin(name), oc_ui_tooltip_end())
ORCA_API void oc_ui_menu_bar_begin(const char* label); ORCA_API void oc_ui_menu_bar_begin(const char* label);
ORCA_API void oc_ui_menu_bar_end(void); ORCA_API void oc_ui_menu_bar_end(void);
@ -547,16 +566,6 @@ extern "C"
ORCA_API oc_ui_sig oc_ui_menu_button(const char* name); ORCA_API oc_ui_sig oc_ui_menu_button(const char* name);
typedef struct oc_ui_text_box_result
{
bool changed;
bool accepted;
oc_str8 text;
} oc_ui_text_box_result;
ORCA_API oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 text);
typedef struct oc_ui_select_popup_info typedef struct oc_ui_select_popup_info
{ {
bool changed; bool changed;
@ -567,6 +576,16 @@ extern "C"
ORCA_API oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_info* info); ORCA_API oc_ui_select_popup_info oc_ui_select_popup(const char* name, oc_ui_select_popup_info* info);
typedef struct oc_ui_text_box_result
{
bool changed;
bool accepted;
oc_str8 text;
} oc_ui_text_box_result;
ORCA_API oc_ui_text_box_result oc_ui_text_box(const char* name, oc_arena* arena, oc_str8 text);
#ifdef __cplusplus #ifdef __cplusplus
} // extern "C" } // extern "C"
#endif #endif