Synthasmagoria/snths_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Element focus

Browse source
This commit is contained in:
Synthasmagoria 2026-07-30 21:40:36 +02:00
commit 8f19c83762
4 changed files with 94 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

42
example/main.odin
View file

@ -13,7 +13,7 @@ v2 :: [2]f32
V2_ONE :: v2{1.0, 1.0}
main :: proc() {
// rl.SetTraceLogLevel(.WARNING)
rl.SetTraceLogLevel(.WARNING)
rl.InitWindow(WINDOW_WIDTH, WINDOW_HEIGHT, WINDOW_CAPTION)
defer rl.CloseWindow()
rl.SetTargetFPS(WINDOW_FRAMERATE)
@ -22,11 +22,16 @@ main :: proc() {
ui.init(&ctx, 4000)
outer_container_config := ui.ElementConfiguration {margin = {4.0, 8.0}, padding = {12.0, 24.0}, color = ui.col(rl.RED), label = ""}
outer_container_margin_value_string_x := cstring(make([^]u8, 16))
outer_container_margin_value_string_y := cstring(make([^]u8, 16))
inner_container_config := ui.ElementConfiguration {color = cast(ui.col)rl.GREEN, label = "", margin = {4.0, 4.0}}
inner_container_margin_value_string_x := cstring(make([^]u8, 16))
inner_container_margin_value_string_y := cstring(make([^]u8, 16))
button_config := ui.ElementConfiguration {margin = {4.0, 4.0}}
button_margin_value_string_x := cstring(make([^]u8, 16))
button_margin_value_string_y := cstring(make([^]u8, 16))
for !rl.WindowShouldClose() {
ui.start(&ctx, origin = {0, 0}, size = {WINDOW_WIDTH, WINDOW_HEIGHT})
for i in 0..<7 {
ui.container_begin(dimensions = {ui.SIZE_AUTO, ui.Size_Percentage(0.1)}, config = inner_container_config)
@ -69,22 +74,27 @@ main :: proc() {
defer rl.EndDrawing()
rl.ClearBackground(rl.BLACK)
render_ui_elements(elements)
render_ui_elements(&ctx, elements)
ui.start(&ctx, {0, 0}, {WINDOW_WIDTH, WINDOW_HEIGHT})
config := ui.ElementConfiguration{margin = V2_ONE * 4, padding = V2_ONE * 4, color = ui.col(rl.MAGENTA)}
ui.container_begin({ui.Size_Percentage(0.3), ui.Size_Percentage(0.3)}, config)
slider_config := config
slider_config.label = "Outer container margin"
ui_slider_2d(1.0, 0.2, slider_config, &outer_container_config.margin, 0.0, 32.0)
ui_input_float_2d(1.0, 0.2, slider_config, &outer_container_config.margin, outer_container_margin_value_string_x, outer_container_margin_value_string_y)
slider_config.label = "Inner container margin"
ui_slider_2d(1.0, 0.2, slider_config, &inner_container_config.margin, 0.0, 32.0)
ui_input_float_2d(1.0, 0.2, slider_config, &inner_container_config.margin, inner_container_margin_value_string_x, inner_container_margin_value_string_y)
slider_config.label = "Button margin"
ui_slider_2d(1.0, 0.2, slider_config, &button_config.margin, 0.0, 32.0)
ui_input_float_2d(1.0, 0.2, slider_config, &button_config.margin, button_margin_value_string_x, button_margin_value_string_y)
ui.container_end()
debug_elements := ui.end()
render_ui_elements(debug_elements)
if rl.IsKeyPressed(.TAB) {
ui.focus_next_element(&ctx, {.InputFloat})
fmt.println(ctx.element_focus_id)
}
render_ui_elements(&ctx, debug_elements)
}
}
@ -98,7 +108,17 @@ ui_slider_2d :: proc(width, height: ui.Size_Percentage, config: ui.ElementConfig
return container
}
render_ui_elements :: proc(elements: []ui.Element) {
ui_input_float_2d :: proc(width, height: ui.Size_Percentage, config: ui.ElementConfiguration, value: ^v2, value_string_x, value_string_y: cstring) -> ^ui.Element {
container := ui.container_begin(dimensions = {width, height}, config = config)
dimensions := ui.Dimensions {ui.Size_Percentage(0.5), ui.Size_Percentage(1.0)}
ui.input_float(dimensions, {margin = config.margin}, {value_string = value_string_x, value = &value.x})
ui.same_line()
ui.input_float(dimensions, {margin = config.margin}, {value_string = value_string_y, value = &value.y})
ui.container_end()
return container
}
render_ui_elements :: proc(ctx: ^ui.Context, elements: []ui.Element) {
for element in elements {
area := rl.Rectangle(element.area)
switch element.type {
@ -108,9 +128,13 @@ render_ui_elements :: proc(elements: []ui.Element) {
case .Button:
rl.GuiButton(area, element.label)
case .Slider:
data := element.data.float_input_data
data := element.data
rl.GuiSlider(area, "", "", data.value, data.min, data.max)
case .InputFloat:
data := element.data
if rl.GuiValueBoxFloat(area, element.label, data.value_string, data.value, ui.is_element_focused(ctx, element)) == 1 {
ui.focus_element(ctx, element)
}
}
}
}

1
example/raylib/raygui.odin
View file

@ -280,6 +280,7 @@ foreign lib {
GuiDropdownBox :: proc(bounds: Rectangle, text: cstring, active: ^c.int, editMode: bool) -> bool --- // Dropdown Box control, returns selected item
GuiSpinner :: proc(bounds: Rectangle, text: cstring, value: ^c.int, minValue, maxValue: c.int, editMode: bool) -> c.int --- // Spinner control, returns selected value
GuiValueBox :: proc(bounds: Rectangle, text: cstring, value: ^c.int, minValue, maxValue: c.int, editMode: bool) -> c.int --- // Value Box control, updates input text with numbers
GuiValueBoxFloat :: proc(bounds: Rectangle, text: cstring, text_value: cstring, value: ^c.float, editMode: bool) -> c.int --- // Value box control for float values
GuiTextBox :: proc(bounds: Rectangle, text: cstring, textSize: c.int, editMode: bool) -> bool --- // Text Box control, updates input text
GuiSlider :: proc(bounds: Rectangle, textLeft: cstring, textRight: cstring, value: ^f32, minValue: f32, maxValue: f32) -> c.int --- // Slider control, returns selected value

12
example/raylib/raygui/raygui.h
View file

@ -4157,22 +4157,22 @@ int GuiColorBarHue(Rectangle bounds, const char *text, float *hue)
{
// Draw hue bar:color bars
// NOTE: Using DrawRectangleGradientEx(bounds, color1, color2, color2, color1);
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y, bounds.width, bounds.height/6.0f },
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y, bounds.width, bounds.height/6.0f },
Fade(RAYGUI_CLITERAL(Color){ 255, 0, 0, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 255, 255, 0, 255 }, guiAlpha),
Fade(RAYGUI_CLITERAL(Color){ 255, 255, 0, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 255, 0, 0, 255 }, guiAlpha));
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 1*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 1*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
Fade(RAYGUI_CLITERAL(Color){ 255, 255, 0, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 0, 255, 0, 255 }, guiAlpha),
Fade(RAYGUI_CLITERAL(Color){ 0, 255, 0, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 255, 255, 0, 255 }, guiAlpha));
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 2*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 2*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
Fade(RAYGUI_CLITERAL(Color){ 0, 255, 0, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 0, 255, 255, 255 }, guiAlpha),
Fade(RAYGUI_CLITERAL(Color){ 0, 255, 255, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 0, 255, 0, 255 }, guiAlpha));
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 3*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 3*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
Fade(RAYGUI_CLITERAL(Color){ 0, 255, 255, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 0, 0, 255, 255 }, guiAlpha),
Fade(RAYGUI_CLITERAL(Color){ 0, 0, 255, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 0, 255, 255, 255 }, guiAlpha));
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 4*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 4*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
Fade(RAYGUI_CLITERAL(Color){ 0, 0, 255, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 255, 0, 255, 255 }, guiAlpha),
Fade(RAYGUI_CLITERAL(Color){ 255, 0, 255, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 0, 0, 255, 255 }, guiAlpha));
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 5*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
DrawRectangleGradientEx(RAYGUI_CLITERAL(Rectangle){ bounds.x, bounds.y + 5*(bounds.height/6.0f), bounds.width, bounds.height/6.0f },
Fade(RAYGUI_CLITERAL(Color){ 255, 0, 255, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 255, 0, 0, 255 }, guiAlpha),
Fade(RAYGUI_CLITERAL(Color){ 255, 0, 0, 255 }, guiAlpha), Fade(RAYGUI_CLITERAL(Color){ 255, 0, 255, 255 }, guiAlpha));
}