シスコ NeXt UI をカスタマイズしてみた

シスコ NeXt UI を使ってトポロジを描画してみたでは、シスコ NeXt UI のダウンロードからインストールまで紹介しました。ここではいろいろなカスタマイズについてまとめます。

アイコンの変更

シスコ NeXt UI には、以下のように様々なアイコンが最初から含まれています（https://developer.cisco.com/site/neXt/discover/demo/ の Topology Icons から一部分のみ引用）。

デフォルトではノードが unknown の ? マークになっていますので、これをルータに変更します。これだけであれば、Shell.js に一行追加するだけで実現できます。

 16                     nodeConfig: {
 17                         // label display name from of node's model, could change to 'model.id' to show id
 18                         label: 'model.name',
 19                         iconType: 'router'  // 追加
 20 
 21                     },

これで無事にルータのアイコンになりました。

リンクの変更

リンクタイプは curve と parallel が選べます。これまでのトポロジは curve でしたので、Shell.js を次のように変えて parallel にしてみます。

 23                     linkConfig: {
 24                         // multiple link type is curve, could change to 'parallel' to use parallel link
 25                         linkType: 'parallel'  // parallel に変更
 26                     },

すると、下記のようにリンクが平行線になりました。

テーマの変更

NeXt UI では blue, green, dark, slate および yellow の 5 つのテーマが用意されています。デフォルトは blue です。ブラウザで描画したときの設定ボタン（ギアのアイコン）を押しても変更できますが、コード上で変更する際には、下記のように nx.graphic.Topology クラスに theme プロパティを追加します。

 13                     width: 580,
 14                     height: 580,
 15                     theme: "green",  // blue, green, dark, slate, yellow のいずれかを追加
 16                     // node config
 17                     nodeConfig: {

それぞれのテーマは以下のような感じです（デフォルトの blue はこれまでの画面なので省略します）。

green

dark

slate

yellow