diff --git a/.travis.yml b/.travis.yml index 1064f378ac..53493bc48f 100644 --- a/.travis.yml +++ b/.travis.yml @@ -19,7 +19,7 @@ before_install: install: - pip install -f travis-wheels/wheelhouse -r requirements.txt -e file://$PWD#egg=jupyter_notebook[test] coveralls script: - - 'if [[ $GROUP == js* ]]; then python -m jupyter_notebook.jstest $GROUP; fi' + - 'if [[ $GROUP == js* ]]; then python -m jupyter_notebook.jstest ${GROUP:3}; fi' - 'if [[ $GROUP == python ]]; then nosetests --with-coverage --cover-package=jupyter_notebook jupyter_notebook; fi' matrix: include: diff --git a/examples/Interactive Widgets/Beat Frequencies.ipynb b/examples/Interactive Widgets/Beat Frequencies.ipynb deleted file mode 100644 index 4e3db63bbf..0000000000 --- a/examples/Interactive Widgets/Beat Frequencies.ipynb +++ /dev/null @@ -1,120 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Exploring Beat Frequencies using the `Audio` Object" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This example uses the `Audio` object and Matplotlib to explore the phenomenon of beat frequencies." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%matplotlib inline\n", - "import matplotlib.pyplot as plt\n", - "import numpy as np" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook.widgets import interactive\n", - "from IPython.display import Audio, display\n", - "import numpy as np" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def beat_freq(f1=220.0, f2=224.0):\n", - " max_time = 3\n", - " rate = 8000\n", - " times = np.linspace(0,max_time,rate*max_time)\n", - " signal = np.sin(2*np.pi*f1*times) + np.sin(2*np.pi*f2*times)\n", - " print(f1, f2, abs(f1-f2))\n", - " display(Audio(data=signal, rate=rate))\n", - " return signal" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "v = interactive(beat_freq, f1=(200.0,300.0), f2=(200.0,300.0))\n", - "display(v)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "v.kwargs" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "f1, f2 = v.children\n", - "f1.value = 255\n", - "f2.value = 260\n", - "plt.plot(v.result[0:6000])" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Custom Widget - Hello World.ipynb b/examples/Interactive Widgets/Custom Widget - Hello World.ipynb deleted file mode 100644 index bdfdf7a7c7..0000000000 --- a/examples/Interactive Widgets/Custom Widget - Hello World.ipynb +++ /dev/null @@ -1,793 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget Styling.ipynb)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from __future__ import print_function # For py 2.7 compat" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "# Building a Custom Widget" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The widget framework is built **on top of the Comm framework** (short for communication). The Comm framework is a framework that **allows you send/receive JSON messages** to/from the front-end (as seen below).\n", - "\n", - "![Widget layer](images/WidgetArch.png)\n", - "\n", - "To create a custom widget, you need to **define the widget both in the back-end and in the front-end**. " - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "# Building a Custom Widget" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To get started, you'll create a **simple hello world widget**. Later you'll build on this foundation to make more complex widgets." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Back-end (Python)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### DOMWidget and Widget" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To define a widget, you must inherit from the **Widget or DOMWidget** base class. If you intend for your widget to be **displayed in the IPython notebook**, you'll need to **inherit from the DOMWidget**. The DOMWidget class itself inherits from the Widget class. The Widget class is useful for cases in which the **Widget is not meant to be displayed directly in the notebook**, but **instead as a child of another rendering environment**. For example, if you wanted to create a three.js widget (a popular WebGL library), you would implement the rendering window as a DOMWidget and any 3D objects or lights meant to be rendered in that window as Widgets." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### _view_name" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Inheriting from the DOMWidget does not tell the widget framework what front-end widget to associate with your back-end widget. Instead, you must tell it yourself by defining a **specially named Traitlet, `_view_name`** (as seen below)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook import widgets\n", - "from traitlets import Unicode\n", - "\n", - "class HelloWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('HelloView', sync=True)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### sync=True traitlets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "**Traitlets is** an IPython library for defining **type-safe properties** on configurable objects. For this tutorial you do not need to worry about the *configurable* piece of the traitlets machinery. The **`sync=True` keyword argument** tells the widget framework to **handle synchronizing that value to the front-end**. Without `sync=True`, the front-end would have no knowledge of `_view_name`." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Other traitlet types" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Unicode, used for _view_name, is not the only Traitlet type, there are many more some of which are listed below: \n", - "\n", - "- Any\n", - "- Bool\n", - "- Bytes\n", - "- CBool\n", - "- CBytes\n", - "- CComplex\n", - "- CFloat\n", - "- CInt\n", - "- CLong\n", - "- CRegExp\n", - "- CUnicode\n", - "- CaselessStrEnum\n", - "- Complex\n", - "- Dict\n", - "- DottedObjectName\n", - "- Enum\n", - "- Float\n", - "- FunctionType\n", - "- Instance\n", - "- InstanceType\n", - "- Int\n", - "- List\n", - "- Long\n", - "- Set\n", - "- TCPAddress\n", - "- Tuple\n", - "- Type\n", - "- Unicode\n", - "- Union\n", - "\n", - "\n", - "**Not all of these traitlets can be synchronized** across the network, **only the JSON-able** traits and **Widget instances** will be synchronized." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Front-end (JavaScript)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### Models and views" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The IPython widget framework front-end relies heavily on [Backbone.js](http://backbonejs.org/). **Backbone.js is an MVC (model view controller) framework**. Widgets defined in the back-end are automatically **synchronized with generic Backbone.js models** in the front-end. The traitlets are added to the front-end instance **automatically on first state push**. The **`_view_name` trait** that you defined earlier is used by the widget framework to create the corresponding Backbone.js view and **link that view to the model**." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Import the WidgetManager" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "You first need to **import the `widget` and `manager` modules**. You will use the manager later to register your view by name (the same name you used in the back-end). To import the modules, use the `require` method of [require.js](http://requirejs.org/) (as seen below).\n" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Define the view" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Next define your widget view class. **Inherit from the `DOMWidgetView`** by using the `.extend` method. Register the view class with the widget manager by calling **`.register_widget_view`**. The **first parameter is the widget view name** (`_view_name` that you defined earlier in Python) and the **second is a handle to the class type**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " // Define the HelloView\n", - " var HelloView = widget.DOMWidgetView.extend({\n", - " \n", - " });\n", - " \n", - " // Register the HelloView with the widget manager.\n", - " manager.WidgetManager.register_widget_view('HelloView', HelloView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Render method" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Lastly, **override the base `render` method** of the view to define custom rendering logic. A handle to the widget's default div element can be acquired via **`this.$el`**. The `$el` property is a **[jQuery](http://jquery.com/) object handle** (which can be thought of as a supercharged version of the normal DOM element's handle)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " var HelloView = widget.DOMWidgetView.extend({\n", - " \n", - " // Render the view.\n", - " render: function(){ \n", - " this.$el.text('Hello World!'); \n", - " },\n", - " });\n", - " \n", - " manager.WidgetManager.register_widget_view('HelloView', HelloView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Test" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "You should be able to display your widget just like any other widget now." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "HelloWidget()" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Making the widget stateful" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "There is not much that you can do with the above example that you can't do with the IPython display framework. To change this, you will make the widget stateful. Instead of displaying a static \"hello world\" message, it will **display a string set by the back-end**. First you need to **add a traitlet in the back-end**. Use the name of **`value` to stay consistent** with the rest of the widget framework and to **allow your widget to be used with interact**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class HelloWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('HelloView', sync=True)\n", - " value = Unicode('Hello World!', sync=True)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Accessing the model from the view" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To access the model associate with a view instance, use the **`model` property** of the view. **`get` and `set`** methods are used to interact with the Backbone model. **`get` is trivial**, however you have to **be careful when using `set`**. **After calling the model `set`** you need call the **view's `touch` method**. This associates the `set` operation with a particular view so **output will be routed to the correct cell**. The model also has a **`on` method** which allows you to listen to events triggered by the model (like value changes)." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Rendering model contents" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "By **replacing the string literal with a call to `model.get`**, the view will now display the **value of the back-end upon display**. However, it will not update itself to a new value when the value changes." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " var HelloView = widget.DOMWidgetView.extend({\n", - " \n", - " render: function(){ \n", - " this.$el.text(this.model.get('value')); \n", - " },\n", - " });\n", - " \n", - " manager.WidgetManager.register_widget_view('HelloView', HelloView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Dynamic updates" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To get the view to **update itself dynamically**, register a function to update the view's value when the model's `value` property changes. This can be done using the **`model.on` method**. The `on` method takes three parameters, an event name, callback handle, and callback context. The Backbone **event named `change`** will fire whenever the model changes. By **appending `:value`** to it, you tell Backbone to only listen to the change event of the `value` property (as seen below)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " var HelloView = widget.DOMWidgetView.extend({\n", - " \n", - " render: function(){ \n", - " this.value_changed();\n", - " this.model.on('change:value', this.value_changed, this);\n", - " },\n", - " \n", - " value_changed: function() {\n", - " this.$el.text(this.model.get('value')); \n", - " },\n", - " });\n", - " \n", - " manager.WidgetManager.register_widget_view('HelloView', HelloView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Test" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w = HelloWidget()\n", - "w" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value = 'test'" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "# Finishing" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Bidirectional communication" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The examples above dump the value directly into the DOM. There is no way for you to interact with this dumped data in the front-end. To create an example that **accepts input**, you will have to do something more than blindly dumping the contents of value into the DOM. In this part of the tutorial, you will **use a jQuery spinner** to display and accept input in the front-end. IPython currently lacks a spinner implementation so this widget will be unique." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Update the Python code" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "You will need to change the type of the **value traitlet to `Int`**. It also makes sense to **change the name of the widget** to something more appropriate, like `SpinnerWidget`." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from traitlets import CInt\n", - "class SpinnerWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('SpinnerView', sync=True)\n", - " value = CInt(0, sync=True)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Updating the Javascript code" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The [jQuery docs for the spinner control](https://jqueryui.com/spinner/) say to use **`.spinner` to create a spinner** in an element. Calling **`.spinner` on `$el` will create a spinner inside `$el`**. Make sure to **update the widget name here too** so it's the same as `_view_name` in the back-end." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " var SpinnerView = widget.DOMWidgetView.extend({\n", - " \n", - " render: function(){ \n", - " \n", - " // jQuery code to create a spinner and append it to $el\n", - " this.$input = $('');\n", - " this.$el.append(this.$input);\n", - " this.$spinner = this.$input.spinner({\n", - " change: function( event, ui ) {}\n", - " });\n", - " \n", - " this.value_changed();\n", - " this.model.on('change:value', this.value_changed, this);\n", - " },\n", - " \n", - " value_changed: function() {\n", - " \n", - " },\n", - " });\n", - " \n", - " manager.WidgetManager.register_widget_view('SpinnerView', SpinnerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Getting and setting the value" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To **set the value of the spinner on update from the back-end**, you need to use **jQuery's `spinner` API**. `spinner.spinner('value', new)` will set the value of the spinner. Add that code to the **`value_changed` method** to make the spinner **update with the value stored in the back-end((. Using jQuery's spinner API, you can add a function to handle the **spinner `change` event** by passing it in when constructing the spinner. Inside the `change` event, call **`model.set`** to set the value and then **`touch`** to inform the framework that this view was the view that caused the change to the model. **Note: The `var that = this;` is a JavaScript trick to pass the current context into closures.**" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " var SpinnerView = widget.DOMWidgetView.extend({\n", - " \n", - " render: function(){ \n", - "\n", - " var that = this;\n", - " this.$input = $('');\n", - " this.$el.append(this.$input);\n", - " this.$spinner = this.$input.spinner({\n", - " change: function( event, ui ) {\n", - " that.handle_spin();\n", - " },\n", - " spin: function( event, ui ) {\n", - " that.handle_spin();\n", - " }\n", - " });\n", - " \n", - " this.value_changed();\n", - " this.model.on('change:value', this.value_changed, this);\n", - " },\n", - " \n", - " value_changed: function() {\n", - " this.$spinner.spinner('value', this.model.get('value'));\n", - " },\n", - " \n", - " handle_spin: function() {\n", - " this.model.set('value', this.$spinner.spinner('value'));\n", - " this.touch();\n", - " },\n", - " });\n", - " \n", - " manager.WidgetManager.register_widget_view('SpinnerView', SpinnerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Test" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w = SpinnerWidget(value=5)\n", - "w" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value = 20" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Trying to **use the spinner with another widget**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from IPython.display import display\n", - "w1 = SpinnerWidget(value=0)\n", - "w2 = widgets.IntSlider()\n", - "display(w1,w2)\n", - "\n", - "from traitlets import link\n", - "mylink = link((w1, 'value'), (w2, 'value'))" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget Styling.ipynb)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Date Picker Widget.ipynb b/examples/Interactive Widgets/Date Picker Widget.ipynb deleted file mode 100644 index 109a0f9a2d..0000000000 --- a/examples/Interactive Widgets/Date Picker Widget.ipynb +++ /dev/null @@ -1,838 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Before reading, make sure to review\n", - "\n", - "- [MVC prgramming](http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)\n", - "- [Backbone.js](https://www.codeschool.com/courses/anatomy-of-backbonejs)\n", - "- [The widget IPEP](https://github.com/ipython/ipython/wiki/IPEP-23%3A-Backbone.js-Widgets)\n", - "- [The original widget PR discussion](https://github.com/ipython/ipython/pull/4374)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from __future__ import print_function # For py 2.7 compat\n", - "\n", - "from jupyter_notebook import widgets # Widget definitions\n", - "from IPython.display import display # Used to display widgets in the notebook\n", - "from traitlets import Unicode # Used to declare attributes of our widget" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Abstract" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This notebook implements a custom date picker widget,\n", - "in order to demonstrate the widget creation process.\n", - "\n", - "To create a custom widget, both Python and JavaScript code is required." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Section 1 - Basics" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Python" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "When starting a project like this, it is often easiest to make a simple base implementation,\n", - "to verify that the underlying framework is working as expected.\n", - "To start, we will create an empty widget and make sure that it can be rendered.\n", - "The first step is to define the widget in Python." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class DateWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('DatePickerView', sync=True)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Our widget inherits from `widgets.DOMWidget` since it is intended that it will be displayed in the notebook directly.\n", - "The `_view_name` trait is special; the widget framework will read the `_view_name` trait to determine what Backbone view the widget is associated with.\n", - "**Using `sync=True` is very important** because it tells the widget framework that that specific traitlet should be synced between the front- and back-ends." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## JavaScript" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In the IPython notebook [require.js](http://requirejs.org/) is used to load JavaScript dependencies.\n", - "All IPython widget code depends on `widgets/js/widget.js`,\n", - "where the base widget model and base view are defined.\n", - "We use require.js to load this file:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "\n", - "require([\"widgets/js/widget\"], function(WidgetManager){\n", - "\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Now we need to define a view that can be used to represent the model.\n", - "To do this, the `IPython.DOMWidgetView` is extended.\n", - "**A render function must be defined**.\n", - "The render function is used to render a widget view instance to the DOM.\n", - "For now, the render function renders a div that contains the text *Hello World!*\n", - "Lastly, the view needs to be registered with the widget manager, for which we need to load another module.\n", - "\n", - "**Final JavaScript code below:**" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " // Define the DatePickerView\n", - " var DatePickerView = widget.DOMWidgetView.extend({\n", - " render: function(){ this.$el.text('Hello World!'); },\n", - " });\n", - " \n", - " // Register the DatePickerView with the widget manager.\n", - " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Test" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To test what we have so far, create the widget, just like you would the builtin widgets:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "DateWidget()" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Section 2 - Something useful" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Python" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In the last section we created a simple widget that displayed *Hello World!*\n", - "To make an actual date widget, we need to add a property that will be synced between the Python model and the JavaScript model.\n", - "The new attribute must be a traitlet, so the widget machinery can handle it.\n", - "The traitlet must be constructed with a `sync=True` keyword argument, to tell the widget machinery knows to synchronize it with the front-end.\n", - "Adding this to the code from the last section:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class DateWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('DatePickerView', sync=True)\n", - " value = Unicode(sync=True)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## JavaScript" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In the JavaScript, there is no need to define counterparts to the traitlets.\n", - "When the JavaScript model is created for the first time,\n", - "it copies all of the traitlet `sync=True` attributes from the Python model.\n", - "We need to replace *Hello World!* with an actual HTML date picker widget." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " // Define the DatePickerView\n", - " var DatePickerView = widget.DOMWidgetView.extend({\n", - " render: function(){\n", - " \n", - " // Create the date picker control.\n", - " this.$date = $('')\n", - " .attr('type', 'date')\n", - " .appendTo(this.$el);\n", - " },\n", - " });\n", - " \n", - " // Register the DatePickerView with the widget manager.\n", - " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In order to get the HTML date picker to update itself with the value set in the back-end, we need to implement an `update()` method." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " // Define the DatePickerView\n", - " var DatePickerView = widget.DOMWidgetView.extend({\n", - " render: function(){\n", - " \n", - " // Create the date picker control.\n", - " this.$date = $('')\n", - " .attr('type', 'date')\n", - " .appendTo(this.$el);\n", - " },\n", - " \n", - " update: function() {\n", - " \n", - " // Set the value of the date control and then call base.\n", - " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n", - " return DatePickerView.__super__.update.apply(this);\n", - " },\n", - " });\n", - " \n", - " // Register the DatePickerView with the widget manager.\n", - " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To get the changed value from the frontend to publish itself to the backend,\n", - "we need to listen to the change event triggered by the HTM date control and set the value in the model.\n", - "After the date change event fires and the new value is set in the model,\n", - "it is very important that we call `this.touch()` to let the widget machinery know which view changed the model.\n", - "This is important because the widget machinery needs to know which cell to route the message callbacks to.\n", - "\n", - "**Final JavaScript code below:**" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "\n", - "\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " // Define the DatePickerView\n", - " var DatePickerView = widget.DOMWidgetView.extend({\n", - " render: function(){\n", - " \n", - " // Create the date picker control.\n", - " this.$date = $('')\n", - " .attr('type', 'date')\n", - " .appendTo(this.$el);\n", - " },\n", - " \n", - " update: function() {\n", - " \n", - " // Set the value of the date control and then call base.\n", - " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n", - " return DatePickerView.__super__.update.apply(this);\n", - " },\n", - " \n", - " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n", - " events: {\"change\": \"handle_date_change\"},\n", - " \n", - " // Callback for when the date is changed.\n", - " handle_date_change: function(event) {\n", - " this.model.set('value', this.$date.val());\n", - " this.touch();\n", - " },\n", - " });\n", - " \n", - " // Register the DatePickerView with the widget manager.\n", - " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Test" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To test, create the widget the same way that the other widgets are created." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "my_widget = DateWidget()\n", - "display(my_widget)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Display the widget again to make sure that both views remain in sync." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "my_widget" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Read the date from Python" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "my_widget.value" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Set the date from Python" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "my_widget.value = \"1998-12-01\" # December 1st, 1998" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Section 3 - Extra credit" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The 3rd party `dateutil` library is required to continue. https://pypi.python.org/pypi/python-dateutil" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# Import the dateutil library to parse date strings.\n", - "from dateutil import parser" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In the last section we created a fully working date picker widget.\n", - "Now we will add custom validation and support for labels.\n", - "So far, only the ISO date format \"YYYY-MM-DD\" is supported.\n", - "Now, we will add support for all of the date formats recognized by the Python dateutil library." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Python" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The standard property name used for widget labels is `description`.\n", - "In the code block below, `description` has been added to the Python widget." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class DateWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('DatePickerView', sync=True)\n", - " value = Unicode(sync=True)\n", - " description = Unicode(sync=True)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The traitlet machinery searches the class that the trait is defined in for methods with \"`_changed`\" suffixed onto their names. Any method with the format \"`_X_changed`\" will be called when \"`X`\" is modified.\n", - "We can take advantage of this to perform validation and parsing of different date string formats.\n", - "Below, a method that listens to value has been added to the DateWidget." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class DateWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('DatePickerView', sync=True)\n", - " value = Unicode(sync=True)\n", - " description = Unicode(sync=True)\n", - "\n", - " # This function automatically gets called by the traitlet machinery when\n", - " # value is modified because of this function's name.\n", - " def _value_changed(self, name, old_value, new_value):\n", - " pass" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Now the function parses the date string,\n", - "and only sets the value in the correct format." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class DateWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('DatePickerView', sync=True)\n", - " value = Unicode(sync=True)\n", - " description = Unicode(sync=True)\n", - " \n", - " # This function automatically gets called by the traitlet machinery when\n", - " # value is modified because of this function's name.\n", - " def _value_changed(self, name, old_value, new_value):\n", - " \n", - " # Parse the date time value.\n", - " try:\n", - " parsed_date = parser.parse(new_value)\n", - " parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n", - " except:\n", - " parsed_date_string = ''\n", - " \n", - " # Set the parsed date string if the current date string is different.\n", - " if self.value != parsed_date_string:\n", - " self.value = parsed_date_string" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Finally, a `CallbackDispatcher` is added so the user can perform custom validation.\n", - "If any one of the callbacks registered with the dispatcher returns False,\n", - "the new date is not set.\n", - "\n", - "**Final Python code below:**" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class DateWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('DatePickerView', sync=True)\n", - " value = Unicode(sync=True)\n", - " description = Unicode(sync=True)\n", - " \n", - " def __init__(self, **kwargs):\n", - " super(DateWidget, self).__init__(**kwargs)\n", - " \n", - " self.validate = widgets.CallbackDispatcher()\n", - " \n", - " # This function automatically gets called by the traitlet machinery when\n", - " # value is modified because of this function's name.\n", - " def _value_changed(self, name, old_value, new_value):\n", - " \n", - " # Parse the date time value.\n", - " try:\n", - " parsed_date = parser.parse(new_value)\n", - " parsed_date_string = parsed_date.strftime(\"%Y-%m-%d\")\n", - " except:\n", - " parsed_date_string = ''\n", - " \n", - " # Set the parsed date string if the current date string is different.\n", - " if old_value != new_value:\n", - " valid = self.validate(parsed_date)\n", - " if valid in (None, True):\n", - " self.value = parsed_date_string\n", - " else:\n", - " self.value = old_value\n", - " self.send_state() # The traitlet event won't fire since the value isn't changing.\n", - " # We need to force the back-end to send the front-end the state\n", - " # to make sure that the date control date doesn't change." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## JavaScript" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Using the Javascript code from the last section,\n", - "we add a label to the date time object.\n", - "The label is a div with the `widget-hlabel` class applied to it.\n", - "`widget-hlabel` is a class provided by the widget framework that applies special styling to a div to make it look like the rest of the horizontal labels used with the built-in widgets.\n", - "Similar to the `widget-hlabel` class is the `widget-hbox-single` class.\n", - "The `widget-hbox-single` class applies special styling to widget containers that store a single line horizontal widget.\n", - "\n", - "We hide the label if the description value is blank." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - " \n", - " // Define the DatePickerView\n", - " var DatePickerView = widget.DOMWidgetView.extend({\n", - " render: function(){\n", - " this.$el.addClass('widget-hbox-single'); /* Apply this class to the widget container to make\n", - " it fit with the other built in widgets.*/\n", - " // Create a label.\n", - " this.$label = $('
')\n", - " .addClass('widget-hlabel')\n", - " .appendTo(this.$el)\n", - " .hide(); // Hide the label by default.\n", - " \n", - " // Create the date picker control.\n", - " this.$date = $('')\n", - " .attr('type', 'date')\n", - " .appendTo(this.$el);\n", - " },\n", - " \n", - " update: function() {\n", - " \n", - " // Set the value of the date control and then call base.\n", - " this.$date.val(this.model.get('value')); // ISO format \"YYYY-MM-DDTHH:mm:ss.sssZ\" is required\n", - " \n", - " // Hide or show the label depending on the existance of a description.\n", - " var description = this.model.get('description');\n", - " if (description == undefined || description == '') {\n", - " this.$label.hide();\n", - " } else {\n", - " this.$label.show();\n", - " this.$label.text(description);\n", - " }\n", - " \n", - " return DatePickerView.__super__.update.apply(this);\n", - " },\n", - " \n", - " // Tell Backbone to listen to the change event of input controls (which the HTML date picker is)\n", - " events: {\"change\": \"handle_date_change\"},\n", - " \n", - " // Callback for when the date is changed.\n", - " handle_date_change: function(event) {\n", - " this.model.set('value', this.$date.val());\n", - " this.touch();\n", - " },\n", - " });\n", - " \n", - " // Register the DatePickerView with the widget manager.\n", - " manager.WidgetManager.register_widget_view('DatePickerView', DatePickerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Test" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To test the drawing of the label we create the widget like normal but supply the additional description property a value." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# Add some additional widgets for aesthetic purpose\n", - "display(widgets.Text(description=\"First:\"))\n", - "display(widgets.Text(description=\"Last:\"))\n", - "\n", - "my_widget = DateWidget()\n", - "display(my_widget)\n", - "my_widget.description=\"DOB:\"" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Now we will try to create a widget that only accepts dates in the year 2014. We render the widget without a description to verify that it can still render without a label." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "my_widget = DateWidget()\n", - "display(my_widget)\n", - "\n", - "def require_2014(date):\n", - " return not date is None and date.year == 2014\n", - "my_widget.validate.register_callback(require_2014)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# Try setting a valid date\n", - "my_widget.value = \"December 2, 2014\"" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# Try setting an invalid date\n", - "my_widget.value = \"June 12, 1999\"" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "my_widget.value" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": true - }, - "outputs": [], - "source": [] - } - ], - "metadata": { - "cell_tags": [ - [ - "", - null - ] - ], - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.2" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Exploring Graphs.ipynb b/examples/Interactive Widgets/Exploring Graphs.ipynb deleted file mode 100644 index e8f8fba408..0000000000 --- a/examples/Interactive Widgets/Exploring Graphs.ipynb +++ /dev/null @@ -1,117 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Explore Random Graphs Using NetworkX" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In this example, we build a simple UI for exploring random graphs with [NetworkX](http://networkx.github.io/)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook.widgets import interact" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%matplotlib inline\n", - "import matplotlib.pyplot as plt" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "import networkx as nx" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# wrap a few graph generation functions so they have the same signature\n", - "\n", - "def random_lobster(n, m, k, p):\n", - " return nx.random_lobster(n, p, p / m)\n", - "\n", - "def powerlaw_cluster(n, m, k, p):\n", - " return nx.powerlaw_cluster_graph(n, m, p)\n", - "\n", - "def erdos_renyi(n, m, k, p):\n", - " return nx.erdos_renyi_graph(n, p)\n", - "\n", - "def newman_watts_strogatz(n, m, k, p):\n", - " return nx.newman_watts_strogatz_graph(n, k, p)\n", - "\n", - "def plot_random_graph(n, m, k, p, generator):\n", - " g = generator(n, m, k, p)\n", - " nx.draw(g)\n", - " plt.show()" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(plot_random_graph, n=(2,30), m=(1,10), k=(1,10), p=(0.0, 1.0, 0.001),\n", - " generator={'lobster': random_lobster,\n", - " 'power law': powerlaw_cluster,\n", - " 'Newman-Watts-Strogatz': newman_watts_strogatz,\n", - " u'Erdős-Rényi': erdos_renyi,\n", - " });" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Export As (nbconvert).html b/examples/Interactive Widgets/Export As (nbconvert).html deleted file mode 100644 index 119891a009..0000000000 --- a/examples/Interactive Widgets/Export As (nbconvert).html +++ /dev/null @@ -1,11882 +0,0 @@ - - - - - -Notebook - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
-
In [26]:
-
-
-
# Widget related imports
-from IPython.html import widgets
-from IPython.display import display, clear_output, Javascript
-from IPython.utils.traitlets import Unicode
-
-# nbconvert related imports
-from IPython.nbconvert import get_export_names, export_by_name
-from IPython.nbconvert.writers import FilesWriter
-from IPython.nbformat import read, NO_CONVERT
-from IPython.nbconvert.utils.exceptions import ConversionException
-
- -
-
-
- -
-
-
-
-
-
-

