120 lines
3.3 KiB
Plaintext
120 lines
3.3 KiB
Plaintext
{
|
|
"cells": [
|
|
{
|
|
"cell_type": "markdown",
|
|
"metadata": {},
|
|
"source": [
|
|
"# Which multiplication table do you want to learn?\n",
|
|
"\n",
|
|
"In this example notebook we demonstrate how Voilà can render different Jupyter widgets using [GridspecLayout](https://ipywidgets.readthedocs.io/en/latest/examples/Layout%20Templates.html#Grid-layout)"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": 1,
|
|
"metadata": {
|
|
"scrolled": false
|
|
},
|
|
"outputs": [
|
|
{
|
|
"data": {
|
|
"application/vnd.jupyter.widget-view+json": {
|
|
"model_id": "19dcc46af51049c9a9e26568b76aa789",
|
|
"version_major": 2,
|
|
"version_minor": 0
|
|
},
|
|
"text/plain": [
|
|
"GridspecLayout(children=(Dropdown(index=1, layout=Layout(grid_area='widget001'), options=(1, 2, 3, 4, 5, 6, 7,…"
|
|
]
|
|
},
|
|
"execution_count": 1,
|
|
"metadata": {},
|
|
"output_type": "execute_result"
|
|
}
|
|
],
|
|
"source": [
|
|
"from ipywidgets import GridspecLayout, Button, BoundedIntText, Valid, Layout, Dropdown\n",
|
|
"\n",
|
|
"def create_expanded_button(description, button_style):\n",
|
|
" return Button(description=description, button_style=button_style, layout=Layout(height='auto', width='auto'))\n",
|
|
" \n",
|
|
"rows = 11\n",
|
|
"columns = 6\n",
|
|
"\n",
|
|
"gs = GridspecLayout(rows, columns)\n",
|
|
"\n",
|
|
"def on_result_change(change):\n",
|
|
" row = int(change[\"owner\"].layout.grid_row)\n",
|
|
" gs[row, 5].value = gs[0, 0].value * row == change[\"new\"]\n",
|
|
" \n",
|
|
"def on_multipler_change(change):\n",
|
|
" for i in range(1, rows):\n",
|
|
" gs[i, 0].description = str(change[\"new\"])\n",
|
|
" gs[i, 4].max = change[\"new\"] * 10\n",
|
|
" gs[i, 4].value = 1\n",
|
|
" gs[i, 4].step = change[\"new\"]\n",
|
|
" gs[i, 5].value = False\n",
|
|
"\n",
|
|
"gs[0, 0] = Dropdown(\n",
|
|
" options=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\n",
|
|
" value=2,\n",
|
|
")\n",
|
|
"gs[0, 0].observe(on_multipler_change, names=\"value\")\n",
|
|
"multiplier = gs[0, 0].value\n",
|
|
"\n",
|
|
"for i in range(1, rows):\n",
|
|
" gs[i, 0] = create_expanded_button(str(multiplier), \"\")\n",
|
|
" gs[i, 1] = create_expanded_button(\"*\", \"\")\n",
|
|
" gs[i, 2] = create_expanded_button(str(i), \"info\")\n",
|
|
" gs[i, 3] = create_expanded_button(\"=\", \"\")\n",
|
|
"\n",
|
|
" gs[i, 4] = BoundedIntText(\n",
|
|
" min=0,\n",
|
|
" max=multiplier * 10,\n",
|
|
" layout=Layout(grid_row=str(i)),\n",
|
|
" value=1,\n",
|
|
" step=multiplier,\n",
|
|
" disabled=False\n",
|
|
" )\n",
|
|
"\n",
|
|
" gs[i, 5] = Valid(\n",
|
|
" value=False,\n",
|
|
" description='Valid!',\n",
|
|
" )\n",
|
|
"\n",
|
|
" gs[i, 4].observe(on_result_change, names='value')\n",
|
|
"\n",
|
|
"gs"
|
|
]
|
|
},
|
|
{
|
|
"cell_type": "code",
|
|
"execution_count": null,
|
|
"metadata": {},
|
|
"outputs": [],
|
|
"source": []
|
|
}
|
|
],
|
|
"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.8"
|
|
}
|
|
},
|
|
"nbformat": 4,
|
|
"nbformat_minor": 2
|
|
}
|