Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement Matplotlib format support and responsive Image sizing #4514

Merged
merged 7 commits into from
Mar 9, 2023
Merged

Implement Matplotlib format support and responsive Image sizing #4514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aec93ed
Implement Matplotlib format support and responsive Image sizing
philippjfr Mar 8, 2023
bd98325
Update mpl docs
philippjfr Mar 8, 2023
a0ce140
Small fix for partial size
philippjfr Mar 8, 2023
a981492
Add more tests
philippjfr Mar 8, 2023
b3ee70a
Attempt to fix tests
philippjfr Mar 9, 2023
34d1f29
Clean up UI tests
philippjfr Mar 9, 2023
e08c6a5
Add Matplotlib svg render test
philippjfr Mar 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 27 additions & 3 deletions examples/reference/panes/GIF.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
]
Expand All @@ -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`:"
]
},
{
Expand All @@ -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."
]
}
],
Expand Down
36 changes: 31 additions & 5 deletions examples/reference/panes/JPG.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
]
Expand All @@ -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`:"
]
},
{
Expand All @@ -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": {
Expand Down
27 changes: 23 additions & 4 deletions examples/reference/panes/Matplotlib.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand All @@ -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')"
]
},
{
Expand Down
33 changes: 28 additions & 5 deletions examples/reference/panes/PNG.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
]
Expand All @@ -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`:"
]
},
{
Expand All @@ -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": {
Expand Down
30 changes: 27 additions & 3 deletions examples/reference/panes/SVG.ipynb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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": {},
Expand All @@ -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."
]
}
],
Expand Down
Loading