Create a text Widget without displaying it. The widget will be used to store the notebook's name which is otherwise only available in the front-end.

- -
-
-
-
-
-
In [17]:
-
-
-
notebook_name = widgets.Text()
-
- -
-
-
- -
-
-
-
-
-
-

Get the current notebook's name by pushing JavaScript to the browser that sets the notebook name in a string widget.

- -
-
-
-
-
-
In [18]:
-
-
-
js = """IPython.notebook.kernel.widget_manager.get_model('%s').then(function(model) {
-    model.set('value', IPython.notebook.notebook_name);
-    model.save();
-});
-""" % notebook_name.model_id
-display(Javascript(data=js))
-
- -
-
-
- -
-
- - -
- - -
-
<IPython.core.display.Javascript object>
-
- -
- -
-
- -
-
-
-
In [19]:
-
-
-
filename = notebook_name.value
-filename
-
- -
-
-
- -
-
- - -
Out[19]:
- - -
-
'Export As (nbconvert).ipynb'
-
- -
- -
-
- -
-
-
-
-
-
-

Create the widget that will allow the user to Export the current notebook.

- -
-
-
-
-
-
In [20]:
-
-
-
exporter_names = widgets.Dropdown(options=get_export_names(), value='html')
-export_button = widgets.Button(description="Export")
-download_link = widgets.HTML(visible=False)
-
- -
-
-
- -
-
-
-
-
-
-

