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
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

25
resources/style.css
View File

@ -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;

135
src/main.c3
View File

@ -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,10 +198,64 @@ fn int main(String[] args)
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.layout_set_column()!!;
if (ui.button(icon: "tux")!!.mouse_press) {
if (ui.button(icon:"tux")!!.mouse_press) {
io::printn("press button0");
toggle = !toggle;
}
@ -267,46 +320,40 @@ fn int main(String[] args)
ui.slider_hor({0,0,100,30}, &f2)!!;
};
ui.div_end()!!;
// 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 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()!!;
}