Failed to display Jupyter Widget of type IntSlider.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "IntSlider(value=200, description='Slider Widget:', max=450, min=50)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import ipywidgets\n", "from IPython.display import display\n", "w1 = ipywidgets.IntSlider(border_radius=2, font_size=12, width=650,\n", " border_color='blue', slider_color='red', description='Slider Widget:',\n", " min=50, max=450, value=200)\n", "display(w1)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The widget value can be read and set:" ] }, { "cell_type": "code", "execution_count": 4, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Previous Value: 200\n", "Widget will be reset to central position\n" ] } ], "source": [ "print ('Previous Value: ', w1.value)\n", "print ('Widget will be reset to central position')\n", "w1.value = (w1.min+w1.max)/2" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "In addition to value, most widgets share keys, `description`, `disabled`, and `visible`. To see the entire list of synchronized, stateful properties of any specific widget, you can query the keys property." ] }, { "cell_type": "code", "execution_count": 5, "metadata": {}, "outputs": [ { "data": { "text/plain": [ "['_dom_classes',\n", " '_model_module',\n", " '_model_module_version',\n", " '_model_name',\n", " '_view_count',\n", " '_view_module',\n", " '_view_module_version',\n", " '_view_name',\n", " 'continuous_update',\n", " 'description',\n", " 'disabled',\n", " 'layout',\n", " 'max',\n", " 'min',\n", " 'orientation',\n", " 'readout',\n", " 'readout_format',\n", " 'step',\n", " 'style',\n", " 'value']" ] }, "execution_count": 5, "metadata": {}, "output_type": "execute_result" } ], "source": [ "w1.keys" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 1.2 Linking and Unlinking" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "**Also Check \"Events\"**\n", "\n", "To display the same value in two different ways, you can use the `traitlet` link function to link two properties together from the server side:" ] }, { "cell_type": "code", "execution_count": 6, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "18dc3be4798f41f086fca2a36836a1e2", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type IntSlider.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "IntSlider(value=0, description='Slider Widget:', max=450)" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "834edc340cc44e2fa45b8fc190df8b37", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type FloatText.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "FloatText(value=0.0)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "from traitlets import link\n", "w11 = ipywidgets.IntSlider(width=650, description='Slider Widget:', min=0, max=450)\n", "w12 = ipywidgets.FloatText()\n", "display(w11,w12)\n", "mylink1 = link((w11, 'value'), (w12, 'value'))" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "To Unlink just call the `.unlink()` method on the link object:" ] }, { "cell_type": "code", "execution_count": 7, "metadata": {}, "outputs": [], "source": [ "mylink1.unlink()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "When synchronizing traitlets attributes, you may experience a lag because of the latency due to the roundtrip to the server side. You can also directly link widget attributes in the browser using the link widgets, in either a unidirectional or a bidirectional fashion." ] }, { "cell_type": "code", "execution_count": 8, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "15a6e51399204c53b6b75f79a1317ac4", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type IntSlider.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "IntSlider(value=0, description='Slider Widget:', max=450)" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "8836a6281e2a490c99f03e8beb451981", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type FloatText.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "FloatText(value=0.0)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "w13 = ipywidgets.IntSlider(width=650, description='Slider Widget:', min=0, max=450)\n", "w14 = ipywidgets.FloatText()\n", "display(w13,w14)\n", "mylink2 = ipywidgets.jslink((w13, 'value'), (w14, 'value'))" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 2 Interact" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 2.1 Interact basics" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `interact` function (`ipywidgets.interact`) automatically creates user interface (UI) controls for exploring code and data interactively. It is the easiest way to get started using IPython's widgets.\n", "\n", "At the most basic level, interact autogenerates UI controls for function arguments, and then calls the function with those arguments when you manipulate the controls interactively. To use interact, you need to define a function that you want to explore. Here is a function that prints its only argument x." ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "collapsed": true }, "outputs": [], "source": [ "from ipywidgets import interact, interactive, fixed\n", "\n", "def my_function(x):\n", " return x" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "When you pass this function as the first argument to `interact` along with an integer keyword argument (x=10), a slider is generated and bound to the function parameter." ] }, { "cell_type": "code", "execution_count": 10, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "84ab8b870f464ea7baa9d30c3f126f83", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(IntSlider(value=10, description='x', max=30, min=-10), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "interact(my_function, x=10);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If you pass True or False, interact will generate a checkbox." ] }, { "cell_type": "code", "execution_count": 11, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "9585cb6f42f5442bbaa966c36c9d6635", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(Checkbox(value=True, description='x'), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "interact(my_function, x=True);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If you pass a string, interact will generate a text area." ] }, { "cell_type": "code", "execution_count": 12, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "2e7fb2546fcb4894a37a8fcc85589583", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(Text(value='Hello World', description='x'), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "interact(my_function, x='Hello World');" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "`interact` can also be used as a decorator. This allows you to define a function and interact with it in a single shot. As this example shows, `interact` also works with functions that have multiple arguments." ] }, { "cell_type": "code", "execution_count": 13, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "281234b7776a4bb7aa6253ad43d980d3", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(Checkbox(value=True, description='x'), FloatSlider(value=1.0, description='y', max=3.0, min=-1.0), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "@interact(x=True, y=1.0)\n", "def g(x, y):\n", " return (x, y)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "When you want to explore a function using interact, fixing one or more of its arguments to specific values. This can be accomplished by wrapping values with the fixed function." ] }, { "cell_type": "code", "execution_count": 14, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "2ce7aabb7c3c4ff59c9492e276d9fb1b", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(IntSlider(value=5, description='p', max=15, min=-5), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "def my_function2(p, q):\n", " return (p, q)\n", "\n", "interact(my_function2, p=5, q=fixed(20));" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "`interact` can be called with the synthax `varible_name=(min, max, step)`. Floats or Integers can be passed." ] }, { "cell_type": "code", "execution_count": 15, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "5547031cb25f46c29b832ffe149d75ac", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(FloatSlider(value=5.5, description='x', max=20.0, step=0.01), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "@interact(x=(0.0,20.0,0.01))\n", "def f(x=5.5):\n", " return x" ] }, { "cell_type": "code", "execution_count": 16, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "9738235731464a24973ec1597f3df9c8", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(IntSlider(value=5, description='x', max=10, min=5), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "@interact(x=(5,10,1))\n", "def f(x=5.5):\n", " return x" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "To create a dropdown menu, pass a Tuple:" ] }, { "cell_type": "code", "execution_count": 17, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "989d87925eaf453ba19b9f34eee11939", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(Dropdown(description='x', options=('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'), value='Monday'), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "text/plain": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(Dropdown(description='x', options=OrderedDict([('Monday', 1), ('Tuesday', 2), ('Wednesday', 3), ('Thursday', 4), ('Friday', 5), ('Saturday', 6), ('Sunday', 7)]), value=1), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "# Here we use an ordered dictionary to keep the right order in the days of the week\n", "from collections import OrderedDict\n", "d={'Monday':1, 'Tuesday':2, 'Wednesday':3, 'Thursday':4, 'Friday':5, 'Saturday':6, 'Sunday':7}\n", "ordered_d = OrderedDict(sorted(d.items(), key=lambda t: t[1]))\n", "interact(my_function, x=ordered_d);" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 2.2 Interactive" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "In addition to `interact`, IPython provides another function, `interactive`, that is useful when you want to reuse the widgets that are produced or access the data that is bound to the UI controls. Unlike `interact`, `interactive` returns a Widget instance rather than immediately displaying the widget." ] }, { "cell_type": "code", "execution_count": 19, "metadata": {}, "outputs": [], "source": [ "def f(a, b):\n", " return a+b\n", "w3 = interactive(f, a=(0.0,5.0,0.1), b=(10,100,5))" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `interactive` container in this case has two children:" ] }, { "cell_type": "code", "execution_count": 20, "metadata": {}, "outputs": [ { "data": { "text/plain": [ "ipywidgets.widgets.interaction.interactive" ] }, "execution_count": 20, "metadata": {}, "output_type": "execute_result" } ], "source": [ "type(w3)" ] }, { "cell_type": "code", "execution_count": 21, "metadata": {}, "outputs": [ { "data": { "text/plain": [ "(FloatSlider(value=2.5, description='a', max=5.0),\n", " IntSlider(value=55, description='b', min=10, step=5),\n", " Output())" ] }, "execution_count": 21, "metadata": {}, "output_type": "execute_result" } ], "source": [ "w3.children" ] }, { "cell_type": "code", "execution_count": 22, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "aae9c1340e074795b113a78dda44bc8e", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type interactive.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "interactive(children=(FloatSlider(value=2.5, description='a', max=5.0), IntSlider(value=55, description='b', min=10, step=5), Output()), _dom_classes=('widget-interact',))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "display(w3)" ] }, { "cell_type": "code", "execution_count": 23, "metadata": {}, "outputs": [ { "data": { "text/plain": [ "{'a': 2.5, 'b': 55}" ] }, "execution_count": 23, "metadata": {}, "output_type": "execute_result" } ], "source": [ "w3.kwargs" ] }, { "cell_type": "code", "execution_count": 24, "metadata": {}, "outputs": [ { "data": { "text/plain": [ "57.5" ] }, "execution_count": 24, "metadata": {}, "output_type": "execute_result" } ], "source": [ "w3.result" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 3 Widgets list" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 3.1 Numeric Widgets" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.1.1 Float Slider" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "By replacing `Float` with `Int` in the widget name, you can find the Integer equivalent." ] }, { "cell_type": "code", "execution_count": 25, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "db4a65a1f6df4de8ae46c2ceed6ae81c", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type FloatSlider.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "FloatSlider(value=7.5, description='Test:', max=10.0, min=5.0)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.FloatSlider(value=7.5, min=5.0, max=10.0, step=0.1, description='Test:')" ] }, { "cell_type": "code", "execution_count": 26, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "e1574034f1894d85ad769f703fd74d2c", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type FloatSlider.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "FloatSlider(value=7.5, description='Test:', max=10.0, min=5.0, orientation='vertical')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.FloatSlider(value=7.5, min=5.0, max=10.0, step=0.1, description='Test:',\n", " orientation='vertical')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.1.2 Float Progress" ] }, { "cell_type": "code", "execution_count": 27, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "9ac0dac7276f426a9090c5d45a5ebc53", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type FloatProgress.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "FloatProgress(value=9.5, description='Processing:', max=10.0, min=5.0)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.FloatProgress(value=9.5, min=5.0, max=10.0, step=0.1, description='Processing:')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.1.3 BoundedFloatText / FloatText" ] }, { "cell_type": "code", "execution_count": 28, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "05b5b3dfbd404696a99d8547d6ea5d21", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type BoundedFloatText.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "BoundedFloatText(value=7.5, description='Bounded:', max=10.0, min=5.0)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.BoundedFloatText(value=7.5, min=5.0, max=10.0, description='Bounded:')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 3.2 Boolean Widgets" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.2.1 Button" ] }, { "cell_type": "code", "execution_count": 29, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "2afb81d3721d470ba0114e6359318bcf", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Button.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Button(description='DO NOT CLICK HERE !', style=ButtonStyle(), tooltip='Ka-Boom')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.Button(description='DO NOT CLICK HERE !', tooltip='Ka-Boom', value=False,\n", " border_color='black', color='white', background_color='red',\n", " font_size=24, font_weight='bold')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.2.2 ToggleButton" ] }, { "cell_type": "code", "execution_count": 30, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "18cc2054d04340edb02c5110fefa63e5", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type ToggleButton.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "ToggleButton(value=False, description='Toggle me')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.ToggleButton(description='Toggle me', value=False, font_size=24)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.2.3 CheckBox" ] }, { "cell_type": "code", "execution_count": 31, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "1197138dd7a94ce9973c65d9c0d812bc", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Checkbox.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Checkbox(value=False, description='Check me')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.Checkbox(description='Check me', value=False)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.2.3 Valid" ] }, { "cell_type": "code", "execution_count": 32, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "cc8dc8849e9f44a796eeba58273e0ecc", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Valid.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Valid(value=True)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.Valid(value=True)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 3.3 Selection Widgets" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.3.1 Dropdown" ] }, { "cell_type": "code", "execution_count": 33, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "f538372504594581820686df166b906a", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Dropdown.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Dropdown(description='Select:', index=1, options=('A', 'B', 'C'), value='B')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "w4 = ipywidgets.Dropdown(options=['A', 'B', 'C'], value='B', description='Select:')\n", "display(w4)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.3.2 RadioButtons / Select / ToggleButtons" ] }, { "cell_type": "code", "execution_count": 34, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "a2397752244a45d7b6caab58c26def85", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type RadioButtons.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "RadioButtons(description='Distribute on:', options=('DC01 - Alaska', 'DC02 - Island', 'DC03 - China'), value='DC01 - Alaska')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.RadioButtons(description='Distribute on:',\n", " options=['DC01 - Alaska', 'DC02 - Island', 'DC03 - China'])\n" ] }, { "cell_type": "code", "execution_count": 35, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "202a4e93248e47a6802bc35b6603bb72", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Select.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Select(description='Distribute on:', options=('DC01 - Alaska', 'DC02 - Island', 'DC03 - China'), value='DC01 - Alaska')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.Select(description='Distribute on:',\n", " options=['DC01 - Alaska', 'DC02 - Island', 'DC03 - China'])" ] }, { "cell_type": "code", "execution_count": 36, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "56019ba242624e6aa123b35d4a3f8c65", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type ToggleButtons.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "ToggleButtons(description='Distribute on:', options=('DC01 - Alaska', 'DC02 - Island', 'DC03 - China'), value='DC01 - Alaska')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.ToggleButtons(description='Distribute on:',\n", " options=['DC01 - Alaska', 'DC02 - Island', 'DC03 - China'])" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.3.3 SelectMultiple" ] }, { "cell_type": "code", "execution_count": 37, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "3a5b882a7b914cbe8099746923fa7c98", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type SelectMultiple.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "SelectMultiple(description='Distribute on:', options=('DC01 - Alaska', 'DC02 - Island', 'DC03 - China'), value=())" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.SelectMultiple(description='Distribute on:',\n", " options=['DC01 - Alaska', 'DC02 - Island', 'DC03 - China'])" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 3.4 String Widgets" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.4.1 Text" ] }, { "cell_type": "code", "execution_count": 38, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "e5167665acfd4e12be7bf14e742e3630", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Text.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Text(value='Hello World', description='String:')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.Text(description='String:', value='Hello World')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "#### 3.4.2 Textarea" ] }, { "cell_type": "code", "execution_count": 39, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "6ad4e23e0589463294db668a2a72dde4", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Textarea.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Textarea(value='Hello World', description='String:')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ipywidgets.Textarea(description='String:', value='Hello World')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 4 Widget Styling" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 4.1 Basic Styling" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The widgets distributed with IPython can be styled by setting the following traits:\n", "\n", "* width\n", "* height\n", "* background_color\n", "* border_color\n", "* border_width\n", "* border_style\n", "* font_style\n", "* font_weight\n", "* font_size\n", "* font_family" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 4.2 Container" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "To display widget A inside widget B, widget A must be a child of widget B. Widgets that can contain other widgets have a children attribute. This attribute can be set via a keyword argument in the widget's constructor or after construction. Calling display on an object with children automatically displays the children." ] }, { "cell_type": "code", "execution_count": 40, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "b9e16d67ab5346abad469fde9ff73354", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Box.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Box(children=(FloatSlider(value=0.0), Text(value='hi')))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "float_range = ipywidgets.FloatSlider()\n", "string = ipywidgets.Text(value='hi')\n", "container = ipywidgets.Box(children=[float_range, string])\n", "\n", "container.border_color = 'red'\n", "container.border_style = 'dotted'\n", "container.border_width = 3\n", "container.height = 80\n", "container.width = 400\n", "display(container) # Displays the `container` and all of it's children." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 4.3 Accordion" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If you need to display a more complicated set of widgets, there are specialized containers that you can use. To display multiple sets of widgets, you can use an Accordion or a Tab in combination with one Box per set of widgets (as seen below). The \"pages\" of these widgets are their children. To set the titles of the pages, use set_title." ] }, { "cell_type": "code", "execution_count": 41, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "4dbf50a83d044355b8422223556b6ab7", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Accordion.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Accordion(children=(Box(children=(Text(value='', description='Location:'), BoundedIntText(value=0, description='Zip:', max=99999))), Box(children=(Text(value='', description='Location:'), BoundedIntText(value=0, description='Zip:', max=99999)))))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "name1 = ipywidgets.Text(description='Location:')\n", "zip1 = ipywidgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", "page1 = ipywidgets.Box(children=[name1, zip1])\n", "\n", "name2 = ipywidgets.Text(description='Location:')\n", "zip2 = ipywidgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", "page2 = ipywidgets.Box(children=[name2, zip2])\n", "\n", "accord = ipywidgets.Accordion(children=[page1, page2], width=400)\n", "display(accord)\n", "\n", "accord.set_title(0, 'From')\n", "accord.set_title(1, 'To')" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 4.4 TabWidget" ] }, { "cell_type": "code", "execution_count": 42, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "9ee025236d9b4a80acded2b1e6795ec3", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Tab.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Tab(children=(Box(children=(Text(value='', description='Name:'), Dropdown(description='Color:', options=('red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'), value='red'))), Box(children=(IntSlider(value=50, description='Age:', max=120), RadioButtons(description='Gender:', options=('male', 'female'), value='male')))))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "name = ipywidgets.Text(description='Name:', padding=4)\n", "color = ipywidgets.Dropdown(description='Color:', padding=4, options=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n", "page1 = ipywidgets.Box(children=[name, color], padding=4)\n", "\n", "age = ipywidgets.IntSlider(description='Age:', padding=4, min=0, max=120, value=50)\n", "gender = ipywidgets.RadioButtons(description='Gender:', padding=4, options=['male', 'female'])\n", "page2 = ipywidgets.Box(children=[age, gender], padding=4)\n", "\n", "tabs = ipywidgets.Tab(children=[page1, page2])\n", "display(tabs)\n", "\n", "tabs.set_title(0, 'Name')\n", "tabs.set_title(1, 'Details')\n", "tabs.background_color='DarkSlateGray'" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 4.5 Flex Boxes" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Widgets display vertically by default:" ] }, { "cell_type": "code", "execution_count": 43, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "7db3b64e97b64c469225c12d2202715c", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Button.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Button(description='One', style=ButtonStyle())" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "5aa4d0032123492d8d1e44ab7e820057", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Button.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Button(description='Two', style=ButtonStyle())" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "e97b6332fbf94a58974bd45c388523d7", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Button.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Button(description='Three', style=ButtonStyle())" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "64823c44d565424da7ca60221959dd36", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Button.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Button(description='Four', style=ButtonStyle())" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "b1 = ipywidgets.Button(description='One')\n", "b2 = ipywidgets.Button(description='Two')\n", "b3 = ipywidgets.Button(description='Three')\n", "b4 = ipywidgets.Button(description='Four')\n", "display(b1, b2, b3, b4)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "To make widgets display horizontally, they can be children of an HBox widget:" ] }, { "cell_type": "code", "execution_count": 44, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "059543b1aadf4396ab981548816f85ca", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type HBox.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "HBox(children=(Button(description='One', style=ButtonStyle()), Button(description='Two', style=ButtonStyle()), Button(description='Three', style=ButtonStyle()), Button(description='Four', style=ButtonStyle())))" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "ch = ipywidgets.HBox(children=[b1, b2, b3, b4])\n", "display(ch)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The visible property of widgets can be used to hide or show widgets that have already been displayed (as seen below). The visible property can be:\n", "\n", "* True - the widget is displayed\n", "* False - the widget is hidden, and the empty space where the widget would be is collapsed\n", "* None - the widget is hidden, and the empty space where the widget would be is shown" ] }, { "cell_type": "code", "execution_count": 45, "metadata": { "collapsed": true }, "outputs": [], "source": [ "b3.visible=None" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## 5 Events" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 5.1 `.on_click` and `.on_submit` events" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The `Button` is not used to represent a data type. Instead the button widget is used to handle mouse clicks. The `.on_click` method of the `Button` can be used to register function to be called when the button is clicked. The doc string of the `.on_click` can be seen below:" ] }, { "cell_type": "code", "execution_count": 46, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "Register a callback to execute when the button is clicked.\n", "\n", " The callback will be called with one argument, the clicked button\n", " widget instance.\n", "\n", " Parameters\n", " ----------\n", " remove: bool (optional)\n", " Set to true to remove the callback from the list of callbacks.\n", " \n" ] } ], "source": [ "print(ipywidgets.Button.on_click.__doc__)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Since button clicks are stateless, they are transmitted from the front-end to the back-end using custom messages." ] }, { "cell_type": "code", "execution_count": 47, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "ddb28d56827e437c9c0e63d86527218d", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Button.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Button(description='Click Me!', style=ButtonStyle())" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "b5 = ipywidgets.Button(description=\"Click Me!\")\n", "display(b5)\n", "\n", "def on_button_clicked(b):\n", " print('Button clicked !!')\n", "\n", "b5.on_click(on_button_clicked)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "The Text widget also has a special `.on_submit` event. The `.on_submit` event fires when the user hits return." ] }, { "cell_type": "code", "execution_count": 48, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "7d2f6bda95624b699c2b11c01387e3af", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type Text.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "Text(value='')" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "t1 = ipywidgets.Text()\n", "display(t1)\n", "\n", "def handle_submit(sender):\n", " print(str(t1.value).upper())\n", "\n", "t1.on_submit(handle_submit)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### 5.2 Traitlet events" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Widget properties are IPython traitlets and are eventful. To handle changes, the `.on_trait_change` method of the widget can be used to register a callback. The doc string for `.on_trait_change` can be seen below." ] }, { "cell_type": "code", "execution_count": 49, "metadata": {}, "outputs": [ { "name": "stdout", "output_type": "stream", "text": [ "DEPRECATED: Setup a handler to be called when a trait changes.\n", "\n", " This is used to setup dynamic notifications of trait changes.\n", "\n", " Static handlers can be created by creating methods on a HasTraits\n", " subclass with the naming convention '_[traitname]_changed'. Thus,\n", " to create static handler for the trait 'a', create the method\n", " _a_changed(self, name, old, new) (fewer arguments can be used, see\n", " below).\n", "\n", " If `remove` is True and `handler` is not specified, all change\n", " handlers for the specified name are uninstalled.\n", "\n", " Parameters\n", " ----------\n", " handler : callable, None\n", " A callable that is called when a trait changes. Its\n", " signature can be handler(), handler(name), handler(name, new),\n", " handler(name, old, new), or handler(name, old, new, self).\n", " name : list, str, None\n", " If None, the handler will apply to all traits. If a list\n", " of str, handler will apply to all names in the list. If a\n", " str, the handler will apply just to that name.\n", " remove : bool\n", " If False (the default), then install the handler. If True\n", " then unintall it.\n", " \n" ] } ], "source": [ "print(ipywidgets.Widget.on_trait_change.__doc__)" ] }, { "cell_type": "markdown", "metadata": { "collapsed": true }, "source": [ "The callback registered can have 4 possible signatures:\n", "\n", "* callback()\n", "* callback(trait_name)\n", "* callback(trait_name, new_value)\n", "* callback(trait_name, old_value, new_value)\n", "\n", "Example:" ] }, { "cell_type": "code", "execution_count": 50, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "bb739d3699434704ad8410c84a815a67", "version_major": 2, "version_minor": 0 }, "text/html": [ "Failed to display Jupyter Widget of type IntSlider.
\n", " If you're reading this message in the Jupyter Notebook or JupyterLab Notebook, it may mean\n", " that the widgets JavaScript is still loading. If this message persists, it\n", " likely means that the widgets JavaScript library is either not installed or\n", " not enabled. See the Jupyter\n", " Widgets Documentation for setup instructions.\n", "
\n", "\n", " If you're reading this message in another frontend (for example, a static\n", " rendering on GitHub or NBViewer),\n", " it may mean that your frontend doesn't currently support widgets.\n", "
\n" ], "text/plain": [ "IntSlider(value=0)" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "int_range = ipywidgets.IntSlider()\n", "display(int_range)\n", "\n", "def on_value_change(name, value):\n", " #print(value)\n", " print(value, ' -- ', end='')\n", "\n", "int_range.observe(on_value_change, 'value')" ] }, { "cell_type": "markdown", "metadata": { "collapsed": true }, "source": [ "---\n", "\n", "Visit [www.add-for.com](