Black Lives Matter. Please consider donating to Black Girls Code today.

Display image not working with Interval

Dash
#1

Hi,

I am trying to display an image carousel where the images will be stored in a remote server.

I tried the following code:


app = dash.Dash()

app.layout = html.Div([
    html.Div(id = "img"),
    html.Div(id = "img2"),
    html.Button(
        id='next',
        n_clicks=0,
        children='Next',
        style={'fontSize':14}
    ),
    dcc.Interval(id='interval', interval=3000)
])

@app.callback(
    Output('img', 'children'),
	[Input('next', 'n_clicks')])
def shownext(clicks):
	if(clicks > 0):
		print("in shownext")
		return [html.Img(src=encode_image('mongo.png')]

@app.callback(Output('img2', 'children'),
              [Input('interval', 'n_intervals')])
def display_image(n):
      return [html.Img(src=encode_image('mongo.png')]
	
def encode_image(image_file):
	print("in encode_image")
	encoded = base64.b64encode(ftp.open(image_file, 'rb').read())
	return 'data:image/png;base64,{}'.format(encoded.decode())

if __name__ == "__main__":
    app.run_server(port=8888)

The above code works while calling the shownext function and the image can be seen. But in the disaply_image function, where I’m trying to show the images using the interval, no images are shown.

Can someone please guide me on what I’m doing wrong here. Any help will be really appreciated.

#2

Hi @Sourabh welcome to the forum! I tried to simplify your app by displaying images with fixed URLs and it works as it should be (I also added titles to be sure which image was which, are you sure it was not the interval-triggered image which you were seeing?). I also recommend to run with debug=True to catch error messages if any.

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import numpy as np
import plotly.graph_objs as go
import json

filenames = ['https://raw.githubusercontent.com/plotly/datasets/master/mitochondria.jpg',
             'https://upload.wikimedia.org/wikipedia/commons/6/6c/HeLa_cells_stained_with_Hoechst_33258.jpg']

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app = dash.Dash()

app.layout = html.Div([
    html.Div(id = "img", className="six columns"),
    html.Div(id = "img2", className="six columns"),
    html.Button(
        id='next',
        n_clicks=0,
        children='Next',
        style={'fontSize':14}
    ),
    dcc.Interval(id='interval', interval=3000)
])

@app.callback(
    Output('img', 'children'),
    [Input('next', 'n_clicks')])
def shownext(clicks):
    if clicks > 0:
        print("in shownext")
        return [html.H3("Triggered by button"),
                html.Img(src=filenames[clicks%2])]


@app.callback(Output('img2', 'children'),
             [Input('interval', 'n_intervals')])
def display_image(n):
    if n is None:
        return dash.no_update
    print("in interval")
    return [html.H3("Triggered by interval"),
            html.Img(src=filenames[n%2])]



if __name__ == "__main__":
    app.run_server(debug=True, port=8868)

Can you try the app I pasted and if it works adapt it with the ftp.open call?

#3

Thank you! This solution worked for me

With Regards,
Sourabh