Jupyter: Same frame for images and videos #2787
Replies: 4 comments
-
I'm not aware of any simple out-of-the-box supported solution, we would likely need to include some sort of image gallery library. |
Beta Was this translation helpful? Give feedback.
-
Some googling got me these ideas: |
Beta Was this translation helpful? Give feedback.
-
Are you looking for something like the toolbar that ipympl (interactive in notebook matplotlib) has? You can construct this out of ipywidgets buttons and |
Beta Was this translation helpful? Give feedback.
-
Thanks @ianhi ! from ipywidgets import GridspecLayout, AppLayout, Button, Layout, widgets
from PIL import Image
import webbrowser
file = open("new_pi.png", "rb")
image = file.read()
dis_img = widgets.Image(value=image, format="png")
dis_but = widgets.ToggleButton(
value=False,
description="Fullscreen",
disabled=False,
button_style="",
tooltip="Description",
)
b1 = Button(
description="",
icon="fa-expand",
button_style="",
layout=Layout(height="30px", width="40px"),
)
b2 = Button(
description="",
icon="fa-download",
button_style="",
layout=Layout(height="30px", width="40px"),
)
button_list = GridspecLayout(2, 1, height="80px")
button_list[0, 0] = b1
button_list[1, 0] = b2
dis_img.width = "100px"
def on_button_expand_clicked(b):
if dis_img.width != "100px":
dis_img.width = "100px"
else:
dis_img.width = "300px"
def on_button_download_clicked(b):
im1 = Image.open("new_pi.png")
im1 = im1.save("/tmp/download.png")
url = "file:///tmp/download.png"
webbrowser.open(url)
b1.on_click(on_button_expand_clicked)
b2.on_click(on_button_download_clicked)
AppLayout(left_sidebar=button_list, center=dis_img, pane_widths=["50px", 1, 0]) Screen.Recording.2021-04-10.at.16.06.59.mov |
Beta Was this translation helpful? Give feedback.
-
Currently, videos in jupyter can be scaled with e.g.
config.media_width= "40.0vw"
and they have a nice list to download the video and to display it full screen.Unfortunately, images don't have any of these options (scaling, fullscreen, download) yet:
Can we maybe embed images as well into the HTML video player and hide the "play" button?
That would be amazing!
Beta Was this translation helpful? Give feedback.
All reactions