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 [1]:
import com.twosigma.beakerx.widget.IntSlider

w = new IntSlider()
w.value = 60
w
In [2]:
w.value
Out[2]:
60
In [3]:
w.value = 76
Out[3]:
76
In [4]:
w.description = "description"
Out[4]:
description
In [5]:
w.disabled = false
Out[5]:
false
In [6]:
w.max = 200
w.min = 50
Out[6]:
50
In [7]:
w.orientation = "vertical"
Out[7]:
vertical
In [8]:
w.style.handle_color = "#F04080"
Out[8]:
#F04080
In [9]:
w.step = 20
Out[9]:
20
In [10]:
w.layout.visibility = false
Out[10]:
false
In [11]:
import com.twosigma.beakerx.widget.IntProgress
bar = new IntProgress()
bar.value = 10
bar
In [12]:
bar.value
Out[12]:
10
In [13]:
bar.value = 110
Out[13]:
110
In [14]:
bar.max = 300
bar.min = 50
Out[14]:
50
In [15]:
bar.step = 20
Out[15]:
20
In [16]:
bar.orientation = 'horizontal'
Out[16]:
horizontal
In [17]:
import com.twosigma.beakerx.widget.RadioButtons
rb = new RadioButtons()
rb.options=['alpha', 'beta', 'delta', 'gamma']
rb.value = 'beta'
rb
In [18]:
rb.value
Out[18]:
beta
In [19]:
rb.value = 'delta'
Out[19]:
delta
In [20]:
import com.twosigma.beakerx.widget.Select
select = new Select()
select.options=['Linux', 'Windows', 'OSX']
select.value = 'Windows'
select
In [21]:
select.value
Out[21]:
Windows
In [22]:
select.value = 'Linux'
Out[22]:
Linux
In [23]:
import com.twosigma.beakerx.widget.Checkbox
cb = new Checkbox()
cb
In [24]:
cb.value
Out[24]:
false
In [25]:
cb.value = true
Out[25]:
true
In [26]:
import com.twosigma.beakerx.widget.ColorPicker
cp = new ColorPicker()
cp.value = "blue"
cp
In [27]:
cp.value
Out[27]:
blue
In [28]:
cp.value = 'red'
Out[28]:
red
In [29]:
cp.concise = false
//cp.concise = true
Out[29]:
false
In [30]:
import com.twosigma.beakerx.widget.Text
t = new Text()
t.value = "Text example 1"
t
In [31]:
t.value
Out[31]:
Text example 1
In [32]:
t.value ="Text example 2"
Out[32]:
Text example 2
In [33]:
import com.twosigma.beakerx.widget.Textarea
ta = new Textarea()
ta.value = "Textarea example 1"
ta
In [34]:
ta.value
Out[34]:
Textarea example 1
In [35]:
ta.value ="Textarea example 2"
Out[35]:
Textarea example 2
In [36]:
import com.twosigma.beakerx.widget.ToggleButton
tb = new ToggleButton()
tb.tooltip = "ToggleButton tooltip 1"
tb.icon = 'check'
tb.description = 'Click me'
tb
In [37]:
tb.value
Out[37]:
false
In [38]:
tb.value = true
//tb.value = false
Out[38]:
true
In [39]:
tb.tooltip = "ToggleButton tooltip 2"
Out[39]:
ToggleButton tooltip 2
In [40]:
import com.twosigma.beakerx.widget.FloatSlider
fs = new FloatSlider()
fs.value = 10.1
fs
In [41]:
fs.value
Out[41]:
10.1
In [42]:
fs.value = 22.2
Out[42]:
22.2
In [43]:
import com.twosigma.beakerx.widget.FloatSlider
fs = new FloatSlider()
fs.max = 200
fs. min = 10
fs.value = 36.6
fs.style.handle_color = "orange"
fs
In [44]:
import com.twosigma.beakerx.widget.FloatProgress
floatProgress = new FloatProgress()
floatProgress.value = 10.2
floatProgress
In [45]:
floatProgress.value
Out[45]:
10.2
In [46]:
floatProgress.value = 33.3
Out[46]:
33.3
In [47]:
import com.twosigma.beakerx.widget.Label
label = new Label()
label.value = "Label 1"
label
In [48]:
label.value
Out[48]:
Label 1
In [49]:
label.value = "Label 2"
Out[49]:
Label 2
In [50]:
import com.twosigma.beakerx.widget.HTML
label = new HTML()
label.value = "Hello <b>World</b>"
label
In [51]:
label.value = "<b>Hello World</b>"
Out[51]:
<b>Hello World</b>
In [52]:
import com.twosigma.beakerx.widget.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 [53]:
import com.twosigma.beakerx.widget.DatePicker
datePicker = new DatePicker()
datePicker
In [54]:
datePicker.value
Out[54]:
null
In [55]:
import com.twosigma.beakerx.widget.IntRangeSlider
w = new IntRangeSlider()
w.value = [10,40]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
In [56]:
import com.twosigma.beakerx.widget.BoundedIntText
w = new BoundedIntText()
w.min = 0
w.max = 10
w
In [57]:
import com.twosigma.beakerx.widget.IntText
w = new IntText()
w
In [58]:
import com.twosigma.beakerx.widget.IntText
w = new IntText()
w
In [59]:
import com.twosigma.beakerx.widget.Play
w = new Play()
w
In [60]:
import com.twosigma.beakerx.widget.FloatRangeSlider
w = new FloatRangeSlider()
w.value = [10,40]
w.orientation = "horizontal"
//w.orientation = "vertical"
w
In [61]:
import com.twosigma.beakerx.widget.BoundedFloatText
w = new BoundedFloatText()
w.min = 0 
w.max = 10
w
In [62]:
import com.twosigma.beakerx.widget.FloatText
w = new FloatText()
w
In [63]:
//Example with passing different type to value

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

