Implement Matplotlib format support and responsive Image sizing (#4514)

holoviz · Mar 9, 2023 · eb57f33 · eb57f33
1 parent f0c64ae
commit eb57f33
Show file tree

Hide file tree

Showing 10 changed files with 570 additions and 89 deletions.
diff --git a/examples/reference/panes/GIF.ipynb b/examples/reference/panes/GIF.ipynb
@@ -23,6 +23,7 @@
     "\n",
     "* **``alt_text``** (str, default=None): alt text to add to the image tag. The alt text is shwon when a user cannot load or display the image. \n",
     "* **``embed``** (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.\n",
+    "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The string to display. If a non-string type is supplied the repr is displayed. \n",
     "* **``style``** (dict): Dictionary specifying CSS styles\n",
@@ -43,7 +44,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "gif_pane = pn.pane.GIF('https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif')\n",
+    "gif_pane = pn.pane.GIF('https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif')\n",
     "\n",
     "gif_pane"
    ]
@@ -52,7 +53,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Like any other pane the ``GIF`` pane can be updated by setting the ``object`` parameter:"
+    "We can scale the size of the image by setting a specific fixed `width` or `height`:"
    ]
   },
   {
@@ -61,7 +62,30 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "gif_pane.object = 'https://upload.wikimedia.org/wikipedia/commons/d/de/Ajax-loader.gif'"
+    "gif_pane.clone(width=100)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Alternatively we can scale the width and height using the `sizing_mode`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.pane.GIF('https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif', sizing_mode='stretch_width')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Note that by default the aspect ratio of the image is fixed, to override this behavior set `fixed_aspect=False` or provide fixed `width` and `height` values."
    ]
   }
  ],

diff --git a/examples/reference/panes/JPG.ipynb b/examples/reference/panes/JPG.ipynb
@@ -23,6 +23,7 @@
     "\n",
     "* **``alt_text``** (str, default=None): alt text to add to the image tag. The alt text is shown when a user cannot load or display the image. \n",
     "* **``embed``** (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.\n",
+    "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The JPEG file to display.  Can be a string pointing to a local or remote file, or an object with a ``_repr_jpg_`` method.\n",
     "* **``style``** (dict): Dictionary specifying CSS styles\n",
@@ -46,7 +47,8 @@
     "jpg_pane = pn.pane.JPG(\n",
     "    'https://assets.holoviz.org/panel/samples/jpeg_sample.jpg',\n",
     "    link_url='https://blog.holoviz.org/panel_0.13.0.html',\n",
-    "    width=500)\n",
+    "    width=800\n",
+    ")\n",
     "\n",
     "jpg_pane"
    ]
@@ -55,7 +57,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Like any other pane, the ``JPG`` pane can be updated by setting the ``object`` parameter:"
+    "We can scale the size of the image by setting a specific fixed `width` or `height`:"
    ]
   },
   {
@@ -64,11 +66,35 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "jpg_pane.param.update(\n",
-    "    object='https://assets.holoviz.org/panel/samples/jpeg_sample2.jpg',\n",
-    "    link_url='https://blog.holoviz.org/panel_0.14.html'\n",
+    "jpg_pane.clone(width=400)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Alternatively we can scale the width and height using the `sizing_mode`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.pane.JPG(\n",
+    "    'https://assets.holoviz.org/panel/samples/jpeg_sample2.jpg',\n",
+    "    link_url='https://blog.holoviz.org/panel_0.14.html',\n",
+    "    sizing_mode='scale_both'\n",
     ")"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Note that by default the aspect ratio of the image is fixed, to override this behavior set `fixed_aspect=False` or provide fixed `width` and `height` values."
+   ]
   }
  ],
  "metadata": {

diff --git a/examples/reference/panes/Matplotlib.ipynb b/examples/reference/panes/Matplotlib.ipynb
@@ -20,6 +20,7 @@
     "#### Parameters:\n",
     "\n",
     "* **``dpi``** (int, default=144): The dots per inch of the exported png\n",
+    "* **``format``** (str, default='png'): The format to render the plot to.\n",
     "* **``interactive``** (boolean, default=False): Whether to use the interactive ipympl backend\n",
     "* **``tight``** (bool, default=False): Automatically adjust the figure size to fit the subplots and other artist elements.\n",
     "* **``object``** (matplotlib.Figure): The Matplotlib Figure object to display\n",
@@ -95,9 +96,9 @@
    "source": [
     "from mpl_toolkits.mplot3d import axes3d\n",
     "\n",
-    "fig = Figure(figsize=(8, 6))\n",
-    "ax = fig.add_subplot(111, projection='3d')\n",
-    "FigureCanvas(fig)  # not needed for mpl >= 3.1\n",
+    "fig3d = Figure(figsize=(8, 6))\n",
+    "ax = fig3d.add_subplot(111, projection='3d')\n",
+    "FigureCanvas(fig3d)  # not needed for mpl >= 3.1\n",
     "\n",
     "X, Y, Z = axes3d.get_test_data(0.05)\n",
     "ax.plot_surface(X, Y, Z, rstride=8, cstride=8, alpha=0.3)\n",
@@ -112,7 +113,25 @@
     "ax.set_zlabel('Z')\n",
     "ax.set_zlim(-100, 100)\n",
     "\n",
-    "mpl_pane.object = fig"
+    "mpl_pane.object = fig3d"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Rendering\n",
+    "\n",
+    "The `Matplotlib` pane can render plots as `'png'` or `'svg'` by specifying the format. SVG output is an excellent choice if you want to rescale the plots arbitrarily:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.pane.Matplotlib(fig0, format='svg', sizing_mode='scale_both')"
    ]
   },
   {

diff --git a/examples/reference/panes/PNG.ipynb b/examples/reference/panes/PNG.ipynb
@@ -23,6 +23,7 @@
     "\n",
     "* **``alt_text``** (str, default=None): alt text to add to the image tag. The alt text is shown when a user cannot load or display the image. \n",
     "* **``embed``** (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.\n",
+    "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
     "* **``object``** (str or object): The PNG file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_png_`` method.\n",
     "* **``style``** (dict): Dictionary specifying CSS styles\n",
@@ -43,7 +44,7 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "png_pane = pn.pane.PNG('https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png')\n",
+    "png_pane = pn.pane.PNG('https://assets.holoviz.org/panel/samples/png_sample.png')\n",
     "\n",
     "png_pane"
    ]
