Skip to content
This repository was archived by the owner on Feb 10, 2025. It is now read-only.

Callback error when annotation surpasses the border of canvas #38

Open
ycaokris opened this issue Feb 12, 2020 · 1 comment · May be fixed by #40
Open

Callback error when annotation surpasses the border of canvas #38

ycaokris opened this issue Feb 12, 2020 · 1 comment · May be fixed by #40

Comments

@ycaokris
Copy link

  • When pencil draws from middle toward upper border, portion which surpasses the border appears on the other side.
  • When pencil passes beyond lower or right boundary of canvas body, callback error is raised. I believe this is related with how parse_json handles binary masks and relative indices of path, I tried to edit
    mask_tmp[inds[0], inds[1]] = 1
    from where error happens but I'm not able to lock it down.

app

Sample code:

import dash
import dash_html_components as html
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url, parse_jsonstring
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate
import numpy as np

app = dash.Dash(__name__)

canvas_width = 500
canvas_height = 200

app.layout = html.Div([
    html.H6('Draw on image and press Save to show annotations geometry'),
    html.Div([
    DashCanvas(id='canvas',
               lineWidth=2,
               width=500,
               height=200,
               hide_buttons=["zoom", "pan", "line", "pencil", "rectangle", "undo", "select"],
               lineColor='black',
               goButtonTitle='Sign'
               ),
    ], 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, (canvas_height, canvas_width))
    else:
        raise PreventUpdate
    return array_to_data_url((255 * mask).astype(np.uint8))


if __name__ == '__main__':
    app.run_server(debug=True)
@ycaokris
Copy link
Author

This also happens on the example on the docs, Although it looks a bit skewed and unnoticeable at this moment, an error is raised for updating dash component when pencil surpasses far from the right/bottom boundary.

Screen Shot 2020-02-11 at 11 27 19 PM

@ycaokris ycaokris changed the title Callback error when annotation approaches edge of canvas Callback error when annotation surpasses the border of canvas Feb 12, 2020
@emmanuelle emmanuelle linked a pull request Feb 13, 2020 that will close this issue
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant