Gridagramを使ってみた。

おうちモニターにパネルのような表示がしたくていろいろ調べてみました。

まずダッシュボードという仕組みがあるようで、いろいろ調べてみましたが、結構規模が大きかったり、nodejsを使ったりでリソースの少ないモジュールで動かすのは無理そうでした。ダッシュボードの主な利用方法は管理系のページになるようです。ダッシュボード系のライブラリはチャートの機能を持ったものが多く、独自で処理しているものやchart.jsを組み込んだものなどありました。

この手の調べ物には画像検索が有効な方法です。

次にドラッグできるグリッド系のライブラリを調べてみたのですが、使い方がわからなかったりで、これも諦めました。

そうしているうちに単純なグリッド系のGridagramというライブラリを見つけて試してみました。

GridagramはjQueryのpluginでそれほど大きなコードではありません。

cssはexamples.cssをほぼそのまま使って

        <link rel="stylesheet" media="all" href="gridagram.css" />
        <script src="js/jquery.gridagram.js"></script>

をHEADに追加して

                <div id="grid-container"></div>
                <div id="source-container"></div>

をBODYに追加して

function topcont() {
  $('#grid-container').show();
  $('#source-container').show();
  var data = [
    { a: "IP Address", b: { c: "10.0.1.1" } },
    { a: "UPTime", b: { c: "10000 sec" } },
  ];

  $("#grid-container").gridagram(data, {
    titleField: "a",
    bodyField: function(e) { return e.b.c; }
  });
}

で書けました。

グラフを表示するときには、以下のようにしてjQueryのメソッドで消します。

function pre() {
  $('#grid-container').hide();
  $('#source-container').hide();
}

レスポンシブではないようですが、使い方によっては十分な気がします。

ルーターのグローバルアドレスなどを表示するのが目的で調べていたですが、これをするためにshスクリプトのcgiでjsonを作るようにします。

cgi/top.cgi

#!/bin/sh
#[{ "a": "IP Address", "b": { "c": "10.0.1.1" } }]

GIP=`bsnmpwalk -s 10.0.1.1 1.3.6.1.2.1.4.20.1.1 | awk '!/ 10\./&&!/ 127\./{print $3}'`

UPDAYS=`bsnmpwalk -s 10.0.1.1 .1.3.6.1.2.1.1.3 | awk '{upsec=$3/100;days=int(upsec/(3600*24));print days}'`

echo "Content-Type: text/json"
echo ""

echo "[{ \"a\": \"IP Address\", \"b\": { \"c\": \""${GIP}"\" } },{ \"a\": \"FW UpTime\", \"b\": { \"c\": \""${UPDAYS}" days\" } }]"

これを読んで表示します。

function topcont() {
  $('#grid-container').show();
  $('#source-container').show();
  $.getJSON("cgi/top.cgi" , function(data) {
    $("#grid-container").gridagram(data, {
      titleField: "a",
      bodyField: function(e) { return e.b.c; }
    });
  });
}

できました。

UPDAYSはbcnmpdの起動時間で、システムの起動時間ではありません。