dash_image_app.py

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

import numpy as np
from skimage import data


img = data.camera()

app = dash.Dash()

size = 400

app.layout = html.Div([
    # Original image
    html.Div([
        html.H3('Image'),
	dcc.Graph(
        id='camera',
        figure={
            'data': [
                go.Heatmap(
                    z=img, colorscale='Greys',
                    ),
                go.Contour(
                    z=img, ncontours=1,
                    contours=dict(
            			coloring='lines',
        ),)
                ],
            'layout': dict(width=size, height=size,
                yaxis=dict(
                            autorange='reversed'
                                ))
            }
        ),], className="four columns"),

    # Histogram
    html.Div([
        html.H3('Histogram'),
        dcc.Graph(
        id='histogram',
        figure={
            'data': [
                go.Histogram(
                    x=img.ravel()
                    )
                ],
            'layout': dict(width=size, height=size)
            }
        ),], className="four columns"),

    # Binarized image
    html.Div([
        html.H3('Binarization'),
        dcc.Graph(
        id='camera-seg',
        figure={
            'data': [
                go.Heatmap(
                    z=img
                    )
                ],
            'layout': dict(width=size, height=size,
                yaxis=dict(autorange='reversed'))
            }
        ),
        html.H4('Threshold'),
        dcc.Slider(
        id='slider',
        min=0,
        max=255,
        value=120,
        step=10,
    ),


        ], className="four columns"),

   ], className='row')


## ---------------------- Callbacks ----------------------------------

# Callback to update binarized image

@app.callback(
    dash.dependencies.Output('camera', 'figure'),
    [dash.dependencies.Input('slider', 'value')])
def update_camera(val):
    img = data.camera()
    mask = (img > int(val)).astype(np.float)
    return {'data': [
                go.Heatmap(
                    z=img, colorscale='Greys'
                    ),
		go.Contour(
                    z=mask, ncontours=5,
                    contours=dict(
                                coloring='lines',),
		    line=dict(width=3)
    		)
                ],
            'layout': dict(width=size, height=size, yaxis=dict(
                                            autorange='reversed'))

    }


@app.callback(
    dash.dependencies.Output('camera-seg', 'figure'),
    [dash.dependencies.Input('slider', 'value')])
def update_figure(val):
    img = data.camera()
    mask = (img > int(val)).astype(np.float)
    return {'data': [
                go.Heatmap(
                    z=mask, colorscale='Greys'
                    ),
		go.Contour(
                    z=img > int(val), ncontours=5,
                    #contours=dict(
                    #            coloring='lines',)
    		)
                ],
            'layout': dict(width=size, height=size, yaxis=dict(
                                            autorange='reversed'))

    }




# Callback to update histogram

@app.callback(
     dash.dependencies.Output('histogram', 'figure'),
    [dash.dependencies.Input('slider', 'value')])
def update_histo(val):
    img = data.camera()
    mask = (img > int(val)).astype(np.float)
    return {
            'data': [
                go.Histogram(
                    x=img[img < int(val)].ravel()
                    ),
                go.Histogram(
                    x=img[img >= int(val)].ravel()
                    )
                ],
            'layout': dict(width=size, height=size)
            }


app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})


if __name__ == '__main__':
    app.run_server()