Widgets

Widgets

Text input

These are widgets to select text input that's typed in by the user. For numbers use spinbox and for strings use textbox. String entries (textbox and autocomplete) are initialized as "", whereas spinbox defaults to nothing, which corresponds to the empty entry.

InteractBase.spinbox — Function.

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.

source
InteractBase.textbox — Function.

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.

source
InteractBase.textarea — Function.

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

source
InteractBase.autocomplete — Function.

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

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

source

Type input

These are widgets to select a specific, non-text, type of input. So far, Date, Time, Color and Bool are supported. Types that allow a empty field (Date and Time) are initialized as nothing by default, whereas Color and Bool are initialized with the default HTML value (colorant"black" and false respectively).

InteractBase.datepicker — Function.

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

Create a widget to select dates.

source
InteractBase.timepicker — Function.

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

Create a widget to select times.

source
InteractBase.colorpicker — Function.

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

Create a widget to select colors.

source
InteractBase.checkbox — Function.

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

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

source
InteractBase.toggle — Function.

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

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

source

File input

InteractBase.filepicker — Function.

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"

source

Range input

InteractBase.slider — Function.
function slider(vals::Range; # Range
                value=medianelement(valse),
                label="", kwargs...)

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

source

Callback input

InteractBase.button — Function.

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

source

HTML5 input

All of the inputs above are implemented wrapping the input tag of HTML5 which can be accessed more directly as follows:

InteractBase.input — Function.

input(o; typ="text")

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

source

Option input

InteractBase.dropdown — Function.
dropdown(options::Associative;
         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::Associative; ...) for more details

source
dropdown(options::Observable;
         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"]
source
InteractBase.radiobuttons — Function.
radiobuttons(options::Associative;
             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::Associative; ...) for more details

radiobuttons(options::Observable; 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"]
source
InteractBase.checkboxes — Function.
checkboxes(options::Associative;
         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::Associative; ...) for more details

checkboxes(options::Observable; 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"]
source
InteractBase.toggles — Function.
toggles(options::Associative;
         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::Associative; ...) for more details

toggles(options::Observable; 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"]
source
InteractBase.togglebuttons — Function.

togglebuttons(options::Associative; value::Union{T, Observable})

Creates a set of toggle buttons whose labels are the keys of options.

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

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

togglebuttons(options::Observable; 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"]
source
InteractBase.tabs — Function.

tabs(options::Associative; 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::Associative; ...) for more details

tabs(options::Observable; 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"]
source
InteractBase.tabulator — Function.

tabulator(options::Associative; index = 1, key = nothing)

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(rand10), "scatter" => scatter(rand(10))), index = 1)
tabulator(OrderedDict("plot" => plot(rand10), "scatter" => scatter(rand(10))), key = "plot")

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

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

tabulator(options::Observable; kwargs...)

Tabulator 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 = tabulator(options)
options[] = ["c", "d", "e"]

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

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

Output

InteractBase.latex — Function.

latex(txt)

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

source
InteractBase.alert — Function.

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.

source
InteractBase.highlight — Function.

highlight(txt; language = "julia")

language syntax highlighting for txt.

source
InteractBase.notifications — Function.

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 bein deleted.

source
InteractBase.togglecontent — Function.

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?")

source

Create widgets automatically from a Julia variable

Widgets.widget — Function.

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
    ]);
source