From 3136ec3e828eefa917deccab0560de36f8f907e9 Mon Sep 17 00:00:00 2001 From: David Bau Date: Sat, 7 May 2022 01:13:49 -0400 Subject: [PATCH] Remove image margins; improve examples. --- baukit/show.py | 2 +- notebooks/using_show_and_widgets.ipynb | 32 +++++++++----------------- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/baukit/show.py b/baukit/show.py index 75caa42..e145034 100644 --- a/baukit/show.py +++ b/baukit/show.py @@ -346,7 +346,7 @@ def render_image(obj, out): buf.close() except: return False - emit('img', attr(src=src), style(flex='0'), out=out) + emit('img', attr(src=src), style(flex=0, margin=0), out=out) def render_pre(obj, out): ''' diff --git a/notebooks/using_show_and_widgets.ipynb b/notebooks/using_show_and_widgets.ipynb index 2fa98ed..da8179d 100644 --- a/notebooks/using_show_and_widgets.ipynb +++ b/notebooks/using_show_and_widgets.ipynb @@ -126,7 +126,7 @@ "source": [ "## Showing images\n", "\n", - "Unlike `display()`, `show()` knows how to directly render PIL images and matplotlib figures and other types of data. It also provides more powerful layout in HTML and gives you much more control over CSS formatting. " + "Unlike `display()`, `show()` knows how to directly render PIL images and matplotlib figures and other types of data." ] }, { @@ -196,16 +196,6 @@ "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), instead of as spaced-out columns." ] }, - { - "cell_type": "code", - "execution_count": null, - "id": "3ca1ac34", - "metadata": {}, - "outputs": [], - "source": [ - "show.WRAP" - ] - }, { "cell_type": "code", "execution_count": null, @@ -213,7 +203,7 @@ "metadata": {}, "outputs": [], "source": [ - "show(show.TIGHT, show.style(gap=0),\n", + "show(show.TIGHT,\n", " [[[show.style(font='italic 24px serif'), 'lots of data',\n", " show.style(background='gainsboro'),\n", " show.WRAP, [f'({a},{b})' for a in range(i) for b in range(j)]]\n", @@ -229,7 +219,7 @@ "source": [ "## Showing widgets\n", "\n", - "baukit also contains a bunch of widgets like `Range()` and `Numberbox()` that can be shown and laid out:" + "baukit also contains a bunch of widgets like `Range()` and `Numberbox()` that can be shown and included in a layout." ] }, { @@ -299,9 +289,9 @@ "outputs": [], "source": [ "nb2 = Numberbox()\n", - "ra2 = Range(max=1, step=0.001)\n", + "ra2 = Range(max=1, step=0.001, value=0.5)\n", "\n", - "ra2.value = nb2.prop('value')\n", + "nb2.value = ra2.prop('value')\n", "\n", "show([[nb2, show.style(flex=8), ra2]])\n", "show(ra2)\n" @@ -363,7 +353,7 @@ }, { "cell_type": "markdown", - "id": "cf51f9a1", + "id": "dd64396b", "metadata": {}, "source": [ "## Menus, Choices, and Datalists\n", @@ -374,7 +364,7 @@ { "cell_type": "code", "execution_count": null, - "id": "c4a604f3", + "id": "dee0f19f", "metadata": {}, "outputs": [], "source": [ @@ -389,7 +379,7 @@ }, { "cell_type": "markdown", - "id": "dcf24e02", + "id": "16e9a0a0", "metadata": {}, "source": [ "Radio button choice arrays can be arranged horizontally or vertically based on the level of nesting." @@ -398,7 +388,7 @@ { "cell_type": "code", "execution_count": null, - "id": "1fd9c71d", + "id": "c2769d0b", "metadata": {}, "outputs": [], "source": [ @@ -414,7 +404,7 @@ }, { "cell_type": "markdown", - "id": "690f2972", + "id": "1fb36e03", "metadata": {}, "source": [ "A Datalist allows free-form input while also providing a dropdown menu for choices." @@ -423,7 +413,7 @@ { "cell_type": "code", "execution_count": null, - "id": "ba30d08a", + "id": "24e6bbf5", "metadata": {}, "outputs": [], "source": [