Add new Checkbox block

[jkrumbiegel]

Description

This is such a basic building block of GUIs, but nobody has bothered to implement it. There's Toggle but that is not very space efficient for larger assemblies, it was meant more for one big toggle button like "make the simulation go", not for turning many settings on or off. Also, a checkbox is better for implementing radio buttons, which can be a good alternative for a Menu.

Bildschirmaufnahme.2024-09-08.um.19.28.43.mov

This is an example with a manual implementation of radio buttons. I'm not sure yet what a good API for radio buttons would be, as I'd want the layout completely flexible, rather I'd want to be able to turn a couple of selection boxes into a radio group on demand.

f = Figure()
gl = GridLayout(f[2, 1], tellwidth = false)
subgl = GridLayout(gl[1, 1])
cb1 = Checkbox(subgl[1, 1], checked = true)
cb2 = Checkbox(subgl[2, 1], checked = true)
cb3 = Checkbox(subgl[3, 1], checked = true)
Label(subgl[1, 2], "Show grid", halign = :left)
Label(subgl[2, 2], "Show ticklabels", halign = :left)
Label(subgl[3, 2], "Show title", halign = :left)
rowgap!(subgl, 8)
colgap!(subgl, 8)

ax = Axis(
    f[1, 1],
    title = "Checkboxes and radio buttons",
    xgridvisible = cb1.checked,
    ygridvisible = cb1.checked,
    xticklabelsvisible = cb2.checked,
    yticklabelsvisible = cb2.checked,
    xticksvisible = cb2.checked,
    yticksvisible = cb2.checked,
    titlevisible = cb3.checked,
    alignmode = Outside(),
)

subgl2 = GridLayout(gl[1, 2])

function radiobutton(args...)
    Checkbox(args...;
        roundness = 1,
        checkmark = Circle,
        checkmarksize = 0.5
    )
end

r1 = radiobutton(subgl2[1, 1])
r2 = radiobutton(subgl2[2, 1])
r3 = radiobutton(subgl2[3, 1])

radios = [r1, r2, r3]
selection = Observable(1)
r1.checked = true
for (i, r) in enumerate(radios)
    r.onchange = function(_)
        for _r in radios
            if _r != r && _r.checked[]
                _r.checked = false
            end
        end
        selection[] = i
        return true
    end
end

Label(subgl2[1, 2], "Red", halign = :left)
Label(subgl2[2, 2], "Blue", halign = :left)
Label(subgl2[3, 2], "Green", halign = :left)
rowgap!(subgl2, 8)
colgap!(subgl2, 8)

color = lift(selection) do sel
    [:red, :blue, :green][sel]
end
lines!(ax, cumsum(randn(600)); color)

f

Type of change

Delete options that do not apply:

• New feature (non-breaking change which adds functionality)

Checklist

• Added an entry in CHANGELOG.md (for new features and breaking changes)
• Added or changed relevant sections in the documentation
• Added unit tests for new algorithms, conversion methods, etc.
• Added reference image tests for new plotting functions, recipes, visual options, etc.

[MakieBot]

Compile Times benchmark

Note, that these numbers may fluctuate on the CI servers, so take them with a grain of salt. All benchmark results are based on the mean time and negative percent mean faster than the base branch. Note, that GLMakie + WGLMakie run on an emulated GPU, so the runtime benchmark is much slower. Results are from running:

using_time = @ctime using Backend
# Compile time
create_time = @ctime fig = scatter(1:4; color=1:4, colormap=:turbo, markersize=20, visible=true)
display_time = @ctime Makie.colorbuffer(display(fig))
# Runtime
create_time = @benchmark fig = scatter(1:4; color=1:4, colormap=:turbo, markersize=20, visible=true)
display_time = @benchmark Makie.colorbuffer(fig)

	using	create	display	create	display
GLMakie	4.48s (4.39, 4.67) 0.10+-	107.47ms (104.88, 111.48) 2.96+-	464.30ms (448.69, 478.06) 11.92+-	9.25ms (8.90, 9.61) 0.33+-	26.27ms (25.85, 26.49) 0.22+-
master	4.52s (4.39, 4.66) 0.08+-	108.82ms (104.58, 115.50) 3.70+-	479.27ms (469.24, 490.69) 6.68+-	9.35ms (9.01, 9.69) 0.28+-	26.18ms (25.84, 26.36) 0.22+-
evaluation	1.01x invariant, -0.04s (-0.43d, 0.44p, 0.09std)	1.01x invariant, -1.34ms (-0.40d, 0.47p, 3.33std)	1.03x faster ✓, -14.97ms (-1.55d, 0.02p, 9.30std)	1.01x invariant, -0.1ms (-0.32d, 0.56p, 0.31std)	1.00x invariant, 0.09ms (0.42d, 0.44p, 0.22std)
CairoMakie	4.12s (4.07, 4.15) 0.03+-	105.66ms (103.88, 107.50) 1.23+-	166.16ms (164.80, 168.32) 1.33+-	9.63ms (9.53, 9.69) 0.05+-	1.15ms (1.12, 1.21) 0.03+-
master	4.10s (4.05, 4.16) 0.04+-	105.63ms (104.04, 110.92) 2.39+-	166.70ms (163.23, 172.89) 3.47+-	9.59ms (9.51, 9.64) 0.04+-	1.13ms (1.12, 1.13) 0.01+-
evaluation	1.00x invariant, 0.02s (0.47d, 0.40p, 0.03std)	1.00x invariant, 0.03ms (0.02d, 0.98p, 1.81std)	1.00x invariant, -0.54ms (-0.21d, 0.71p, 2.40std)	1.00x invariant, 0.04ms (0.96d, 0.10p, 0.05std)	0.99x invariant, 0.02ms (0.84d, 0.16p, 0.02std)
WGLMakie	4.66s (4.61, 4.80) 0.07+-	108.17ms (103.58, 111.76) 3.34+-	9.39s (9.16, 9.94) 0.27+-	11.90ms (11.15, 15.41) 1.55+-	119.23ms (116.44, 123.15) 2.69+-
master	4.61s (4.50, 4.72) 0.08+-	105.50ms (103.69, 109.22) 2.41+-	9.15s (8.92, 9.35) 0.14+-	11.45ms (11.34, 11.75) 0.14+-	119.98ms (118.97, 120.97) 0.80+-
evaluation	0.99x invariant, 0.05s (0.71d, 0.21p, 0.07std)	0.98x invariant, 2.67ms (0.92d, 0.11p, 2.87std)	0.97x invariant, 0.24s (1.09d, 0.07p, 0.21std)	0.96x invariant, 0.45ms (0.40d, 0.48p, 0.85std)	1.01x invariant, -0.75ms (-0.38d, 0.50p, 1.74std)

[bjarthur]

+100 for a checkbox block!

[jkrumbiegel]

Updated styling a bit. Note that the radio buttons here are not part of the PR, you can build them as in the above code snippet but I'm not clear yet on a good convenience API for that.

checkbox.mp4