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"

48.6s

using WebSockets, WebIO, Interact, Observables, CSSUtil, ImageShow, Colors

0.0s

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

0.0s

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)

0.5s

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[]

0.0s

The value of s can be used to  compute some derived value using map:

map(log, s)

0.5s

As well as to trigger an event. For example, in the case of a button:

b = button()

0.5s

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)

1.2s

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

Shift+Enter to run

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

Shift+Enter to run

s[]

Shift+Enter to run