(Application) クイックルック用 CGI スクリプト

作成者：辻野智紀

作成した大量の図を, 見たい種類の図だけ並べて表示させる. アニメーションも可能.

• メインプログラム : draw_pic.tar.gz. (2013/03/14, 12:00 JST)
  • 西本さんによる ruby-1.9 用 patch を適用済み. ありがとうございます.
• サンプルファイル : sample.tar.gz.
  • これを使用する場合は, cgi-bin (後述) の直下で解凍し, sample ディレクトリの中身をすべて cgi-bin の直下に設置すればよい.
    • 設置し終わった後, 残った sample ディレクトリは削除すること.

• ruby-1.8.7
• ruby-1.9

• cgi.rb

.
|-- def.rb          # 必要な関数群
|-- draw.css        # html 表示用 CSS ファイル
|-- draw_main.cgi   # メイン CGI プログラム
|-- input.cgi       # サブ CGI プログラム 1
`-- step.cgi        # サブ CGI プログラム 2

• 基本的に web 上で cgi プログラムとして動作.
• 本プログラム群は apache 等のソフトウェアで, cgi プログラムが動作を許されている領域において使用されることを想定している.
• ボタンと入力フォームに適切な値を入力すれば, しかるべき図が web ブラウザに出力される.
  • このとき描画される図はあらかじめ PNG 形式で作成し, 適切なディレクトリ構成にしておく必要がある.

~hoge/public_html/cgi-bin において cgi の動作許可があったとする.

CGI スクリプトの設置

• ~hoge/public_html/cgi-bin にて, draw_pic.tar.gz を解凍.

  $ cd ~hoge/public_html/cgi-bin
  $ tar zxvf draw_pic.tar.gz

• draw_pic/ 内のファイルをすべて cgi-bin/ に移動, もしくはコピーし, 元ファイル, ディレクトリを削除.

  $ mv draw_pic/* ~hoge/public_html/cgi-bin/
  $ rm -r draw_pic draw_pic.tar.gz

表示させる図の設置

ここでは, 例として sample というディレクトリがあり, その中にスナップショットの図が 100 枚入っているとする.

この場合, 先の ~hoge/public_html/cgi-bin 内に図を格納するためのディレクトリ (名前は任意, ここでは FIG としておく) を作成する.

$ mkdir ~hoge/public_html/cgi-bin/FIG

この中に先の sample ディレクトリを格納する.

$ mv sample ~hoge/public_html/cgi-bin/FIG

すると, 以下のようなディレクトリ構成になっているはずである.

.
|-- FIG
|   `-- sample/*.png
|-- def.rb          # 必要な関数群
|-- draw.css        # html 表示用 CSS ファイル
|-- draw_main.cgi   # メイン CGI プログラム
|-- input.cgi       # サブ CGI プログラム 1
`-- step.cgi        # サブ CGI プログラム 2

このような構成でなければ, 本プログラムは機能しない. このとき, cgi-bin に設置できる FIG ディレクトリは複数あっても構わない. つまり,

.
|-- DIR1
|   |-- SUBDIR1/*.png
...
|   `-- SUBDIRN/*.png
|-- DIR2
|   |-- SUBDIR1/*.png
...
`-- DIRN
    |-- SUBDIR1/*.png
...

という構成でも可能である (むしろ, これを想定している).

これは, パラメータスイープ実験などを行った際に, 各パラメータ毎で同じような図が複数種類存在する場合を想定している.

このとき, 格納される PNG ファイルの名前はすべて, 以下のフォーマットで統一しておくこと.

DIR_SUBDIR_nnnn.png

これは png ファイルの所在地を表している. 上の場合, cgi-bin/DIR/SUBDIR/ の中に存在する, nnnn 枚目の図ということになる.

アニメーション等はこの 4 桁の数字 (nnnn) をもとに動かしているので, この番号を調節することで複数枚の図を同時にアニメーションさせることが可能である.

設置後の動かし方

http://domain_name/~hoge/cgi-bin/draw_main.cgi

にアクセスする.

すると, 以下の画面になる.

この例では実際に cgi-bin の中が以下のような構成になっている (以下は, 関係のあるもののみ表示, 実際にはこれに cgi プログラム等も存在している).

.
`-- CTL/
    |-- RADAR/
    |-- intgQ/
    |-- lh/
    |-- rhDBZ_cross/
    |-- sfc/
    |-- sfc_qv/
    |-- sfc_rg/
    |-- sh/
    |-- tangent_prr/
    `-- tangent_prr.png

SUBDIR と同じ階層に PNG の図を設置すれば (ファイル名は任意), その図を表示できる. SUBDIR と同じ階層に設置された時点で, その PNG ファイルは単体で独立しているとみなされるので, この図はアニメーションされない.

これは, アニメーションして見ることのない, 時系列図やホフメラーなどを描画することを想定している.

時系列図とアニメーション図 (DIR 直下の図と SUBDIR 直下の図) を同時に描画することはできない.

色々指定してみる

ここで, 表示させる図はチェックボックスで複数指定できる. また, 横縦に並べる図の数は,

横の数 x 縦の数 >= チェックボックスで指定した数

という関係になっていなければならない. 図の幅は html の img タグで表示させるときの "width", "height" に対応している (ともに % 表示).

色々表示させてみた場合

上の設定で表示させた場合, 以下のようになる.

図が表示されるとその上に, 色々なボタンが現れる.

ここで, 各ボックスは以下のような意味がある.

"<<", ">>"           = クリックすると, 1 枚前, 後の図を描画する.
"backward animation", "forward animationi"
                     = クリックすると, アニメーションを後ろ向き, 前向きに行う.
"0001" (select バー) = 描画させたい図の番号を直接指定する. 
                       選択しただけでは変化がなく, "show" ボタンを押すと有効になる.

[注意] : アニメーションは一度実行されると停止させる手段は web ブラウザの「戻る」ボタンのみである (要改善).

単独図の場合

上はアニメーションできる図であったが, 単独の図を出力させた場合 (ここでは CTL/tangent_prr.png を指定),

となり, 上のアニメーション操作ボタンは出力されない.