画像表示アプリの作成(5) – EXIFデータの表示

画像情報ファイルにEXIFデータが加わったので、これを読み込んで画像と合わせてEXIFデータも表示するように改良する。基本的にはこれまでと同じで、

  • 画像情報ファイルを読み込んで画像の位置と各種情報を得る
  • 上パネルにサムネイルをカルーセル形式で表示
  • 中央パネルに原画像を表示
  • 左パネルにEXIFデータを表示[今回実現]
  • ナビゲーションボタン(再生・停止など)でスライドショーを実行

の機能を実現する。

実行例:ximgview05.html (まだナビゲーションボタンの動作が不安定なので注意)
ximgview05_a01

EXIFデータの表示には、jQuery EasyUIPropertyGrid を利用する。

  • 項目数が多いためグルーピングを実施する
  • グルーピングするには、項目定義用のJSONファイルでグループ名を指定する。これにより同じグループに属するものがまとめて表示される。(=ファイルで記述した順序は無視されてグループごとに並び替えられる。) 

    [
     {"name" : "Make" , "value" : "(init)" , "group" : "Camera"},
     {"name" : "Model" , "value" : "(init)" , "group" : "Camera"}
    ]
    

    各行の「index」はファイルで指定した順に付与される。このindexを使って後で値を書き換えるのだが、書き換え後は「グルーピングを保持したままindex順に行が並び替えられる」ため、グルーピングがおかしくなってしまう。(バグなのか仕様なのかは不明。)そのため、JSONファイル作成時にグループごとに並び替えることで対応する。

  • いくつかの項目は初期状態で折り畳んでおく
  • 上の例では、上の例では、’Camera’と’Image’が折り畳まれている。最初のグループ(Camera)を折り畳むには、以下のようにする。

    $("#pgExif").propertygrid("collapseGroup", 0);
    

    2番目の引数がグループのインデックスで、’0′により最初のグループを指定している。

  • 項目定義ファイルの読み込みは非同期的に行われる点に注意する
  • 先の「グループの折り畳み」といった処理は、読み込み完了後に実施する必要があるが、プラグイン側から通知を受ける方法がわからないため、とりあえずタイマー機能を使って対応中。

    $('#pgExif').propertygrid({
        url: '/json/grid_rowname_picture.json', // 項目定義ファイル
        showGroup: true,
        scrollbarSize: 0
    });
    //$('#pgExif').propertygrid('collapseGroup', 0);
    // ↑ファイルの読込が完了していないため、このタイミングで実行しても期待どおり動かない。
    

実行例2:EXIFデータのグループ(Image)を開いたところ
ximgview05_a02
実行例3:スライドショー実行中 (画像の切り替えと同時にEXIFデータの内容も変わる)
ximgview05_a03

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