Skip to content

Commit

Permalink
Merge pull request #3 from jtpio/dnd-notebook
Browse files Browse the repository at this point in the history 
Update Drag and Drop example notebook
  • Loading branch information
@wolfv
wolfv authored Jan 20, 2020
2 parents a84d9e7 + e78bebe commit e9a3a0f
Showing 1 changed file with 73 additions and 55 deletions.
128 changes: 73 additions & 55 deletions docs/source/examples/Drag and Drop.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,25 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"## Draggable Label"
"# Drag and Drop\n",
"\n",
"In this notebook we introduce the `DraggableBox` and `DropBox` widgets, that can be used to drag and drop widgets."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Draggable Box"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"`DraggableLabel` is a label that can be dragged and dropped to other fields."
"`DraggableBox` is a widget that wraps other widgets and makes them draggable.\n",
"\n",
"For example we can build a custom `DraggableLabel` as follows:"
]
},
{
Expand All @@ -20,7 +31,7 @@
"metadata": {},
"outputs": [],
"source": [
"from ipywidgets import Label, DraggableBox, DropBox, Textarea, VBox"
"from ipywidgets import Label, DraggableBox, Textarea"
]
},
{
Expand All @@ -29,9 +40,6 @@
"metadata": {},
"outputs": [],
"source": [
"def set_drag_data(box):\n",
" box.drag_data['text/plain'] = box.children[0].value\n",
"\n",
"def DraggableLabel(value, draggable=True):\n",
" box = DraggableBox(Label(value))\n",
" box.draggable = draggable\n",
Expand All @@ -51,7 +59,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"You can drag this label anywhere (could be your shell etc.), but also to a text area:"
"You can drag this label anywhere (could be your shell, etc.), but also to a text area:"
]
},
{
Expand All @@ -67,14 +75,9 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"## `on_drop` handler"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"`DraggableLabel` can also become the drop zone (you can drop other stuff on it), if you implement the `on_drop` handler."
"## Drop Box\n",
"\n",
"`DropBox` is a widget that can receive other `DraggableBox` widgets."
]
},
{
Expand All @@ -83,15 +86,18 @@
"metadata": {},
"outputs": [],
"source": [
"l1 = DraggableLabel(\"Drag me\")\n",
"l1"
"from ipywidgets import DropBox\n",
"\n",
"\n",
"box = DropBox(Label(\"Drop on me\"))\n",
"box"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now, drag this label on the label below."
"`DropBox` can become the drop zone (you can drop other stuff on it) by implementing the `on_drop` handler:"
]
},
{
Expand All @@ -100,21 +106,36 @@
"metadata": {},
"outputs": [],
"source": [
"l2 = DropBox(Label(\"Drop on me\"))\n",
"def on_drop_handler(widget, data):\n",
" \"\"\"\"Arguments:\n",
" \n",
" widget : widget class\n",
" widget : Widget class\n",
" widget on which something was dropped\n",
" \n",
" data : dict\n",
" extra data sent from the dragged widget\"\"\"\n",
" print(data)\n",
" text = data['text/plain']\n",
" widget.child.value = \"congrats, you dropped '{}'\".format(text)\n",
"\n",
"l2.on_drop(on_drop_handler)\n",
"l2"
"box.on_drop(on_drop_handler)\n",
"box"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now, drag this label on the box above."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"label = DraggableLabel(\"Drag me\")\n",
"label"
]
},
{
Expand All @@ -135,14 +156,14 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"If you have more specific needs for the drop behaviour you can also use DropBox widgets, which implements `on_drop` handlers."
"If you have more specific needs for the drop behavior you can implement them in the DropBox `on_drop` handler."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This DropBox will replace elements with text of the dropped element (works also for stuff which is not widget):"
"This DropBox creates new `Button` widgets using the text data of the `DraggableLabel` widget."
]
},
{
Expand All @@ -151,7 +172,7 @@
"metadata": {},
"outputs": [],
"source": [
"from ipywidgets import DropBox, Layout, Button\n",
"from ipywidgets import Button, Layout\n",
"\n",
"label = DraggableLabel(\"Drag me\", draggable=True)\n",
"label"
Expand All @@ -170,12 +191,11 @@
"metadata": {},
"outputs": [],
"source": [
"box = DropBox(Label(\"Drop here!\"),\n",
" layout=Layout(width='200px', height='100px'))\n",
"def on_drop(widget, data):\n",
" text = data['text/plain']\n",
" widget.child = Button(description=text.upper())\n",
"\n",
"box = DropBox(Label(\"Drop here!\"), layout=Layout(width='200px', height='100px'))\n",
"box.on_drop(on_drop)\n",
"box"
]
Expand All @@ -184,14 +204,14 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"## Adding widgets to container with a handler"
"## Adding widgets to a container with a handler"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can also reproduce the Box example (adding elements to Box container) using `DropBox` with a custom handler:"
"You can also reproduce the Box example (adding elements to a `Box` container) using a `DropBox` with a custom handler:"
]
},
{
Expand All @@ -200,8 +220,6 @@
"metadata": {},
"outputs": [],
"source": [
"from ipywidgets import DropBox, Layout, Label\n",
"\n",
"label = DraggableLabel(\"Drag me\", draggable=True)\n",
"label"
]
Expand All @@ -212,13 +230,13 @@
"metadata": {},
"outputs": [],
"source": [
"box = DropBox(VBox([Label('Drop here')]), \n",
" layout=Layout(width='200px', height='100px'))\n",
"from ipywidgets import VBox\n",
"\n",
"def on_drop(widget, data):\n",
" source = data['widget']\n",
" widget.child.children += (source, )\n",
"\n",
"box = DropBox(VBox([Label('Drop here')]), layout=Layout(width='200px', height='100px'))\n",
"box.on_drop(on_drop)\n",
"box"
]
Expand All @@ -227,7 +245,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"**Explanation**: Label widget sets data on the drop event of type `application/x-widget` that contains the widget id of the dragged widget."
"**Explanation**: The `Label` widget sets data on the drop event of type `application/x-widget` that contains the widget id of the dragged widget."
]
},
{
Expand All @@ -241,7 +259,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"You can also set custom data on `DraggableLabel` that can be retreived and used in `on_drop` event."
"You can also set custom data on a `DraggableBox` widget that can be retrieved and used in `on_drop` event."
]
},
{
Expand All @@ -252,9 +270,9 @@
},
"outputs": [],
"source": [
"l = DraggableLabel(\"Drag me\", draggable=True)\n",
"l.drag_data = {'application/custom-data' : 'Custom data'}\n",
"l"
"label = DraggableLabel(\"Drag me\", draggable=True)\n",
"label.drag_data = {'application/custom-data' : 'Custom data'}\n",
"label"
]
},
{
Expand All @@ -263,8 +281,6 @@
"metadata": {},
"outputs": [],
"source": [
"l2 = DropBox(Label(\"Drop here\"))\n",
"\n",
"def on_drop_handler(widget, data):\n",
" \"\"\"\"Arguments:\n",
" \n",
Expand All @@ -277,12 +293,12 @@
" text = data['text/plain']\n",
" widget_id = data['widget'].model_id\n",
" custom_data = data['application/custom-data']\n",
" widget.child.value = (\"you dropped widget ID '{}...' \"\n",
" \"with text '{}' and custom data '{}'\"\n",
" ).format(widget_id[:5], text, custom_data)\n",
" value = \"you dropped widget ID '{}...' with text '{}' and custom data '{}'\".format(widget_id[:5], text, custom_data)\n",
" widget.child.value = value\n",
"\n",
"l2.on_drop(on_drop_handler)\n",
"l2"
"box = DropBox(Label(\"Drop here\"))\n",
"box.on_drop(on_drop_handler)\n",
"box"
]
},
{
Expand All @@ -296,7 +312,7 @@
"cell_type": "markdown",
"metadata": {},
"source": [
"`DraggableBox` can be used to wrap any widget so that it can be dragged and dropped."
"`DraggableBox` can be used to wrap any widget so that it can be dragged and dropped. For example sliders can also be dragged:"
]
},
{
Expand Down Expand Up @@ -361,9 +377,9 @@
"metadata": {},
"outputs": [],
"source": [
"import json\n",
"import bqplot.pyplot as plt\n",
"from ipywidgets import Label, GridspecLayout, DropBox, Layout\n",
"import json"
"from ipywidgets import Label, GridspecLayout, DropBox, Layout"
]
},
{
Expand Down Expand Up @@ -395,12 +411,13 @@
"metadata": {},
"outputs": [],
"source": [
"box = DropBox(Label(\"Drag data from the table and drop it here.\"), layout=Layout(height='500px', width='800px'))\n",
"def box_ondrop(widget, data):\n",
" fig = plt.figure()\n",
" y = json.loads(data['data/app'])\n",
" plt.plot(y)\n",
" widget.child = fig\n",
" \n",
"box = DropBox(Label(\"Drag data from the table and drop it here.\"), layout=Layout(height='500px', width='800px'))\n",
"box.on_drop(box_ondrop)"
]
},
Expand Down Expand Up @@ -454,8 +471,8 @@
"metadata": {},
"outputs": [],
"source": [
"from ipywidgets import SelectMultiple, Layout, DraggableBox, DropBox, HBox\n",
"import bqplot as bq\n",
"from ipywidgets import SelectMultiple, Layout, DraggableBox, DropBox, HBox\n",
"\n",
"select_list = SelectMultiple(\n",
" options=['Apples', 'Oranges', 'Pears'],\n",
Expand All @@ -465,10 +482,11 @@
")\n",
"select_box = DraggableBox(select_list, draggable=True)\n",
"\n",
"fruits = {'Apples' : 5,\n",
" 'Oranges' : 1,\n",
" 'Pears': 3}\n",
"\n",
"fruits = {\n",
" 'Apples' : 5,\n",
" 'Oranges' : 1,\n",
" 'Pears': 3\n",
"}\n",
"\n",
"fig = bq.Figure(marks=[], fig_margin = dict(left=50, right=0, top=0, bottom=70))\n",
"fig.layout.height='300px'\n",
Expand Down

0 comments on commit e9a3a0f

Please sign in to comment.