{ "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 list = new ArrayList<>()\n", "list.add([\"19\"])\n", "list.add(\"53\")\n", "\n", "w = new IntRangeSlider()\n", "w.value = list\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.bools.Valid\n", "\n", "w = new Valid()\n", "w.description = 'Valid!'\n", "w.value = true\n", "w.disabled = false\n", "w" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.selectioncontainer.Accordion\n", "import com.twosigma.beakerx.widgets.bools.Valid\n", "import com.twosigma.beakerx.widgets.floats.BoundedFloatText\n", "import com.twosigma.beakerx.widgets.strings.Text\n", "\n", "t = new Text()\n", "t.value = \"Text example 1\"\n", "\n", "valid = new Valid()\n", "valid.description = 'Valid!'\n", "valid.value = true\n", "valid.disabled = false\n", "\n", "accordion = new Accordion([t , valid], ['t' , 'valid']);\n", "//accordion.set_title(0, 'Text')\n", "//accordion.set_title(1, 'Valid')\n", "accordion" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.strings.Label\n", "widget = new Label()\n", "widget.value = \"\\$\\$\\\\frac{n!}{k!(n-k)!} = \\\\binom{n}{k}\\$\\$\"\n", "widget\n" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.selections.SelectionSlider\n", "widget = new SelectionSlider()\n", "widget.options=['scrambled', 'sunny side up', 'poached', 'over easy']\n", "widget.value='sunny side up'\n", "widget.description='I like my eggs ...'\n", "widget.orientation='horizontal'\n", "//widget.orientation='vertical'\n", "widget" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.strings.HTMLMath\n", "widget = new HTMLMath()\n", "widget.value = \"\\$x^2\\$ and \\$\\$\\\\frac{x+1}{x-1}\\$\\$\"\n", "widget " ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "widget.value" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.selections.ToggleButtons\n", "widget = new ToggleButtons()\n", "widget.description='Speed:'\n", "widget.options=['Slow', 'Regular', 'Fast']\n", "widget.button_style = 'success'\n", "widget.tooltips=['SL', 'RE', 'Fast']\n", "widget.icons=['check', 'check', 'check']\n", "widget" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.integers.Play\n", "import com.twosigma.beakerx.widgets.integers.IntSlider\n", "import com.twosigma.beakerx.widgets.box.HBox\n", "import com.twosigma.beakerx.widgets.link.Link\n", "import com.twosigma.beakerx.widgets.link.DirectionalLink\n", "import static com.twosigma.beakerx.widgets.link.Link.jslink\n", "import static com.twosigma.beakerx.widgets.link.DirectionalLink.jsdlink\n", "\n", "slider = new IntSlider()\n", "play= new Play()\n", "play.value=50\n", "play.min=0\n", "play.max=100\n", "//link = new Link(play, \"value\", slider, \"value\")\n", "link = jslink(play, \"value\", slider, \"value\")\n", "//link = new DirectionalLink(play, \"value\", slider, \"value\")\n", "//link = jsdlink(play, \"value\", slider, \"value\")\n", "box = new HBox([play,slider])\n" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.integers.IntSlider\n", "invisibleSlider = new IntSlider()\n", "invisibleSlider.max = 200\n", "invisibleSlider.min = 10\n", "invisibleSlider.value = 112\n", "invisibleSlider.layout.visibility = \"hidden\"\n", "invisibleSlider" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If you are using slider widgets, you can set the continuous_update parameter to False. \n", "`continuous_update` is a parameter of slider widgets that restricts executions to mouse release events. \n", "To see diferrence try to move first slider and notice different of updating his value." ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.integers.IntSlider\n", "import com.twosigma.beakerx.widgets.box.HBox\n", "import com.twosigma.beakerx.widgets.box.VBox\n", "\n", "continuosEnabled = new IntSlider()\n", "test = new HBox([continuosEnabled, continuosEnabled])\n" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [ "import com.twosigma.beakerx.widgets.integers.IntSlider\n", "import com.twosigma.beakerx.widgets.box.HBox\n", "import com.twosigma.beakerx.widgets.box.VBox\n", "\n", "continuousDisabled = new IntSlider()\n", "continuousDisabled.continuous_update = false\n", "test = new HBox([continuousDisabled, continuousDisabled])\n" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "collapsed": true }, "outputs": [], "source": [] } ], "metadata": { "anaconda-cloud": {}, "beakerx_kernel_parameters": {}, "kernelspec": { "display_name": "Groovy", "language": "groovy", "name": "groovy" }, "language_info": { "codemirror_mode": "groovy", "file_extension": ".groovy", "mimetype": "", "name": "Groovy", "nbconverter_exporter": "", "version": "2.4.3" }, "widgets": { "state": { "f6132997-5d22-4fbe-b4f9-16d41cb4e58b": { "views": [ { "cell_index": 0 } ] } }, "version": "1.2.0" } }, "nbformat": 4, "nbformat_minor": 1 }