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

re-added sliders

Browse Source
This commit is contained in:
Alessandro Mauri 2025-09-12 20:23:07 +02:00
parent a00e39f36b
commit 71a959b9a1
2 changed files with 84 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
lib/ugui.c3l/src/widgets/ugui_slider.c3
View File

@ -13,13 +13,12 @@ struct ElemSlider {
* | |#####| | * | |#####| |
* +----+-----+---------------------+ * +----+-----+---------------------+
*/ */
/* macro Ctx.slider_hor(&ctx, Size w, Size h, float* value, float hpercent = 0.25, ...)
macro Ctx.slider_hor(&ctx, Rect size, float* value, float hpercent = 0.25, ...) => ctx.slider_hor_id(@compute_id($vasplat), w, h, value, hpercent);
=> ctx.slider_hor_id(@compute_id($vasplat), size, value, hpercent);
<* <*
@require value != null @require value != null
*> *>
fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpercent = 0.25) fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Size w, Size h, float* value, float hpercent = 0.25)
{ {
id = ctx.gen_id(id)!; id = ctx.gen_id(id)!;
@ -27,10 +26,14 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
Elem* elem = ctx.get_elem(id, ETYPE_SLIDER)!; Elem* elem = ctx.get_elem(id, ETYPE_SLIDER)!;
Style* style = ctx.styles.get_style(@str_hash("slider")); Style* style = ctx.styles.get_style(@str_hash("slider"));
// 2. Layout elem.layout.w = w;
elem.bounds = ctx.layout_element(parent, size, style); elem.layout.h = h;
if (elem.bounds.is_null()) return {}; elem.layout.content_offset = style.margin + style.border + style.padding;
Rect content_bounds = elem.content_bounds(style); update_parent_grow(elem, parent);
update_parent_size(elem, parent);
Rect bg_bounds = elem.bounds.pad(style.margin);
Rect content_bounds = elem.bounds.pad(style.margin + style.border + style.padding);
// handle width // handle width
short hw = (short)(content_bounds.w * hpercent); short hw = (short)(content_bounds.w * hpercent);
@ -55,7 +58,7 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
Style s = *style; Style s = *style;
Rect padding = s.padding; Rect padding = s.padding;
s.padding = {}; s.padding = {};
ctx.push_rect(elem.bounds, parent.div.z_index, &s)!; ctx.push_rect(bg_bounds, parent.div.z_index, &s)!;
s.bg = s.primary; s.bg = s.primary;
s.padding = padding; s.padding = padding;
s.border = {}; s.border = {};
@ -63,7 +66,6 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
return elem.events; return elem.events;
} }
*/
/* /*
@ -78,10 +80,9 @@ fn ElemEvents? Ctx.slider_hor_id(&ctx, Id id, Rect size, float* value, float hpe
* | | * | |
* +--+ * +--+
*/ */
/* macro Ctx.slider_ver(&ctx, Size w, Size h, float* value, float hpercent = 0.25, ...)
macro Ctx.slider_ver(&ctx, Rect size, float* value, float hpercent = 0.25, ...) => ctx.slider_ver_id(@compute_id($vasplat), w, h, value, hpercent);
=> ctx.slider_ver_id(@compute_id($vasplat), size, value, hpercent); fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Size w, Size h, float* value, float hpercent = 0.25)
fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpercent = 0.25)
{ {
id = ctx.gen_id(id)!; id = ctx.gen_id(id)!;
@ -89,17 +90,15 @@ fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpe
Elem *elem = ctx.get_elem(id, ETYPE_SLIDER)!; Elem *elem = ctx.get_elem(id, ETYPE_SLIDER)!;
Style* style = ctx.styles.get_style(@str_hash("slider")); Style* style = ctx.styles.get_style(@str_hash("slider"));
// 1. Fill the element fields elem.layout.w = w;
if (elem.flags.is_new) { elem.layout.h = h;
elem.type = ETYPE_SLIDER; elem.layout.content_offset = style.margin + style.border + style.padding;
} else if (elem.type != ETYPE_SLIDER) { update_parent_grow(elem, parent);
return WRONG_ELEMENT_TYPE?; update_parent_size(elem, parent);
}
// 2. Layout // 2. Layout
elem.bounds = ctx.layout_element(parent, size, style); Rect bg_bounds = elem.bounds.pad(style.margin);
if (elem.bounds.is_null()) return {}; Rect content_bounds = elem.bounds.pad(style.margin + style.border + style.padding);
Rect content_bounds = elem.content_bounds(style);
// handle height // handle height
short hh = (short)(content_bounds.h * hpercent); short hh = (short)(content_bounds.h * hpercent);
@ -124,7 +123,7 @@ fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpe
Style s = *style; Style s = *style;
Rect padding = s.padding; Rect padding = s.padding;
s.padding = {}; s.padding = {};
ctx.push_rect(elem.bounds, parent.div.z_index, &s)!; ctx.push_rect(bg_bounds, parent.div.z_index, &s)!;
s.bg = s.primary; s.bg = s.primary;
s.padding = padding; s.padding = padding;
s.border = {}; s.border = {};
@ -136,4 +135,3 @@ fn ElemEvents? Ctx.slider_ver_id(&ctx, Id id, Rect size, float* value, float hpe
macro short calc_slider(short off, short dim, float value) => (short)off + (short)(dim * value); macro short calc_slider(short off, short dim, float value) => (short)off + (short)(dim * value);
macro float calc_value(short off, short mouse, short dim, short slider) macro float calc_value(short off, short mouse, short dim, short slider)
=> math::clamp((float)(mouse-off-slider/2)/(float)(dim-slider), 0.0f, 1.0f); => math::clamp((float)(mouse-off-slider/2)/(float)(dim-slider), 0.0f, 1.0f);
*/

119
src/main.c3
View File

@ -73,54 +73,51 @@ fn int main(String[] args)
defer ren.free(); defer ren.free();
ui.input_window_size(800, 600)!!; ui.input_window_size(800, 600)!!;
// // ========================================================================================== //
// FONT LOADING // FONT LOADING //
// // ========================================================================================== //
{ // import font in the ui context
// import font in the ui context ui.load_font("font1", "resources/hack-nerd.ttf", 16)!!;
ui.load_font("font1", "resources/hack-nerd.ttf", 16)!!;
// create the rendering pipeline
ren.font_atlas_id = ui.get_font_id("font1");
ren.load_spirv_shader_from_file("UGUI_PIPELINE_FONT", SPRITE_VS_PATH, FONT_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_FONT", SPRITE);
// send the atlas to the gpu
Atlas* font_atlas = ui.get_font_atlas("font1")!!;
ren.new_texture("font1", JUST_ALPHA, font_atlas.buffer, font_atlas.width, font_atlas.height);
}
// // create the rendering pipeline
// ICON LOADING ren.font_atlas_id = ui.get_font_id("font1");
// ren.load_spirv_shader_from_file("UGUI_PIPELINE_FONT", SPRITE_VS_PATH, FONT_FS_PATH, 1, 0);
{ ren.create_pipeline("UGUI_PIPELINE_FONT", SPRITE);
// create the atlas and upload some icons
ui.sprite_atlas_create("icons", AtlasType.ATLAS_R8G8B8A8, 512, 512)!!;
ui.import_sprite_file_qoi("tux", "resources/tux.qoi")!!;
ui.import_sprite_file_qoi("tick", "resources/tick_sdf.qoi", SpriteType.SPRITE_MSDF)!!;
// create the rendering pipelines
ren.sprite_atlas_id = ui.get_sprite_atlas_id("icons");
// normal sprite pipeline
ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE", SPRITE_VS_PATH, SPRITE_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_SPRITE", SPRITE);
// msdf sprite pipeline
ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE_MSDF", SPRITE_VS_PATH, MSDF_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_SPRITE_MSDF", SPRITE);
// upload the atlas to the gpu
Atlas atlas = ui.sprite_atlas.atlas;
ren.new_texture("icons", FULL_COLOR, atlas.buffer, atlas.width, atlas.height);
}
// // send the atlas to the gpu
// RECT PIPELINE Atlas* font_atlas = ui.get_font_atlas("font1")!!;
// ren.new_texture("font1", JUST_ALPHA, font_atlas.buffer, font_atlas.width, font_atlas.height);
// ========================================================================================== //
// ICON LOADING //
// ========================================================================================== //
// create the atlas and upload some icons
ui.sprite_atlas_create("icons", AtlasType.ATLAS_R8G8B8A8, 512, 512)!!;
ui.import_sprite_file_qoi("tux", "resources/tux.qoi")!!;
ui.import_sprite_file_qoi("tick", "resources/tick_sdf.qoi", SpriteType.SPRITE_MSDF)!!;
// create the rendering pipelines
ren.sprite_atlas_id = ui.get_sprite_atlas_id("icons");
// normal sprite pipeline
ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE", SPRITE_VS_PATH, SPRITE_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_SPRITE", SPRITE);
// msdf sprite pipeline
ren.load_spirv_shader_from_file("UGUI_PIPELINE_SPRITE_MSDF", SPRITE_VS_PATH, MSDF_FS_PATH, 1, 0);
ren.create_pipeline("UGUI_PIPELINE_SPRITE_MSDF", SPRITE);
// upload the atlas to the gpu
Atlas atlas = ui.sprite_atlas.atlas;
ren.new_texture("icons", FULL_COLOR, atlas.buffer, atlas.width, atlas.height);
// ========================================================================================== //
// RECT PIPELINE //
// ========================================================================================== //
ren.load_spirv_shader_from_file("UGUI_PIPELINE_RECT", RECT_VS_PATH, RECT_FS_PATH, 0, 0); ren.load_spirv_shader_from_file("UGUI_PIPELINE_RECT", RECT_VS_PATH, RECT_FS_PATH, 0, 0);
ren.create_pipeline("UGUI_PIPELINE_RECT", RECT); ren.create_pipeline("UGUI_PIPELINE_RECT", RECT);
// ========================================================================================== //
// CSS INPUT // CSS INPUT //
// ========================================================================================== //
io::printfn("imported %d styles", ui.import_style_from_file(STYLESHEET_PATH)); io::printfn("imported %d styles", ui.import_style_from_file(STYLESHEET_PATH));
isz frame; isz frame;
@ -132,9 +129,9 @@ fn int main(String[] args)
Times draw_times; Times draw_times;
// // ========================================================================================== //
// MAIN LOOP // MAIN LOOP //
// // ========================================================================================== //
sdl::start_text_input(ren.win); sdl::start_text_input(ren.win);
sdl::Event e; sdl::Event e;
@ -145,10 +142,10 @@ fn int main(String[] args)
clock.mark(); clock.mark();
fps_clock.mark(); fps_clock.mark();
sleep_clock.mark(); sleep_clock.mark();
do { do {
switch (e.type) { switch (e.type) {
case EVENT_QUIT: case EVENT_QUIT:
quit = true; quit = true;
case EVENT_KEY_UP: nextcase; case EVENT_KEY_UP: nextcase;
case EVENT_KEY_DOWN: case EVENT_KEY_DOWN:
@ -156,15 +153,15 @@ fn int main(String[] args)
mod.lctrl = e.key.key == K_LCTRL ? !!(e.type == EVENT_KEY_DOWN) : mod.lctrl; mod.lctrl = e.key.key == K_LCTRL ? !!(e.type == EVENT_KEY_DOWN) : mod.lctrl;
mod.bkspc = e.key.key == K_BACKSPACE ? !!(e.type == EVENT_KEY_DOWN) : mod.bkspc; mod.bkspc = e.key.key == K_BACKSPACE ? !!(e.type == EVENT_KEY_DOWN) : mod.bkspc;
// pressing ctrl+key or alt+key does not generate a character as such no // pressing ctrl+key or alt+key does not generate a character as such no
// TEXT_INPUT event is generated. When those keys are pressed we have to // TEXT_INPUT event is generated. When those keys are pressed we have to
// do manual text input, bummer // do manual text input, bummer
if (e.type == EVENT_KEY_DOWN && (mod.lctrl || mod.rctrl)) { if (e.type == EVENT_KEY_DOWN && (mod.lctrl || mod.rctrl)) {
if (ascii::is_alnum_m((uint)e.key.key)) { if (ascii::is_alnum_m((uint)e.key.key)) {
ui.input_char((char)e.key.key); ui.input_char((char)e.key.key);
} }
} }
if (e.type == EVENT_KEY_DOWN && e.key.key == K_RETURN) ui.input_char('\n'); if (e.type == EVENT_KEY_DOWN && e.key.key == K_RETURN) ui.input_char('\n');
case EVENT_TEXT_INPUT: case EVENT_TEXT_INPUT:
@ -235,7 +232,7 @@ $endswitch
ren.begin_render(true); ren.begin_render(true);
ren.render_ugui(&ui.cmd_queue); ren.render_ugui(&ui.cmd_queue);
ren.end_render(); ren.end_render();
draw_times.push(clock.mark()); draw_times.push(clock.mark());
@ -245,7 +242,7 @@ $endswitch
// wait for the next event, timeout after 100ms // wait for the next event, timeout after 100ms
sdl::wait_event_timeout(&e, (int)(100.0-sleep_clock.mark().to_ms()-0.5)); sdl::wait_event_timeout(&e, (int)(100.0-sleep_clock.mark().to_ms()-0.5));
fps = 1.0 / fps_clock.mark().to_sec(); fps = 1.0 / fps_clock.mark().to_sec();
frame++; frame++;
} }
@ -292,7 +289,7 @@ fn void debug_app(ugui::Ctx* ui)
ui.checkbox("", {}, &check, "tick")!!; ui.checkbox("", {}, &check, "tick")!!;
ui.checkbox("", {}, &check)!!; ui.checkbox("", {}, &check)!!;
ui.toggle("", {}, &toggle)!!; ui.toggle("", {}, &toggle)!!;
ui.sprite("tux")!!; ui.sprite("tux")!!;
static char[128] text_box = "ciao mamma"; static char[128] text_box = "ciao mamma";
static usz text_len = "ciao mamma".len; static usz text_len = "ciao mamma".len;
@ -334,7 +331,7 @@ fn void calculator(ugui::Ctx* ui)
static char[128] buffer; static char[128] buffer;
static usz len; static usz len;
bool eval; bool eval;
// keyboard input // keyboard input
switch(ui.get_keys()) { switch(ui.get_keys()) {
case "+": nextcase; case "+": nextcase;
@ -367,6 +364,7 @@ fn void calculator(ugui::Ctx* ui)
ui.@div(ugui::@grow(), ugui::@grow(), ROW, CENTER) { // center everything on the screen ui.@div(ugui::@grow(), ugui::@grow(), ROW, CENTER) { // center everything on the screen
ui.@div(ugui::@fit(), ugui::@fit(), COLUMN, TOP_LEFT) { ui.@div(ugui::@fit(), ugui::@fit(), COLUMN, TOP_LEFT) {
ui.@div(ugui::@grow(), ugui::@fit(), ROW, CENTER) {ui.text("SHITTY AHH CALCULATOR")!!;}!!;
ui.@div(ugui::@grow(), ugui::@exact(100), ROW, RIGHT) { ui.@div(ugui::@grow(), ugui::@exact(100), ROW, RIGHT) {
ui.text((String)buffer[:len])!!; ui.text((String)buffer[:len])!!;
}!!; }!!;
@ -400,7 +398,7 @@ fn void calculator(ugui::Ctx* ui)
ui.button("C")!!.mouse_press ? len = 0 : 0; ui.button("C")!!.mouse_press ? len = 0 : 0;
ui.button("D")!!.mouse_press ? len > 0 ? len-- : 0 : 0; ui.button("D")!!.mouse_press ? len > 0 ? len-- : 0 : 0;
ui.button("-")!!.mouse_press ? buffer[len++] = '-' : 0; ui.button("-")!!.mouse_press ? buffer[len++] = '-' : 0;
// eval the expression with 'bc' // eval the expression with 'bc'
if (ui.button("=")!!.mouse_press || eval) { if (ui.button("=")!!.mouse_press || eval) {
char[128] out; char[128] out;
@ -411,12 +409,17 @@ fn void calculator(ugui::Ctx* ui)
} }
}!!; }!!;
}!!; }!!;
ui.@div(ugui::@grow(), ugui::@grow(), anchor: CENTER) { ui.@div(ugui::@grow(), ugui::@fit(), anchor: CENTER) {
static bool state; static bool state;
ui.checkbox("boolean", &state, "tick")!!; ui.checkbox("boolean", &state, "tick")!!;
ui.sprite("tux")!!; ui.sprite("tux")!!;
}!!; }!!;
ui.@div(ugui::@grow(), ugui::@fit(), anchor: CENTER) {
static float f;
ui.slider_hor(ugui::@grow(), ugui::@exact(20), &f)!!;
ui.slider_ver(ugui::@exact(20), ugui::@exact(100), &f)!!;
}!!;
}!!; }!!; }!!; }!!;
} }