Widgets

spinbox([range,] label=""; value=nothing)

Create a widget to select numbers with placeholder label. An optional range first argument specifies maximum and minimum value accepted as well as the step. Use step="any" to allow all decimal numbers.

textbox(hint=""; value="")

Create a text input area with an optional placeholder hint e.g. textbox("enter number:"). Use typ=... to specify the type of text. For example typ="email" or typ="password". Use multiline=true to display a textarea spanning several lines.

textarea(hint=""; value="")

Create a textarea with an optional placeholder hint e.g. textarea("enter number:"). Use rows=... to specify how many rows to display

autocomplete(options, label=""; value="")

Create a textbox input with autocomplete options specified by options, with value as initial value and label as label.

datepicker(value::Union{Dates.Date, Observable, Nothing}=nothing)

Create a widget to select dates.

timepicker(value::Union{Dates.Time, Observable, Nothing}=nothing)

Create a widget to select times.

colorpicker(value::Union{Color, Observable}=colorant"#000000")

Create a widget to select colors.

checkbox(value::Union{Bool, AbstractObservable}=false; label)

A checkbox. e.g. checkbox(label="be my friend?")

toggle(value::Union{Bool, AbstractObservable}=false; label)

A toggle switch. e.g. toggle(label="be my friend?")

filepicker(label="Choose a file..."; multiple=false, accept="*")

Create a widget to select files. If multiple=true the observable will hold an array containing the paths of all selected files. Use accept to only accept some formats, e.g. accept=".csv"

opendialog(; value = String[], label = "Open", icon = "far fa-folder-open", options...)

Creates an Electron openDialog. value is the list of selected files or folders. options (given as keyword arguments) correspond to options of the Electron dialog. This widget will not work in the browser but only in an Electron window.

Examples

julia> ui = InteractBase.opendialog(; properties = ["showHiddenFiles", "multiSelections"], filters = [(; name = "Text", extensions = ["txt", "md"])]);

julia> ui[]
0-element Array{String,1}

savedialog(; value = String[], label = "Open", icon = "far fa-folder-open", options...)

Create an Electron saveDialog. value is the list of selected files or folders. options (given as keyword arguments) correspond to options of the Electron dialog. This widget will not work in the browser but only in an Electron window.

Examples

julia> ui = InteractBase.savedialog(; properties = ["showHiddenFiles"], filters = [(; name = "Text", extensions = ["txt", "md"])]);

julia> ui[]
""

function slider(vals::AbstractArray;
                value=medianelement(vals),
                label=nothing, readout=true, kwargs...)

Creates a slider widget which can take on the values in vals, and updates observable value when the slider is changed.

function rangeslider(vals::AbstractArray;
                value=medianelement(vals),
                label=nothing, readout=true, kwargs...)

Creates a slider widget which can take on the values in vals and accepts several "handles". Pass a vector to value with two values if you want to select a range.

function rangepicker(vals::AbstractArray;
                value=[extrema(vals)...],
                label=nothing, readout=true, kwargs...)

A multihandle slider with a set of spinboxes, one per handle.

button(content... = "Press me!"; value=0)

A button. content goes inside the button. Note the button content supports a special clicks variable, that gets incremented by 1 with each click e.g.: button("clicked {{clicks}} times"). The clicks variable is initialized at value=0. Given a button b, b["is-loading"] defines whether the button is in a loading state (spinning wheel). Use b["is-loading"][]=true or b["is-loading"][]=false respectively to display or take away the spinner.

input(o; typ="text")

Create an HTML5 input element of type type (e.g. "text", "color", "number", "date") with o as initial value.

dropdown(options::AbstractDict;
         value = first(values(options)),
         label = nothing,
         multiple = false)

A dropdown menu whose item labels are the keys of options. If multiple=true the observable will hold an array containing the values of all selected items e.g. dropdown(OrderedDict("good"=>1, "better"=>2, "amazing"=>9001))

dropdown(values::AbstractArray; kwargs...)

dropdown with labels string.(values) see dropdown(options::AbstractDict; ...) for more details

dropdown(options::AbstractObservable;
         value = first(values(options[])),
         label = nothing,
         multiple = false)

A dropdown menu whose options are a given Observable. Set the Observable to some other value to update the options in real time.

Examples

options = Observable(["a", "b", "c"])
wdg = dropdown(options)
options[] = ["c", "d", "e"]

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

radiobuttons(options::AbstractDict;
             value::Union{T, Observable} = first(values(options)))

e.g. radiobuttons(OrderedDict("good"=>1, "better"=>2, "amazing"=>9001))

radiobuttons(values::AbstractArray; kwargs...)

radiobuttons with labels string.(values) see radiobuttons(options::AbstractDict; ...) for more details

radiobuttons(options::AbstractObservable; kwargs...)

Radio buttons whose options are a given Observable. Set the Observable to some other value to update the options in real time.

Examples

options = Observable(["a", "b", "c"])
wdg = radiobuttons(options)
options[] = ["c", "d", "e"]

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

checkboxes(options::AbstractDict;
         value = first(values(options)))

A list of checkboxes whose item labels are the keys of options. Tthe observable will hold an array containing the values of all selected items, e.g. checkboxes(OrderedDict("good"=>1, "better"=>2, "amazing"=>9001))

checkboxes(values::AbstractArray; kwargs...)

