\n",
"```\n",
"\n",
"You can extract the content to bytes:\n",
"\n",
"```python\n",
"uploaded_file.content.tobytes()\n",
"#=> b'This is the content of example.txt.\\n'\n",
"```\n",
"\n",
"If the file is a text file, you can get the contents as a string by [decoding it](https://docs.python.org/3/library/codecs.html):\n",
"\n",
"```python\n",
"import codecs\n",
"codecs.decode(uploaded_file.content, encoding=\"utf-8\")\n",
"#=> 'This is the content of example.txt.\\n'\n",
"```\n",
"\n",
"You can save the uploaded file to the filesystem from the kernel:\n",
"\n",
"```python\n",
"with open(\"./saved-output.txt\", \"wb\") as fp:\n",
" fp.write(uploaded_file.content)\n",
"```\n",
"\n",
"To convert the uploaded file into a Pandas dataframe, you can use a [BytesIO object](https://docs.python.org/3/library/io.html#binary-i-o):\n",
"\n",
"```python\n",
"import io\n",
"import pandas as pd\n",
"pd.read_csv(io.BytesIO(uploaded_file.content))\n",
"```\n",
"\n",
"If the uploaded file is an image, you can visualize it with an [image](#Image) widget:\n",
"\n",
"```python\n",
"widgets.Image(value=uploaded_file.content.tobytes())\n",
"```\n",
"\n",
"\n",
"Changes in *ipywidgets 8*:\n",
" \n",
"The `FileUpload` changed significantly in ipywidgets 8:\n",
" \n",
"- The `.value` traitlet is now a list of dictionaries, rather than a dictionary mapping the uploaded name to the content. To retrieve the original form, use `{f[\"name\"]: f.content.tobytes() for f in uploader.value}`.\n",
"- The `.data` traitlet has been removed. To retrieve it, use `[f.content.tobytes() for f in uploader.value]`.\n",
"- The `.metadata` traitlet has been removed. To retrieve it, use `[{k: v for k, v in f.items() if k != \"content\"} for f in w.value]`.\n",
"
\n",
"\n",
"\n",
"Warning: When using the `FileUpload` Widget, uploaded file content might be saved in the notebook if widget state is saved.\n",
"
"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Controller\n",
"\n",
"The `Controller` allows a game controller to be used as an input device."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"widgets.Controller(\n",
" index=0,\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Container/Layout widgets\n",
"\n",
"These widgets are used to hold other widgets, called children. Each has a `children` property that may be set either when the widget is created or later."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Box"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"items = [widgets.Label(str(i)) for i in range(4)]\n",
"widgets.Box(items)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### HBox"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"items = [widgets.Label(str(i)) for i in range(4)]\n",
"widgets.HBox(items)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### VBox"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"items = [widgets.Label(str(i)) for i in range(4)]\n",
"left_box = widgets.VBox([items[0], items[1]])\n",
"right_box = widgets.VBox([items[2], items[3]])\n",
"widgets.HBox([left_box, right_box])"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### GridBox\n",
"\n",
"This box uses the HTML Grid specification to lay out its children in two dimensional grid. The example below lays out the 8 items inside in 3 columns and as many rows as needed to accommodate the items."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"items = [widgets.Label(str(i)) for i in range(8)]\n",
"widgets.GridBox(items, layout=widgets.Layout(grid_template_columns=\"repeat(3, 100px)\"))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Accordion"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"accordion = widgets.Accordion(children=[widgets.IntSlider(), widgets.Text()], titles=('Slider', 'Text'))\n",
"accordion"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Tabs\n",
"\n",
"In this example the children are set after the tab is created. Titles for the tabs are set in the same way they are for `Accordion`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"tab_contents = ['P0', 'P1', 'P2', 'P3', 'P4']\n",
"children = [widgets.Text(description=name) for name in tab_contents]\n",
"tab = widgets.Tab()\n",
"tab.children = children\n",
"tab.titles = [str(i) for i in range(len(children))]\n",
"tab"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Stack\n",
"\n",
"The `Stack` widget can have multiple children widgets as for `Tab` and `Accordion`, but only shows one at a time depending on the value of ``selected_index``:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"button = widgets.Button(description='Click here')\n",
"slider = widgets.IntSlider()\n",
"stack = widgets.Stack([button, slider], selected_index=0)\n",
"stack # will show only the button"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This can be used in combination with another selection-based widget to show different widgets depending on the selection:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"dropdown = widgets.Dropdown(options=['button', 'slider'])\n",
"widgets.jslink((dropdown, 'index'), (stack, 'selected_index'))\n",
"widgets.VBox([dropdown, stack])"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Accordion, Tab, and Stack use `selected_index`, not value\n",
"\n",
"Unlike the rest of the widgets discussed earlier, the container widgets `Accordion` and `Tab` update their `selected_index` attribute when the user changes which accordion or tab is selected. That means that you can both see what the user is doing *and* programmatically set what the user sees by setting the value of `selected_index`.\n",
"\n",
"Setting `selected_index = None` closes all of the accordions or deselects all tabs."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In the cells below try displaying or setting the `selected_index` of the `tab` and/or `accordion`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"tab.selected_index = 3"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"accordion.selected_index = None"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Nesting tabs and accordions\n",
"\n",
"Tabs and accordions can be nested as deeply as you want. If you have a few minutes, try nesting a few accordions or putting an accordion inside a tab or a tab inside an accordion. \n",
"\n",
"The example below makes a couple of tabs with an accordion children in one of them"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"tab_nest = widgets.Tab()\n",
"tab_nest.children = [accordion, accordion]\n",
"tab_nest.titles = ('An accordion', 'Copy of the accordion')\n",
"tab_nest"
]
},
{
"cell_type": "markdown",
"metadata": {
"tags": ["remove-cell"]
},
"source": [
"[Index](Index.ipynb) - [Back](Widget%20Basics.ipynb) - [Next](Output%20Widget.ipynb)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"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.10.5"
}
},
"nbformat": 4,
"nbformat_minor": 4
}