# Use buttons instead of slider for px.imshow animation

**URL:** <https://community.plotly.com/t/use-buttons-instead-of-slider-for-px-imshow-animation/72523>\
**Category:** 📊 Plotly Python\
**Created:** [February 9, 2023, 8:29pm UTC](https://community.plotly.com/t/use-buttons-instead-of-slider-for-px-imshow-animation/72523 "2023-02-09T20:29:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![marius](https://avatars.discourse-cdn.com/v4/letter/m/ed655f/32.png) [@marius](https://community.plotly.com/u/marius)\
**Post date:** [February 9, 2023, 8:29pm UTC](https://community.plotly.com/t/use-buttons-instead-of-slider-for-px-imshow-animation/72523/1 "2023-02-09T20:29:31Z")

</div>

I have a small number of images (~5) I want to flip between. I can create a px.imshow animation, e.g.:

```auto
fig = px.imshow(
    np.random.rand(5,10,10), # 5 example 10x10 images
    animation_frame=0,
)
fig.show()

```

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/9/e9012b499fa733bfd421aab86ea36f10efec2e21.png)

which gives me a slider I can use to flip to a given frame with. But instead I’d like to remove the slider and have it be 5 “radio” buttons with some custom labels that let me click on a button to flip to the appropriate frame. Any suggestions how to go about this? Thanks.

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [February 9, 2023, 9:31pm UTC](https://community.plotly.com/t/use-buttons-instead-of-slider-for-px-imshow-animation/72523/2 "2023-02-09T21:31:26Z")

</div>

@marius Yes, it is possible to flip between a few images. Here I give an example with two images:

```auto
import plotly.express as px
import plotly.graph_objects as go
import skimage.io as sio

img1=sio.imread("circular-lotus.jpg")#https://raw.githubusercontent.com/empet/Datasets/master/Images/circular-lotus.jpg
fig1=px.imshow(img1)
img2=sio.imread("Alfred-circular.jpg")#https://raw.githubusercontent.com/empet/Datasets/master/Images/Alfred-circular.jpg
fig2=px.imshow(img2)
fig=go.Figure([fig1.data[0], fig2.data[0]])
fig.data[1].visible=False
fig.update_layout(width=500, height=500, xaxis_visible=False, yaxis_visible=False)

fig.update_layout(
    updatemenus=[
        dict(
            active=0,
            buttons=[
                dict(label="Lotus",
                     method="restyle",
                     args=[{"visible": [True, False]},
                           ]),
                dict(label="Alfred",
                     method="restyle",
                     args=[{"visible": [False, True]},
                           ])],
              x=1.1,
              xanchor="left",
              y=1.1,
              yanchor="top")])
fig.show()

```

---

<div class="post-metadata">

**Author:** ![marius](https://avatars.discourse-cdn.com/v4/letter/m/ed655f/32.png) [@marius](https://community.plotly.com/u/marius)\
**Post date:** [February 9, 2023, 9:54pm UTC](https://community.plotly.com/t/use-buttons-instead-of-slider-for-px-imshow-animation/72523/3 "2023-02-09T21:54:12Z")

</div>

Perfect, thank you!

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [February 9, 2023, 10:23pm UTC](https://community.plotly.com/t/use-buttons-instead-of-slider-for-px-imshow-animation/72523/4 "2023-02-09T22:23:59Z")

</div>

@marius Meanwhile I translated this code in PlotlyJS.jl (the Julia version of plotly.py):

```auto
using Base64, PlotlyJS
getbase64(data:: Vector{UInt8}) = "data:image/png;base64,"*base64encode(data)
vecuint8 = [read("circular-lotus.jpg"), read("Alfred-circular.jpg")];
fig = Plot([PlotlyJS.image(; source=getbase64(vecuint8[k])) for k in 1:length(vecuint8)],
            Layout(width=500, height=500, xaxis_visible=false, yaxis_visible=false,
                updatemenus=[
                        attr(active=0,
                             buttons = [PlotlyJS.attr(; label, method="restyle", 
                                        args=[attr(visible=circshift([true, false],i-1))]) 
                                                   for (i,label) in enumerate(["Lotus", "Alfred"])], 
                              x=1.1,
                              xanchor="left",
                              y=0.95,
                              yanchor="top")]))
restyle!(fig, visible=false, 2) #set invisible the second trace(image here)
relayout!(fig, title_text="Flipping between two images", title_x=0.45, 
               margin_t=90, font_family="Balto")
display(fig)

```

---

<div class="post-metadata">

**Author:** ![marius](https://avatars.discourse-cdn.com/v4/letter/m/ed655f/32.png) [@marius](https://community.plotly.com/u/marius)\
**Post date:** [February 9, 2023, 10:33pm UTC](https://community.plotly.com/t/use-buttons-instead-of-slider-for-px-imshow-animation/72523/5 "2023-02-09T22:33:19Z")

</div>

Ooh that’s really interesting, thanks! I do use Julia but had been calling into plotly.express via PyCall since it was easier. But would be nice to remove the Python dependency. One of the main showstoppers was needing `imshow`-like `binarystring`, but I see above now that you can do that byhand with `base64encode`and `PlotlyJS.image(; source)`thats super helpful.