見出し画像

TWSNMPのマップとログ表示の実現方法

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

画像1

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

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

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

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

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

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

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

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

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

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

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

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

つづく




この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
有難き幸せ!
2
私は、TWSNMP Managerの開発者です。 20年以上前に作ったソフトを、今も多くの人に使っていただけて、幸せに思っています。 最近、新しい技術でTWSNMP Managerの復刻版の開発を行っています。 開発日誌やマニュアルをnoteに書いています。

こちらでもピックアップされています

TWSNMPの作り方
TWSNMPの作り方
  • 59本

TWSNMPを開発する時に調べたこと、試してみたこと、見つけた便利ツールについて書いているマガジンです。これからプログラマーを目指す人に、まったく、何もないところからTWSNMPのようなソフトウェアを作る時に、私がどのように考えて、何を調べて、どう判断したかをお知らせできればと思っています。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。