How to make Playable Gifs for Django Dash?

Dash Python
1

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:

Screenshot_1
Screenshot_11062×337 11.8 KB

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.

2

@gabrielcarvajal did you add your Dash component to the Django settings file as described in the django-plotly-dash documentation?

If so, you might want to report the issue at the issues list. If you do so, be sure to include all the relevant settings along with whatever is reported by the Django server process on start up and also when you exercise the app functionality.

3

@delsim Thank you so much for your solution now it works fine but now I have another question.

Well first this is what I added to the settings.py:

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

Second, notice that I added gif_player instead of dash_gif_component that’s because dash_gif_component doesn’t have the option to add an id to the component which is bad fo me because I need to call the component in a callback.

So, at first I tried modifying the github repo but npm kept giving me some module errors, so I built the same component with the same code but this time adding the id to the component and it looks like this: (All of this was done following: cookiecutter dash-component-boilerplate)

gif.GifPlayer( 
                        id='first_gif',
                        gif='https://urltogif/gif.gif',
                        still='ds'
                )

Finally, it worked fine and for testing it in my django_plotly_dash app I deployed the python package to test.pypi, the thing is I’m new to developing this kind of things so because packages in test.pypi only last for certain amount of time my questions would be:

  • Should I deploy the package to the real index of PyPi? (I don’t know about this one because I literally added like 10 lines of code.)

  • Should I try to talk with the original author to try to update the package?

  • Or there is another better way?

[EXTRA]

The gif that I’m trying to show is generated via a python script that I made using web scraping this is the script: Python Script, my question is if it’s possible to make this script live inside the django_plotly_dash app and use live update callback to refresh the gif every 20 minutes or so.

The problem is that the script takes like 1 minute to run because it downloads approx. 16 png files that are 5424x5424.

4

@gabrielcarvajal I think this is the sort of thing you would have to discuss with the author(s) of the component you are trying to use.

For the long running script, just make it a different process and not part of a view. This is the sort of thing that celery is ideal for.

1 Like