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.widget.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 [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.Link
import com.twosigma.beakerx.widget.DirectionalLink
import static com.twosigma.beakerx.widget.Link.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 [ ]: