Widgets Overview

The following is a run through of the widgets you can create with Interact. All widgets allow for the following keyword arguments:

  • label: Label to be shown next to the widget
  • value: The value the widget should be set to when created. If it is an Observable, the widget will update when this Observable is changed

Many of the widgets have keyword arguments specific to them. See below for more.


In [ ]:
using Interact

Slider

Sliders are arguably the most useful of the widgets. A slider can be created with the slider{T <: Number}(range::Range{T}) function. The value of the slider defaults to the median of the range, and can be set using the value::T keyword argument. The type of signal a slider depends on the type of the range. E.g. A floating point range like 0:π/4:2π gives a signal of floating point values, while a range like 1:10 gives a signal of integers.


In [ ]:
float_slider = slider(0:π/4:2π)

In [ ]:
int_slider = slider(1:10)

In [ ]:
observe(int_slider)

Checkbox

checkbox takes an optional first argument which defaults to false and creates a checkbox.


In [ ]:
display(checkbox())
checkbox(true)

Toggle

You can create a toggle switch with toggle which takes as an optional argument its label.


In [ ]:
status = toggle("Mary called", value=true)

In [ ]:
map(s -> s ? "Mary called" : "Mary didn't call", observe(status))

Button

A button gives out as Observable its number of clicks. You can set the starting point using the value keyword argument. The observable updates when the button is clicked.


In [ ]:
b = button("Click Me")

Here is how you can count the number of clicks made on a button:


In [ ]:
observe(b)

Option widgets

There are 3 options widgets: dropdown, togglebuttons, radiobuttons. There are two types allowed as an argument while invoking these:

  1. AbstractArray (e.g. Vector, Tuple)
  2. Associative (e.g. Dict, OrderedDict) The default value is the first element (or undefined in case of an undordered Associative like Dict), but this can be set using the value keyword argument.

In [ ]:
a = dropdown(["one", "two", "three"])

In [ ]:
observe(a)

In [ ]:
f = radiobuttons(Dict("Add" => "+", "Sub" => "-", "Exp" => "^"))

In [ ]:
map(g -> "e $g π*im", observe(f))

Notice that the order "Add", "Sub", "Exp" was not retained in the above example, because a Dict does not save the ordering. To overcome this, we can use OrderedDict:


In [ ]:
f_ = togglebuttons(OrderedDict("Add" => +, "Sub" => -, "Exp" => ^))

In [ ]:
map(g -> g(, π*im), observe(f_))

Textbox

A textbox can be of a Number or AbstractString type. textbox takes one argument: its default value.


In [ ]:
string_box = textbox("Change me")

In [ ]:
observe(string_box)

Spinbox

Use spinbox for number input:


In [ ]:
int_box = spinbox(value=0)

In [ ]:
observe(int_box)

If creating a number typed textbox, you can also pass along an optional range field to set a bound on the possible values one can input.


In [ ]:
bounded_float_box = spinbox(-10.0:10)

In [ ]:
observe(bounded_float_box)

Textarea

textarea takes an optional default value and creates a textarea. Its Observable changes when you type.


In [ ]:
tex = textarea(value="\\sum_{i=1}^{\\infty} e_i")

In [ ]:
map(latex, observe(tex))

The widget Function

widget tries to coerce a value into a widget.


In [ ]:
map(display, [
    widget(1:10),                 # Slider
    widget(false),                # Checkbox
    widget("text"),               # Textbox
    widget(1.1),                  # Number Textbox
    widget([:on, :off]),          # Toggle Buttons
    widget(Dict("π" => float(π), "τ" => 2π))
    ]);

In [ ]: