package main import rl "vendor:raylib" import ui ".." import "core:fmt" WINDOW_WIDTH :: 1280 WINDOW_HEIGHT :: 720 WINDOW_CAPTION :: "Immediate mode GUI" WINDOW_FRAMERATE :: 60 v2 :: [2]f32 V2_ONE :: v2{1.0, 1.0} main :: proc() { // rl.SetTraceLogLevel(.WARNING) rl.InitWindow(WINDOW_WIDTH, WINDOW_HEIGHT, WINDOW_CAPTION) defer rl.CloseWindow() rl.SetTargetFPS(WINDOW_FRAMERATE) ctx: ui.Context 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 = ""} inner_container_config := ui.ElementConfiguration {color = cast(ui.col)rl.GREEN, label = "", margin = {4.0, 4.0}} button_config := ui.ElementConfiguration {margin = {4.0, 4.0}} 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) for j in 0..<10 { config := button_config config.label = fmt.ctprintf("%d", i * 10 + j) ui.button(dimensions = {ui.Size_Pixels(64.0), ui.Size_Percentage(1.0)}, config = config) ui.same_line() } ui.container_end() } ui.container_begin(dimensions = {ui.SIZE_AUTO, ui.Size_Percentage(0.2)}, config = inner_container_config) for j in 0..<10 { config := button_config config.label = fmt.ctprintf("%d", 70 + j) ui.button(dimensions = {ui.Size_Pixels(64.0), ui.Size_Percentage(0.5)}, config = config) ui.same_line() } ctx.same_line = false for j in 0..<10 { config := button_config config.label = fmt.ctprintf("%d", 80 + j) ui.button(dimensions = {ui.Size_Pixels(64.0), ui.Size_Percentage(0.5)}, config = config) ui.same_line() } ui.container_end() ui.container_begin(dimensions = {ui.Size_Percentage(1.0), ui.Size_PercentageRemainder(1.0)}, config = inner_container_config) for j in 0..<10 { config := button_config config.label = fmt.ctprintf("%d", 90 + j) ui.button(dimensions = {ui.Size_Percentage(0.1), ui.Size_Percentage(1.0)}, config = config) ui.same_line() } ui.container_end() elements := ui.end() rl.BeginDrawing() defer rl.EndDrawing() rl.ClearBackground(rl.BLACK) render_ui_elements(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) slider_config.label = "Inner container margin" ui_slider_2d(1.0, 0.2, slider_config, &inner_container_config.margin, 0.0, 32.0) slider_config.label = "Button margin" ui_slider_2d(1.0, 0.2, slider_config, &button_config.margin, 0.0, 32.0) ui.container_end() debug_elements := ui.end() render_ui_elements(debug_elements) } } ui_slider_2d :: proc(width, height: ui.Size_Percentage, config: ui.ElementConfiguration, value: ^v2, min: f32, max: f32) -> ^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.slider(dimensions, {margin = config.margin}, {value = &value.x, min = min, max = max}) ui.same_line() ui.slider(dimensions, {margin = config.margin}, {value = &value.y, min = min, max = max}) ui.container_end() return container } render_ui_elements :: proc(elements: []ui.Element) { for element in elements { area := rl.Rectangle(element.area) switch element.type { case .Container: rl.DrawRectangleRounded(area, 0.1, 4.0, {0, 0, 0, 192}) rl.GuiGroupBox(area, element.label) case .Button: rl.GuiButton(area, element.label) case .Slider: data := element.data.float_input_data rl.GuiSlider(area, "", "", data.value, data.min, data.max) case .InputFloat: } } }