added another demo ui
This commit is contained in:
parent
7713cd7da9
commit
8d79f13fd6
12
TODO
12
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
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
185
src/main.c3
185
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()!!;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user