Dash Multiple slicers

Dash Multiple slicers

前回記事で紹介したDash Slicerは複数設定することができます。

今回は複数のスライサー を各ディメンションごとに作成し、３つのレイアウトに配置します。

各ビューには、他のスライサーの位置を示すインジケーターラインが含まれます。

各スライサーには特定の色 (自動選択) が割り当てられ画像の四隅に表示されます。他のビュー上でのスライサーの位置はインジケーターラインの色で判断することができます。

[ソースコード]

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
import dash
import dash_html_components as html
import imageio
from dash_slicer import VolumeSlicer

app = dash.Dash(__name__, update_title=None)

vol = imageio.volread("imageio:stent.npz")
slicer0 = VolumeSlicer(app, vol, axis=0)
slicer1 = VolumeSlicer(app, vol, axis=1)
slicer2 = VolumeSlicer(app, vol, axis=2)

slicer0.graph.config["scrollZoom"] = False
slicer1.graph.config["scrollZoom"] = False
slicer2.graph.config["scrollZoom"] = False

app.layout = html.Div(
    style={
        "display": "grid",
        "gridTemplateColumns": "33% 33% 33%",
    },
    children=[
        html.Div([slicer0.graph, html.Br(), slicer0.slider, *slicer0.stores]),
        html.Div([slicer1.graph, html.Br(), slicer1.slider, *slicer1.stores]),
        html.Div([slicer2.graph, html.Br(), slicer2.slider, *slicer2.stores]),
    ],
)

if __name__ == "__main__":
    app.run_server(debug=True, dev_tools_props_check=False)

[ブラウザで表示]

３種類の断面図が表示されました。

画面下部のスライダーを操作すると、３種類のビューのスライス位置が全て更新されます。

まだドラッグして画像の表示位置を変更したり、zoom機能で拡大して表示したりすることも可能です。