視覚化エンジンRoassal
Post on 08-Sep-2014
141 Views
Preview:
DESCRIPTION
Transcript
視覚化エンジンRoassalSmalltalkで気軽に視覚化
第67回Smalltalk勉強会
合同会社ソフトウメヤ 梅澤真史
Roassalとは??
● インタラクティブ性を持つ視覚化エンジン○ http://objectprofile.com/Roassal.html
● 複数のSmalltalkに対応○ VisualWorks○ Pharo○ Amber
■ https://github.com/pestefo/roamber● 2012年にデビュー
○ 現在Roassal2やRoassal3Dの開発中
● OSS, MITライセンス
インストール (Pharo)
● SmalltalkHubから取得
Gofer new smalltalkhubUser: 'ObjectProfile' project: 'Roassal'; package: 'ConfigurationOfRoassal'; load.(Smalltalk at: #ConfigurationOfRoassal) load
● Roassal2やRoassal3DはPharoから直接
○ Configuration Browserで選択し”Install Stable Version”
ドキュメント
● 公式サイト○ Roassal.pdf○ Mondrian.pdf
■ まず読んでおくこと
● Facebook○ https://www.facebook.com/ObjectProfile?fref=photo
■ Roassal2やRoassal3Dの豊富な例
豊富な例
● インストール後のToolsメニュー
● Roassal Easel (Roassal)● Roassal examples (Roassal2)● Roassal3D examples (Roassal3D)
タグクラウドとか...
● Collectionのサブクラスで最も実装されているセ
レクタは? (セレクタの人気度)nc := RTNameCloud new.Collection withAllSubclasses do: [ :c |
nc addStrings: (c methods collect: #selector) ].nc open
Sunburst
Sunburstとか...
● Collectionの全サブクラスでメソッドの実装数により色分け (黄色 -> 多いほどオレンジに)
b := RTSunburstBuilder new.b radialSpacing: 5; angularSpacing: 1.b shape current
color: [ :cls | | val |val := 1 / (cls selectors size + 1).Color yellow alphaMixed: val with: Color orange].
b explore: Collection using: #subclasses.b view @ RTDraggableView.b open
グラフとか...● Collection階層をツリー状に
○ メソッド数が多いほど赤く、大きく b := RTGraphBuilder new.b nodes
shape: (RTEllipse new size: #numberOfMethods);whenOverShowEdges: [ :cls | cls dependentClasses ].
b edges connectTo: [ :c | c subclasses ];useInLayout;shape: (RTLine new color: Color gray).
b layout tree.b global minSize: 5;
normalizeColor: [ :cls | cls selectors size ] using: (Array with: Color orange with: Color red).
b addAll: (Collection withAllSubclasses).b open.
使い方
● 基本的に作りたい図の種類のBuilderを使えば良い○ Builder-* カテゴリ
○ 各カテゴリにはexamplesメソッドやExampleクラスがある
のでなんとなくわかる
● 高度なことをする場合はCoreのクラス群を
直接操作する
Coreの使用例
● ViewにShapeを指定したElementを貼る
● レイアウトを指定して open
view := RTView new.label := RTLabel new height: [ :e | e ].view addAll: (label elementsOn: (10 to: 30)).ROCircleLayout onView: view.view open
Shape
Shapeからモデルを生成しViewに貼る
Viewにレイアウトを指定
Shapeの合成
● Shapeは+メッセージで足し算できる
○ 以下はlabelにellipseを足した例
view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new
size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: (elli elementsOn: (10 to: 30)).RTGridLayout onView: view.view open
Ellipseを足している
Interactionの付与
● Elementに@メッセージでInteractionを追加
○ 各種イベントに反応するように
view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: (((elli elementsOn: (10 to: 30)) @ RTDraggable)
@ (RTPopup text: [:e | e hex])).RTGridLayout onView: view.view open
ドラッグ可能&マウスオーバーでポップアップするように
Animationの追加
● Viewに addAnimation:○ 先ほどの例でViewを開いたまま、追加してみる
view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: (((elli elementsOn: (10 to: 30)) @ RTDraggable) @ (RTPopup text: [:e | e hex])).RTGridLayout onView: view.view open.
view addAnimation: (RTSpringLayoutStepping new view: view).
Edgeも追加してみる
● RTEdgeに各種の便利ファクトリメソッド
○ ある条件でノード間を特定の線で結ぶ
model := 10 to: 30.view := RTView new.label := RTLabel new height: [ :e | e ].elli := label + (RTEllipse new size: [:e | e]; color: (Color purple alpha: 0.3)).view addAll: ((elli elementsOn: model) @ RTDraggable).
RTEdge buildEdgesFromObjects: model from: [:m | m ] toAll: [:m | model asArray shuffled first: (4 atRandom)] using: (RTArrow new color: (Color gray); withOffsetIfMultiple) inView: view.
RTTreeLayout onView: view.view open
モデルからエッジを生成するためのルールを指定
イベントハンドラも入れてみる
● Element やEdgeにwhen:do:でイベントハンドラを
入れることができる
○ 先ほどの例に以下を追加
■ もちろん開いたままでもOK
view edges do: [:each |
each when: TRMouseClick do: [ :evt | RTBlink on: each in: view ]].
クリックするとチカチカするように
3Dでもほぼ同じ
● 100個のキューブをレイアウトして表示してみる
view := R3View new.view camera translateUp: 3; rotateRight: 90.elements := OrderedCollection new.100 timesRepeat: [
| el |el := R3CubeShape new element.elements add: el.view add: el].
R3CubeLayout on: elements.view addInteraction: R3MouseControl; addInteraction: R3KeyControl.view open
エレメント追加
レイアウト指定
インタラクション指定
その他の機能
● GraphET○ 円グラフ、折れ線グラフなどビジネス系グラフの
作成
● SVG、HTMLエクスポータ
○ http://objectprofile.com/examples/DependencyAnalyzerBuilder.html
● Trachel○ Cairoを使ったCanvas実装
○ Morphベースのものよりも高速
応用例
● Moose○ 既存プログラムのリエンジニアリングツール
■ http://www.moosetechnology.org● AspectMaps
○ アスペクト指向で作られたソフトの視覚化
■ http://pleiad.cl/research/software/aspectmaps■ https://www.youtube.com/watch?
feature=player_detailpage&v=uOmox7NgRAg
まとめ
● Roassalはインタラクティブな視覚化を支援する強
力なライブラリ
● 視覚化コンテスト開催中 (8/11まで)○ 応募してみるのもいいかも
○ https://www.facebook.com/ObjectProfile/photos/pb.340543479365589.-2207520000.1397480066./615059938580607
top related