How to make Playable Gifs for Django Dash?

[gabrielcarvajalfigueroa]

Hi all,

I’m developing an app for monitoring using django_plotly_dash. The page contains 3 plotly figures and 2 gifs that show different images related to the monitoring, as for now my code is working fine and for displaying the graphs and gifs I’m using CSS Grid, my code looks like this (Consider that I’m using a 3x3 matrix):

#Create DjangoDash applicaiton
app = DjangoDash(name='Subplots')

app.layout = html.Div([

                html.Div([ 
                    dcc.Graph(id = 'seeing_plot', 
                              animate = False,
                              figure=  fig_seeing_plot.fig_seeing, 
                              style={"backgroundColor": "#FFF0F5"}),
                ], style={'grid-column-start': '1', 'grid-row-start': '1'}),

                html.Div([
                    dcc.Graph(id = 'station_plot',
                              figure= fig_stations_plot.fig, 
                              animate = False, 
                              style={"backgroundColor": "#FFF0F5"}),
                ], style={'grid-column-start': '1', 'grid-row-start': '2', 'grid-row-end': 'span 2'}),

                html.Div([
                    dcc.Graph(id = 'scattergl_plot', 
                              figure= fig_scattegl_plot.fig_scattergl,
                              animate = False, 
                              style={"backgroundColor": "#FFF0F5"}),
                ], style={'grid-column-start': '2', 'grid-row-start': '1', 'grid-row-end': 'span 2'}),

                html.Img(id='gif1', src='https://urltogif/gif.gif', alt='gif1',
                style={'grid-column-start': '2', 'grid-row-start': '2'}),

                html.Img(id='gif2',src='https://urltogif/gif.gif', alt='gif2',
                style={'grid-column-start': '3', 'grid-row-start': '1', 'grid-row-end': 'span 3'}),

], style={'display': 'grid', 'grid-template-columns': '1fr 1fr 1fr', 'grid-template-rows': '1fr 1fr 1fr'})

This code works fine but the problem is that the gifs plays constantly which would be bad for user attention. Now I’m trying to make the gifs playables and I tried using dash_gif_component from this post: dash_gif_component. I cloned the demo and it worked fine in my machine within the Dash app, but when I tried adding it to the DjangoApp I got the following error:

I got this error adding the following to my previous code:

html.Img(id='gif2',src='https://urltogif/gif.gif', alt='gif2',
                style={'grid-column-start': '3', 'grid-row-start': '1', 'grid-row-end': 'span 3'}),

gif.GifPlayer(
 gif='https://urltogif/gif.gif',
 still='assets/test.png',
)

So basically my questions would be: Does anyone knows if dash_gif_component is compatible with DjangoDash? or Does anyone knows how to make this work with another way?

I think other way would be great because I don’t know if dash_gif_component is compatible with CSS Grid.

Let me know if more information is needed.

[gabrielcarvajalfigueroa]

The solution was to add the component in settings.py like this:

#Add PLOTLY_COMPONENTS
PLOTLY_COMPONENTS = [
    'dash_core_components',
    'dash_html_components',
    'dash_renderer',
    'dpd_components',
    'gif_player']

Now I'm trying to solve another things related to gif components in django_plotly_dash so if you are interested please check: This Forum