Rerun Blueprintsでviewerの設定を行う | Rerun入門

# Rerunとは
Rerunについては下記の記事を参考にしてください．簡単な使い方もこちらで解説しています．

https://qiita.com/ryhara/items/f78f80a07b30ed8ce845

viewerの使い方はこちら

https://qiita.com/ryhara/items/0e46aeda57fa75096dca

本記事は基本Pythonでの使用方法について解説します．


# Blueprintとは
- 参考：[Blueprint — Rerun](https://rerun.io/docs/reference/viewer/blueprint)
- 参考：[Blueprints — Rerun](https://rerun.io/docs/concepts/blueprint)

RerunにはBlueprintという概念が存在します．BlueprintとはRerunのviewerに表示される内容を構成する設定のことを際します．blueprintは`application id`，`session`ごとに保存されます．

具体的にはviewerに表示されている以下の部分のことを指します. viewer内での階層構造を表します．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/3e82c5b5-1099-a8b7-30d2-7c4afa776a7a.png)

# マウス操作
参考：[Configure the Viewer interactively — Rerun](https://rerun.io/docs/getting-started/configure-the-viewer/interactively)

### viewの表示・非表示
各viewの`目のマーク`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/920618cc-868b-e4d5-b78d-b059cc746a80.png)

### viewの削除
各viewの`-`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/e824c43b-0009-437b-3b91-d09a313a152f.png)

### 新しいviewの追加
viewer左端の`+`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/b4f5ae0b-bccc-b311-648e-c9d3e1ecf16b.png)

Vertical, Horizontal, Tabsなどのcontainerやviewportを選択した状態で，viewer右端のエリアのContentsの`+`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/83bad0b0-a706-0c8e-b195-0bf17447b3f9.png)

`+`ボタンを押すと以下のようなモーダルが表示されview等を追加することが出来ます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/e3921aba-6ab1-c65c-f6d6-c9cd2b688a41.png)

### viewの編集
viewやcontainerなどを選択した状態でviwer右端の欄を見ると，名前やviewの種類，設定の変更などが可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/f17e5b16-233c-1628-2091-92a5afeab452.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/0cc53de1-ef2f-48ed-7db7-ff6054950367.png)

### Blueprintの保存
viewer左上のメニューからblueprintを`.rbl`ファイルに保存し，`open`から読み込ませることが出来る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3085757/da862944-ea92-0186-e881-5d3a8f157e1c.png)



# コードによる操作

参考
- 画像付きの実装例：[Configure the Viewer through code — Rerun](https://rerun.io/docs/getting-started/configure-the-viewer/through-code-tutorial)
- さまざまな実装例：[Configure the Viewer through code (Blueprints) — Rerun](https://rerun.io/docs/howto/visualization/configure-viewer-through-code)
- Blueprintに関する関数・引数のドキュメント：[Blueprint APIs - Rerun Python APIs](https://ref.rerun.io/docs/python/0.21.0/common/blueprint_apis/#rerun.blueprint)


参考ページに様々な例があるので参考にしてみて下さい

### 設定方法
```python:import
import rerun as rr
import rerun.blueprint as rrb
```

Blueprint→Conteiner→Viewという階層構造になっています
- Blueprintはviewerの設定全体
- Containerは複数のcontainerやviewを含む
  - `Horizontal`, `Vertical`, `Grid`, `Tabs`
- Viewはデータを表示する１つのview
  - `BarChartView`, `Spatial2DView`, `Spatial3DView`, `TensorView`, `TextDocumentView`, `TextLogView`,`TimeSeriesView`. 

コードでは以下の用にblueprintを定義します．
```python:定義
my_blueprint = rrb.Blueprint(
    rrb.Horizontal(
        rrb.BarChartView(),
        rrb.Vertical(
            rrb.Spatial2DView(),
            rrb.Spatial3DView(),
        ),
    ),
)
```

viewerにblueprintの設定を送ります．
```python:例1
my_blueprint = rrb.Blueprint(...)

rr.init("rerun_example_my_blueprint", spawn=True, default_blueprint=my_blueprint)
```
```python:例2
my_blueprint = rrb.Blueprint(...)

rr.init("rerun_example_my_blueprint")

...

rr.connect(default_blueprint=my_blueprint)
```
```python:例3
my_blueprint = rrb.Blueprint(...)

rr.init("rerun_example_my_blueprint", spawn=True)

rr.send_blueprint(my_blueprint, make_active=True)
```

### 著者の設定例
GUI操作で変更は出来ますが，デフォルトで全て表示するような設定にしています
```python
rr.init("XXXX", spawn=True) # 初期化
rr.connect(addr=f"{ip}:{port}") # viewerを開いているクライアントに接続
blueprint = rrb.Blueprint( # blueprintの設定
        rrb.TimePanel(state="expanded"), # 画面下のTimePanelを表示
        rrb.SelectionPanel(state="expanded"), # 画面右の選択時の詳細パネルを表示
        rrb.BlueprintPanel(state="expanded"), # Blueprintのパネルを表示
        rrb.Vertical( # 縦にviewを積み重ねる
            rrb.Spatial3DView(origin="/3D", background=[255, 255, 255]), # 背景白の3Dをplotするためのview
            rrb.Spatial2DView(origin="/2D", background=[255, 255, 255]), # 背景白の2Dをplotするためのview
        ),
    )
rr.send_blueprint(blueprint) # blueprintの設定を送る

```

# おわりに
今回はBlueprintについて解説しました．
まだまだ使いこなせていない部分も多いですが，引き続き触りながら解説記事を増やしていきたいと思います．

# 参考
本記事は以下のページを元にまとめたものです．

https://rerun.io/docs/getting-started/configure-the-viewer/interactively

https://rerun.io/docs/getting-started/configure-the-viewer/save-and-load

https://rerun.io/docs/getting-started/configure-the-viewer/through-code-tutorial

https://rerun.io/docs/concepts/blueprint

https://rerun.io/docs/reference/viewer/blueprint

https://ref.rerun.io/docs/python/0.21.0/common/blueprint_apis/#rerun.blueprint