def parse_contents(contents, filename, date):
return html.Div([
html.H5(filename),
html.H6(datetime.datetime.fromtimestamp(date)),
html.Hr(),
DashCanvas(id='annot-canvas',
lineWidth=5,
image_content = contents,
width=500,
),
])
'font-family': title_font,
'font-size': 70})])
)]),
dbc.Row([
dbc.Col(html.Div([html.H1('Here, you have the chance to take revenge on your favorite villains', style={'text-align': 'center','color':"#FFFFFF",
"margin": "50px", 'font-family': title_font,
'font-size': 55}),
])
)]),
dbc.Row([
dbc.Col([html.Div([
DashCanvas(
id='canvas-color',
width=canvas_width,
filename=filename,
hide_buttons=['line', 'zoom', 'pan'],
)
], style={'align-items': 'center'}),
html.H2('Joana Rafael', style={"margin": "20px", 'color': "#FFFFFF", 'font-family': title_font,
'font-size': 40}),
html.H2('[20200588]', style={"margin": "20px", 'color': "#FFFFFF", 'font-family': def_font,'font-size': 17}),
], width={'size': 2, 'offset': 0, 'order': 1}, style={"margin": "20px"}),
dbc.Col([html.Div([
DashCanvas(
id='canvas-color1',
width=canvas_width,
filename=filename1,
hide_buttons=['line', 'zoom', 'pan'],
html.Div(
[
html.P(
"Write inside the canvas with your stylus and press Sign",
className="section_title",
),
html.Div(
DashCanvas(
id="canvas",
lineWidth=8,
width=canvas_width,
height=canvas_height,
hide_buttons=[
"zoom",
"pan",
"line",
"pencil",
"rectangle",
"select",
],
add_only=False,
lineColor="black",
goButtonTitle="Sign",
),
className="canvas-outer",
style={"margin-top": "1em"},
),
],
className="v-card-content",
),
html.Div(
def getInpaintLayout(image_content, image_filename, CANVAS_WIDTH,
CANVAS_HEIGHT):
canvas_layout = html.Div(
[
html.Div(
[
html.H3('Image to be filled'),
html.Hr(style={'width': '80%'}),
html.Div(
DashCanvas(
id='annot-canvas',
lineWidth=10,
width=CANVAS_WIDTH,
height=CANVAS_HEIGHT,
lineColor='rgba(255, 0, 0, 0.6)',
#image_content=image_content,
filename=image_filename,
tool="rectangle",
hide_buttons=['line', 'pan', 'select'],
goButtonTitle="Fill Mask",
),
className='col-md-10'),
dcc.Checklist(id='fill-rect',
options=[
{
'label': 'Fill Rectangles',
'value': 'fill'
},
],
value=['fill']),
dcc.Checklist(id='use-data-term',
options=[
{
'label': 'Use Data Term',
'value': 'use'
},
],
value=['use']),
dcc.Checklist(id='use-center-threshold',
options=[
{
'label':
'Use Center Similarity Threshold',
'value': 'use'
},
],
value=[]),
dcc.Checklist(id='live-preview',
options=[
{
'label': 'Live Preview',
'value': 'show'
},
],
value=[]),
html.Div([
html.Div(id='inpaint-alert-div'),
dcc.Upload(
id='upload-mask',
children=html.Div(['Or ',
html.A('Upload a Mask')]),
style={
'width': '80%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
'margin': '10px',
'position': 'center'
},
accept='.png, .jpg, .jpeg',
# don't allow multiple files to be uploaded
multiple=False,
className='upload-section')
])
],
className='col-xl-6 canvas-section',
id='canvas_div'),
html.Div(className='col-xl-6',
id='result-div',
style={'marginBottom': '20px'}),
],
className='row')
sliders_layout = html.Div(
[
html.Div([
html.H5(children=['Brush width']),
dcc.Slider(
id='brush-width-slider', min=2, max=60, step=1, value=10),
],
className="col-lg-2 sliders",
style={'text-align': 'center'}),
html.Div([
html.H5(children=['Patch Size']),
dcc.Slider(id='patch-size-slider',
min=3,
max=13,
step=2,
value=9,
marks={
3: '3',
5: '5',
7: '7',
9: '9',
11: '11',
13: '13'
},
included=False),
],
className="col-lg-3 sliders",
style={'text-align': 'center'}),
html.Div([
html.H5(children=[
'Local Radius : ',
html.Span('100px', id='local-radius-output')
]),
dcc.Slider(id='local-radius-slider',
min=50,
max=500,
step=5,
value=100,
included=False)
],
className="col-lg-3 sliders"),
html.Div([
html.H5(children=[
'Data Term significance : ',
html.Span('1', id='data-term-output')
]),
dcc.Slider(id='data-term-slider',
min=0,
max=1,
step=0.1,
value=1,
marks={
0: '0',
1: '1'
}),
],
className="col-lg-2 sliders",
style={'text-align': 'center'}),
html.Div([
html.H5(children=[
'Center Similarity Threshold : ',
html.Span('0.7', id='center-similarity-output')
]),
dcc.Slider(id='center-similarity-slider',
min=0.1,
max=1.8,
step=0.01,
value=0.7,
marks={
0.1: '0.1',
1.8: '1.8'
}),
],
className="col-lg-2 sliders",
style={'text-align': 'center'})
],
className="row",
style={
'text-align': 'center',
'width': '100%',
'marginTop': '20px',
'marginBottom': '20px'
})
inpaint_layout = html.Div([
html.H1('Draw Mask and Then Run The Inpainter',
style={
'text-align': 'center',
'margin': '40px 0px'
}), sliders_layout, canvas_layout
],
className='col')
return inpaint_layout
import dash
from dash_canvas import DashCanvas
app = dash.Dash(__name__)
app.layout = DashCanvas()
if __name__ == "__main__":
app.run_server(debug=True)
superpixel_color_segmentation,
)
from skimage import color, io
image_path = "img/bird2.png"
default_image = io.imread(image_path)
image_string = array_to_data_url(default_image)
app = dash.Dash(__name__)
app.layout = html.Div([
html.Div(
[
DashCanvas(
id="first-image",
filename=image_string,
width=500,
lineWidth=5,
lineColor="lime",
goButtonTitle="remove",
)
],
style={
"float": "left",
"width": "40%"
},
),
html.Div(
[html.Img(id="remove-background")],
style={
"float": "left",
"width": "40%"
},
fig_scatter = px.scatter(data_frame=df,
x='Year',
y='Rate (per 100,000 females)',
color='Race')
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container([
html.H1("Late-Stage Female Breast Cancer", style={'textAlign': 'center'}),
dbc.Row([
dbc.Col([
dcc.Graph(figure=fig_scatter, config={"modeBarButtonsToAdd": btns})
],
width=8),
dbc.Col([
html.H2('Take Notes:'),
DashCanvas(
id='my-canvas', tool='pencil', lineWidth=3, lineColor=None)
],
width=4,
className='mt-5')
]),
dbc.Row([
dbc.Col(
[dcc.Graph(figure=fig_img, config={"modeBarButtonsToAdd": btns})],
width=6),
dbc.Col([
daq.ColorPicker(id='color-picker',
label='Brush color',
value=dict(hex='#119DFF'))
],
width=4,
className='mt-5')
def image_edit_tab(app):
return html.Div([
content_header('Image Editing', 'Draw on images'),
html.P('Users can edit images directly by drawing on them, or just draw on a blank canvas!'),
html.Br(),
html.P('Step 1: Upload an image (optional)'),
html.P('Step 2: Start drawing!'),
html.Div([
# Left item
html.Div([
html.Div([
dcc.Upload([
html.Img(src=app.get_asset_url('upload.svg')),
html.Span('Drag and drop image here, or click to upload')
],
id='upload-image',
multiple=False
),
],
id='div-image-input',
className='div-with-image small-image'
),
html.Br(),
html.Div([
DashCanvas(
id='image-canvas',
width=600,
height=400,
goButtonTitle='Save',
hide_buttons=['zoom', 'line', 'rectangle', 'select'],
),
html.Button(
'clear',
id='button-canvas-clear',
style={
'float': 'right',
'transform': 'translateY(-58px)'
}
)
],
id='div-image-output'
)
],
className='custom-dark-div custom-div-left custom-div-space-above custom-div-large-full'
),
# Right item
html.Div([
html.P('Brush width'),
daq.Knob(
id='knob-canvas',
min=2,
max=40,
value=5
),
html.Button(
html.P('-', style={'font-size': '2em'}),
id='button-image-minus',
style={
'display': 'inline-block',
'margin': 0,
'margin-right': '10px',
'transform': 'translateY(-50px)',
}
),
html.Button(
html.P('+', style={'font-size': '2em'}),
id='button-image-plus',
style={
'display': 'inline-block',
'margin': 0,
'transform': 'translateY(-50px)',
}
),
html.P('Brush colour'),
daq.ColorPicker(
id='image-color-picker',
label=' ',
value=dict(hex='#119DFF'),
style={
'border': 'none',
'overflow': 'hidden'
}
)
],
className='custom-div-center custom-div-space-above custom-div-smaller'
),
# Bottom item
html.Div(
id='image-result'
)
],
className='custom-container'
)
])
outdir = './assets/'
test_list = [ f for f in os.listdir(inputdir)]
if(True):
for f in test_list:
ds = pydicom.read_file(inputdir + f, force=True) # read dicom image
img = ds.pixel_array # get image array
cv2.imwrite(outdir + f + ".png" ,img) # write png image
#imageio.imwrite(outdir + f.replace('.dcm','.jp2'), img)
app = dash.Dash(__name__)
filename = " http://127.0.0.1:8050/"+'ID_0060_AGE_0080_CONTRAST_0_CT.dcm.png'
filename_s = 'ID_0060_AGE_0080_CONTRAST_0_CT.dcm.png'
canvas_width = 500
app.layout = html.Div([
#html.Img(src=app.get_asset_url(filename_s)),
DashCanvas(id='canvas_image',
tool='line',
lineWidth=5,
lineColor='red',
filename=app.get_asset_url(filename_s),
width=canvas_width)
])
if __name__ == '__main__':
app.run_server(debug=True)
def app_layout():
"""Returns layout for the front-end of the app"""
return html.Div([
html.Div(
children=[
# Title
html.H1(
children="""
SAEMI: Size Analysis of Electron Microscopy Images
""",
style={'textAlign': 'center'}
),
# Instructions
html.Div(
children=[
html.Button(
'Instructions',
id='instruction_button'
),
html.P(
id='instruction_paragraph',
style={'margin-left': 150, 'margin-right': 150}
)
],
style={'textAlign': 'center'}
),
# Upload demo or file
html.Div(
children=[
html.Div(
html.Button(
id='demo',
children='Try the Demo'
),
style={'display': 'inline-block'}
),
html.Div(
dcc.Upload(
id='upload-image',
children=html.Button('Upload Image'),
),
style={'display': 'inline-block'}
)
],
style={'display': 'flex', 'justify-content': 'center'}
),
# Display image and filename after uploading
html.H1(
id='file_name',
style={
'marginTop': 25,
'textAlign': 'center',
'fontSize': 12
}
),
html.Img(
id='raw_image',
style={
'height': 192,
'width': 256,
'display': 'block',
'margin-right': 'auto',
'margin-left': 'auto'
}
),
# Loading progress
dcc.Loading(
children=[
html.Div(id='pred_json', style={'display': 'none'}),
html.Div(
id='pred_json_copy',
style={'display': 'none'}
),
html.Div(id='images_data', style={'display': 'none'}),
html.Div(
id='size_distr_json',
style={'display': 'none'}
)
],
type='default'
),
html.Hr(),
],
className='one row'
),
html.Div(
children=[
html.Div(
children=[
html.H2(
'Enter Bin Size',
style={'fontSize': 16}
),
dcc.Input(
id='binsize',
value=25,
type='number',
debounce=True,
min=1
)
],
style={'display': 'inline-block'}
),
# Histogram
dcc.Graph(
id='size_distr_graph'
),
html.A(
'Download Data',
id='download-link',
href='',
target='_blank',
style={'display': 'inline-block'}
),
html.Hr()
],
className='one row',
style={'textAlign': 'center'}
),
html.Div(
children=[
# Images
html.Div([
# Uniquely Labeled Prediction Image
html.Div(
children=[
html.H2(children='Process Image'),
html.Pre(
children=open_txt_doc('postprocessing.txt'),
style={'margin-bottom': '32px'}
),
html.Div(
children=[
DashCanvas(
id='postprocessing',
width=768,
height=576,
hide_buttons=[
'zoom',
'pan',
'line',
'pencil',
'rectangle',
'select'
]
),
dcc.RadioItems(
id='showitem',
options=[
{'label': 'B/W', 'value': 'bw'},
{
'label': 'Colour',
'value': 'colour'
}
],
value='bw',
labelStyle={'display': 'inline-block'}
),
dcc.Slider(
id='brushwidth',
min=2,
max=40,
step=1,
value=5,
tooltip={
'always_visible': False,
'placement': 'bottom'
}
),
dcc.Dropdown(
id='colourpicker',
options=[
{
'label': 'Draw (white)',
'value': 'draw'
},
{
'label': 'Remove (red)',
'value': 'remove'
},
{
'label': 'Erase (black)',
'value': 'erase'
}
],
value='draw',
style={
'width': '300px',
'margin': 'auto'
}
)
],
style={'display': 'inline-block'}
),
],
style={'textAlign': 'center'},
className='six columns'
),
# Original Image and Overlay
html.Div(
children=[
html.H2(
children='Overlay of Original with Segments'
),
html.Pre(
children=open_txt_doc('resize_warning.txt'),
style={'margin-bottom': '32px'}
),
html.Div(
children=[
html.Img(
id='ximage',
style={
'top': 32,
'width': 768,
'height': 566
}
),
html.Img(
id='yimage'
)
],
style={'position': 'relative'}
),
dcc.Slider(
id='opacity_value',
min=0,
max=1,
step=0.1,
value=0.5,
),
],
style={'textAlign': 'center'},
className='six columns'
),
]),
html.Hr()
],
className='one row'
),
html.Div(
children=[
# Feedback
html.Div(
children=[
html.H2('Your Feedback is Welcome!'),
html.P(
"""
For any questions, concerns, or suggestions,
please email me at:
"""
),
html.B('*****@*****.**'),
html.P(
'Check out the user docs for more information:'
),
html.A(
(
"https://github.com/lwang94"
"/sem_size_analysis/blob/master"
"/docs/user_docs.md"
),
href=(
"https://github.com/lwang94"
"/sem_size_analysis/blob/master"
"/docs/user_docs.md"
)
)
],
style={'textAlign': 'center'}
)
],
className='one row'
)
])
from pprint import pprint
app = dash.Dash(__name__)
canvas_width = 1000
canvas_height = 1000
columns = ['type', 'width', 'height', 'scaleX', 'strokeWidth', 'path']
app.layout = html.Div([
html.H6('Draw on image and press Save to show annotations geometry'),
html.Div([
DashCanvas(id='annot-canvas',
lineWidth=5,
width=canvas_width,
height=canvas_height,
hide_buttons=[
"zoom", "pan", "line", "pencil", "rectangle", "undo",
"select"
])
],
style={"width": "100%"}),
DataTable(id='annot-canvas-table',
style_cell={'textAlign': 'left'},
columns=[{
"name": i,
"id": i
} for i in columns]),
html.Div([
html.Img(id='my-image', width=canvas_width, height=canvas_height),
]),
# html.P()
import dash
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url
from skimage import io
# ➊ 画像を変数に渡す
data = array_to_data_url(io.imread("img/bird1.png"))
app = dash.Dash(__name__)
app.layout = DashCanvas(
id="first-image",
image_content=data, # ➋ コンポーネントへの画像の読み込み
width=800, # ➌ キャンバスの横幅
lineWidth=12, # ➌書き込みの線の太さ
goButtonTitle="nothing", # ➌ saveボタンのタイトル変更
lineColor="lime", # ➍ 書き込み線の色
hide_buttons=["zoom", "pan", "line", "select"], # ➍ 編集ツールの設定
)
if __name__ == "__main__":
app.run_server(debug=True)
times = []
columns = ['type', 'width', 'height', 'scaleX', 'strokeWidth', 'path', 'time']
app.layout = html.Div(style={'backgroundColor':
colors['background'],
'text-align': 'center'},
children=[
html.Div(id='canvas_div',
children=[
html.H1('Observa atentamente la figura'),
html.P("Cuando la imagen desaparezca, copiala lo mejor posible dibujando sobre la pantalla"),
DashCanvas(
id='canvas',
lineColor='#00243C',
width=canvas_width,
lineWidth=5,
height=canvas_height,
image_content=array_to_data_url(img),
#scale=1,
hide_buttons=['line', 'zoom', 'pan', 'rectangle', 'pencil', 'select', 'redo', 'undo'],
goButtonTitle='Finalizar'),
html.A(html.Button('Descargar datos', id='download-button'),
id='download-a',
download='download.csv',
#href="",
n_clicks=0,
#target='_blank'
)
],
style={'text-align':"center",
'border': '2px solid black'}),
html.Div(id='table_div',
appname = "Pathfinding"
filename = "https://raw.githubusercontent.com/hyperion0/multi-page-app/master/assets/pathfinding.png"
img = io.imread(filename, as_gray=True)
height, width = img.shape
img_str = io.imread(filename)
logging.info(f"img shape {img.shape}")
layout = html.Div(
[
Header(app),
html.H3(appname),
DashCanvas(
id="canvas",
filename=filename,
hide_buttons=["line", "zoom", "pan"],
goButtonTitle="Find Path",
),
dcc.Markdown(img.shape, id="log"),
dcc.Graph(id="pathgraph", figure={"data": [go.Heatmap()]}),
]
)
@app.callback(
[Output("pathgraph", "figure"), Output("canvas", "image_content")],
[Input("canvas", "json_data")],
)
def update_data(string):
if string:
mask = parse_jsonstring(string, img.shape)
import base64
from io import BytesIO
from css import *
import datetime as dt
import io, re
import numpy as np
app = dash.Dash(__name__, server=server, routes_pathname_prefix='/images/')
app.layout = html.Div([
html.Div(id='output-data-upload', style={'display': 'none'}),
html.Div([
DashCanvas(id='canvas_image',
tool='line',
lineWidth=5,
lineColor='red',
width=500,
height=500,
goButtonTitle='Classify me!'),
html.Button('Classify the image!', id='classify-button'),
dcc.Loading(html.Div(id='classification')),
dcc.Loading(html.Div(id='classification-2'))
]),
dcc.Upload(id='upload',
children=html.Div(['Drag and Drop or ',
html.A('Select Files')]),
style=upload_style)
])
@app.callback([
dcc.Slider(
id='my-slider',
min=0, max=len(top_list)-1, step=1, value=int(len(top_list)/2),
updatemode='mouseup'),
]),
html.Div([
dcc.Graph(
id='image-filtered'),
dcc.Slider(id='filter-slider',
min=1, max=50, step=1, value=5, updatemode='mouseup'),
])
# html.Div(children=list_string, id='stored-data', style={'display':'none'})
], style={'columnCount':2}),
html.Div([
html.Div([
DashCanvas(id='canvas-color')], style={'display':'flex','align-items': 'center', 'justify-content': 'center'}),
html.Div([
html.H6(children=['Brush width'])],style={'display':'flex','align-items': 'center', 'justify-content': 'center'}),
dcc.Slider(
id='bg-width-slider',
min=2,
max=40,
step=1,
value=5
),
daq.ColorPicker(
id='color-picker',
label='Brush color',
value=dict(hex='#119DFF'))
])
])
import dash
import dash_html_components as html
from dash_canvas import DashCanvas
app = dash.Dash(__name__)
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
html.H5('Press down the left mouse button and draw inside the canvas'),
DashCanvas(id='canvas_101')
])
if __name__ == '__main__':
app.run_server(debug=True)
watershed_segmentation)
from skimage import io, color, img_as_ubyte
import numpy as np
app = dash.Dash(__name__)
filename = 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Mitochondria%2C_mammalian_lung_-_TEM_%282%29.jpg'
canvas_width = 300
img = io.imread(filename, as_gray=True)
app.layout = html.Div([
html.H6('Annotate the two objects and the background'),
html.Div([
DashCanvas(
id='segmentation-canvas',
lineWidth=5,
filename=filename,
width=canvas_width,
),
],
className="five columns"),
html.Div([
html.Img(id='segmentation-img', width=300),
],
className="five columns"),
])
@app.callback(Output('segmentation-img', 'src'),
[Input('segmentation-canvas', 'json_data')])
def segmentation(string):
if string:
pred = max(output.data, 1)[1]
return (pred.item())
app = dash.Dash(__name__)
server = app.server
#TODO: height is 200px, https://github.com/plotly/dash-canvas/issues/37 <- potential commit
width = 200
height = 200
app.layout = html.Div([
DashCanvas(
id='canvas_1',
width=width,
hide_buttons=['line', 'zoom', 'pan', 'pencil', 'rectangle', 'select'],
lineWidth=20,
lineColor='black'),
html.P(id='dummy-output')
])
@app.callback(Output('dummy-output', 'children'),
[Input('canvas_1', 'json_data')])
def update_data(string):
if string:
imageArray = parse_jsonstring(string)
imageCropped = imageArray[0:width, 0:height]
rescaledImageArray = rescale(imageCropped, (0.14, 0.14))
prediction = predict(rescaledImageArray)
else:
# pip3 install dash-canvas
import dash
import dash_html_components as html
from dash_canvas import DashCanvas
import numpy as np
app = dash.Dash(__name__)
filename = 'https://upload.wikimedia.org/wikipedia/commons/e/e4/Mitochondria%2C_mammalian_lung_-_TEM_%282%29.jpg'
canvas_width = 500
app.layout = html.Div([
DashCanvas(id='canvas_image',
tool='rectangle',
lineWidth=5,
lineColor='red',
filename=filename,
width=canvas_width)
])
if __name__ == '__main__':
app.run_server(debug=True)
'width': '80%',
'height': '700px',
'margin': '0 auto 0',
'padding': '5%'
},
elements=elements)
]),
],
style={'margin': '5%'}),
# Dash Canvas
html.Div([
html.Div([html.H3(['Dash Canvas'], style=compTitle)]),
html.Div([
html.H3('絵が描けます'),
DashCanvas(id='canvas1', height=800),
],
style={'margin': '3%'}),
html.Div([
html.H3('小ネタだけでなく、scikit-imageと組み合わせたら凄いことに！'),
]),
html.Div([
DashCanvas(
id='segmentation-canvas',
lineWidth=5,
filename=filename,
width=canvas_width,
),
],
className="five columns"),
html.Div([
import json
import dash
import dash_html_components as html
from dash.dependencies import Input, Output
from dash_canvas import DashCanvas
app = dash.Dash(__name__)
# ➊ レイアウトを作成する
app.layout = html.Div([DashCanvas(id="my_canvas"), html.Div(id="my_callback")])
@app.callback(
# ➋ 入力項目にID"my_canvas"のjson_data属性を指定
Output("my_callback", "children"),
Input("my_canvas", "json_data"),
)
def show_json_data(json_data):
if json_data: # ➍ json_data属性にデータが存在する場合、返り値とする
return json.dumps(json_data)
raise dash.exceptions.PreventUpdate # ➎ データがない場合コールバックを更新しない
if __name__ == "__main__":
app.run_server(debug=True)
#html.Img(src=app.get_asset_url('2a76a.png'), style={'width': '250px'}),
#html.Img(src=app.get_asset_url('exd3k.png'), style={'width': '250px'}),
#html.Img(src=app.get_asset_url('ky5fm.png'), style={'width': '250px'}),
#html.Img(src=app.get_asset_url('w8bp5.png'), style={'width': '250px'}),
#html.Br(),
#html.Br(),
# Dash canvas for drawing captcha
html.Div(
[
html.H2('Draw a CAPTCHA and press SAVE to see work'),
DashCanvas(
id='canvas',
lineWidth=12,
lineColor='black',
hide_buttons=[
"zoom", "pan", "line", "pencil", "rectangle", "select"
],
height=200,
width=800,
),
],
style={
'display': 'inline-block',
'vertical-align': 'middle',
'border-style': 'ridge',
'border-width': '20px',
'padding': '15px',
}),
html.Br(),
html.Br(),
import dash_html_components as html
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url, parse_jsonstring
app = dash.Dash(__name__)
filename = 'https://raw.githubusercontent.com/plotly/datasets/master/mitochondria.jpg'
canvas_width = 300
app.layout = html.Div([
html.H6('Draw on image and press Save to show annotations geometry'),
html.Div([
DashCanvas(
id='canvas',
lineWidth=5,
filename=filename,
width=canvas_width,
),
],
className="five columns"),
html.Div([
html.Img(id='my-image', width=300),
], className="five columns"),
])
@app.callback(Output('my-image', 'src'), Input('canvas', 'json_data'))
def update_data(string):
if string:
mask = parse_jsonstring(string,
io.imread(filename, as_gray=True).shape)
dash_table.DataTable(
id='table2',
# Defines, that all columns from df_summary shall be shown
columns=[{
"name": i,
"id": i
} for i in df_summary.columns],
data=df_summary.to_dict('records'),
# Defines the Style of the Table
style_table={'margin': {
'b': 10000
}}),
# Includes Image
DashCanvas(id='graph',
tool='line',
lineWidth=5,
lineColor='red',
image_content='data:image/png;base64,{}'.format(test_base64),
width=canvas_width),
# Creates the Sub-Headline
html.Div(children=[
html.Div("-"),
html.Div("-"),
html.Div("-"),
html.Div("Summary of the components:"),
]),
# Creates Table 2
dash_table.DataTable(
id='table',
# Defines, that all columns of df_components shall be
# shown
columns=[{