CODEWITHSUNDEEP
pythonjupyter-notebook
d_iv
d_iv

Reputation: 119

Embedding slideshow in Jupyter Notebook

I want a pythonic way to embed a slideshow in a jupyter notebook cell similar to the slideshow here:

https://www.w3schools.com/howto/howto_js_slideshow.asp

I don't need any CSS styling, and I don't need any buttons other than the next/previous slide arrows.

I don't want to turn the entire notebook into a slideshow, only a single cell, so I can't use reveal.js.

I find it very difficult to believe that there is no simple way to embed a slideshow in a notebook considering all of these other interactive widgets exist:

http://jupyter.org/widgets

Is there really no easy way to do this?

Upvotes: 3

Views: 3571

Answers (2)

nburrus
nburrus

Reputation: 154

I had the same issue but could not use ipywidgets (the notebook is eventually converted to html via fastpages). I found an ok way by creating an xarray with all the images, and then using plotly.js animation features. It adds a slider that makes it easy to switch between the images. Here is an example:

import numpy as np
import plotly.express as px
from imageio import imread
import xarray as xr

# Show a list of numpy images as a carousel
# key is the label of the slider
def show_images_carousel(images, labels, key: str, title: str, height:int):        
    stacked = np.stack(images, axis=0)
    xrData = xr.DataArray(
        data   = stacked,
        dims   = [key, 'row', 'col', 'rgb'],
        coords = {key: labels}
    )
    # Hide the axes
    layout_dict = dict(yaxis_visible=False, yaxis_showticklabels=False, xaxis_visible=False, xaxis_showticklabels=False)
    return px.imshow(xrData, title=title, animation_frame=key).update_layout(layout_dict)

# Show a list of URLs as a carousel, loading then as numpy images first
def show_images_carousel_from_urls(image_urls, labels, key: str, title:str, height:int):
    images = [imread(url, pilmode='RGB') for url in image_urls]
    return show_images_carousel(images, labels, key, title, height)

Usage is then something like:

images = {
    "simulation_images/rgbspan.png": 'Original',
    "simulation_images/rgbspan_protan_brettel1997.png": "Brettel 1997",
    "simulation_images/rgbspan_protan_vienot1999.png": "Viénot 1999",
    "simulation_images/rgbspan_protan_machado2009.png": 'Machado 2009',    
    "simulation_images/rgbspan_protan_coblisv1.png": "Coblis V1",
    "simulation_images/rgbspan_protan_coblisv2.png": "Coblis V2" 
}

fig = show_images_carousel_from_urls (images.keys(), list(images.values()), 'Method', None, 700)
fig.show()

Example of the output

Upvotes: 1

d_iv
d_iv

Reputation: 119

http://ipywidgets.readthedocs.io/en/latest/examples/Using%20Interact.html

It turns out an IntSlider, once it has been focused (clicked on), can be incremented to the next / previous slider value with the arrow keys, which is good enough for my purposes. Here's an example of how I'm using the slider widget:

import ipywidgets as wg
from IPython.display import SVG

def f(x):
    if x == 1:
        return SVG(filename='./path/to/pic1')
    elif x == 2:
        return SVG(filename='./path/to/pic2')
    elif x == 3:
        return SVG(filename='./path/to/pic3')
    else:
        return SVG(filename='./path/to/pic4')

wg.interact(f, x=wg.IntSlider(min=1,max=4,step=1));

Upvotes: 2

Related Questions