Export the notebook when the export button is clicked.

- -
-
-
-
-
-
In [29]:
-
-
-
file_writer = FilesWriter()
-
-def export(name, nb):
-    
-    # Get a unique key for the notebook and set it in the resources object.
-    notebook_name = name[:name.rfind('.')]
-    resources = {}
-    resources['unique_key'] = notebook_name
-    resources['output_files_dir'] = '%s_files' % notebook_name
-
-    # Try to export
-    try:
-        output, resources = export_by_name(exporter_names.value, nb)
-    except ConversionException as e:
-        download_link.value = "<br>Could not export notebook!"
-    else:
-        write_results = file_writer.write(output, resources, notebook_name=notebook_name)
-    
-        download_link.value = "<br>Results: <a href='files/{filename}'><i>\"{filename}\"</i></a>".format(filename=write_results)
-        download_link.visible = True
-        
-def handle_export(widget):
-    with open(filename, 'r') as f:
-        export(filename, read(f, NO_CONVERT))
-        
-export_button.on_click(handle_export)
-
- -
-
-
- -
-
-
-
-
-
-

Display the controls.

- -
-
-
-
-
-
In [30]:
-
-
-
display(exporter_names, export_button, download_link)
-
- -
-
-
- -
-
- - -
-
-
----------------------------------------------------------------------------
-TypeError                                 Traceback (most recent call last)
-<ipython-input-21-6a4d11e868fe> in handle_export(widget)
-     22 def handle_export(widget):
-     23     with open(filename, 'r') as f:
----> 24         export(filename, read(f, 'json'))
-     25 export_button.on_click(handle_export)
-
-/home/jon/ipython/IPython/nbformat/__init__.py in read(fp, as_version, **kwargs)
-    131             return read(f, as_version, **kwargs)
-    132 
---> 133     return reads(fp.read(), as_version, **kwargs)
-    134 
-    135 
-
-/home/jon/ipython/IPython/nbformat/__init__.py in reads(s, as_version, **kwargs)
-     67     nb = reader.reads(s, **kwargs)
-     68     if as_version is not NO_CONVERT:
----> 69         nb = convert(nb, as_version)
-     70     try:
-     71         validate(nb)
-
-/home/jon/ipython/IPython/nbformat/converter.py in convert(nb, to_version)
-     52     else:
-     53         raise ValueError("Cannot convert notebook to v%d because that " \
----> 54                         "version doesn't exist" % (to_version))
-
-TypeError: %d format: a number is required, not str
-
-
- -
-
-
----------------------------------------------------------------------------
-TypeError                                 Traceback (most recent call last)
-<ipython-input-23-549800f6d03d> in handle_export(widget)
-     22 def handle_export(widget):
-     23     with open(filename, 'r') as f:
----> 24         export(filename, read(f, 'json', 4))
-     25 
-     26 export_button.on_click(handle_export)
-
-TypeError: read() takes 2 positional arguments but 3 were given
-
-
- -
-
-
----------------------------------------------------------------------------
-TypeError                                 Traceback (most recent call last)
-<ipython-input-24-549800f6d03d> in handle_export(widget)
-     22 def handle_export(widget):
-     23     with open(filename, 'r') as f:
----> 24         export(filename, read(f, 'json', 4))
-     25 
-     26 export_button.on_click(handle_export)
-
-TypeError: read() takes 2 positional arguments but 3 were given
-
-
- -
-
-
----------------------------------------------------------------------------
-TypeError                                 Traceback (most recent call last)
-<ipython-input-27-e5e414ef9f49> in handle_export(widget)
-     22 def handle_export(widget):
-     23     with open(filename, 'r') as f:
----> 24         export(filename, read(f))
-     25 
-     26 export_button.on_click(handle_export)
-
-TypeError: read() missing 1 required positional argument: 'as_version'
-
-
- -
-
- -
-
-
-
In [ ]:
-
-
-
 
