From 8d79f13fd67e5c83383b3486355261a8575125cd Mon Sep 17 00:00:00 2001 From: Alessandro Mauri Date: Mon, 14 Jul 2025 12:59:07 +0200 Subject: [PATCH] added another demo ui --- TODO | 12 ++- resources/style.css | 25 +++--- src/main.c3 | 185 +++++++++++++++++++++++++++----------------- 3 files changed, 139 insertions(+), 83 deletions(-) diff --git a/TODO b/TODO index 454a826..22f1803 100644 --- a/TODO +++ b/TODO @@ -20,7 +20,7 @@ to maintain focus until mouse release (fix scroll bars) [x] The id combination in gen_id() uses an intger division, which is costly, use another combination function that is non-linear and doesn't use division [ ] Animations, somehow -[ ] Maybe cache codepoint converted strings +[x] Maybe cache codepoint converted strings [x] Fix scroll wheel when div is scrolled [ ] Be consistent with the initialization methods some are foo.new() and some are foo.init() [ ] Implement image loading (.bmp, .ff, .qoi and .png), in the future even lossy images like .jpg @@ -44,7 +44,7 @@ to maintain focus until mouse release (fix scroll bars) [x] Fix how padding is applied in push_rect. In CSS padding is applied between the border and the content, the background color is applied starting from the border. Right now push_rect() offsets the background rect by both border and padding - +[ ] Investigate why the debug pointer (cyan rectangle) disappears... ## Layout @@ -55,6 +55,13 @@ to maintain focus until mouse release (fix scroll bars) [ ] Correct whitespace handling in text (\t \r etc) [ ] Consider a multi-pass recursive approach to layout (like https://github.com/nicbarker/clay) instead of the curren multi-frame approach. +[ ] Implement column/row sizing (min, max) +[ ] Find a way to concile pixel measurements to the mm ones used in css, for example in min/max sizing + of elements +[ ] Center elements to div (center children_bounds to the center of the div bounds and shift the origin accordingly) +[ ] Use containing_rect() in position_element() to skip some computing and semplify the function +[ ] Rename position_element() to layout_element() +[ ] Make functions to mark rows/columns as full, to fix the calculator demo ## Input @@ -75,6 +82,7 @@ to maintain focus until mouse release (fix scroll bars) [ ] New window command, useful for popups [x] Text command returns the text bounds, this way we can avoid the pattern draw_text(a, pos) -> off = compute_bounds(a) -> draw_text(b, pos+off) -> ... +[ ] Rounded rectangle with different radius for each corner ## Atlas diff --git a/resources/style.css b/resources/style.css index d062d5a..33362ca 100644 --- a/resources/style.css +++ b/resources/style.css @@ -4,12 +4,13 @@ default { primary: #cc241dff; secondary: #458588ff; accent: #fabd2fff; + border: 1; } button { - margin: 2 2 2 2; - border: 2 2 2 2; - padding: 2 2 2 2; + margin: 2; + border: 2; + padding: 2; radius: 10; size: 32; @@ -21,9 +22,9 @@ button { } checkbox { - margin: 2 2 2 2; - border: 2 2 2 2; - padding: 1 1 1 1; + margin: 2; + border: 2; + padding: 1; radius: 10; size: 16; bg: #3c3836ff; @@ -34,9 +35,9 @@ checkbox { } toggle { - margin: 2 2 2 2; - border: 2 2 2 2; - padding: 1 1 1 1; + margin: 2; + border: 2; + padding: 1; radius: 10; size: 16; bg: #3c3836ff; @@ -47,9 +48,9 @@ toggle { } slider { - margin: 2 2 2 2; - padding: 2 2 2 2; - border: 1 1 1 1; + margin: 2; + padding: 2; + border: 1; radius: 4; size: 8; bg: #3c3836ff; diff --git a/src/main.c3 b/src/main.c3 index cef087f..89f623b 100644 --- a/src/main.c3 +++ b/src/main.c3 @@ -119,7 +119,6 @@ fn int main(String[] args) isz frame; double fps; - bool toggle = true; time::Clock clock; time::Clock fps_clock; time::Clock sleep_clock; @@ -199,74 +198,13 @@ fn int main(String[] args) if (ui.check_key_combo(ugui::KMOD_CTRL, "q")) quit = true; - ui.div_begin({.w=-100})!!; - { - ui.layout_set_column()!!; - if (ui.button(icon: "tux")!!.mouse_press) { - io::printn("press button0"); - toggle = !toggle; - } - //ui.layout_next_column()!!; - if (ui.button(label: "ciao", icon: "tick")!!.mouse_press) { - io::printn("press button1"); - } - //ui.layout_next_column()!!; - if (ui.button()!!.mouse_release) { - io::printn("release button2"); - } - - ui.layout_set_row()!!; - ui.layout_next_row()!!; - static float rf, gf, bf, af; - ui.slider_ver({0,0,30,100}, &rf)!!; - ui.slider_ver({0,0,30,100}, &gf)!!; - ui.slider_ver({0,0,30,100}, &bf)!!; - ui.slider_ver({0,0,30,100}, &af)!!; - - ui.layout_next_column()!!; - ui.text_unbounded("Ciao Mamma\nAbilità ⚡\n'\udb80\udd2c'")!!; - - ui.layout_next_column()!!; - ui.button("Continua!")!!; - - ui.layout_next_row()!!; - static bool check; - ui.checkbox("", {}, &check, "tick")!!; - ui.checkbox("", {}, &check)!!; - ui.toggle("", {}, &toggle)!!; - }; - ui.sprite("tux")!!; - - static char[128] text_box = "ciao mamma"; - static usz text_len = "ciao mamma".len; - ui.text_box({0,0,200,200}, text_box[..], &text_len)!!; - - ui.div_end()!!; - - ui.div_begin(ugui::DIV_FILL, scroll_x: true, scroll_y: true)!!; - { - ui.layout_set_column()!!; - static float slider2 = 0.5; - if (ui.slider_ver({0,0,30,100}, &slider2)!!.update) { - io::printfn("other slider: %f", slider2); - } - ui.button()!!; - ui.button()!!; - ui.button()!!; - ui.button()!!; - if (toggle) { - ui.button()!!; - ui.button()!!; - ui.button()!!; - ui.button()!!; - } - ui.layout_next_column()!!; - ui.layout_set_row()!!; - static float f1, f2; - ui.slider_hor({0,0,100,30}, &f1)!!; - ui.slider_hor({0,0,100,30}, &f2)!!; - }; - ui.div_end()!!; +const String APPLICATION = "calculator"; +$if APPLICATION == "debug": + debug_app(&ui); +$endif +$if APPLICATION == "calculator": + calculator(&ui); +$endif // Timings counter TimeStats dts = draw_times.get_stats(); @@ -310,3 +248,112 @@ fn int main(String[] args) return 0; } + +fn void debug_app(ugui::Ctx* ui) +{ + static bool toggle; + ui.div_begin({.w=-100})!!; + { + ui.layout_set_column()!!; + if (ui.button(icon:"tux")!!.mouse_press) { + io::printn("press button0"); + toggle = !toggle; + } + //ui.layout_next_column()!!; + if (ui.button(label: "ciao", icon: "tick")!!.mouse_press) { + io::printn("press button1"); + } + //ui.layout_next_column()!!; + if (ui.button()!!.mouse_release) { + io::printn("release button2"); + } + + ui.layout_set_row()!!; + ui.layout_next_row()!!; + static float rf, gf, bf, af; + ui.slider_ver({0,0,30,100}, &rf)!!; + ui.slider_ver({0,0,30,100}, &gf)!!; + ui.slider_ver({0,0,30,100}, &bf)!!; + ui.slider_ver({0,0,30,100}, &af)!!; + + ui.layout_next_column()!!; + ui.text_unbounded("Ciao Mamma\nAbilità ⚡\n'\udb80\udd2c'")!!; + + ui.layout_next_column()!!; + ui.button("Continua!")!!; + + ui.layout_next_row()!!; + static bool check; + ui.checkbox("", {}, &check, "tick")!!; + ui.checkbox("", {}, &check)!!; + ui.toggle("", {}, &toggle)!!; + }; + ui.sprite("tux")!!; + + static char[128] text_box = "ciao mamma"; + static usz text_len = "ciao mamma".len; + ui.text_box({0,0,200,200}, text_box[..], &text_len)!!; + + ui.div_end()!!; + + ui.div_begin(ugui::DIV_FILL, scroll_x: true, scroll_y: true)!!; + { + ui.layout_set_column()!!; + static float slider2 = 0.5; + if (ui.slider_ver({0,0,30,100}, &slider2)!!.update) { + io::printfn("other slider: %f", slider2); + } + ui.button()!!; + ui.button()!!; + ui.button()!!; + ui.button()!!; + if (toggle) { + ui.button()!!; + ui.button()!!; + ui.button()!!; + ui.button()!!; + } + ui.layout_next_column()!!; + ui.layout_set_row()!!; + static float f1, f2; + ui.slider_hor({0,0,100,30}, &f1)!!; + ui.slider_hor({0,0,100,30}, &f2)!!; + }; + ui.div_end()!!; +} + +fn void calculator(ugui::Ctx* ui) +{ + ui.div_begin(ugui::DIV_FILL)!!; + + ui.layout_set_row()!!; + ui.div_begin({0,0,-300,50})!!; + ui.text_unbounded("80085")!!; + ui.div_end()!!; + ui.layout_next_row()!!; + + ui.button("7")!!; + ui.button("8")!!; + ui.button("9")!!; + ui.layout_next_row()!!; + ui.button("4")!!; + ui.button("5")!!; + ui.button("6")!!; + ui.layout_next_row()!!; + ui.button("3")!!; + ui.button("2")!!; + ui.button("1")!!; + ui.layout_next_row()!!; + ui.button(".")!!; + ui.button("0")!!; + ui.button("")!!; + + ui.layout_next_column()!!; + ui.layout_set_column()!!; + ui.button("+")!!; + ui.button("-")!!; + ui.button("*")!!; + ui.button("/")!!; + + ui.div_end()!!; +}