checkboxes with labels string.(values) see checkboxes(options::AbstractDict; ...) for more details

checkboxes(options::AbstractObservable; kwargs...)

Checkboxes whose options are a given Observable. Set the Observable to some other value to update the options in real time.

Examples

options = Observable(["a", "b", "c"])
wdg = checkboxes(options)
options[] = ["c", "d", "e"]

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

toggles(options::AbstractDict;
         value = first(values(options)))

A list of toggle switches whose item labels are the keys of options. Tthe observable will hold an array containing the values of all selected items, e.g. toggles(OrderedDict("good"=>1, "better"=>2, "amazing"=>9001))

toggles(values::AbstractArray; kwargs...)

toggles with labels string.(values) see toggles(options::AbstractDict; ...) for more details

toggles(options::AbstractObservable; kwargs...)

Toggles whose options are a given Observable. Set the Observable to some other value to update the options in real time.

Examples

options = Observable(["a", "b", "c"])
wdg = toggles(options)
options[] = ["c", "d", "e"]

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

togglebuttons(options::AbstractDict; value::Union{T, Observable}, multiple=false)

Creates a set of toggle buttons whose labels are the keys of options. Set multiple=true to allow multiple (or zero) active buttons at the same time.

togglebuttons(values::AbstractArray; kwargs...)

togglebuttons with labels string.(values) see togglebuttons(options::AbstractDict; ...) for more details

togglebuttons(options::AbstractObservable; kwargs...)

Togglebuttons whose options are a given Observable. Set the Observable to some other value to update the options in real time.

Examples

options = Observable(["a", "b", "c"])
wdg = togglebuttons(options)
options[] = ["c", "d", "e"]

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

tabs(options::AbstractDict; value::Union{T, Observable})

Creates a set of tabs whose labels are the keys of options. The label can be a link.

tabs(values::AbstractArray; kwargs...)

tabs with labels values see tabs(options::AbstractDict; ...) for more details

tabs(options::AbstractObservable; kwargs...)

Tabs whose options are a given Observable. Set the Observable to some other value to update the options in real time.

Examples

options = Observable(["a", "b", "c"])
wdg = tabs(options)
options[] = ["c", "d", "e"]

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

latex(txt)

Render txt in LaTeX using KaTeX. Backslashes need to be escaped: latex("\\sum_{i=1}^{\\infty} e^i")

alert(text="")

Creates a Widget{:alert}. To cause it to trigger an alert, do:

wdg = alert("Error!")
wdg()

Calling wdg with a string will set the alert message to that string before triggering the alert:

wdg = alert("Error!")
wdg("New error message!")

For the javascript to work, the widget needs to be part of the UI, even though it is not visible.

highlight(txt; language = "julia")

language syntax highlighting for txt.

notifications(v=[]; layout = node(:div))

Display elements of v inside notification boxes that can be closed with a close button. The elements are laid out according to layout. observe on this widget returns the observable of the list of elements that have not been deleted.

togglecontent(content, value::Union{Bool, Observable}=false; label)

A toggle switch that, when activated, displays content e.g. togglecontent(checkbox("Yes, I am sure"), false, label="Are you sure?")

tabulator(options::AbstractDict; index, key)

Creates a set of toggle buttons whose labels are the keys of options. Displays the value of the selected option underneath. Use index::Int to select which should be the index of the initial option, or key::String. The output is the selected index. Use index=0 to not have any selected option.

Examples

tabulator(OrderedDict("plot" => plot(rand(10)), "scatter" => scatter(rand(10))), index = 1)
tabulator(OrderedDict("plot" => plot(rand(10)), "scatter" => scatter(rand(10))), key = "plot")

tabulator(values::AbstractArray; kwargs...)

tabulator with labels values see tabulator(options::AbstractDict; ...) for more details

tabulator(options::Observable; navbar=tabs, kwargs...)

Tabulator whose options are a given Observable. Set the Observable to some other value to update the options in real time. Defaults to navbar=tabs: use navbar=togglebuttons to have buttons instead of tabs.

Examples

options = Observable(["a", "b", "c"])
wdg = tabulator(options)
options[] = ["c", "d", "e"]

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

mask(options; index, key)

Only display the index-th element of options. If options is a AbstractDict, it is possible to specify which option to show using key. options can be a Observable, in which case mask updates automatically. Use index=0 or key = nothing to not have any selected option.

Examples

wdg = mask(OrderedDict("plot" => plot(rand(10)), "scatter" => scatter(rand(10))), index = 1)
wdg = mask(OrderedDict("plot" => plot(rand(10)), "scatter" => scatter(rand(10))), key = "plot")

Note that the options can be modified from the widget directly:

wdg[:options][] = ["c", "d", "e"]

widget(args...; kwargs...)

Automatically convert Julia types into appropriate widgets. kwargs are passed to the more specific widget function.

Examples

map(display, [
    widget(1:10),                 # Slider
    widget(false),                # Checkbox
    widget("text"),               # Textbox
    widget(1.1),                  # Spinbox
    widget([:on, :off]),          # Toggle Buttons
    widget(Dict("π" => float(π), "τ" => 2π)),
    widget(colorant"red"),        # Color picker
    widget(Dates.today()),        # Date picker
    widget(Dates.Time()),         # Time picker
    ]);