Dash 第58回（DashCanvas アノテーション表示）

アノテーション表示

json_data属性を使って、キャンバスのアノテーションの内容を表示するアプリケーションを作成します。

レイアウトとしてDashCanvasコンポ―ネントの下に、アノテーションの内容を表示するDivコンポーネントを配置します。（10行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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__)           # Dashインスタンスを生成

# レイアウト作成
app.layout = html.Div([DashCanvas(id='canvas1'), html.Div(id='div1')])

@app.callback(
    # 入力項目にID'canvas1'のjson_data属性を設定
    Output('div1', 'children'),
    Input('canvas1', 'json_data')
)
def show_json(json_data):
    if json_data:   # json_data属性にデータが存在するかどうか
        return json.dumps(json_data)        # json_dataを文字列にして返す
    else:
        raise dash.exceptions.PreventUpdate # コールバックを更新しない

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

コールバック関数では、出力項目をDivコンポーネントのchildren属性、入力項目をDashCanvasコンポーネントのjson_data属性としています。（14～15行目）

json_data属性にデータがある場合、json_data属性の値を返し、データがない場合はコールバックの更新を行いません。（18～21行目）

[ブラウザで表示]

キャンバスに線を描画し、Saveボタンをクリックするとアノテーションの内容が表示されることを確認できます。