def fill_tab(tab):
if tab == 'canvas-tab':
return [
dash_canvas.DashCanvas(
id='canvas-stitch',
width=canvas_width,
height=canvas_height,
scale=scale,
lineWidth=2,
lineColor='red',
tool="line",
hide_buttons=['pencil'],
image_content=array_to_data_url(
np.zeros((height, width), dtype=np.uint8)),
goButtonTitle='Estimate translation',
),
html.Button('Upload demo data', id='demo'),
image_upload_zone('upload-stitch', multiple=True, width=45),
]
elif tab == 'result-tab':
return [
html.Img(id='stitching-result',
src=array_to_data_url(
np.zeros((height, width), dtype=np.uint8)),
width=canvas_width)
]
else:
return [
html.Img(id='bla', src='assets/stitching.gif', width=canvas_width),
]
def test_canvas_undo_redo(dash_duo):
h, w = 10, 10
overlay = np.zeros((h, w), dtype=np.uint8)
overlay = img_as_ubyte(overlay)
# Set up a small app. This could probably be made into a fixture.
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Store(id='cache', data=''),
dash_canvas.DashCanvas(id="canvas",
width=w,
height=h,
image_content=array_to_data_url(overlay),
goButtonTitle="save")
])
data_saved = []
@app.callback(Output('cache', 'data'), [Input("canvas", "trigger")],
[State("canvas", "json_data")])
def update_overlay(flag, data):
data_saved.append(data)
dash_duo.start_server(app)
# At application startup, a black 10x10 image is shown. When we click
# save, we expect a non-trivial JSON object representing this image. We
# assert that we get this object, but we don't dig into it.
btn = _get_button_by_title(dash_duo, "Save")
btn.click()
objs_1 = json.loads(data_saved[-1])['objects']
assert len(objs_1) > 0
# When we click "undo", the image disappears. We check that we get an
# empty JSON representation back.
btn = _get_button_by_title(dash_duo, "Undo")
btn.click()
btn = _get_button_by_title(dash_duo, "Save")
btn.click()
objs_2 = json.loads(data_saved[-1])['objects']
assert objs_2 == []
# When we click "redo", the original 10x10 black image is restored.
btn = _get_button_by_title(dash_duo, "Redo")
btn.click()
btn = _get_button_by_title(dash_duo, "Save")
btn.click()
objs_3 = json.loads(data_saved[-1])['objects']
assert objs_1 == objs_3
def fill_tab(tab):
if tab == "canvas-tab":
return [
dash_canvas.DashCanvas(
id="canvas-stitch",
width=canvas_width,
height=canvas_height,
scale=scale,
lineWidth=2,
lineColor="red",
tool="line",
hide_buttons=["pencil"],
image_content=array_to_data_url(
np.zeros((height, width), dtype=np.uint8)),
goButtonTitle="Estimate translation",
),
html.Div(
children=[
html.Div(
image_upload_zone("upload-stitch",
multiple=True,
width="100px"))
],
className="upload_zone",
id="upload",
),
]
elif tab == "result-tab":
return [
dcc.Loading(
id="loading-1",
children=[
html.Img(
id="stitching-result",
src=array_to_data_url(
np.zeros((height, width), dtype=np.uint8)),
width=canvas_width,
)
],
type="circle",
),
html.Div(
[
html.Label("Contrast"),
dcc.Slider(id="contrast-stitch",
min=0,
max=1,
step=0.02,
value=0.5),
],
className="result_slider",
),
html.Div(
[
html.Label("Brightness"),
dcc.Slider(id="brightness-stitch",
min=0,
max=1,
step=0.02,
value=0.5),
],
className="result_slider",
),
]
return [
html.Img(id="bla",
src=app.get_asset_url("stitch_demo.gif"),
width=canvas_width)
]
columns = [{"name": i, "id": i} for i in list_columns]
columns[-1]['presentation'] = 'dropdown'
app.layout = html.Div(
[
html.Div([
html.H3('Annotate image with bounding boxes'),
dcc.Markdown(
dedent('''
Annotations of vehicles can be used as training set for machine
learning.
''')),
dash_canvas.DashCanvas(id='canvas',
width=500,
tool="rectangle",
lineWidth=2,
filename=filename,
hide_buttons=['pencil', 'line'],
goButtonTitle='Get coordinates'),
],
className="six columns"),
html.Div([
html.Img(id='img-help', src='assets/bbox.gif', width='100%'),
html.H4('Geometry of bounding boxes'),
dash_table.DataTable(
id='table',
columns=columns,
editable=True,
column_static_dropdown=[{
'id':
'type',
def automatic_solve_sudoku(server):
external_stylesheets = [dbc.themes.CYBORG]
app = dash.Dash(server=server,
external_stylesheets=external_stylesheets,
routes_pathname_prefix='/project_sudoku_solver/solver/')
app.title = 'Sovle Sudoku'
app.config.suppress_callback_exceptions = True
filename = "all_projects/opencv/project_sudoku_solver/assets/sudoku.jpg"
img_app3 = io.imread(filename)
height, width, _ = img_app3.shape
canvas_width = 500
canvas_height = round(height * canvas_width / width)
scale = canvas_width / width
app.layout = dbc.Jumbotron([
dbc.Row([
dbc.Col(html.H1(children='Calcualte Sudoku',
style={
'textAlign': 'center',
'color': '#7FDBFF'
}),
md=12)
],
align="center",
style={'backgroundColor': '#111111'}),
dbc.Row([
dbc.Col(html.Div(
children='Upload Sudoku Image and get Instant result',
style={
'textAlign': 'center',
'color': '#7FDBFF'
}),
md=12)
],
align="center",
style={'backgroundColor': '#111111'}),
html.Hr(),
dbc.Row([dbc.Col(image_upload_zone('upload-image-bg'), md=12)],
align="center",
style={'backgroundColor': '#111111'}),
html.Hr(),
dbc.Row([
dbc.Col(dash_canvas.DashCanvas(
id='canvas-bg',
width=canvas_width,
height=canvas_height,
scale=scale,
image_content=array_to_data_url(img_app3),
lineWidth=4,
goButtonTitle='Calculate',
hide_buttons=['line', 'zoom', 'pan'],
),
width="auto"),
dbc.Col(
dcc.Loading(id="loading-1",
type="default",
children=[
html.Img(id='segmentation-bg',
src="assets/new.gif",
width=500),
])),
],
justify="around",
style={'backgroundColor': '#111111'}),
html.Hr(),
dbc.Row([
dbc.Col(html.H6(children=['Digit Box width'],
style={'color': "#e3c439"}),
width=2),
dbc.Col(
dcc.RangeSlider(
id='bg-width-slider',
marks={i: '{}'.format(i)
for i in range(5, 46)},
min=5,
max=45,
step=1,
value=[9, 30]))
],
style={'backgroundColor': '#111111'}),
dbc.Row([
dbc.Col(html.H6(children=['Digit Box height'],
style={'color': "#e3c439"}),
width=2),
dbc.Col(
dcc.RangeSlider(
id='bg-height-slider',
marks={i: '{}'.format(i)
for i in range(5, 46)},
min=5,
max=45,
step=1,
value=[20, 40]))
],
style={'backgroundColor': '#111111'}),
dbc.Row([
dbc.Col(html.H6(children=['Bird Eye View'],
style={'color': "#e3c439"}),
width=2),
dbc.Col(
dcc.RadioItems(id='radio-birdeye',
options=[
{
'label': 'No',
'value': False
},
{
'label': 'Yes',
'value': True
},
],
value=False,
style={'color': '#18a4db'}))
],
style={'backgroundColor': '#111111'}),
dbc.Row([
dbc.Col(html.H6(children=['Check ??'], style={'color': "#e3c439"}),
width=2),
dbc.Col(
dcc.RadioItems(id='radio-calculate',
options=[
{
'label': 'Find Number',
'value': False
},
{
'label': 'Solve Sudoku',
'value': True
},
],
value=False,
style={'color': '#18a4db'}))
],
style={'backgroundColor': '#111111'}),
html.Hr(),
dbc.Row(
html.Img(
src=
'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
width='30px'), )
])
# ----------------------- Callbacks -----------------------------
@app.callback(Output('bg-title', 'children'),
[Input('canvas-bg', 'json_data')])
def modify_bg_title(json_data):
if json_data:
return "First Check all digits are in green box and then solve Sudoku"
else:
raise PreventUpdate
@app.callback(Output('segmentation-bg', 'src'),
[Input('canvas-bg', 'json_data')], [
State('canvas-bg', 'image_content'),
State('bg-height-slider', 'value'),
State('bg-width-slider', 'value'),
State('radio-birdeye', 'value'),
State('radio-calculate', 'value'),
])
def update_figure_upload(string, image, height, width, birdeye,
calculation):
if string:
if image is None:
im = img_app3
else:
im = image_string_to_PILImage(image)
im = np.asarray(im)
dat, locsgrid, locs, gray, output_image = solve_sudoku(
im,
beyeview=birdeye,
digit_h=(height[0], height[1]),
digit_w=(width[0], width[1]))
if calculation:
dat = compute(locsgrid, locs, gray, output_image)
return array_to_data_url(dat)
else:
raise PreventUpdate
@app.callback(Output('canvas-bg', 'json_data'),
[Input('canvas-bg', 'image_content')])
def clear_data(image_string):
return ''
@app.callback(Output('canvas-bg', 'image_content'),
[Input('upload-image-bg', 'contents')])
def update_canvas_upload(image_string):
if image_string is None:
raise ValueError
if image_string is not None:
return image_string
else:
return None
@app.callback(Output('canvas-bg', 'lineWidth'),
[Input('bg-width-slider', 'value')])
def update_canvas_linewidth(value):
return value
return app.server
value='png',
labelStyle={'display': 'inline-block'}),
html.A('Download Data',
id='download-link',
download="correct_segmentation.png",
href="",
target="_blank"),
dcc.Store(id='cache', data=''),
],
className="four columns"),
html.Div([
dash_canvas.DashCanvas(
id='canvas_',
width=canvas_width,
height=canvas_height,
scale=scale,
lineWidth=2,
lineColor='red',
image_content=array_to_data_url(overlay),
goButtonTitle='Update',
),
],
className="six columns"),
])
# ----------------------- Callbacks -----------------------------
@app.callback(Output('cache', 'data'), [
Input('canvas_', 'trigger'),
], [
State('canvas_', 'json_data'),
height, width, _ = img_app3.shape
canvas_width = 500
canvas_height = round(height * canvas_width / width)
scale = canvas_width / width
app.layout = html.Div([
html.Div([
html.Div([
html.H2(children='Remove image background'),
dcc.Markdown('''
Draw on the object of interest, and press remove background.'''),
dash_canvas.DashCanvas(
id='canvas-bg',
width=canvas_width,
height=canvas_height,
scale=scale,
image_content=array_to_data_url(img_app3),
lineWidth=4,
goButtonTitle='Remove background',
hide_buttons=['line', 'zoom', 'pan'],
),
html.H6(children=['Brush width']),
dcc.Slider(id='bg-width-slider', min=2, max=40, step=1, value=[5]),
image_upload_zone('upload-image-bg'),
],
className="seven columns"),
html.Div([
html.Img(
src=
'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
width='30px'),
html.A(id='gh-link',
def serve_layout():
session_id = str(uuid.uuid4())
layout = html.Div(
[
html.Div([
html.Div(
session_id, id="session-id", style={"display": "none"}),
html.Div([], id="storage", style={"display": "none"}),
html.H3("Permafrost Image Annotation"),
html.Div([
html.Div(
[
dcc.DatePickerSingle(
id="my-date-picker-single",
min_date_allowed=stuett.to_datetime(
"2017-01-01"),
max_date_allowed=stuett.to_datetime(
"2017-12-31"),
initial_visible_month=None,
date="2017-01-01",
display_format="Y-MM-DD",
)
],
style={
"width": "50%",
"display": "inline-block"
},
),
html.Div(
id="date_indicator",
style={
"width": "50%",
"display": "inline-block"
},
),
html.Div(
[
dcc.Input(
id="userid_input",
placeholder="Your ID",
type="number",
value="",
persistence=True,
),
],
style={
"width": "50%",
"display": "inline-block"
},
),
]),
html.Div(
[
dash_canvas.DashCanvas(
id="canvas",
width=500,
tool="select",
lineWidth=2,
# json_data_in=json_template,
# filename=filename,
hide_buttons=["pencil", "line"],
),
],
style={"text-align": "center"},
),
]),
html.Div(
[
dcc.Markdown("Class names for bounding boxes:"),
dcc.Dropdown(
id="bb_label_dropdown",
options=[{
"label": bb_label_mapping[m],
"value": m
} for m in bb_label_mapping.keys()],
value="#1f77b4",
),
dcc.Markdown("Class names for per image Labels:"),
dcc.Dropdown(
id="static_label_dropdown",
options=[{
"label": static_label_mapping[m],
"value": m
} for m in static_label_mapping.keys()],
value=[],
multi=True,
),
dcc.Store(id="index", data=0),
],
className="six columns",
),
dcc.Markdown(
"""Annotate by selecting per picture labels or draw bounding boxes with the rectangle tool
Note: Rotating bounding boxes will result in incorrect labels."""
),
],
style={"width": "50%"}, # Div
className="row",
)
return layout
height, width = img.shape
canvas_width = 500
canvas_height = round(height * canvas_width / width)
scale = canvas_width / width
list_columns = ['length', 'width', 'height']
columns = [{"name": i, "id": i} for i in list_columns]
layout = html.Div([
html.Div([
dash_canvas.DashCanvas(
id='canvas-line',
width=canvas_width,
height=canvas_height,
scale=scale,
lineWidth=2,
lineColor='red',
tool="line",
hide_buttons=['pencil'],
image_content=array_to_data_url(img),
goButtonTitle='Measure',
),
],
className="seven columns"),
html.Div([
html.H3('Draw lines and measure lengths'),
html.H3(children='How to use this app', id='measure-subtitle'),
html.Img(id='measure-help', src='assets/measure.gif', width='100%'),
html.H4(children="Objects properties"),
dash_table.DataTable(
id='table-line',
columns=columns,
layout = html.Div([
html.Div([
dcc.Tabs(id='stitching-tabs',
value='canvas-tab',
children=[
dcc.Tab(label='Image tiles',
value='canvas-tab',
children=[
dash_canvas.DashCanvas(
id='canvas-stitch',
width=canvas_width,
height=canvas_height,
scale=scale,
lineWidth=2,
lineColor='red',
tool="line",
image_content=array_to_data_url(
np.zeros(
(width, width), dtype=np.uint8)),
goButtonTitle='Estimate translation',
),
html.Button('Upload demo data', id='demo'),
image_upload_zone(
'upload-stitch', multiple=True, width=45),
html.Div(id='sh_x', hidden=True),
]),
dcc.Tab(label='Stitched Image',
value='result-tab',
children=[
html.Img(id='stitching-result',
def description():
return "Remove background of image to extract objects of interest."
layout = html.Div([
html.Div([
html.Div([
html.H2(children='Remove image background'),
dcc.Markdown('''
Draw on the object of interest, and press Save to remove
background.'''),
dash_canvas.DashCanvas(
id='canvas-bg',
width=canvas_width,
height=canvas_height,
scale=scale,
filename=filename,
lineWidth=4,
goButtonTitle='Remove background',
hide_buttons=['line', 'zoom', 'pan'],
),
html.H6(children=['Brush width']),
dcc.Slider(id='bg-width-slider', min=2, max=40, step=1, value=[5]),
image_upload_zone('upload-image-bg'),
],
className="six columns"),
html.Div([
html.H3(children='Image without background'),
html.Img(id='segmentation-bg',
src=array_to_data_url(np.zeros_like(img)),
width=canvas_width)
],
def automatic_solve_sudoku(server):
external_stylesheets = [dbc.themes.CYBORG]
app = dash.Dash(server=server,
external_stylesheets=external_stylesheets,
routes_pathname_prefix='/project_sudoku_solver/solver/')
app.title = 'Sovle Sudoku'
app.config.suppress_callback_exceptions = True
filename = "all_projects/opencv/project_sudoku_solver/assets/sudoku.jpg"
img_app3 = io.imread(filename)
height, width, _ = img_app3.shape
canvas_width = 500
canvas_height = round(height * canvas_width / width)
scale = canvas_width / width
app.layout = dbc.Jumbotron([
html.Div(
[
html.Div([
html.H1(children='Calcualte Sudoku'),
dcc.Markdown('''
Draw on the object of interest, and press calculate'''),
image_upload_zone('upload-image-bg'),
html.Hr(),
dash_canvas.DashCanvas(
id='canvas-bg',
width=canvas_width,
height=canvas_height,
scale=scale,
image_content=array_to_data_url(img_app3),
lineWidth=4,
goButtonTitle='Calculate',
hide_buttons=['line', 'zoom', 'pan'],
),
html.H6(children=['Digit Box width']),
dcc.RangeSlider(
id='bg-width-slider',
marks={i: '{}'.format(i)
for i in range(5, 46)},
min=5,
max=45,
step=1,
value=[9, 30]),
html.H6(children=['Digit Box height']),
dcc.RangeSlider(
id='bg-height-slider',
marks={i: '{}'.format(i)
for i in range(5, 46)},
min=5,
max=45,
step=1,
value=[20, 40]),
html.H6(children=['Bird Eye View']),
dcc.RadioItems(id='radio-birdeye',
options=[
{
'label': 'No',
'value': False
},
{
'label': 'Yes',
'value': True
},
],
value=False),
html.H6(children=['Check ??']),
dcc.RadioItems(id='radio-calculate',
options=[
{
'label': 'Find Number',
'value': False
},
{
'label': 'Solve Sudoku',
'value': True
},
],
value=False),
],
className="seven columns"),
html.Div(
[
html.Hr(),
html.Img(
src=
'https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png',
width='30px'),
# html.A(
# id='gh-link',
# children=[
# 'View on GitHub'],
# href="http://github.com/plotly/canvas-portal/"
# "blob/master/apps/remove-background/app.py",
# style={'color': 'black',
# 'border': 'solid 1px black',
# 'float': 'left'}
# ),
html.Hr(),
html.H3(
children='How to use this app and Solve Sudoku',
id='bg-title'),
html.Img(
id='segmentation-bg',
src=
'all_projects/opencv/project_sudoku_solver/assets/new.gif',
width='40%')
],
className="four columns")
],
className="row")
])
# ----------------------- Callbacks -----------------------------
@app.callback(Output('bg-title', 'children'),
[Input('canvas-bg', 'json_data')])
def modify_bg_title(json_data):
if json_data:
return "First Check all digit are in green box and then solve Sudoku"
else:
raise PreventUpdate
@app.callback(Output('segmentation-bg', 'src'),
[Input('canvas-bg', 'json_data')], [
State('canvas-bg', 'image_content'),
State('bg-height-slider', 'value'),
State('bg-width-slider', 'value'),
State('radio-birdeye', 'value'),
State('radio-calculate', 'value'),
])
def update_figure_upload(string, image, height, width, birdeye,
calculation):
if string:
if image is None:
im = img_app3
else:
im = image_string_to_PILImage(image)
im = np.asarray(im)
dat, locsgrid, locs, gray, output_image = solve_sudoku(
im,
beyeview=birdeye,
digit_h=(height[0], height[1]),
digit_w=(width[0], width[1]))
if calculation:
dat = compute(locsgrid, locs, gray, output_image)
return array_to_data_url(dat)
else:
raise PreventUpdate
@app.callback(Output('canvas-bg', 'json_data'),
[Input('canvas-bg', 'image_content')])
def clear_data(image_string):
return ''
@app.callback(Output('canvas-bg', 'image_content'),
[Input('upload-image-bg', 'contents')])
def update_canvas_upload(image_string):
if image_string is None:
raise ValueError
if image_string is not None:
return image_string
else:
return None
@app.callback(Output('canvas-bg', 'lineWidth'),
[Input('bg-width-slider', 'value')])
def update_canvas_linewidth(value):
return value
return app.server
'width': str(100) + '%',
'height': '50px',
'lineHeight': '50px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center'
},
multiple=False,
),
html.Div(id='view-output'),
html.Button('Previous', id='getprev', n_clicks=0),
html.Button('Next', id='getnext', n_clicks=0),
dash_canvas.DashCanvas(id='canvas',
tool='rectangle',
lineWidth=2,
lineColor='rgba(255,0, 0, 0.5)',
hide_buttons=['pencil', 'line'],
goButtonTitle='Label'),
html.Div([
html.Div([
html.H3('Label images with bounding boxes'),
]),
html.Div([
dash_table.DataTable(
id='table',
columns=columns,
editable=True,
dropdown={'label': {
'options': shortlists
}},
),
justify="end",
),
dbc.Row(
[
dbc.Col(html.Div("One of two columns"), width=4),
dbc.Col(html.Div("One of two columns"), width=4),
],
justify="between",
),
dbc.Row(
[
dbc.Col(dash_canvas.DashCanvas(
id='canvas-bg',
width=500,
height=500,
scale=1,
image_content=array_to_data_url(img_app3),
lineWidth=4,
goButtonTitle='Calculate',
hide_buttons=['line', 'zoom', 'pan'],
),),
dbc.Col(dash_canvas.DashCanvas(
id='canvas-bgf',
width=500,
height=500,
scale=1,
image_content=array_to_data_url(img_app3),
lineWidth=4,
goButtonTitle='Calculate',
hide_buttons=['line', 'zoom', 'pan'],
),),
],
return "Segmentation of objects from annotations"
layout = html.Div(
[
html.Div([
dcc.Tabs(id='segmentation-tabs',
value='segmentation-canvas-tab',
children=[
dcc.Tab(label='Annotation tool',
value='segmentation-canvas-tab',
children=[
dash_canvas.DashCanvas(
id='canvas',
width=canvas_width,
height=canvas_height,
scale=scale,
filename=filename,
goButtonTitle='Segmentation'),
image_upload_zone('upload-image'),
]),
dcc.Tab(label='Segmentation result',
value='segmentation-result-tab',
children=[
dcc.Graph(id='segmentation',
figure=image_with_contour(
np.ones_like(img),
img > 0,
shape=(height, width)))
]),
dcc.Tab(label='How to use this app',
app.css.config.serve_locally = True
app.layout = html.Div([
html.Div([
html.Div([
html.H2(children='Segmentation tool'),
dcc.Markdown('''
Paint on each object you want to segment
then press the Save button to trigger the segmentation.
'''),
dash_canvas.DashCanvas(
id='canvas',
label='my-label',
width=canvas_width,
height=canvas_height,
scale=scale,
filename=filename,
),
], className="six columns"),
html.Div([
html.H2(children='Segmentation result'),
dcc.Graph(
id='segmentation',
figure=image_with_contour(img, img>0)
)
], className="six columns")],# Div
className="row")
])
# ----------------------- Callbacks -----------------------------
