Dash 第61回（DashCanvas 選択情報をテーブル表示）

選択情報をテーブル表示

キャンバス上で長方形の選択をした箇所をテーブルに表示してみます。

長方形で選択した範囲をparse_jsonstring_rectangleで取得し（67行目）、そのデータをDataFrameに変換してDataTableコンポーネントに設定・表示します。（68～70行目）

また、線の色を選択できるラジオボタンも作成しています。（23～27行目、51～56行目）

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table
import pandas as pd
from dash.dependencies import Input, Output
from dash_canvas import DashCanvas
from dash_canvas.utils import array_to_data_url, parse_jsonstring_rectangle
from skimage import io

filename = array_to_data_url(io.imread('cherry.png'))
pen_color = ['black', 'lime', 'red', 'blue', 'yellow']
columns = ['width', 'height', 'left', 'top']

app = dash.Dash(__name__)           # Dashインスタンスを生成

# レイアウト作成
app.layout = html.Div(
    [
        html.Div(
            [
                # 線の色を選択するラジオボタン
                dcc.RadioItems(
                    id='color1',
                    options=[{'value':c, 'label':c} for c in pen_color],
                    value='lime'
                ),
                DashCanvas(
                    id='image1',
                    image_content=filename,
                    width=400,
                    lineWidth=5,
                    goButtonTitle='to_table'
                )
            ],
        ),
        html.Div(
            [
                # 選択した長方形の範囲を表示するテーブル
                dash_table.DataTable(
                    id='table1',
                    columns=[{'name':i, 'id':i} for i in columns],
                    export_format='csv'
                )
            ]
        )
    ]
)

# 線の色を更新するコールバック
@app.callback(
    Output('image1', 'lineColor'),
    Input('color1', 'value')
)
def update_color(selected_color):
    return selected_color

# 選択した長方形の範囲をテーブルに表示するコールバック
@app.callback(
    Output('table1', 'data'),
    Input('image1', 'json_data')
)
def showLine(json_data):
    if not json_data:
        raise dash.exceptions.PreventUpdate
    else:
        data = parse_jsonstring_rectangle(json_data)
        if len(data):
            df = pd.DataFrame(data, columns=columns)
            return df.to_dict('records')

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

[ブラウザで表示]

キャンバス上をいくつか長方形で選択をした後に、to_tableボタンを押すと選択情報がテーブルに表示されます。

またExportボタンを押すと選択情報をCSVファイルに出力することができます。