GPSデータの各種情報を表示する(1)

表示用のグリッドを用意する

  • 右パネルにグリッド(jQuery UI/PropertyGrid)を配置する

  • 左パネルには地図情報を表示したので、GPSデータの情報は右パネル(region=”east”)に表示する。形式は地図と同様、グリッド(jQuery UIのPropertyGrid)を使う。

    <div region="east" split="true" title="GPS Info" iconCls="icon-tip" style="width:180px;" collapsed="true">
        <table id="gridGpsInfo" class="easyui-propertygrid" fitColumns="true" style="width:180px;height:485px"></table>
    </div>
    

    パネルは初期状態では閉じておき、GPSファイルを読み込んだタイミングで開くようにする。

  • グリッドのキー項目を定義する

  • 表示したいキー項目名とをJSONファイルで定義する。あわせてグルーピング情報も記述する。今回は、
    ・ファイル全体:「開始ポイント」「終了ポイント」の「日時」、「速度」(最高・最低)
    ・各ポイント:「日時」「経緯度」「速度」「方向」「衛星数」
    を表示する。

    [
        {"name" : "start date" , "value" : "(init)" , "group" : "Start/End"},
        {"name" : "start time" , "value" : "(init)" , "group" : "Start/End"},
        {"name" : "end date" , "value" : "(init)" , "group" : "Start/End"},
        {"name" : "end time" , "value" : "(init)" , "group" : "Start/End"},
        {"name" : "# of points" , "value" : "(init)" , "group" : "Points"},
        {"name" : "min speed" , "value" : "(init)" , "group" : "Points"},
        {"name" : "max speed" , "value" : "(init)" , "group" : "Points"},
        {"name" : "index" , "value" : "(init)" , "group" : "Current Point"},
        {"name" : "date" , "value" : "(init)" , "group" : "Current Point"},
        {"name" : "time" , "value" : "(init)" , "group" : "Current Point"},
        {"name" : "longitude" , "value" : "(init)" , "group" : "Current Point"},
        {"name" : "latitude" , "value" : "(init)" , "group" : "Current Point"},
        {"name" : "speed" , "value" : "(init)" , "group" : "Current Point"},
        {"name" : "direction" , "value" : "(init)" , "group" : "Current Point"},
        {"name" : "# satellites" , "value" : "(init)" , "group" : "Current Point"}
    ]
    
  • 画面ロード時にグリッドを初期化する

  • function initGridGpsInfo(){
        $(gridGpsInfo).propertygrid({
            url: 'json/grid_rowname_gpsinfo.json',
            showGroup: true,
            scrollbarSize: 0
        });
    
        $.getJSON('json/grid_rowname_gpsinfo.json', function(data){
            gGridKeyNameGpsInfo = data;
        });
    }
    

    これを実行した結果は以下。(パネルは手動で開いた。)
    gpsview05_a01

カテゴリー: Development タグ: , , パーマリンク