From fb71668fe992a0dbd8fbe7606e018db051f54602 Mon Sep 17 00:00:00 2001 From: David Bau Date: Mon, 2 May 2022 16:32:58 -0400 Subject: [PATCH] Add button example. --- notebooks/using_show_and_widgets.ipynb | 137 ++++++++++++++++++++++++- 1 file changed, 132 insertions(+), 5 deletions(-) diff --git a/notebooks/using_show_and_widgets.ipynb b/notebooks/using_show_and_widgets.ipynb index d92d5ec..cd3d3cc 100644 --- a/notebooks/using_show_and_widgets.ipynb +++ b/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,