Jupyter JS Widgets

BeakerX has a Groovy API for many of the standard collection of widgets. They are fully bidirectionally synchronized with the UI on the front-end. The work on their own, with interactive recomputation, and with EasyForm.

In [ ]:
import com.twosigma.beakerx.widgets.integers.IntSlider

w = new IntSlider()
w.value = 60
w
In [ ]:
w.value
In [ ]:
w.value = 76
In [ ]:
w.description = "description"
In [ ]:
w.disabled = false
In [ ]:
w.max = 200
w.min = 50
In [ ]:
w.orientation = "vertical"
In [ ]:
w.style.handle_color = "#F04080"
In [ ]:
w.step = 20
In [ ]:
w.layout.visibility = false
In [ ]:
import com.twosigma.beakerx.widgets.integers.IntProgress
bar = new IntProgress()
bar.value = 10
bar
In [ ]:
bar.value
In [ ]:
bar.value = 110
In [ ]:
bar.max = 300
bar.min = 50
In [ ]:
bar.step = 20
In [ ]:
bar.orientation = 'horizontal'
In [ ]:
import com.twosigma.beakerx.widgets.selections.RadioButtons
rb = new RadioButtons()
rb.options=['alpha', 'beta', 'delta', 'gamma']
rb.value = 'beta'
rb
In [ ]:
rb.value
In [ ]:
rb.value = 'delta'
In [ ]:
import com.twosigma.beakerx.widgets.selections.Select
select = new Select()
select.options=['Linux', 'Windows', 'OSX']
select.value = 'Windows'
select
In [ ]:
select.value
In [ ]:
select.value = 'Linux'
In [ ]:
import com.twosigma.beakerx.widgets.bools.Checkbox
cb = new Checkbox()
cb
In [ ]:
cb.value
In [ ]:
cb.value = true
In [ ]:
import com.twosigma.beakerx.widgets.ColorPicker
cp = new ColorPicker()
cp.value = "blue"
cp
In [ ]:
cp.value
In [ ]:
cp.value = 'red'
In [ ]:
cp.concise = false
//cp.concise = true
In [ ]:
import com.twosigma.beakerx.widgets.strings.Text
t = new Text()
t.value = "Text example 1"
t
In [ ]:
t.value
In [ ]:
t.value ="Text example 2"
In [ ]:
import com.twosigma.beakerx.widgets.strings.Textarea
ta = new Textarea()
ta.value = "Textarea example 1"
ta
In [ ]:
ta.value
In [ ]:
ta.value ="Textarea example 2"
In [ ]:
import com.twosigma.beakerx.widgets.bools.ToggleButton
tb = new ToggleButton()
tb.tooltip = "ToggleButton tooltip 1"
tb.icon = 'check'
tb.description = 'Click me'
tb
In [ ]:
tb.value
In [ ]:
tb.value = true
//tb.value = false
In [ ]:
tb.tooltip = "ToggleButton tooltip 2"
In [ ]:
import com.twosigma.beakerx.widgets.floats.FloatSlider
fs = new FloatSlider()
fs.value = 10.1
fs
In [ ]:
fs.value
In [ ]:
fs.value = 22.2
In [ ]:
import com.twosigma.beakerx.widgets.floats.FloatSlider
fs = new FloatSlider()
fs.max = 200
fs. min = 10
fs.value = 36.6
fs.style.handle_color = "orange"
fs
In [ ]:
import com.twosigma.beakerx.widgets.floats.FloatProgress
floatProgress = new FloatProgress()
floatProgress.value = 10.2
floatProgress
In [ ]:
floatProgress.value
In [ ]:
floatProgress.value = 33.3
In [ ]:
import com.twosigma.beakerx.widgets.strings.Label
label = new Label()
label.value = "Label 1"
label
In [ ]:
label.value
In [ ]:
label.value = "Label 2"
In [ ]:
import com.twosigma.beakerx.widgets.strings.HTML
label = new HTML()
label.value = "Hello <b>World</b>"
label
In [ ]:
label.value = "<b>Hello World</b>"
In [ ]:
import com.twosigma.beakerx.widgets.Image
import java.nio.file.Files

byte[] picture = Files.readAllBytes(new File("../resources/img/widgetArch.png").toPath());

image = new Image()
image.format='png'
image.value= picture
image.width=300
image.height=400
image
In [ ]:
import com.twosigma.beakerx.widgets.DatePicker
datePicker = new DatePicker()
datePicker
In [ ]:
datePicker.value
In [ ]:
import com.twosigma.beakerx.widgets.integers.IntRangeSlider
w = new IntRangeSlider()
w.value = [10,40]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
In [ ]:
import com.twosigma.beakerx.widgets.integers.BoundedIntText
w = new BoundedIntText()
w.min = 0
w.max = 10
w
In [ ]:
import com.twosigma.beakerx.widgets.integers.IntText
w = new IntText()
w
In [ ]:
import com.twosigma.beakerx.widgets.integers.IntText
w = new IntText()
w
In [ ]:
import com.twosigma.beakerx.widgets.integers.Play
w = new Play()
w
In [ ]:
import com.twosigma.beakerx.widgets.floats.FloatRangeSlider
w = new FloatRangeSlider()
w.value = [10,40]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
In [ ]:
import com.twosigma.beakerx.widgets.floats.BoundedFloatText
w = new BoundedFloatText()
w.min = 0 
w.max = 10
w
In [ ]:
import com.twosigma.beakerx.widgets.floats.FloatText
w = new FloatText()
w
In [ ]:
//Example with passing different type to value

