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 -----------------------------