Interact Tutorial

This is a version of the Interact tutorial that can be run online. More information about Interact is available at the docs.
pkg"add WebIO#sd-221 ImageShow Interact CSSUtil Colors Observables WebSockets"
using WebSockets, WebIO, Interact, Observables, CSSUtil, ImageShow, Colors
Server.findmime(x::WebIO.Application) = MIME"application/vnd.webio.application+html"() function Base.display(disp::Server.NextDisplay, m::MIME"application/vnd.webio.application+html", value) open(disp.path, "w") do io Base.invokelatest(show, io, m, value) end Server.display_write(disp, Dict( "content-type" => "text/html", :kind => "iframe", )) end
Interact is a Julia package to create web based widgets to play with your Julia code. Widgets in general represent a value (for example the numerical value of a slider or the string value of a text box) that updates when the user interacts with the widget and can be used to trigger events.
s = slider(1:100)
A slider represents a numerical value, in this case an integer from 1
to 100
. Its value can be inspected using the getindex
interface (with square brackets):
s[]
The value of s
can be used to compute some derived value using map:
map(log, s)
As well as to trigger an event. For example, in the case of a button:
b = button()
The value of the button (which corresponds to the number of times it has been pressed) is often irrelevant, but we can use it in combination to `on` to trigger an event:
on(n -> println("I have been pressed"), b)
Many widgets are available for different types of inputs:
filepicker() |> display # value is the path of selected file textbox("Write here") |> display # value is the text typed in by the user autocomplete(["Mary", "Jane", "Jack"]) |> display # as above, but you can autocomplete words checkbox(label = "Check me!") |> display # value is a boolean describing whether it's ticked toggle(label = "I have read and agreed") |> display # same as a checkbox but styled differently slider(1:100, label = "To what extent?", value = 33) |> display # value is the number selected
As well as some option widgets
dropdown(["a", "b", "c"]) |> display # value is option selected togglebuttons(["a", "b", "c"]) |> display # value is option selected radiobuttons(["a", "b", "c"]) |> display # value is option selected
The option widgets can also take as input a dictionary (ordered dictionary is preferrable, to avoid items getting scrambled), in which case the label displays the key while the output stores the value:
s = dropdown(OrderedDict("a" => "Value 1", "b" => "Value 2"))
s[]