JavaScriptでcanvasを使わないでネットワーク図を書いてみるよ

ドラッグアンドドロップの動作後のアクションに、AjaxでサーバサイドとAPI通信させてDB連携などして位置情報を保管共有できれば、いいな。
結線や線の削除をする動作を入れたり、オブジェクトの作成・削除を入れたり。
各線に両端のポート名を入れたり。
監視システムと連動させて、ネットワーク異常時に線を赤くしたり。
線や、オブジェクトにカーソルを合わせたら、統計情報のAPIをつついてhichartのようなグラフを表示したり。
色々とやりたいことが膨らんでくる!

論理ネットワーク図(IPやVLANが分かる図)と、物理結線図(装置やポートが分かる図)の両方を切り替えてみたり。
物理的な支障箇所と、論理的な影響箇所が一目でわかる仕組みが欲しいな。

まだまだ先は長そうだけど、コツコツつくってみるかな。

サーバサイドは、Mojoliciousが拡張性があって、とっつきやすそうなのでフレームワークに使ってみるかな。

 

 


Canvasを使わずラインを引く

コレ(http://king-of-nowhere.hatenablog.com/entry/2013/11/28/084116)スゴイです。

全てDIV要素1つで1つの線なので、#(ID).remove() や、 #(ID).css({}) で、ID毎に、線を消したり、移動したりと重なりを考慮しなくてよいので大変便利です。

Xの値が、開始と終了の大きさが反転していると、おかしな動作になったので、必ず開始が小さくなるように条件分岐を入れてみました。