{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Jupyter JS Widgets\n",
"\n",
"BeakerX has a Groovy API for many of the [standard collection of widgets](https://ipywidgets.readthedocs.io/en/stable/). They are fully bidirectionally synchronized with the UI on the front-end. The work on their own, with [interactive recomputation](interactive.ipynb), and with [EasyForm](EasyFormDemos.ipynb)."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.integers.IntSlider\n",
"\n",
"w = new IntSlider()\n",
"w.value = 60\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.value = 76"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.description = \"description\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.disabled = false"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.max = 200\n",
"w.min = 50"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.orientation = \"vertical\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.style.handle_color = \"#F04080\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.step = 20"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"w.layout.visibility = false"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.integers.IntProgress\n",
"bar = new IntProgress()\n",
"bar.value = 10\n",
"bar"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"bar.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"bar.value = 110"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"bar.max = 300\n",
"bar.min = 50"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"bar.step = 20"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"bar.orientation = 'horizontal'"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.selections.RadioButtons\n",
"rb = new RadioButtons()\n",
"rb.options=['alpha', 'beta', 'delta', 'gamma']\n",
"rb.value = 'beta'\n",
"rb"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"rb.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"rb.value = 'delta'"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.selections.Select\n",
"select = new Select()\n",
"select.options=['Linux', 'Windows', 'OSX']\n",
"select.value = 'Windows'\n",
"select"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"select.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"select.value = 'Linux'"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.bools.Checkbox\n",
"cb = new Checkbox()\n",
"cb"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"cb.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"cb.value = true"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.ColorPicker\n",
"cp = new ColorPicker()\n",
"cp.value = \"blue\"\n",
"cp"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"cp.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"cp.value = 'red'"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"cp.concise = false\n",
"//cp.concise = true"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.strings.Text\n",
"t = new Text()\n",
"t.value = \"Text example 1\"\n",
"t"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"t.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"t.value =\"Text example 2\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.strings.Textarea\n",
"ta = new Textarea()\n",
"ta.value = \"Textarea example 1\"\n",
"ta"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"ta.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"ta.value =\"Textarea example 2\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.bools.ToggleButton\n",
"tb = new ToggleButton()\n",
"tb.tooltip = \"ToggleButton tooltip 1\"\n",
"tb.icon = 'check'\n",
"tb.description = 'Click me'\n",
"tb"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"tb.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"tb.value = true\n",
"//tb.value = false"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"tb.tooltip = \"ToggleButton tooltip 2\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.floats.FloatSlider\n",
"fs = new FloatSlider()\n",
"fs.value = 10.1\n",
"fs"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"fs.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"fs.value = 22.2"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.floats.FloatSlider\n",
"fs = new FloatSlider()\n",
"fs.max = 200\n",
"fs. min = 10\n",
"fs.value = 36.6\n",
"fs.style.handle_color = \"orange\"\n",
"fs"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.floats.FloatProgress\n",
"floatProgress = new FloatProgress()\n",
"floatProgress.value = 10.2\n",
"floatProgress"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"floatProgress.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"floatProgress.value = 33.3"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.strings.Label\n",
"label = new Label()\n",
"label.value = \"Label 1\"\n",
"label"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"label.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"label.value = \"Label 2\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.strings.HTML\n",
"label = new HTML()\n",
"label.value = \"Hello World\"\n",
"label"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"label.value = \"Hello World\""
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.Image\n",
"import java.nio.file.Files\n",
"\n",
"byte[] picture = Files.readAllBytes(new File(\"../resources/img/widgetArch.png\").toPath());\n",
"\n",
"image = new Image()\n",
"image.format='png'\n",
"image.value= picture\n",
"image.width=300\n",
"image.height=400\n",
"image"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.DatePicker\n",
"datePicker = new DatePicker()\n",
"datePicker"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"datePicker.value"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.integers.IntRangeSlider\n",
"w = new IntRangeSlider()\n",
"w.value = [10,40]\n",
"w.orientation = \"horizontal\"\n",
"//w.orientation = \"vertical\"\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.integers.BoundedIntText\n",
"w = new BoundedIntText()\n",
"w.min = 0\n",
"w.max = 10\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.integers.IntText\n",
"w = new IntText()\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.integers.IntText\n",
"w = new IntText()\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.integers.Play\n",
"w = new Play()\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.floats.FloatRangeSlider\n",
"w = new FloatRangeSlider()\n",
"w.value = [10,40]\n",
"w.orientation = \"horizontal\"\n",
"//w.orientation = \"vertical\"\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.floats.BoundedFloatText\n",
"w = new BoundedFloatText()\n",
"w.min = 0 \n",
"w.max = 10\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"import com.twosigma.beakerx.widgets.floats.FloatText\n",
"w = new FloatText()\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"//Example with passing different type to value\n",
"\n",
"import com.twosigma.beakerx.widgets.integers.IntRangeSlider\n",
"w = new IntRangeSlider()\n",
"w.value = [\"10\",[49.6]]\n",
"w.orientation = \"horizontal\"\n",
"//w.orientation = \"vertical\"\n",
"w"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"//Example with passing different type to value\n",
"\n",
"import com.twosigma.beakerx.widgets.integers.IntRangeSlider\n",
"import java.util.Collection\n",
"\n",
"Collection