@@ -52,7 +53,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Like any other pane the ``PNG`` pane can be updated by setting the ``object`` parameter:"
+    "We can scale the size of the image by setting a specific fixed `width` or `height`:"
    ]
   },
   {
@@ -61,11 +62,33 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "png_pane.param.update(\n",
-    "    object='https://upload.wikimedia.org/wikipedia/commons/7/71/1700_CE_world_map.PNG',\n",
-    "    width=1200\n",
+    "png_pane.clone(width=400)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Alternatively we can scale the width and height using the `sizing_mode`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.pane.PNG(\n",
+    "    'https://assets.holoviz.org/panel/samples/png_sample2.png', sizing_mode='scale_width'\n",
     ")"
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Note that by default the aspect ratio of the image is fixed, to override this behavior set `fixed_aspect=False` or provide fixed `width` and `height` values."
+   ]
   }
  ],
  "metadata": {

diff --git a/examples/reference/panes/SVG.ipynb b/examples/reference/panes/SVG.ipynb
@@ -23,8 +23,9 @@
     "\n",
     "* **``alt_text``** (str, default=None): alt text to add to the image tag. The alt text is shown when a user cannot load or display the image. \n",
     "* **``embed``** (boolean, default=False): If given a URL to an image this determines whether the image will be embedded as base64 or merely linked to.\n",
+    "* **``fixed_aspect``** (boolean, default=True): Whether the aspect ratio of the image should be forced to be equal.\n",
     "* **``link_url``** (str, default=None): A link URL to make the image clickable and link to some other website.\n",
-    "* **``encode``** (bool, default=False): Whether to base64 encode the SVG, when enabled SVG links may not work.\n",
+    "* **``encode``** (bool, default=True): Whether to base64 encode the SVG, when enabled SVG links may not work while disabling encoding will prevent image scaling from working.\n",
     "* **``object``** (str or object): The svg file to display. Can be a string pointing to a local or remote file, or an object with a ``_repr_svg_`` method.\n",
     "* **``style``** (dict): Dictionary specifying CSS styles\n",
     "\n",
@@ -44,11 +45,27 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "svg_pane = pn.pane.SVG('https://upload.wikimedia.org/wikipedia/commons/6/6b/Bitmap_VS_SVG.svg', width=300)\n",
+    "svg_pane = pn.pane.SVG('https://assets.holoviz.org/panel/samples/svg_sample.svg', width=300)\n",
     "\n",
     "svg_pane"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We can scale the size of the image by setting a specific fixed `width` or `height`:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "svg_pane.clone(width=150)"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},
@@ -62,7 +79,14 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "svg_pane.object = 'https://upload.wikimedia.org/wikipedia/commons/1/1a/SVG_example_markup_grid.svg'"
+    "pn.pane.SVG('https://assets.holoviz.org/panel/samples/svg_sample2.svg', sizing_mode='stretch_width')"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Note that by default the aspect ratio of the image is fixed, to override this behavior set `fixed_aspect=False` or provide fixed `width` and `height` values."
    ]
   }
  ],