import com.twosigma.beakerx.widget.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 [65]:
import com.twosigma.beakerx.widget.Valid

w = new Valid()
w.description = 'Valid!'
w.value = true
w.disabled = false
w
In [66]:
import com.twosigma.beakerx.widget.Accordion
import com.twosigma.beakerx.widget.Valid
import com.twosigma.beakerx.widget.BoundedFloatText
import com.twosigma.beakerx.widget.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 [67]:
import com.twosigma.beakerx.widget.Label
widget = new Label()
widget.value = "\$\$\\frac{n!}{k!(n-k)!} = \\binom{n}{k}\$\$"
widget
In [68]:
import com.twosigma.beakerx.widgetlider
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 [69]:
import com.twosigma.beakerx.widget.HTMLMath
widget = new HTMLMath()
widget.value = "\$x^2\$ and \$\$\\frac{x+1}{x-1}\$\$"
widget
In [70]:
widget.value
Out[70]:
$x^2$ and $$\frac{x+1}{x-1}$$
In [71]:
import com.twosigma.beakerx.widget.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 [72]:
import com.twosigma.beakerx.widget.Play
import com.twosigma.beakerx.widget.IntSlider
import com.twosigma.beakerx.widget.HBox
import com.twosigma.beakerx.widget
import com.twosigma.beakerx.widget.DirectionalLink
import static com.twosigma.beakerx.widget.jslink
import static com.twosigma.beakerx.widget.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 [73]:
import com.twosigma.beakerx.widget.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 [74]:
import com.twosigma.beakerx.widget.IntSlider
import com.twosigma.beakerx.widget.HBox
import com.twosigma.beakerx.widget.VBox

continuosEnabled = new IntSlider()
test = new HBox([continuosEnabled, continuosEnabled])
In [75]:
import com.twosigma.beakerx.widget.IntSlider
import com.twosigma.beakerx.widget.HBox
import com.twosigma.beakerx.widget.VBox

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