-
- -
-
-
- -
-
-
- - diff --git a/examples/Interactive Widgets/Export As (nbconvert).ipynb b/examples/Interactive Widgets/Export As (nbconvert).ipynb deleted file mode 100644 index 59506a40b9..0000000000 --- a/examples/Interactive Widgets/Export As (nbconvert).ipynb +++ /dev/null @@ -1,186 +0,0 @@ -{ - "cells": [ - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# Widget related imports\n", - "from jupyter_notebook import widgets\n", - "from IPython.display import display, clear_output, Javascript\n", - "from traitlets import Unicode\n", - "\n", - "# nbconvert related imports\n", - "from IPython.nbconvert import get_export_names, export_by_name\n", - "from IPython.nbconvert.writers import FilesWriter\n", - "from IPython.nbformat import read, NO_CONVERT\n", - "from IPython.nbconvert.utils.exceptions import ConversionException" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This notebook shows a really roundabout way to get the name of the notebook file using widgets. The true purpose of this demo is to demonstrate how Javascript and Python widget models are related by `id`." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Create a text Widget without displaying it. The widget will be used to store the notebook's name which is otherwise only available in the front-end." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "notebook_name = widgets.Text()" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Get the current notebook's name by pushing JavaScript to the browser that sets the notebook name in a string widget." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "js = \"\"\"IPython.notebook.kernel.widget_manager.get_model('%s').then(function(model) {\n", - " model.set('value', IPython.notebook.notebook_name);\n", - " model.save();\n", - "});\n", - "\"\"\" % notebook_name.model_id\n", - "display(Javascript(data=js))" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "filename = notebook_name.value\n", - "filename" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Create the widget that will allow the user to Export the current notebook." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "exporter_names = widgets.Dropdown(options=get_export_names(), value='html')\n", - "export_button = widgets.Button(description=\"Export\")\n", - "download_link = widgets.HTML(visible=False)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Export the notebook when the export button is clicked." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "file_writer = FilesWriter()\n", - "\n", - "def export(name, nb):\n", - " \n", - " # Get a unique key for the notebook and set it in the resources object.\n", - " notebook_name = name[:name.rfind('.')]\n", - " resources = {}\n", - " resources['unique_key'] = notebook_name\n", - " resources['output_files_dir'] = '%s_files' % notebook_name\n", - "\n", - " # Try to export\n", - " try:\n", - " output, resources = export_by_name(exporter_names.value, nb)\n", - " except ConversionException as e:\n", - " download_link.value = \"
Could not export notebook!\"\n", - " else:\n", - " write_results = file_writer.write(output, resources, notebook_name=notebook_name)\n", - " \n", - " download_link.value = \"
Results: \\\"{filename}\\\"\".format(filename=write_results)\n", - " download_link.visible = True\n", - " \n", - "def handle_export(widget):\n", - " with open(filename, 'r') as f:\n", - " export(filename, read(f, NO_CONVERT))\n", - " \n", - "export_button.on_click(handle_export)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Display the controls." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "display(exporter_names, export_button, download_link)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Factoring.ipynb b/examples/Interactive Widgets/Factoring.ipynb deleted file mode 100644 index fc56831e54..0000000000 --- a/examples/Interactive Widgets/Factoring.ipynb +++ /dev/null @@ -1,115 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Factoring Polynomials with SymPy" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Here is an example that uses [SymPy](http://sympy.org/en/index.html) to factor polynomials." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook.widgets import interact\n", - "from IPython.display import display" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from sympy import Symbol, Eq, factor, init_printing\n", - "init_printing(use_latex='mathjax')" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "x = Symbol('x')" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def factorit(n):\n", - " display(Eq(x**n-1, factor(x**n-1)))" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Notice how the output of the `factorit` function is properly formatted LaTeX." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "factorit(12)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(factorit, n=(2,40));" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/File Upload Widget.ipynb b/examples/Interactive Widgets/File Upload Widget.ipynb deleted file mode 100644 index 78ed4d880e..0000000000 --- a/examples/Interactive Widgets/File Upload Widget.ipynb +++ /dev/null @@ -1,187 +0,0 @@ -{ - "cells": [ - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "import base64\n", - "from __future__ import print_function # py 2.7 compat.\n", - "from jupyter_notebook import widgets # Widget definitions.\n", - "from traitlets import Unicode # Traitlet needed to add synced attributes to the widget." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This is a custom widget that allows the user to upload file data to the notebook server. The file data is sent via a statefull `value` attribute of the widget. The widget has an upload failed event that fires in the front-end and is echoed to the back-end using a custom msg." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class FileWidget(widgets.DOMWidget):\n", - " _view_name = Unicode('FilePickerView', sync=True)\n", - " value = Unicode(sync=True)\n", - " filename = Unicode(sync=True)\n", - " \n", - " def __init__(self, **kwargs):\n", - " \"\"\"Constructor\"\"\"\n", - " widgets.DOMWidget.__init__(self, **kwargs) # Call the base.\n", - " \n", - " # Allow the user to register error callbacks with the following signatures:\n", - " # callback()\n", - " # callback(sender)\n", - " self.errors = widgets.CallbackDispatcher(accepted_nargs=[0, 1])\n", - " \n", - " # Listen for custom msgs\n", - " self.on_msg(self._handle_custom_msg)\n", - "\n", - " def _handle_custom_msg(self, content):\n", - " \"\"\"Handle a msg from the front-end.\n", - "\n", - " Parameters\n", - " ----------\n", - " content: dict\n", - " Content of the msg.\"\"\"\n", - " if 'event' in content and content['event'] == 'error':\n", - " self.errors()\n", - " self.errors(self)\n", - " " - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "\n", - "require([\"widgets/js/widget\", \"widgets/js/manager\"], function(widget, manager){\n", - "\n", - " var FilePickerView = widget.DOMWidgetView.extend({\n", - " render: function(){\n", - " // Render the view.\n", - " this.setElement($('')\n", - " .attr('type', 'file'));\n", - " },\n", - " \n", - " events: {\n", - " // List of events and their handlers.\n", - " 'change': 'handle_file_change',\n", - " },\n", - " \n", - " handle_file_change: function(evt) { \n", - " // Handle when the user has changed the file.\n", - " \n", - " // Retrieve the first (and only!) File from the FileList object\n", - " var file = evt.target.files[0];\n", - " if (file) {\n", - "\n", - " // Read the file's textual content and set value to those contents.\n", - " var that = this;\n", - " var file_reader = new FileReader();\n", - " file_reader.onload = function(e) {\n", - " that.model.set('value', e.target.result);\n", - " that.touch();\n", - " }\n", - " file_reader.readAsText(file);\n", - " } else {\n", - "\n", - " // The file couldn't be opened. Send an error msg to the\n", - " // back-end.\n", - " this.send({ 'event': 'error' });\n", - " }\n", - "\n", - " // Set the filename of the file.\n", - " this.model.set('filename', file.name);\n", - " this.touch();\n", - " },\n", - " });\n", - " \n", - " // Register the DatePickerView with the widget manager.\n", - " manager.WidgetManager.register_widget_view('FilePickerView', FilePickerView);\n", - "});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The following shows how the file widget can be used." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "file_widget = FileWidget()\n", - "\n", - "# Register an event to echo the filename when it has been changed.\n", - "def file_loading():\n", - " print(\"Loading %s\" % file_widget.filename)\n", - "file_widget.on_trait_change(file_loading, 'filename')\n", - "\n", - "# Register an event to echo the filename and contents when a file\n", - "# has been uploaded.\n", - "def file_loaded():\n", - " print(\"Loaded, file contents: %s\" % file_widget.value)\n", - "file_widget.on_trait_change(file_loaded, 'value')\n", - "\n", - "# Register an event to print an error message when a file could not\n", - "# be opened. Since the error messages are not handled through\n", - "# traitlets but instead handled through custom msgs, the registration\n", - "# of the handler is different than the two examples above. Instead\n", - "# the API provided by the CallbackDispatcher must be used.\n", - "def file_failed():\n", - " print(\"Could not load file contents of %s\" % file_widget.filename)\n", - "file_widget.errors.register_callback(file_failed)\n", - "\n", - "file_widget" - ] - } - ], - "metadata": { - "cell_tags": [ - [ - "", - null - ] - ], - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Image Browser.ipynb b/examples/Interactive Widgets/Image Browser.ipynb deleted file mode 100644 index 1154dea10d..0000000000 --- a/examples/Interactive Widgets/Image Browser.ipynb +++ /dev/null @@ -1,119 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Image Browser" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This example shows how to browse through a set of images with a slider." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%matplotlib inline\n", - "import matplotlib.pyplot as plt" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook.widgets import interact" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from sklearn import datasets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "We will use the digits dataset from [scikit-learn](http://scikit-learn.org/stable/)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "digits = datasets.load_digits()" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def browse_images(digits):\n", - " n = len(digits.images)\n", - " def view_image(i):\n", - " plt.imshow(digits.images[i], cmap=plt.cm.gray_r, interpolation='nearest')\n", - " plt.title('Training: %s' % digits.target[i])\n", - " plt.show()\n", - " interact(view_image, i=(0,n-1))" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "browse_images(digits)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Image Processing.ipynb b/examples/Interactive Widgets/Image Processing.ipynb deleted file mode 100644 index 4ec56618ea..0000000000 --- a/examples/Interactive Widgets/Image Processing.ipynb +++ /dev/null @@ -1,162 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Image Manipulation with skimage" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This example builds a simple UI for performing basic image manipulation with [scikit-image](http://scikit-image.org/)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook.widgets import interact, interactive, fixed\n", - "from IPython.display import display" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "import skimage\n", - "from skimage import data, filter, io" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "i = data.coffee()" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "io.Image(i)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def edit_image(image, sigma=0.1, r=1.0, g=1.0, b=1.0):\n", - " new_image = filter.gaussian_filter(image, sigma=sigma, multichannel=True)\n", - " new_image[:,:,0] = r*new_image[:,:,0]\n", - " new_image[:,:,1] = g*new_image[:,:,1]\n", - " new_image[:,:,2] = b*new_image[:,:,2]\n", - " new_image = io.Image(new_image)\n", - " display(new_image)\n", - " return new_image" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "lims = (0.0,1.0,0.01)\n", - "w = interactive(edit_image, image=fixed(i), sigma=(0.0,10.0,0.1), r=lims, g=lims, b=lims)\n", - "display(w)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.result" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Python 3 only: Function annotations" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In Python 3, you can use the new function annotation syntax to describe widgets for interact:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "lims = (0.0,1.0,0.01)\n", - "\n", - "@interact\n", - "def edit_image(image: fixed(i), sigma:(0.0,10.0,0.1)=0.1, r:lims=1.0, g:lims=1.0, b:lims=1.0):\n", - " new_image = filter.gaussian_filter(image, sigma=sigma, multichannel=True)\n", - " new_image[:,:,0] = r*new_image[:,:,0]\n", - " new_image[:,:,1] = g*new_image[:,:,1]\n", - " new_image[:,:,2] = b*new_image[:,:,2]\n", - " new_image = io.Image(new_image)\n", - " display(new_image)\n", - " return new_image" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Index.ipynb b/examples/Interactive Widgets/Index.ipynb deleted file mode 100644 index d4da12c044..0000000000 --- a/examples/Interactive Widgets/Index.ipynb +++ /dev/null @@ -1,108 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Back to the main [Index](../Index.ipynb)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Interactive Widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "IPython includes an architecture for interactive widgets that tie together Python code running in the kernel and JavaScript/HTML/CSS running in the browser. These widgets enable users to explore their code and data interactively." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Tutorials" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "- [Using Interact](Using Interact.ipynb)\n", - "- [Widget Basics](Widget Basics.ipynb) \n", - "- [Widget Events](Widget Events.ipynb) \n", - "- [Widget List](Widget List.ipynb) \n", - "- [Widget Styling](Widget Styling.ipynb) \n", - "- [Custom Widget](Custom Widget - Hello World.ipynb)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Examples of custom widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "- [Variable Inspector](Variable Inspector.ipynb) \n", - "- [Export As (nbconvert)](Export As (nbconvert%29.ipynb) \n", - "- [Nonblocking Console](Nonblocking Console.ipynb) \n", - "- [File Upload Widget](File Upload Widget.ipynb)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Examples using `interact`/`interactive`" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "* [Beat Frequencies](Beat Frequencies.ipynb)\n", - "* [Exploring Graphs](Exploring Graphs.ipynb)\n", - "* [Factoring](Factoring.ipynb)\n", - "* [Image Browser](Image Browser.ipynb)\n", - "* [Image Processing](Image Processing.ipynb)\n", - "* [Lorenz Differential Equations](Lorenz Differential Equations.ipynb)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.2" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Lorenz Differential Equations.ipynb b/examples/Interactive Widgets/Lorenz Differential Equations.ipynb deleted file mode 100644 index 2610e2fe6b..0000000000 --- a/examples/Interactive Widgets/Lorenz Differential Equations.ipynb +++ /dev/null @@ -1,290 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Exploring the Lorenz System of Differential Equations" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In this Notebook we explore the Lorenz system of differential equations:\n", - "\n", - "$$\n", - "\\begin{aligned}\n", - "\\dot{x} & = \\sigma(y-x) \\\\\n", - "\\dot{y} & = \\rho x - y - xz \\\\\n", - "\\dot{z} & = -\\beta z + xy\n", - "\\end{aligned}\n", - "$$\n", - "\n", - "This is one of the classic systems in non-linear differential equations. It exhibits a range of different behaviors as the parameters ($\\sigma$, $\\beta$, $\\rho$) are varied." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Imports" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "First, we import the needed things from IPython, NumPy, Matplotlib and SciPy." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%matplotlib inline" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook.widgets import interact, interactive\n", - "from IPython.display import clear_output, display, HTML" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "import numpy as np\n", - "from scipy import integrate\n", - "\n", - "from matplotlib import pyplot as plt\n", - "from mpl_toolkits.mplot3d import Axes3D\n", - "from matplotlib.colors import cnames\n", - "from matplotlib import animation" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Computing the trajectories and plotting the result" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "We define a function that can integrate the differential equations numerically and then plot the solutions. This function has arguments that control the parameters of the differential equation ($\\sigma$, $\\beta$, $\\rho$), the numerical integration (`N`, `max_time`) and the visualization (`angle`)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def solve_lorenz(N=10, angle=0.0, max_time=4.0, sigma=10.0, beta=8./3, rho=28.0):\n", - "\n", - " fig = plt.figure()\n", - " ax = fig.add_axes([0, 0, 1, 1], projection='3d')\n", - " ax.axis('off')\n", - "\n", - " # prepare the axes limits\n", - " ax.set_xlim((-25, 25))\n", - " ax.set_ylim((-35, 35))\n", - " ax.set_zlim((5, 55))\n", - " \n", - " def lorenz_deriv(x_y_z, t0, sigma=sigma, beta=beta, rho=rho):\n", - " \"\"\"Compute the time-derivative of a Lorenz system.\"\"\"\n", - " x, y, z = x_y_z\n", - " return [sigma * (y - x), x * (rho - z) - y, x * y - beta * z]\n", - "\n", - " # Choose random starting points, uniformly distributed from -15 to 15\n", - " np.random.seed(1)\n", - " x0 = -15 + 30 * np.random.random((N, 3))\n", - "\n", - " # Solve for the trajectories\n", - " t = np.linspace(0, max_time, int(250*max_time))\n", - " x_t = np.asarray([integrate.odeint(lorenz_deriv, x0i, t)\n", - " for x0i in x0])\n", - " \n", - " # choose a different color for each trajectory\n", - " colors = plt.cm.jet(np.linspace(0, 1, N))\n", - "\n", - " for i in range(N):\n", - " x, y, z = x_t[i,:,:].T\n", - " lines = ax.plot(x, y, z, '-', c=colors[i])\n", - " plt.setp(lines, linewidth=2)\n", - "\n", - " ax.view_init(30, angle)\n", - " plt.show()\n", - "\n", - " return t, x_t" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Let's call the function once to view the solutions. For this set of parameters, we see the trajectories swirling around two points, called attractors. " - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "t, x_t = solve_lorenz(angle=0, N=10)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Using IPython's `interactive` function, we can explore how the trajectories behave as we change the various parameters." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w = interactive(solve_lorenz, angle=(0.,360.), N=(0,50), sigma=(0.0,50.0), rho=(0.0,50.0))\n", - "display(w)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The object returned by `interactive` is a `Widget` object and it has attributes that contain the current result and arguments:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "t, x_t = w.result" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.kwargs" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "After interacting with the system, we can take the result and perform further computations. In this case, we compute the average positions in $x$, $y$ and $z$." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "xyz_avg = x_t.mean(axis=1)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "xyz_avg.shape" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Creating histograms of the average positions (across different trajectories) show that on average the trajectories swirl about the attractors." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "plt.hist(xyz_avg[:,0])\n", - "plt.title('Average $x(t)$')" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "plt.hist(xyz_avg[:,1])\n", - "plt.title('Average $y(t)$')" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Nonblocking Console.ipynb b/examples/Interactive Widgets/Nonblocking Console.ipynb deleted file mode 100644 index aa024642a8..0000000000 --- a/examples/Interactive Widgets/Nonblocking Console.ipynb +++ /dev/null @@ -1,239 +0,0 @@ -{ - "cells": [ - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# Console related imports.\n", - "from subprocess import Popen, PIPE\n", - "import os\n", - "from IPython.utils.py3compat import bytes_to_str, string_types\n", - "\n", - "# Widget related imports.\n", - "from jupyter_notebook import widgets\n", - "from IPython.display import display" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Define function to run a process without blocking the input." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def read_process(process, append_output):\n", - " \"\"\" Try to read the stdout and stderr of a process and render it using \n", - " the append_output method provided\n", - " \n", - " Parameters\n", - " ----------\n", - " process: Popen handle\n", - " append_output: method handle\n", - " Callback to render output. Signature of\n", - " append_output(output, [prefix=])\"\"\"\n", - " \n", - " try:\n", - " stdout = process.stdout.read()\n", - " if stdout is not None and len(stdout) > 0:\n", - " append_output(stdout, prefix=' ')\n", - " except:\n", - " pass\n", - " \n", - " try:\n", - " stderr = process.stderr.read()\n", - " if stderr is not None and len(stderr) > 0:\n", - " append_output(stderr, prefix='ERR ')\n", - " except:\n", - " pass\n", - "\n", - "\n", - "def set_pipe_nonblocking(pipe):\n", - " \"\"\"Set a pipe as non-blocking\"\"\"\n", - " try:\n", - " import fcntl\n", - " fl = fcntl.fcntl(pipe, fcntl.F_GETFL)\n", - " fcntl.fcntl(pipe, fcntl.F_SETFL, fl | os.O_NONBLOCK)\n", - " except:\n", - " pass\n", - "\n", - "kernel = get_ipython().kernel\n", - "def run_command(command, append_output, has_user_exited=None):\n", - " \"\"\"Run a command asyncronously\n", - " \n", - " Parameters\n", - " ----------\n", - " command: str\n", - " Shell command to launch a process with.\n", - " append_output: method handle\n", - " Callback to render output. Signature of\n", - " append_output(output, [prefix=])\n", - " has_user_exited: method handle\n", - " Check to see if the user wants to stop the command.\n", - " Must return a boolean.\"\"\"\n", - " \n", - " # Echo input.\n", - " append_output(command, prefix='>>> ')\n", - " \n", - " # Create the process. Make sure the pipes are set as non-blocking.\n", - " process = Popen(command, shell=True, stdout=PIPE, stderr=PIPE)\n", - " set_pipe_nonblocking(process.stdout)\n", - " set_pipe_nonblocking(process.stderr)\n", - " \n", - " # Only continue to read from the command \n", - " while (has_user_exited is None or not has_user_exited()) and process.poll() is None:\n", - " read_process(process, append_output)\n", - " kernel.do_one_iteration() # Run IPython iteration. This is the code that\n", - " # makes this operation non-blocking. This will\n", - " # allow widget messages and callbacks to be \n", - " # processed.\n", - " \n", - " # If the process is still running, the user must have exited.\n", - " if process.poll() is None:\n", - " process.kill()\n", - " else:\n", - " read_process(process, append_output) # Read remainer\n", - " \n", - " \n", - " \n", - " " - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Create the console widgets without displaying them." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "console_container = widgets.VBox(visible=False)\n", - "console_container.padding = '10px'\n", - "\n", - "output_box = widgets.Textarea()\n", - "output_box.height = '400px'\n", - "output_box.font_family = 'monospace'\n", - "output_box.color = '#AAAAAA'\n", - "output_box.background_color = 'black'\n", - "output_box.width = '800px'\n", - "\n", - "input_box = widgets.Text()\n", - "input_box.font_family = 'monospace'\n", - "input_box.color = '#AAAAAA'\n", - "input_box.background_color = 'black'\n", - "input_box.width = '800px'\n", - "\n", - "console_container.children = [output_box, input_box]" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Hook the process execution methods up to our console widgets." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "\n", - "def append_output(output, prefix):\n", - " if isinstance(output, string_types):\n", - " output_str = output\n", - " else:\n", - " output_str = bytes_to_str(output)\n", - " output_lines = output_str.split('\\n')\n", - " formatted_output = '\\n'.join([prefix + line for line in output_lines if len(line) > 0]) + '\\n'\n", - " output_box.value += formatted_output\n", - " output_box.scroll_to_bottom()\n", - " \n", - "def has_user_exited():\n", - " return not console_container.visible\n", - "\n", - "def handle_input(sender):\n", - " sender.disabled = True\n", - " try:\n", - " command = sender.value\n", - " sender.value = ''\n", - " run_command(command, append_output=append_output, has_user_exited=has_user_exited)\n", - " finally:\n", - " sender.disabled = False\n", - " \n", - "input_box.on_submit(handle_input)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Create the button that will be used to display and hide the console. Display both the console container and the new button used to toggle it." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": true - }, - "outputs": [], - "source": [ - "toggle_button = widgets.Button(description=\"Start Console\")\n", - "def toggle_console(sender):\n", - " console_container.visible = not console_container.visible\n", - " if console_container.visible:\n", - " toggle_button.description=\"Stop Console\"\n", - " input_box.disabled = False\n", - " else:\n", - " toggle_button.description=\"Start Console\"\n", - "toggle_button.on_click(toggle_console)\n", - "\n", - "display(toggle_button)\n", - "display(console_container)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Using Interact.ipynb b/examples/Interactive Widgets/Using Interact.ipynb deleted file mode 100644 index dcba77150d..0000000000 --- a/examples/Interactive Widgets/Using Interact.ipynb +++ /dev/null @@ -1,629 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Using Interact" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The `interact` function (`jupyter_notebook.widgets.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." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from __future__ import print_function\n", - "from jupyter_notebook.widgets import interact, interactive, fixed\n", - "from jupyter_notebook import widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "
\n", - "As of IPython 3.0, the widgets in this notebook won't show up on http://nbviewer.ipython.org. To view the widgets and interact with them, you will need to download this notebook and run it with an IPython Notebook server.\n", - "\n", - "
" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Basic `interact`" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "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": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def f(x):\n", - " print(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." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=10);" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "When you move the slider, the function is called and the current value of `x` is printed.\n", - "\n", - "If you pass `True` or `False`, `interact` will generate a checkbox:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=True);" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "If you pass a string, `interact` will generate a text area." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x='Hi there!');" - ] - }, - { - "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": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "@interact(x=True, y=1.0)\n", - "def g(x, y):\n", - " print(x, y)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Fixing arguments using `fixed`" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "There are times when you may want to explore a function using `interact`, but fix 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": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def h(p, q):\n", - " print(p, q)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "When we call `interact`, we pass `fixed(20)` for q to hold it fixed at a value of `20`." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(h, p=5, q=fixed(20));" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Notice that a slider is only produced for `p` as the value of `q` is fixed." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Widget abbreviations" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "When you pass an integer valued keyword argument (`x=10`) to `interact`, it generates an integer valued slider control with a range of $[-10,+3\\times10]$. In this case `10` is an *abbreviation* for an actual slider widget:\n", - "\n", - "```python\n", - "IntSlider(min=-10,max=30,step=1,value=10)\n", - "```\n", - "\n", - "In fact, we can get the same result if we pass this `IntSlider` as the keyword argument for `x`:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=widgets.IntSlider(min=-10,max=30,step=1,value=10));" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This examples clarifies how `interact` proceses its keyword arguments:\n", - "\n", - "1. If the keyword argument is `Widget` instance with a `value` attribute, that widget is used. Any widget with a `value` attribute can be used, even custom ones.\n", - "2. Otherwise, the value is treated as a *widget abbreviation* that is converted to a widget before it is used.\n", - "\n", - "The following table gives an overview of different widget abbreviations:\n", - "\n", - "\n", - " \n", - " \n", - " \n", - " \n", - " \n", - " \n", - "
Keyword argumentWidget
`True` or `False`Checkbox
`'Hi there'`Text
`value` or `(min,max)` or `(min,max,step)` if integers are passedIntSlider
`value` or `(min,max)` or `(min,max,step)` if floats are passedFloatSlider
`('orange','apple')` or `{'one':1,'two':2}`Dropdown
" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "You have seen how the checkbox and textarea widgets work above. Here, more details about the different abbreviations for sliders and dropdowns are given.\n", - "\n", - "If a 2-tuple of integers is passed `(min,max)` a integer valued slider is produced with those minimum and maximum (inclusive) values. In this case, the default step size of `1` is used." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=(0,4));" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "If a 3-tuple of integers is passed `(min,max,step)` the step size can also be set." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=(0,8,2));" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "A float valued slider is produced if the elements of the tuples are floats. Here the minimum is `0.0`, the maximum is `10.0` and step size is `0.1` (the default)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=(0.0,10.0));" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The step size can be changed by passing a 3rd element in the tuple." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=(0.0,10.0,0.01));" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "For both integer and float valued sliders, you can pick the initial value of the widget by passing a default keyword argument to the underlying Python function. Here we set the initial value of a float slider to `5.5`." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "@interact(x=(0.0,20.0,0.5))\n", - "def h(x=5.5):\n", - " print(x)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Dropdown menus can be produced by passing a tuple of strings. In this case, the strings are both used as the names in the dropdown menu UI and passed to the underlying Python function." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x=('apples','oranges'));" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "If you want a dropdown menu that passes non-string values to the Python function, you can pass a dictionary. The keys in the dictionary are used for the names in the dropdown menu UI and the values are the arguments that are passed to the underlying Python function." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f, x={'one': 10, 'two': 20});" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Using function annotations with `interact`" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "If you are using Python 3, you can also specify widget abbreviations using [function annotations](https://docs.python.org/3/tutorial/controlflow.html#function-annotations). This is a convenient approach allows the widget abbreviations to be defined with a function.\n", - "\n", - "Define a function with an checkbox widget abbreviation for the argument `x`." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def f(x:True):\n", - " print(x)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Then, because the widget abbreviation has already been defined, you can call `interact` with a single argument." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f);" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "If you are running Python 2, function annotations can be defined using the `@annotate` function." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from IPython.utils.py3compat import annotate" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "@annotate(x=True)\n", - "def f(x):\n", - " print(x)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "interact(f);" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## `interactive`" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In addition to `interact` IPython provides another function, `interactive`, that is useful when you want to reuse the widget that are produced or access the data that is bound to the UI controls." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Here is a function that returns the sum of its two arguments." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "def f(a, b):\n", - " return a+b" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Unlike `interact`, `interactive` returns a `Widget` instance rather than immediately displaying the widget." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w = interactive(f, a=10, b=20)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The widget is a `Box`, which is a container for other widgets." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "type(w)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The children of the `Box` are two integer valued sliders produced by the widget abbreviations above." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.children" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To actually display the widgets, you can use IPython's `display` function." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from IPython.display import display\n", - "display(w)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "At this point, the UI controls work just like they would if `interact` had been used. You can manipulate them interactively and the function will be called. However, the widget instance returned by `interactive` also give you access to the current keyword arguments and return value of the underlying Python function.\n", - "\n", - "Here are the current keyword arguments. If you rerun this cell after manipulating the sliders, the values will have changed." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.kwargs" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Here is the current return value of the function." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.result" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Variable Inspector.ipynb b/examples/Interactive Widgets/Variable Inspector.ipynb deleted file mode 100644 index 2ea21f5f34..0000000000 --- a/examples/Interactive Widgets/Variable Inspector.ipynb +++ /dev/null @@ -1,240 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Variable Inspector Widget" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## A short example implementation" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "This notebook demonstrates how one can use the widgets already built-in to IPython to create a working variable inspector much like the ones seen in popular commercial scientific computing environments." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook import widgets # Loads the Widget framework.\n", - "from IPython.core.magics.namespace import NamespaceMagics # Used to query namespace.\n", - "\n", - "# For this example, hide these names, just to avoid polluting the namespace further\n", - "get_ipython().user_ns_hidden['widgets'] = widgets\n", - "get_ipython().user_ns_hidden['NamespaceMagics'] = NamespaceMagics" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "class VariableInspectorWindow(object):\n", - " instance = None\n", - " \n", - " def __init__(self, ipython):\n", - " \"\"\"Public constructor.\"\"\"\n", - " if VariableInspectorWindow.instance is not None:\n", - " raise Exception(\"\"\"Only one instance of the Variable Inspector can exist at a \n", - " time. Call close() on the active instance before creating a new instance.\n", - " If you have lost the handle to the active instance, you can re-obtain it\n", - " via `VariableInspectorWindow.instance`.\"\"\")\n", - " \n", - " VariableInspectorWindow.instance = self\n", - " self.closed = False\n", - " self.namespace = NamespaceMagics()\n", - " self.namespace.shell = ipython.kernel.shell\n", - " \n", - " self._box = widgets.Box()\n", - " self._box._dom_classes = ['inspector']\n", - " self._box.background_color = '#fff'\n", - " self._box.border_color = '#ccc'\n", - " self._box.border_width = 1\n", - " self._box.border_radius = 5\n", - "\n", - " self._modal_body = widgets.VBox()\n", - " self._modal_body.overflow_y = 'scroll'\n", - "\n", - " self._modal_body_label = widgets.HTML(value = 'Not hooked')\n", - " self._modal_body.children = [self._modal_body_label]\n", - "\n", - " self._box.children = [\n", - " self._modal_body, \n", - " ]\n", - " \n", - " self._ipython = ipython\n", - " self._ipython.events.register('post_run_cell', self._fill)\n", - " \n", - " def close(self):\n", - " \"\"\"Close and remove hooks.\"\"\"\n", - " if not self.closed:\n", - " self._ipython.events.unregister('post_run_cell', self._fill)\n", - " self._box.close()\n", - " self.closed = True\n", - " VariableInspectorWindow.instance = None\n", - "\n", - " def _fill(self):\n", - " \"\"\"Fill self with variable information.\"\"\"\n", - " values = self.namespace.who_ls()\n", - " self._modal_body_label.value = '
NameTypeValue
' + \\\n", - " '
'.join(['{0}{1}{2}'.format(v, type(eval(v)).__name__, str(eval(v))) for v in values]) + \\\n", - " '
'\n", - "\n", - " def _ipython_display_(self):\n", - " \"\"\"Called when display() or pyout is used to display the Variable \n", - " Inspector.\"\"\"\n", - " self._box._ipython_display_()\n" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "inspector = VariableInspectorWindow(get_ipython())\n", - "inspector" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Pop the inspector out of the widget area using Javascript. To close the inspector, click the close button on the widget area that it was spawned from." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%javascript\n", - "$('div.inspector')\n", - " .detach()\n", - " .prependTo($('body'))\n", - " .css({\n", - " 'z-index': 999, \n", - " position: 'fixed',\n", - " 'box-shadow': '5px 5px 12px -3px black',\n", - " opacity: 0.9\n", - " })\n", - " .draggable();" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Test" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "a = 5" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "b = 3.0" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "c = a * b" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "d = \"String\"" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "del b" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "inspector.close()" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Widget Basics.ipynb b/examples/Interactive Widgets/Widget Basics.ipynb deleted file mode 100644 index 963f76f4cd..0000000000 --- a/examples/Interactive Widgets/Widget Basics.ipynb +++ /dev/null @@ -1,445 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Next](Widget List.ipynb)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Simple Widget Introduction" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## What are widgets?" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "Widgets are elements that exists in both the front-end and the back-end.\n", - "\n", - "![Kernel & front-end diagram](../images/FrontendKernel.png)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## What can they be used for?" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "You can use widgets to build **interactive GUIs** for your notebooks. \n", - "You can also use widgets to **synchronize stateful and stateless information** between Python and JavaScript." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Using widgets " - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "To use the widget framework, you need to **import `jupyter_notebook.widgets`**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook.widgets import *" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### repr" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Widgets have their own display `repr` which allows them to be displayed using IPython's display framework. Constructing and returning an `IntSlider` automatically displays the widget (as seen below). Widgets are **displayed inside the `widget area`**, which sits between the code cell and output. **You can hide all of the widgets** in the `widget area` by clicking the grey *x* in the margin." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "IntSlider()" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### display()" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "You can also explicitly display the widget using `display(...)`." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from IPython.display import display\n", - "w = IntSlider()\n", - "display(w)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Multiple display() calls" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "If you display the same widget twice, the displayed instances in the front-end **will remain in sync** with each other." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "display(w)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Why does displaying the same widget twice work?" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "Widgets are **represented in the back-end by a single object**. Each time a widget is displayed, **a new representation** of that same object is created in the front-end. These representations are called **views**.\n", - "\n", - "![Kernel & front-end diagram](images/WidgetModelView.png)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Closing widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "You can close a widget by calling its `close()` method." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "display(w)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.close()" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Widget properties" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "All of the IPython widgets **share a similar naming scheme**. To read the value of a widget, you can query its `value` property." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w = IntSlider()\n", - "display(w)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Similarly, to set a widget's value, you can set its `value` property." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value = 100" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Keys" - ] - }, - { - "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": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.keys" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### Shorthand for setting the initial values of widget properties" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "While creating a widget, you can set some or all of the initial values of that widget by **defining them as keyword arguments in the widget's constructor** (as seen below)." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "Text(value='Hello World!', disabled=True)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Linking two similar widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "If you need to display the same value two different ways, you'll have to use two different widgets. Instead of **attempting to manually synchronize the values** of the two widgets, you can use the `traitlet` `link` function **to link two properties together**. Below, the values of three widgets are linked together." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from traitlets import link\n", - "a = FloatText()\n", - "b = FloatSlider()\n", - "c = FloatProgress()\n", - "display(a,b,c)\n", - "\n", - "\n", - "mylink = link((a, 'value'), (b, 'value'), (c, 'value'))" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### Unlinking widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "Unlinking the widgets is simple. All you have to do is call `.unlink` on the link object." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "mylink.unlink()" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Next](Widget List.ipynb)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.2" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Widget Events.ipynb b/examples/Interactive Widgets/Widget Events.ipynb deleted file mode 100644 index 5e377d2a0e..0000000000 --- a/examples/Interactive Widgets/Widget Events.ipynb +++ /dev/null @@ -1,383 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget List.ipynb) - [Next](Widget Styling.ipynb)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "# Widget Events" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Special events" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from __future__ import print_function" - ] - }, - { - "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": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook import widgets\n", - "print(widgets.Button.on_click.__doc__)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Example" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Since button clicks are **stateless**, they are **transmitted from the front-end to the back-end using custom messages**. By using the `on_click` method, a button that prints a message when it has been clicked is shown below." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from IPython.display import display\n", - "button = widgets.Button(description=\"Click Me!\")\n", - "display(button)\n", - "\n", - "def on_button_clicked(b):\n", - " print(\"Button clicked.\")\n", - "\n", - "button.on_click(on_button_clicked)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### on_sumbit" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The **`Text`** also has a special **`on_submit` event**. The `on_submit` event **fires when the user hits return**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "text = widgets.Text()\n", - "display(text)\n", - "\n", - "def handle_submit(sender):\n", - " print(text.value)\n", - "\n", - "text.on_submit(handle_submit)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Traitlet events" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "**Widget properties are IPython traitlets** and **traitlets 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": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "print(widgets.Widget.on_trait_change.__doc__)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Signatures" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Mentioned in the doc string, 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", - "Using this method, an example of how to output an `IntSlider`'s value as it is changed can be seen below." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "int_range = widgets.IntSlider()\n", - "display(int_range)\n", - "\n", - "def on_value_change(name, value):\n", - " print(value)\n", - "\n", - "int_range.on_trait_change(on_value_change, 'value')" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Linking Widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Often, you may want to simply link widget attributes together. Synchronization of attributes can be done in a simpler way than by using bare traitlets events. \n", - "\n", - "The first method is to use the `link` and `directional_link` functions from the `traitlets` module. " - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Linking traitlets attributes from the server side" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "import traitlets" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "caption = widgets.Latex(value = 'The values of slider1, slider2 and slider3 are synchronized')\n", - "sliders1, slider2, slider3 = widgets.IntSlider(description='Slider 1'),\\\n", - " widgets.IntSlider(description='Slider 2'),\\\n", - " widgets.IntSlider(description='Slider 3')\n", - "l = traitlets.link((sliders1, 'value'), (slider2, 'value'), (slider3, 'value'))\n", - "display(caption, sliders1, slider2, slider3)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "caption = widgets.Latex(value = 'Changes in source values are reflected in target1 and target2')\n", - "source, target1, target2 = widgets.IntSlider(description='Source'),\\\n", - " widgets.IntSlider(description='Target 1'),\\\n", - " widgets.IntSlider(description='Target 2')\n", - "traitlets.dlink((source, 'value'), (target1, 'value'), (target2, 'value'))\n", - "display(caption, source, target1, target2)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Function `traitlets.link` returns a `Link` object. The link can be broken by calling the `unlink` method." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# l.unlink()" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Linking widgets attributes from the client side" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "When synchronizing traitlets attributes, you may experience a lag because of the latency dues to the rountrip to the server side. You can also directly link widgets attributes, either in a unidirectional or a bidirectional fashion using the link widgets. " - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "caption = widgets.Latex(value = 'The values of range1, range2 and range3 are synchronized')\n", - "range1, range2, range3 = widgets.IntSlider(description='Range 1'),\\\n", - " widgets.IntSlider(description='Range 2'),\\\n", - " widgets.IntSlider(description='Range 3')\n", - "l = widgets.jslink((range1, 'value'), (range2, 'value'), (range3, 'value'))\n", - "display(caption, range1, range2, range3)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "caption = widgets.Latex(value = 'Changes in source_range values are reflected in target_range1 and target_range2')\n", - "source_range, target_range1, target_range2 = widgets.IntSlider(description='Source range'),\\\n", - " widgets.IntSlider(description='Target range 1'),\\\n", - " widgets.IntSlider(description='Target range 2')\n", - "widgets.jsdlink((source_range, 'value'), (target_range1, 'value'), (target_range2, 'value'))\n", - "display(caption, source_range, target_range1, target_range2)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Function `widgets.jslink` returns a `Link` widget. The link can be broken by calling the `unlink` method." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "# l.unlink()" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget List.ipynb) - [Next](Widget Styling.ipynb)" - ] - } - ], - "metadata": { - "cell_tags": [ - [ - "", - null - ] - ], - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.2" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Widget List.ipynb b/examples/Interactive Widgets/Widget List.ipynb deleted file mode 100644 index ed52d2f818..0000000000 --- a/examples/Interactive Widgets/Widget List.ipynb +++ /dev/null @@ -1,621 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget Basics.ipynb) - [Next](Widget Events.ipynb)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "# Widget List" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Complete list" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "For a complete list of the widgets available to you, you can list the classes in the widget namespace (as seen below). `Widget` and `DOMWidget`, not listed below, are base classes." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook import widgets\n", - "[n for n in dir(widgets) if not n.endswith('Widget') and n[0] == n[0].upper() and not n[0] == '_']" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Numeric widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "There are 8 widgets distributed with IPython that are designed to display numeric values. Widgets exist for displaying integers and floats, both bounded and unbounded. The integer widgets share a similar naming scheme to their floating point counterparts. By replacing `Float` with `Int` in the widget name, you can find the Integer equivalent." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### FloatSlider" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.FloatSlider(\n", - " value=7.5,\n", - " min=5.0,\n", - " max=10.0,\n", - " step=0.1,\n", - " description='Test:',\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Sliders can also be **displayed vertically**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.FloatSlider(\n", - " value=7.5,\n", - " min=5.0,\n", - " max=10.0,\n", - " step=0.1,\n", - " description='Test',\n", - " orientation='vertical',\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### FloatProgress" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.FloatProgress(\n", - " value=7.5,\n", - " min=5.0,\n", - " max=10.0,\n", - " step=0.1,\n", - " description='Loading:',\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### BoundedFloatText" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.BoundedFloatText(\n", - " value=7.5,\n", - " min=5.0,\n", - " max=10.0,\n", - " description='Text:',\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### FloatText" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.FloatText(\n", - " value=7.5,\n", - " description='Any:',\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Boolean widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "There are two widgets that are designed to display a boolean value." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### ToggleButton" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.ToggleButton(\n", - " description='Click me',\n", - " value=False,\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Checkbox" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.Checkbox(\n", - " description='Check me',\n", - " value=True,\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Selection widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "There are four widgets that can be used to display single selection lists, and one that can be used to display multiple selection lists. All inherit from the same base class. You can specify the **enumeration of selectable options by passing a list**. You can **also specify the enumeration as a dictionary**, in which case the **keys will be used as the item displayed** in the list and the corresponding **value will be returned** when an item is selected." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Dropdown" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from IPython.display import display\n", - "w = widgets.Dropdown(\n", - " options=['1', '2', '3'],\n", - " value='2',\n", - " description='Number:',\n", - ")\n", - "display(w)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "The following is also valid:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w = widgets.Dropdown(\n", - " options={'One': 1, 'Two': 2, 'Three': 3},\n", - " value=2,\n", - " description='Number:',\n", - ")\n", - "display(w)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### RadioButtons" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.RadioButtons(\n", - " description='Pizza topping:',\n", - " options=['pepperoni', 'pineapple', 'anchovies'],\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Select" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.Select(\n", - " description='OS:',\n", - " options=['Linux', 'Windows', 'OSX'],\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### ToggleButtons" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.ToggleButtons(\n", - " description='Speed:',\n", - " options=['Slow', 'Regular', 'Fast'],\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### SelectMultiple\n", - "Multiple values can be selected with shift and ctrl pressed and mouse clicks or arrow keys." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": true - }, - "outputs": [], - "source": [ - "w = widgets.SelectMultiple(\n", - " description=\"Fruits\",\n", - " options=['Apples', 'Oranges', 'Pears']\n", - ")\n", - "display(w)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w.value" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## String widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "There are 4 widgets that can be used to display a string value. Of those, the **`Text` and `Textarea` widgets accept input**. The **`Latex` and `HTML` widgets display the string** as either Latex or HTML respectively, but **do not accept input**." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Text" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.Text(\n", - " description='String:',\n", - " value='Hello World',\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### Textarea" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.Textarea(\n", - " description='String:',\n", - " value='Hello World',\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Latex" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.Latex(\n", - " value=\"$$\\\\frac{n!}{k!(n-k)!} = \\\\binom{n}{k}$$\",\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### HTML" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.HTML(\n", - " value=\"Hello World\"\n", - ")" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Button" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "widgets.Button(description='Click me')" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget Basics.ipynb) - [Next](Widget Events.ipynb)" - ] - } - ], - "metadata": { - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.0" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/Widget Styling.ipynb b/examples/Interactive Widgets/Widget Styling.ipynb deleted file mode 100644 index 03fe77fa97..0000000000 --- a/examples/Interactive Widgets/Widget Styling.ipynb +++ /dev/null @@ -1,585 +0,0 @@ -{ - "cells": [ - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "%%html\n", - "" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from jupyter_notebook import widgets\n", - "from IPython.display import display" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "# Widget Styling" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## 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", - "- fore_color \n", - "- back_color \n", - "- border_color \n", - "- border_width \n", - "- border_style \n", - "- font_style \n", - "- font_weight \n", - "- font_size \n", - "- font_family \n", - "\n", - "The example below shows how a `Button` widget can be styled:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "button = widgets.Button(\n", - " description='Hello World!',\n", - " width=100, # Integers are interpreted as pixel measurements.\n", - " height='2em', # em is valid HTML unit of measurement.\n", - " color='lime', # Colors can be set by name,\n", - " background_color='#0022FF', # and also by color code.\n", - " border_color='red')\n", - "display(button)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Parent/child relationships" - ] - }, - { - "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 those children**, too." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "from IPython.display import display\n", - "\n", - "float_range = widgets.FloatSlider()\n", - "string = widgets.Text(value='hi')\n", - "container = widgets.Box(children=[float_range, string])\n", - "\n", - "container.border_color = 'red'\n", - "container.border_style = 'dotted'\n", - "container.border_width = 3\n", - "display(container) # Displays the `container` and all of it's children." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### After the parent is displayed" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "Children **can be added to parents** after the parent has been displayed. The **parent is responsible for rendering its children**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "container = widgets.Box()\n", - "container.border_color = 'red'\n", - "container.border_style = 'dotted'\n", - "container.border_width = 3\n", - "display(container)\n", - "\n", - "int_range = widgets.IntSlider()\n", - "container.children=[int_range]" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Fancy boxes" - ] - }, - { - "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, one can **call `set_title`**." - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "### Accordion" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "name1 = widgets.Text(description='Location:')\n", - "zip1 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", - "page1 = widgets.Box(children=[name1, zip1])\n", - "\n", - "name2 = widgets.Text(description='Location:')\n", - "zip2 = widgets.BoundedIntText(description='Zip:', min=0, max=99999)\n", - "page2 = widgets.Box(children=[name2, zip2])\n", - "\n", - "accord = widgets.Accordion(children=[page1, page2])\n", - "display(accord)\n", - "\n", - "accord.set_title(0, 'From')\n", - "accord.set_title(1, 'To')" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### TabWidget" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "name = widgets.Text(description='Name:')\n", - "color = widgets.Dropdown(description='Color:', options=['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'])\n", - "page1 = widgets.Box(children=[name, color])\n", - "\n", - "age = widgets.IntSlider(description='Age:', min=0, max=120, value=50)\n", - "gender = widgets.RadioButtons(description='Gender:', options=['male', 'female'])\n", - "page2 = widgets.Box(children=[age, gender])\n", - "\n", - "tabs = widgets.Tab(children=[page1, page2])\n", - "display(tabs)\n", - "\n", - "tabs.set_title(0, 'Name')\n", - "tabs.set_title(1, 'Details')" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "# Alignment" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Most widgets have a **`description` attribute**, which allows a label for the widget to be defined.\n", - "The label of the widget **has a fixed minimum width**.\n", - "The text of the label is **always right aligned and the widget is left aligned**:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "display(widgets.Text(description=\"a:\"))\n", - "display(widgets.Text(description=\"aa:\"))\n", - "display(widgets.Text(description=\"aaa:\"))" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "If a **label is longer** than the minimum width, the **widget is shifted to the right**:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "display(widgets.Text(description=\"a:\"))\n", - "display(widgets.Text(description=\"aa:\"))\n", - "display(widgets.Text(description=\"aaa:\"))\n", - "display(widgets.Text(description=\"aaaaaaaaaaaaaaaaaa:\"))" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "If a `description` is **not set** for the widget, the **label is not displayed**:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "display(widgets.Text(description=\"a:\"))\n", - "display(widgets.Text(description=\"aa:\"))\n", - "display(widgets.Text(description=\"aaa:\"))\n", - "display(widgets.Text())" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Flex boxes" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Widgets can be aligned using the `FlexBox`, `HBox`, and `VBox` widgets." - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Application to widgets" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Widgets display vertically by default:" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "buttons = [widgets.Button(description=str(i)) for i in range(3)]\n", - "display(*buttons)" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Using hbox" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "To make widgets display horizontally, you need to **child them to a `HBox` widget**." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "container = widgets.HBox(children=buttons)\n", - "display(container)" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "By setting the width of the container to 100% and its `pack` to `center`, you can center the buttons." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "container.width = '100%'\n", - "container.pack = 'center'" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "## Visibility" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "Sometimes it is necessary to **hide or show widgets** in place, **without having to re-display** the widget.\n", - "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", - "* `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": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w1 = widgets.Latex(value=\"First line\")\n", - "w2 = widgets.Latex(value=\"Second line\")\n", - "w3 = widgets.Latex(value=\"Third line\")\n", - "display(w1, w2, w3)" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": true - }, - "outputs": [], - "source": [ - "w2.visible=None" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w2.visible=False" - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "w2.visible=True" - ] - }, - { - "cell_type": "markdown", - "metadata": { - "slideshow": { - "slide_type": "slide" - } - }, - "source": [ - "### Another example" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "In the example below, a form is rendered, which conditionally displays widgets depending on the state of other widgets. Try toggling the student checkbox." - ] - }, - { - "cell_type": "code", - "execution_count": null, - "metadata": { - "collapsed": false - }, - "outputs": [], - "source": [ - "form = widgets.VBox()\n", - "first = widgets.Text(description=\"First Name:\")\n", - "last = widgets.Text(description=\"Last Name:\")\n", - "\n", - "student = widgets.Checkbox(description=\"Student:\", value=False)\n", - "school_info = widgets.VBox(visible=False, children=[\n", - " widgets.Text(description=\"School:\"),\n", - " widgets.IntText(description=\"Grade:\", min=0, max=12)\n", - " ])\n", - "\n", - "pet = widgets.Text(description=\"Pet's Name:\")\n", - "form.children = [first, last, student, school_info, pet]\n", - "display(form)\n", - "\n", - "def on_student_toggle(name, value):\n", - " if value:\n", - " school_info.visible = True\n", - " else:\n", - " school_info.visible = False\n", - "student.on_trait_change(on_student_toggle, 'value')\n" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "[Index](Index.ipynb) - [Back](Widget Events.ipynb) - [Next](Custom Widget - Hello World.ipynb)" - ] - } - ], - "metadata": { - "cell_tags": [ - [ - "", - null - ] - ], - "kernelspec": { - "display_name": "Python 3", - "language": "python", - "name": "python3" - }, - "language_info": { - "codemirror_mode": { - "name": "ipython", - "version": 3 - }, - "file_extension": ".py", - "mimetype": "text/x-python", - "name": "python", - "nbconvert_exporter": "python", - "pygments_lexer": "ipython3", - "version": "3.4.2" - } - }, - "nbformat": 4, - "nbformat_minor": 0 -} diff --git a/examples/Interactive Widgets/images/MultilanguageKernels.graffle b/examples/Interactive Widgets/images/MultilanguageKernels.graffle deleted file mode 100644 index c05b7739a3..0000000000 --- a/examples/Interactive Widgets/images/MultilanguageKernels.graffle +++ /dev/null @@ -1,442 +0,0 @@ - - - - - ActiveLayerIndex - 0 - ApplicationVersion - - com.omnigroup.OmniGraffle - 139.18.0.187838 - - AutoAdjust - - BackgroundGraphic - - Bounds - {{0, 0}, {576, 733}} - Class - SolidGraphic - ID - 2 - Style - - shadow - - Draws - NO - - stroke - - Draws - NO - - - - BaseZoom - 0 - CanvasOrigin - {0, 0} - ColumnAlign - 1 - ColumnSpacing - 36 - CreationDate - 2014-05-28 16:41:42 +0000 - Creator - bgranger - DisplayScale - 1 0/72 in = 1 0/72 in - GraphDocumentVersion - 8 - GraphicsList - - - Class - LineGraphic - Head - - ID - 4 - - ID - 8 - Points - - {301.5, 284.5} - {370.03931790895228, 313.41502474283925} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - - - Class - LineGraphic - Head - - ID - 3 - - ID - 7 - Points - - {302, 282} - {370.00010962762133, 280.57591393450008} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - - - Class - LineGraphic - Head - - ID - 1 - - ID - 6 - Points - - {301.5, 280.5} - {370.04817900607623, 248.01101932524512} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - - - Bounds - {{241.5, 262}, {58, 36}} - Class - ShapedGraphic - FontInfo - - Font - Helvetica - Size - 12 - - ID - 5 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs20 \cf0 Frontend} - - - - Bounds - {{370.5, 307}, {54, 36}} - Class - ShapedGraphic - FontInfo - - Font - Helvetica - Size - 12 - - ID - 4 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs20 \cf0 R\ -Kernel} - - - - Bounds - {{370.5, 262}, {54, 36}} - Class - ShapedGraphic - FontInfo - - Font - Helvetica - Size - 12 - - ID - 3 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs20 \cf0 Julia\ -Kernel} - - - - Bounds - {{370.5, 217}, {54, 36}} - Class - ShapedGraphic - FontInfo - - Font - Helvetica - Size - 12 - - ID - 1 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs20 \cf0 Python Kernel} - - - - GridInfo - - GuidesLocked - NO - GuidesVisible - YES - HPages - 1 - ImageCounter - 1 - KeepToScale - - Layers - - - Lock - NO - Name - Layer 1 - Print - YES - View - YES - - - LayoutInfo - - Animate - NO - circoMinDist - 18 - circoSeparation - 0.0 - layoutEngine - dot - neatoSeparation - 0.0 - twopiSeparation - 0.0 - - LinksVisible - NO - MagnetsVisible - NO - MasterSheets - - ModificationDate - 2014-05-28 16:45:20 +0000 - Modifier - bgranger - NotesVisible - NO - Orientation - 2 - OriginVisible - NO - PageBreaks - YES - PrintInfo - - NSBottomMargin - - float - 41 - - NSHorizonalPagination - - coded - BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG - - NSLeftMargin - - float - 18 - - NSPaperSize - - size - {612, 792} - - NSPrintReverseOrientation - - int - 0 - - NSRightMargin - - float - 18 - - NSTopMargin - - float - 18 - - - PrintOnePage - - ReadOnly - NO - RowAlign - 1 - RowSpacing - 36 - SheetTitle - Canvas 1 - SmartAlignmentGuidesActive - YES - SmartDistanceGuidesActive - YES - UniqueID - 1 - UseEntirePage - - VPages - 1 - WindowInfo - - CurrentSheet - 0 - ExpandedCanvases - - - name - Canvas 1 - - - Frame - {{387, 6}, {710, 872}} - ListView - - OutlineWidth - 142 - RightSidebar - - ShowRuler - - Sidebar - - SidebarWidth - 120 - VisibleRegion - {{196.5, 107}, {287.5, 366.5}} - Zoom - 2 - ZoomValues - - - Canvas 1 - 2 - 1 - - - - - diff --git a/examples/Interactive Widgets/images/MultilanguageKernels.png b/examples/Interactive Widgets/images/MultilanguageKernels.png deleted file mode 100644 index 1a35ecdab5..0000000000 Binary files a/examples/Interactive Widgets/images/MultilanguageKernels.png and /dev/null differ diff --git a/examples/Interactive Widgets/images/ParallelKernels.graffle b/examples/Interactive Widgets/images/ParallelKernels.graffle deleted file mode 100644 index 7dd686d204..0000000000 --- a/examples/Interactive Widgets/images/ParallelKernels.graffle +++ /dev/null @@ -1,876 +0,0 @@ - - - - - ActiveLayerIndex - 0 - ApplicationVersion - - com.omnigroup.OmniGraffle - 139.18.0.187838 - - AutoAdjust - - BackgroundGraphic - - Bounds - {{0, 0}, {576, 733}} - Class - SolidGraphic - FontInfo - - Font - xkcd-Regular - Size - 11 - - ID - 2 - Style - - shadow - - Draws - NO - - stroke - - Draws - NO - - - - BaseZoom - 0 - CanvasOrigin - {0, 0} - ColumnAlign - 1 - ColumnSpacing - 36 - CreationDate - 2014-05-27 22:35:15 +0000 - Creator - bgranger - DisplayScale - 1 0/72 in = 1 0/72 in - GraphDocumentVersion - 8 - GraphicsList - - - Class - LineGraphic - ID - 24 - Points - - {222.5, 377.5} - {262, 424.66666666666669} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - Tail - - ID - 23 - - - - Class - LineGraphic - Head - - ID - 4 - - ID - 23 - Points - - {222.5, 377.5} - {261.50992666237363, 385.39132104238854} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - - - Class - LineGraphic - Head - - ID - 3 - - ID - 22 - Points - - {223.5, 376.5} - {261.51605222709946, 366.62761434412533} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - Tail - - ID - 21 - - - - Class - LineGraphic - ID - 21 - Points - - {223.5, 376.5} - {262, 323.33333333333331} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - - - Class - LineGraphic - Head - - ID - 18 - - ID - 20 - Points - - {136, 376.24998788995731} - {167.5, 376.24998788995731} - - Style - - stroke - - HeadArrow - 0 - Legacy - - Pattern - 1 - TailArrow - 0 - - - Tail - - ID - 19 - - - - Bounds - {{66.5, 364.5}, {69, 23.5}} - Class - ShapedGraphic - ID - 19 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 FRONTEND} - - - - Bounds - {{168, 364.5}, {52, 23.5}} - Class - ShapedGraphic - ID - 18 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{436, 410}, {52, 23.5}} - Class - ShapedGraphic - ID - 17 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{436, 379}, {52, 23.5}} - Class - ShapedGraphic - ID - 16 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{436, 348}, {52, 23.5}} - Class - ShapedGraphic - ID - 15 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{436, 317}, {52, 23.5}} - Class - ShapedGraphic - ID - 14 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{378, 410}, {52, 23.5}} - Class - ShapedGraphic - ID - 13 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{378, 379}, {52, 23.5}} - Class - ShapedGraphic - ID - 12 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{378, 348}, {52, 23.5}} - Class - ShapedGraphic - ID - 11 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{378, 317}, {52, 23.5}} - Class - ShapedGraphic - ID - 10 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{320, 410}, {52, 23.5}} - Class - ShapedGraphic - ID - 9 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{320, 379}, {52, 23.5}} - Class - ShapedGraphic - ID - 8 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{320, 348}, {52, 23.5}} - Class - ShapedGraphic - ID - 7 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{320, 317}, {52, 23.5}} - Class - ShapedGraphic - ID - 6 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{262, 410}, {52, 23.5}} - Class - ShapedGraphic - ID - 5 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{262, 379}, {52, 23.5}} - Class - ShapedGraphic - ID - 4 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{262, 348}, {52, 23.5}} - Class - ShapedGraphic - ID - 3 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - Bounds - {{262, 317}, {52, 23.5}} - Class - ShapedGraphic - ID - 1 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel} - - - - GridInfo - - GuidesLocked - NO - GuidesVisible - YES - HPages - 1 - ImageCounter - 1 - KeepToScale - - Layers - - - Lock - NO - Name - Layer 1 - Print - YES - View - YES - - - LayoutInfo - - Animate - NO - circoMinDist - 18 - circoSeparation - 0.0 - layoutEngine - dot - neatoSeparation - 0.0 - twopiSeparation - 0.0 - - LinksVisible - NO - MagnetsVisible - NO - MasterSheets - - ModificationDate - 2014-05-27 22:41:37 +0000 - Modifier - bgranger - NotesVisible - NO - Orientation - 2 - OriginVisible - NO - PageBreaks - YES - PrintInfo - - NSBottomMargin - - float - 41 - - NSHorizonalPagination - - coded - BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG - - NSLeftMargin - - float - 18 - - NSPaperSize - - size - {612, 792} - - NSPrintReverseOrientation - - int - 0 - - NSRightMargin - - float - 18 - - NSTopMargin - - float - 18 - - - PrintOnePage - - ReadOnly - NO - RowAlign - 1 - RowSpacing - 36 - SheetTitle - Canvas 1 - SmartAlignmentGuidesActive - YES - SmartDistanceGuidesActive - YES - UniqueID - 1 - UseEntirePage - - VPages - 1 - WindowInfo - - CurrentSheet - 0 - ExpandedCanvases - - - name - Canvas 1 - - - Frame - {{367, 6}, {710, 872}} - ListView - - OutlineWidth - 142 - RightSidebar - - ShowRuler - - Sidebar - - SidebarWidth - 120 - VisibleRegion - {{0, 0}, {575, 733}} - Zoom - 1 - ZoomValues - - - Canvas 1 - 1 - 1.5 - - - - - diff --git a/examples/Interactive Widgets/images/ParallelKernels.png b/examples/Interactive Widgets/images/ParallelKernels.png deleted file mode 100644 index 3be471c28c..0000000000 Binary files a/examples/Interactive Widgets/images/ParallelKernels.png and /dev/null differ diff --git a/examples/Interactive Widgets/images/VizInteractCompute.graffle b/examples/Interactive Widgets/images/VizInteractCompute.graffle deleted file mode 100644 index b5299b0c00..0000000000 --- a/examples/Interactive Widgets/images/VizInteractCompute.graffle +++ /dev/null @@ -1,426 +0,0 @@ - - - - - ActiveLayerIndex - 0 - ApplicationVersion - - com.omnigroup.OmniGraffle - 139.18.0.187838 - - AutoAdjust - - BackgroundGraphic - - Bounds - {{0, 0}, {576, 733}} - Class - SolidGraphic - ID - 2 - Style - - shadow - - Draws - NO - - stroke - - Draws - NO - - - - BaseZoom - 0 - CanvasOrigin - {0, 0} - ColumnAlign - 1 - ColumnSpacing - 36 - CreationDate - 2013-11-07 05:58:18 +0000 - Creator - bgranger - DisplayScale - 1 0/72 in = 1.0000 in - GraphDocumentVersion - 8 - GraphicsList - - - Class - LineGraphic - Head - - ID - 28 - - ID - 33 - Points - - {241.59308245327554, 385.40907928007584} - {270.40691754672446, 347.59092071992416} - - Style - - stroke - - HeadArrow - FilledArrow - Legacy - - LineType - 1 - TailArrow - 0 - Width - 2 - - - Tail - - ID - 30 - - - - Class - LineGraphic - Head - - ID - 30 - - ID - 32 - Points - - {313.49998123780057, 408.50001815456494} - {262.50001876219557, 408.50001815456494} - - Style - - stroke - - HeadArrow - FilledArrow - Legacy - - LineType - 1 - TailArrow - 0 - Width - 2 - - - Tail - - ID - 29 - - - - Class - LineGraphic - Head - - ID - 29 - - ID - 31 - Points - - {305.59308378474134, 347.59092246747298} - {334.40691621525866, 385.40907753252702} - - Style - - stroke - - HeadArrow - FilledArrow - Legacy - - LineType - 1 - TailArrow - 0 - Width - 2 - - - Tail - - ID - 28 - - - - Bounds - {{186.5, 383.5}, {75, 50}} - Class - ShapedGraphic - ID - 30 - Shape - Circle - Style - - shadow - - Draws - NO - - stroke - - Width - 2 - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs22 \cf0 ComputE} - VerticalPad - 0 - - - - Bounds - {{314.5, 383.5}, {75, 50}} - Class - ShapedGraphic - ID - 29 - Shape - Circle - Style - - shadow - - Draws - NO - - stroke - - Width - 2 - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs22 \cf0 Interact} - VerticalPad - 0 - - - - Bounds - {{250.5, 299.5}, {75, 50}} - Class - ShapedGraphic - ID - 28 - Shape - Circle - Style - - shadow - - Draws - NO - - stroke - - Width - 2 - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs22 \cf0 Visualize} - VerticalPad - 0 - - - - GridInfo - - GuidesLocked - NO - GuidesVisible - YES - HPages - 1 - ImageCounter - 1 - KeepToScale - - Layers - - - Lock - NO - Name - Layer 1 - Print - YES - View - YES - - - LayoutInfo - - Animate - NO - circoMinDist - 18 - circoSeparation - 0.0 - layoutEngine - dot - neatoSeparation - 0.0 - twopiSeparation - 0.0 - - LinksVisible - NO - MagnetsVisible - NO - MasterSheets - - ModificationDate - 2014-05-28 16:49:32 +0000 - Modifier - bgranger - NotesVisible - NO - Orientation - 2 - OriginVisible - NO - PageBreaks - YES - PrintInfo - - NSBottomMargin - - float - 41 - - NSHorizonalPagination - - coded - BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG - - NSLeftMargin - - float - 18 - - NSPaperSize - - size - {612, 792} - - NSPrintReverseOrientation - - int - 0 - - NSRightMargin - - float - 18 - - NSTopMargin - - float - 18 - - - PrintOnePage - - ReadOnly - NO - RowAlign - 1 - RowSpacing - 36 - SheetTitle - Canvas 1 - SmartAlignmentGuidesActive - YES - SmartDistanceGuidesActive - YES - UniqueID - 1 - UseEntirePage - - VPages - 1 - WindowInfo - - CurrentSheet - 0 - ExpandedCanvases - - - name - Canvas 1 - - - Frame - {{340, 6}, {710, 872}} - ListView - - OutlineWidth - 142 - RightSidebar - - ShowRuler - - Sidebar - - SidebarWidth - 120 - VisibleRegion - {{0, 0}, {575, 733}} - Zoom - 1 - ZoomValues - - - Canvas 1 - 1 - 1 - - - - - diff --git a/examples/Interactive Widgets/images/VizInteractCompute.png b/examples/Interactive Widgets/images/VizInteractCompute.png deleted file mode 100644 index 5c793a5820..0000000000 Binary files a/examples/Interactive Widgets/images/VizInteractCompute.png and /dev/null differ diff --git a/examples/Interactive Widgets/images/WidgetArch.graffle b/examples/Interactive Widgets/images/WidgetArch.graffle deleted file mode 100644 index c371b391dd..0000000000 --- a/examples/Interactive Widgets/images/WidgetArch.graffle +++ /dev/null @@ -1,322 +0,0 @@ - - - - - ActiveLayerIndex - 0 - ApplicationVersion - - com.omnigroup.OmniGraffle - 139.18.0.187838 - - AutoAdjust - - BackgroundGraphic - - Bounds - {{0, 0}, {576, 733}} - Class - SolidGraphic - ID - 2 - Style - - shadow - - Draws - NO - - stroke - - Draws - NO - - - - BaseZoom - 0 - CanvasOrigin - {0, 0} - ColumnAlign - 1 - ColumnSpacing - 36 - CreationDate - 2013-11-09 20:06:39 +0000 - Creator - bgranger - DisplayScale - 1 0/72 in = 1.0000 in - GraphDocumentVersion - 8 - GraphicsList - - - Bounds - {{212.5, 269.5}, {124.5, 40}} - Class - ShapedGraphic - ID - 5 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Interact} - - - - Bounds - {{212.5, 318}, {124.5, 40}} - Class - ShapedGraphic - ID - 4 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Widgets} - - - - Bounds - {{212.5, 366.5}, {124.5, 40}} - Class - ShapedGraphic - ID - 3 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Comm} - - - - Bounds - {{212.5, 415}, {124.5, 40}} - Class - ShapedGraphic - ID - 1 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf190 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 WebSockets/ZeroMQ} - - - - GridInfo - - GuidesLocked - NO - GuidesVisible - YES - HPages - 1 - ImageCounter - 1 - KeepToScale - - Layers - - - Lock - NO - Name - Layer 1 - Print - YES - View - YES - - - LayoutInfo - - Animate - NO - circoMinDist - 18 - circoSeparation - 0.0 - layoutEngine - dot - neatoSeparation - 0.0 - twopiSeparation - 0.0 - - LinksVisible - NO - MagnetsVisible - NO - MasterSheets - - ModificationDate - 2014-05-28 16:53:16 +0000 - Modifier - bgranger - NotesVisible - NO - Orientation - 2 - OriginVisible - NO - PageBreaks - YES - PrintInfo - - NSBottomMargin - - float - 41 - - NSHorizonalPagination - - coded - BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG - - NSLeftMargin - - float - 18 - - NSPaperSize - - size - {612, 792} - - NSPrintReverseOrientation - - int - 0 - - NSRightMargin - - float - 18 - - NSTopMargin - - float - 18 - - - PrintOnePage - - ReadOnly - NO - RowAlign - 1 - RowSpacing - 36 - SheetTitle - Canvas 1 - SmartAlignmentGuidesActive - YES - SmartDistanceGuidesActive - YES - UniqueID - 1 - UseEntirePage - - VPages - 1 - WindowInfo - - CurrentSheet - 0 - ExpandedCanvases - - - name - Canvas 1 - - - Frame - {{367, 6}, {710, 872}} - ListView - - OutlineWidth - 142 - RightSidebar - - ShowRuler - - Sidebar - - SidebarWidth - 120 - VisibleRegion - {{143.5, 183}, {287.5, 366.5}} - Zoom - 2 - ZoomValues - - - Canvas 1 - 2 - 1 - - - - - diff --git a/examples/Interactive Widgets/images/WidgetArch.png b/examples/Interactive Widgets/images/WidgetArch.png deleted file mode 100644 index 9fadae7fce..0000000000 Binary files a/examples/Interactive Widgets/images/WidgetArch.png and /dev/null differ diff --git a/examples/Interactive Widgets/images/WidgetModelView.graffle b/examples/Interactive Widgets/images/WidgetModelView.graffle deleted file mode 100644 index 8a559c5097..0000000000 --- a/examples/Interactive Widgets/images/WidgetModelView.graffle +++ /dev/null @@ -1,523 +0,0 @@ - - - - - ActiveLayerIndex - 0 - ApplicationVersion - - com.omnigroup.OmniGraffle - 139.18.0.187838 - - AutoAdjust - - BackgroundGraphic - - Bounds - {{0, 0}, {576, 733}} - Class - SolidGraphic - ID - 2 - Style - - shadow - - Draws - NO - - stroke - - Draws - NO - - - - BaseZoom - 0 - CanvasOrigin - {0, 0} - ColumnAlign - 1 - ColumnSpacing - 36 - CreationDate - 2014-07-06 03:46:05 +0000 - Creator - bgranger - DisplayScale - 1 0/72 in = 1 0/72 in - GraphDocumentVersion - 8 - GraphicsList - - - Bounds - {{230.33332316080816, 214.66666666666825}, {171, 15}} - Class - ShapedGraphic - FitText - YES - Flow - Resize - ID - 21 - Shape - Rectangle - Style - - fill - - Draws - NO - - shadow - - Draws - NO - - stroke - - Draws - NO - - - Text - - Pad - 0 - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf200 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 frontend (HTML/JavaScript)} - VerticalPad - 0 - - Wrap - NO - - - Bounds - {{70.166664123535156, 214.66667683919241}, {95, 15}} - Class - ShapedGraphic - FitText - YES - Flow - Resize - ID - 20 - Shape - Rectangle - Style - - fill - - Draws - NO - - shadow - - Draws - NO - - stroke - - Draws - NO - - - Text - - Pad - 0 - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf200 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 Kernel (Python)} - VerticalPad - 0 - - Wrap - NO - - - Class - LineGraphic - Head - - ID - 8 - - ID - 18 - Points - - {302.62321350991539, 355.71147093607129} - {329.06618954727776, 386.2881834750354} - - Style - - stroke - - HeadArrow - FilledArrow - Legacy - - Pattern - 1 - TailArrow - FilledArrow - - - Tail - - ID - 6 - - - - Class - LineGraphic - Head - - ID - 7 - - ID - 16 - Points - - {302.60973386333222, 314.95496159151998} - {329.03248543221167, 284.3780603888232} - - Style - - stroke - - HeadArrow - FilledArrow - Legacy - - Pattern - 1 - TailArrow - FilledArrow - - - Tail - - ID - 6 - - - - Class - LineGraphic - Head - - ID - 6 - - ID - 15 - Points - - {143.33332567510072, 335.32575675071013} - {229.83332831581788, 335.30805933679687} - - Style - - stroke - - HeadArrow - FilledArrow - Legacy - - Pattern - 1 - TailArrow - FilledArrow - - - Tail - - ID - 5 - - - - Bounds - {{291.99996948242188, 386.66658655802428}, {109.33333587646484, 40}} - Class - ShapedGraphic - ID - 8 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf200 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 widget View} - - - - Bounds - {{291.99998982747394, 243.99996948241886}, {109.33333587646484, 40}} - Class - ShapedGraphic - ID - 7 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf200 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 widget View} - - - - Bounds - {{230.33332824706363, 315.33327865600415}, {109.33333587646484, 40}} - Class - ShapedGraphic - ID - 6 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf200 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 widget model} - - - - Bounds - {{70.166661580401851, 315.33329264322913}, {72.666664123535156, 40}} - Class - ShapedGraphic - ID - 5 - Shape - Rectangle - Style - - shadow - - Draws - NO - - - Text - - Text - {\rtf1\ansi\ansicpg1252\cocoartf1265\cocoasubrtf200 -\cocoascreenfonts1{\fonttbl\f0\fnil\fcharset0 xkcd-Regular;} -{\colortbl;\red255\green255\blue255;} -\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\pardirnatural\qc - -\f0\fs24 \cf0 widget} - - - - GridInfo - - GuidesLocked - NO - GuidesVisible - YES - HPages - 1 - ImageCounter - 1 - KeepToScale - - Layers - - - Lock - NO - Name - Layer 1 - Print - YES - View - YES - - - LayoutInfo - - Animate - NO - circoMinDist - 18 - circoSeparation - 0.0 - layoutEngine - dot - neatoSeparation - 0.0 - twopiSeparation - 0.0 - - LinksVisible - NO - MagnetsVisible - NO - MasterSheets - - ModificationDate - 2014-07-06 03:57:02 +0000 - Modifier - bgranger - NotesVisible - NO - Orientation - 2 - OriginVisible - NO - PageBreaks - YES - PrintInfo - - NSBottomMargin - - float - 41 - - NSHorizonalPagination - - coded - BAtzdHJlYW10eXBlZIHoA4QBQISEhAhOU051bWJlcgCEhAdOU1ZhbHVlAISECE5TT2JqZWN0AIWEASqEhAFxlwCG - - NSLeftMargin - - float - 18 - - NSPaperSize - - size - {612, 792} - - NSPrintReverseOrientation - - int - 0 - - NSRightMargin - - float - 18 - - NSTopMargin - - float - 18 - - - PrintOnePage - - ReadOnly - NO - RowAlign - 1 - RowSpacing - 36 - SheetTitle - Canvas 1 - SmartAlignmentGuidesActive - YES - SmartDistanceGuidesActive - YES - UniqueID - 1 - UseEntirePage - - VPages - 1 - WindowInfo - - CurrentSheet - 0 - ExpandedCanvases - - - name - Canvas 1 - - - Frame - {{17, 3}, {1112, 875}} - ListView - - OutlineWidth - 142 - RightSidebar - - ShowRuler - - Sidebar - - SidebarWidth - 120 - VisibleRegion - {{0, 105.33333333333333}, {556, 490.66666666666669}} - Zoom - 1.5 - ZoomValues - - - Canvas 1 - 1.5 - 1 - - - - - diff --git a/examples/Interactive Widgets/images/WidgetModelView.png b/examples/Interactive Widgets/images/WidgetModelView.png deleted file mode 100644 index f641f241a1..0000000000 Binary files a/examples/Interactive Widgets/images/WidgetModelView.png and /dev/null differ diff --git a/ipython_widgets/__init__.py b/ipython_widgets/__init__.py deleted file mode 100644 index 982183cd1c..0000000000 --- a/ipython_widgets/__init__.py +++ /dev/null @@ -1 +0,0 @@ -from .widgets import * diff --git a/ipython_widgets/install.py b/ipython_widgets/install.py deleted file mode 100644 index 093e8ad62e..0000000000 --- a/ipython_widgets/install.py +++ /dev/null @@ -1,21 +0,0 @@ -#!/usr/bin/env python -# Thanks @takluyver for your cite2c install.py. -from os.path import dirname, abspath, join as pjoin -from jupyter_notebook.nbextensions import install_nbextension -from jupyter_notebook.services.config import ConfigManager -import argparse - -parser = argparse.ArgumentParser(description="Installs the IPython widgets") -parser.add_argument("-u", "--user", help="Install as current user", action="store_true") -parser.add_argument("-s", "--symlink", help="Symlink instead of copying files", action="store_true") -args = parser.parse_args() - -print("Installing nbextension ...") -staticdir = pjoin(dirname(abspath(__file__)), 'static') -install_nbextension(staticdir, destination='widgets', user=args.user, symlink=args.symlink) - -print("Enabling the extension ...") -cm = ConfigManager() -cm.update('notebook', {"load_extensions": {"widgets/notebook/js/extension": True}}) - -print("Done.") diff --git a/ipython_widgets/static/notebook/js/extension.js b/ipython_widgets/static/notebook/js/extension.js deleted file mode 100644 index a929fc92fa..0000000000 --- a/ipython_widgets/static/notebook/js/extension.js +++ /dev/null @@ -1,66 +0,0 @@ -// Copyright (c) Jupyter Development Team. -// Distributed under the terms of the Modified BSD License. - -define([ - 'nbextensions/widgets/widgets/js/init', - 'nbextensions/widgets/notebook/js/widgetarea', - 'base/js/events' -], function(widgetmanager, widgetarea, events) { - "use strict"; - - /** - * Create a widget manager for a kernel instance. - */ - var handle_kernel = function(kernel) { - if (kernel.comm_manager && kernel.widget_manager === undefined) { - - // Create a widget manager instance. Use the global - // IPython.notebook handle. - var manager = new widgetmanager.WidgetManager(kernel.comm_manager, IPython.notebook); - - // Store a handle to the manager so we know not to - // another for this kernel. This also is a convinience - // for the user. - kernel.widget_manager = manager; - } - }; - - // If a kernel already exists, create a widget manager. - if (IPython.notebook && IPython.notebook.kernel) { - handle_kernel(IPython.notebook.kernel); - } - // When the kernel is created, create a widget manager. - events.on('kernel_created.Kernel kernel_created.Session', function(event, data) { - handle_kernel(data.kernel); - }); - - /** - * Creates a widgetarea for the cell if it is a CodeCell. - * If the cell isn't a CodeCell, no action is taken. - */ - var handle_cell = function(cell) { - if (cell.cell_type==='code') { - var area = new widgetarea.WidgetArea(cell); - cell.widgetarea = area; - } - }; - - // Create widget areas for cells that already exist. - var cells = IPython.notebook.get_cells(); - for (var i = 0; i < cells.length; i++) { - handle_cell(cells[i]); - } - - // Listen to cell creation and deletion events. When a - // cell is created, create a widget area for that cell. - events.on('create.Cell', function(event, data) { - handle_cell(data.cell); - }); - // When a cell is deleted, delete the widget area if it - // exists. - events.on('delete.Cell', function(event, data) { - if (data.cell && data.cell.widgetarea) { - data.cell.widgetarea.dispose(); - } - }); -}); diff --git a/ipython_widgets/static/notebook/js/widgetarea.js b/ipython_widgets/static/notebook/js/widgetarea.js deleted file mode 100644 index b9fbaa3d06..0000000000 --- a/ipython_widgets/static/notebook/js/widgetarea.js +++ /dev/null @@ -1,163 +0,0 @@ -// Copyright (c) Jupyter Development Team. -// Distributed under the terms of the Modified BSD License. - -define(['jquery', 'base/js/events'], function($, events) { - - /** - * WidgetArea - */ - var WidgetArea = function(cell) { - this.widget_views = []; - - this._cell = cell; - this._widgets_live = true; - this.disposed = false; - - this._create_elements(); - this._bind_events(); - } - - /** - * Display a widget view in the cell. - */ - WidgetArea.prototype.display_widget_view = function(view_promise) { - - // Display a dummy element - var dummy = $('
'); - this.widget_subarea.append(dummy); - - // Display the view. - var that = this; - return view_promise.then(function(view) { - that.widget_area.show(); - dummy.replaceWith(view.$el); - that.widget_views.push(view); - - // Check the live state of the view's model. - if (view.model.comm_live) { - that._widget_live(view); - } else { - that._widget_dead(view); - } - - // Listen to comm live events for the view. - view.on('comm:live', that._widget_live, that); - view.on('comm:dead', that._widget_dead, that); - return view; - }); - }; - - /** - * Disposes of the widget area and its widgets. - */ - WidgetArea.prototype.dispose = function() { - this._clear(); - this.disposed = true; - }; - - /** - * Creates the elements of the widget area and appends them - * to the associated cell. - */ - WidgetArea.prototype._create_elements = function() { - var widget_area = $('
') - .addClass('widget-area') - .hide(); - this.widget_area = widget_area; - var widget_prompt = $('
') - .addClass('prompt') - .appendTo(widget_area); - var widget_subarea = $('
') - .addClass('widget-subarea') - .appendTo(widget_area); - this.widget_subarea = widget_subarea; - var that = this; - var widget_clear_buton = $('