import com.twosigma.beakerx.widgets.integers.IntRangeSlider
w = new IntRangeSlider()
w.value = ["10",[49.6]]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
In [ ]:
//Example with passing different type to value

import com.twosigma.beakerx.widgets.integers.IntRangeSlider
import java.util.Collection

Collection<Object> list = new ArrayList<>()
list.add(["19"])
list.add("53")

w = new IntRangeSlider()
w.value = list
w.orientation = "horizontal"
//w.orientation = "vertical"
w
In [ ]:
import com.twosigma.beakerx.widgets.bools.Valid

w = new Valid()
w.description = 'Valid!'
w.value = true
w.disabled = false
w
In [ ]:
import com.twosigma.beakerx.widgets.selectioncontainer.Accordion
import com.twosigma.beakerx.widgets.bools.Valid
import com.twosigma.beakerx.widgets.floats.BoundedFloatText
import com.twosigma.beakerx.widgets.strings.Text

t = new Text()
t.value = "Text example 1"

valid = new Valid()
valid.description = 'Valid!'
valid.value = true
valid.disabled = false

accordion = new Accordion([t , valid], ['t' , 'valid']);
//accordion.set_title(0, 'Text')
//accordion.set_title(1, 'Valid')
accordion
In [ ]:
import com.twosigma.beakerx.widgets.strings.Label
widget = new Label()
widget.value = "\$\$\\frac{n!}{k!(n-k)!} = \\binom{n}{k}\$\$"
widget
In [ ]:
import com.twosigma.beakerx.widgets.selections.SelectionSlider
widget = new SelectionSlider()
widget.options=['scrambled', 'sunny side up', 'poached', 'over easy']
widget.value='sunny side up'
widget.description='I like my eggs ...'
widget.orientation='horizontal'
//widget.orientation='vertical'
widget
In [ ]:
import com.twosigma.beakerx.widgets.strings.HTMLMath
widget = new HTMLMath()
widget.value = "\$x^2\$ and \$\$\\frac{x+1}{x-1}\$\$"
widget
In [ ]:
widget.value
In [ ]:
import com.twosigma.beakerx.widgets.selections.ToggleButtons
widget = new ToggleButtons()
widget.description='Speed:'
widget.options=['Slow', 'Regular', 'Fast']
widget.button_style = 'success'
widget.tooltips=['SL', 'RE', 'Fast']
widget.icons=['check', 'check', 'check']
widget
In [ ]:
import com.twosigma.beakerx.widgets.integers.Play
import com.twosigma.beakerx.widgets.integers.IntSlider
import com.twosigma.beakerx.widgets.box.HBox
import com.twosigma.beakerx.widgets.link.Link
import com.twosigma.beakerx.widgets.link.DirectionalLink
import static com.twosigma.beakerx.widgets.link.Link.jslink
import static com.twosigma.beakerx.widgets.link.DirectionalLink.jsdlink

slider = new IntSlider()
play= new Play()
play.value=50
play.min=0
play.max=100
//link = new Link(play, "value", slider, "value")
link = jslink(play, "value", slider, "value")
//link = new DirectionalLink(play, "value", slider, "value")
//link = jsdlink(play, "value", slider, "value")
box = new HBox([play,slider])
In [ ]:
import com.twosigma.beakerx.widgets.integers.IntSlider
invisibleSlider = new IntSlider()
invisibleSlider.max = 200
invisibleSlider.min = 10
invisibleSlider.value = 112
invisibleSlider.layout.visibility = "hidden"
invisibleSlider

If you are using slider widgets, you can set the continuous_update parameter to False.
continuous_update is a parameter of slider widgets that restricts executions to mouse release events.
To see diferrence try to move first slider and notice different of updating his value.

In [ ]:
import com.twosigma.beakerx.widgets.integers.IntSlider
import com.twosigma.beakerx.widgets.box.HBox
import com.twosigma.beakerx.widgets.box.VBox

continuosEnabled = new IntSlider()
test = new HBox([continuosEnabled, continuosEnabled])
In [ ]:
import com.twosigma.beakerx.widgets.integers.IntSlider
import com.twosigma.beakerx.widgets.box.HBox
import com.twosigma.beakerx.widgets.box.VBox

continuousDisabled = new IntSlider()
continuousDisabled.continuous_update = false
test = new HBox([continuousDisabled, continuousDisabled])
In [ ]: