alema/ugui
1
0
Fork 0
Code Issues Pull Requests Activity

added another demo ui

Browse Source
This commit is contained in:
Alessandro Mauri 2025-07-14 12:59:07 +02:00
parent 7713cd7da9
commit 8d79f13fd6
3 changed files with 139 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
TODO
View File

@ -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 [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 function that is non-linear and doesn't use division
[ ] Animations, somehow [ ] Animations, somehow
[ ] Maybe cache codepoint converted strings [x] Maybe cache codepoint converted strings
[x] Fix scroll wheel when div is scrolled [x] Fix scroll wheel when div is scrolled
[ ] Be consistent with the initialization methods some are foo.new() and some are foo.init() [ ] 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 [ ] 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 [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 content, the background color is applied starting from the border. Right now push_rect() offsets
the background rect by both border and padding the background rect by both border and padding
[ ] Investigate why the debug pointer (cyan rectangle) disappears...
## Layout ## Layout
@ -55,6 +55,13 @@ to maintain focus until mouse release (fix scroll bars)
[ ] Correct whitespace handling in text (\t \r etc) [ ] Correct whitespace handling in text (\t \r etc)
[ ] Consider a multi-pass recursive approach to layout (like https://github.com/nicbarker/clay) [ ] Consider a multi-pass recursive approach to layout (like https://github.com/nicbarker/clay)
instead of the curren multi-frame approach. 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 ## Input
@ -75,6 +82,7 @@ to maintain focus until mouse release (fix scroll bars)
[ ] New window command, useful for popups [ ] New window command, useful for popups
[x] Text command returns the text bounds, this way we can avoid the pattern [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) -> ... draw_text(a, pos) -> off = compute_bounds(a) -> draw_text(b, pos+off) -> ...
[ ] Rounded rectangle with different radius for each corner
## Atlas ## Atlas

25
resources/style.css
View File

@ -4,12 +4,13 @@ default {
primary: #cc241dff; primary: #cc241dff;
secondary: #458588ff; secondary: #458588ff;
accent: #fabd2fff; accent: #fabd2fff;
border: 1;
} }
button { button {
margin: 2 2 2 2; margin: 2;
border: 2 2 2 2; border: 2;
padding: 2 2 2 2; padding: 2;
radius: 10; radius: 10;
size: 32; size: 32;
@ -21,9 +22,9 @@ button {
} }
checkbox { checkbox {
margin: 2 2 2 2; margin: 2;
border: 2 2 2 2; border: 2;
padding: 1 1 1 1; padding: 1;
radius: 10; radius: 10;
size: 16; size: 16;
bg: #3c3836ff; bg: #3c3836ff;
@ -34,9 +35,9 @@ checkbox {
} }
toggle { toggle {
margin: 2 2 2 2; margin: 2;
border: 2 2 2 2; border: 2;
padding: 1 1 1 1; padding: 1;
radius: 10; radius: 10;
size: 16; size: 16;
bg: #3c3836ff; bg: #3c3836ff;
@ -47,9 +48,9 @@ toggle {
} }
slider { slider {
margin: 2 2 2 2; margin: 2;
padding: 2 2 2 2; padding: 2;
border: 1 1 1 1; border: 1;
radius: 4; radius: 4;
size: 8; size: 8;
bg: #3c3836ff; bg: #3c3836ff;

135
src/main.c3
View File

@ -119,7 +119,6 @@ fn int main(String[] args)
isz frame; isz frame;
double fps; double fps;
bool toggle = true;
time::Clock clock; time::Clock clock;
time::Clock fps_clock; time::Clock fps_clock;
time::Clock sleep_clock; time::Clock sleep_clock;
@ -199,10 +198,64 @@ fn int main(String[] args)
if (ui.check_key_combo(ugui::KMOD_CTRL, "q")) quit = true; if (ui.check_key_combo(ugui::KMOD_CTRL, "q")) quit = true;
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();
TimeStats uts = ui_times.get_stats();
ui.layout_set_floating()!!;
// FIXME: I cannot anchor shit to the bottom of the screen
ui.div_begin({0, ui.height-150, -300, 150})!!;
{
ui.layout_set_column()!!;
ui.text_unbounded(string::tformat("frame %d, fps = %.2f", frame, fps))!!;
ui.text_unbounded(string::tformat("ui avg: %s\ndraw avg: %s\nTOT: %s", uts.avg, dts.avg, uts.avg+dts.avg))!!;
ui.text_unbounded(string::tformat("%s %s", mod.lctrl, (String)ui.input.keyboard.text[:ui.input.keyboard.text_len]))!!;
};
ui.div_end()!!;
ui.frame_end()!!;
/* End UI Handling */
ui_times.push(clock.mark());
//ui_times.print_stats();
/* Start UI Drawing */
ren.begin_render(true);
ren.render_ugui(&ui.cmd_queue);
ren.end_render();
draw_times.push(clock.mark());
//draw_times.print_stats();
/* End Drawing */
// wait for the next event, timeout after 100ms
sdl::wait_event_timeout(&e, (int)(100.0-sleep_clock.mark().to_ms()-0.5));
fps = 1.0 / fps_clock.mark().to_sec();
frame++;
}
return 0;
}
fn void debug_app(ugui::Ctx* ui)
{
static bool toggle;
ui.div_begin({.w=-100})!!; ui.div_begin({.w=-100})!!;
{ {
ui.layout_set_column()!!; ui.layout_set_column()!!;
if (ui.button(icon: "tux")!!.mouse_press) { if (ui.button(icon:"tux")!!.mouse_press) {
io::printn("press button0"); io::printn("press button0");
toggle = !toggle; toggle = !toggle;
} }
@ -267,46 +320,40 @@ fn int main(String[] args)
ui.slider_hor({0,0,100,30}, &f2)!!; ui.slider_hor({0,0,100,30}, &f2)!!;
}; };
ui.div_end()!!; ui.div_end()!!;
}
// Timings counter
TimeStats dts = draw_times.get_stats(); fn void calculator(ugui::Ctx* ui)
TimeStats uts = ui_times.get_stats(); {
ui.div_begin(ugui::DIV_FILL)!!;
ui.layout_set_floating()!!;
// FIXME: I cannot anchor shit to the bottom of the screen ui.layout_set_row()!!;
ui.div_begin({0, ui.height-150, -300, 150})!!; ui.div_begin({0,0,-300,50})!!;
{ ui.text_unbounded("80085")!!;
ui.layout_set_column()!!; ui.div_end()!!;
ui.text_unbounded(string::tformat("frame %d, fps = %.2f", frame, fps))!!; ui.layout_next_row()!!;
ui.text_unbounded(string::tformat("ui avg: %s\ndraw avg: %s\nTOT: %s", uts.avg, dts.avg, uts.avg+dts.avg))!!;
ui.text_unbounded(string::tformat("%s %s", mod.lctrl, (String)ui.input.keyboard.text[:ui.input.keyboard.text_len]))!!; ui.button("7")!!;
}; ui.button("8")!!;
ui.div_end()!!; ui.button("9")!!;
ui.layout_next_row()!!;
ui.frame_end()!!; ui.button("4")!!;
/* End UI Handling */ ui.button("5")!!;
ui_times.push(clock.mark()); ui.button("6")!!;
//ui_times.print_stats(); ui.layout_next_row()!!;
ui.button("3")!!;
ui.button("2")!!;
/* Start UI Drawing */ ui.button("1")!!;
ren.begin_render(true); ui.layout_next_row()!!;
ui.button(".")!!;
ren.render_ugui(&ui.cmd_queue); ui.button("0")!!;
ui.button("")!!;
ren.end_render();
ui.layout_next_column()!!;
draw_times.push(clock.mark()); ui.layout_set_column()!!;
//draw_times.print_stats(); ui.button("+")!!;
/* End Drawing */ ui.button("-")!!;
ui.button("*")!!;
// wait for the next event, timeout after 100ms ui.button("/")!!;
sdl::wait_event_timeout(&e, (int)(100.0-sleep_clock.mark().to_ms()-0.5)); ui.div_end()!!;
fps = 1.0 / fps_clock.mark().to_sec();
frame++;
}
return 0;
} }