Add button example.

notebooks/using_show_and_widgets.ipynb

@@ -36,6 +36,45 @@
     "show('hello', 'world')"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "d344e964",
+   "metadata": {},
+   "source": [
+    "A doubly nested array shows as a row."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "f407e0d0",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "show([[1,2,3,4,5]])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "30e52379",
+   "metadata": {},
+   "source": [
+    "The first level of nesting stack vertically, so you can make a table by stacking rows."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3f744f5d",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "show([\n",
+    "      [  1,   2,   3,   4,   5],\n",
+    "      ['a', 'b', 'c', 'd', 'e']\n",
+    "     ])"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "8d40a6a9",
@@ -127,6 +166,26 @@
     "      show.style(background='lightgreen'), 4])"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "d28f281e",
+   "metadata": {},
+   "source": [
+    "In the following style we define a style object for our favorite style, so we can use it repeatedly."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "ff350115",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "italic = show.style(background='pink', font='italic 24px serif', border='1px solid black')\n",
+    "\n",
+    "show(['hello', [italic, 'world', italic, 'look at me!']])"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "b78f64fa",
@@ -134,7 +193,17 @@
    "source": [
     "## Tight columns and Wrapped rows\n",
     "\n",
-    "A few useful `show.style` instances are defined as constants.  For example, `show.style(display='inline-flex')` is also called `show.TIGHT`, because it provides a tight layout of rows that are sized to fit the content instead of making the flexbox expand to fill its container.  Similaly `show.WRAP` makes a row that packs the data to the left and wraps it (like the way text flows), instad of as spaced-out columns."
+    "A few useful `show.style` instances are predefined as constants.  For example, `show.style(display='inline-flex')` is also called `show.TIGHT`, because it provides a tight layout of rows that are sized to fit the content instead of making the flexbox expand to fill its container.  Similaly `show.WRAP` makes a row that packs the data to the left and wraps it (like the way text flows), instad of as spaced-out columns."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3ca1ac34",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "show.WRAP"
    ]
   },
   {
@@ -196,7 +265,7 @@
    "outputs": [],
    "source": [
     "import random\n",
-    "nb.value = random.randrange(100)"
+    "ra.value = random.randrange(100)"
    ]
   },
   {
@@ -234,10 +303,59 @@
     "\n",
     "ra2.value = nb2.prop('value')\n",
     "\n",
-    "show([[nb2, show.style(flex=6), ra2]])\n",
+    "show([[nb2, show.style(flex=8), ra2]])\n",
     "show(ra2)\n"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "4d6cb70a",
+   "metadata": {},
+   "source": [
+    "## Making buttons, and responding to events\n",
+    "\n",
+    "Widgets fire events when their state changes, and you can have those events call a function using the `on()` method.\n",
+    "For example, the following button randomizes the sliders above."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4aa18606",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from baukit import Button\n",
+    "\n",
+    "btn = Button('Click Me')\n",
+    "def dosomething():\n",
+    "    ra2.value = random.randrange(100) / 100\n",
+    "btn.on('click', dosomething)\n",
+    "show(show.style(fontSize=20, height=28), btn)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "498e7872",
+   "metadata": {},
+   "source": [
+    "You can also respond to any property change using the `on()` method.  Here we trace whenever ra2 changes."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "834c8ead",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def say_hello():\n",
+    "    print(f'ra3 is {ra3.value}')\n",
+    "ra3 = Range()\n",
+    "ra3.on('value', say_hello)\n",
+    "show(ra3)"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "8b8a23a9",
@@ -271,7 +389,8 @@
     "    ax.plot(x, amplitude * y)\n",
     "    ax.set_ylim(-5, 5)\n",
     "\n",
-    "show([[PlotWidget(myplot, format='svg', figsize=(5,3.5)), PlotWidget(myplot, frequency=2, amplitude=3, format='svg', figsize=(5,3.5))]])"
+    "show([[PlotWidget(myplot, figsize=(5,3.5)),\n",
+    "       PlotWidget(myplot, frequency=2, amplitude=3, figsize=(5,3.5))]])"
    ]
   },
   {
@@ -301,6 +420,14 @@
     "                  ['frequency', show.style(flex=10), freq_ra, freq_nb],\n",
     "                  ['amplitude', show.style(flex=10), amp_ra, amp_nb]])"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "e60ab5fa",
+   "metadata": {},
+   "source": [
+    "There are many other widgets that come in the kit.  You can read about them in the source code - see `labwidget.py`."
+   ]
   }
  ],
  "metadata": {
@@ -319,7 +446,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.12"
+   "version": "3.9.9"
   }
  },
  "nbformat": 4,