見出し画像

TWSNMPの作り方(その4)

TWSNMPマネージャのメイン画面には、ノードの配置、状態を表示するマップ部分、ノードのリストを表示する部分、ログを表示する部分が必要です。ノードのリストやログは、HTMLで作ることができますが、マップは、そういうわけにはいきません。

画像1

マップの表示はどうする?

マップを表示するためには、次のようなことが必要です。

・ノードを示すアイコンを平面の任意の位置に表示する
・ノードの状態でアイコンの色を変える
・ノード間の接続を示すラインを表示する
・ノード間の接続状態で、ラインの色を変える
・ノードのアイコンをドラックして位置を変える
・ノードやマップの背景を右クリックしてメニューを表示する

普通のHTML/CSSだけでは、実現できないので、またまた、良さそうな図形描画ライブラリを探しました。見つけたのが、

p5.jsは、図形描画のためのソフトウェアProcessingのJavaScript版です。アート作品を作成するために使われることが多く、プログラマ向けと言うよりは、デザイナー、アーティスト向けです。なので、線を描く時は、line関数のように描画のための関数が直感的です。TWSNMPのマップを表示するために必要な描画関数がそろっていたので、簡単にデモ画面が作れました。

表示するアイコンをどうするか?

マップ表示のためのアイコンは、オリジナルのTWSNMPでは、Windowsのアイコンファイル(画像)を使っていました。画像の解像度が低いので、そのままだと、あまり綺麗ではありません。復刻版では、シンボルをフォントで提供している、

のフリー版をp5.jsと組み合わせて使うことにしました。

ログの表示をどうするか?

画面の下のほうにあるログ表示のためのテーブルは、普通にHTMLで表現しても実現できますが、沢山のログ(10000件とか)を表示して、検索やソート(並べ替え)をしたいと思うと、もう一工夫必要です。このためには、

というJavaScriptのライブラリを使うことにしました。このライブラリは、ここ数年、いろんなプロジェクトで利用してきたもので、表示した表をExcelなどの形式でダウンロードすることができる優れものです。

だいぶ、画面が形になってきたので、操作イメージも見えてきました。私は、ソフト開発する時に、だいたい、中身の処理よりも、見える部分を先につくって、操作イメージがわかるようにしています。そこから、必要な内部の処理が見えてくるので、開発の効率がよいのではと思っています。

つづく




この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

twsnmp

私は、TWSNMP Managerの開発者です。 20年以上前に作ったソフトを、いまだに多くの人に使っていただけて、幸せに思っています。 最近、新しい技術でTWSNMP Managerの復刻版を作ろうと思い開発日誌をnoteに書いて行こうと思います。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。