可視化ツール作成１

チュートリアルで試せる内容 †

• 可視化インタフェースツールの作り方
• パネルサイズに応じた表示更新

1)作成する可視化ツールの仕様を決めます †

• [ツール名] DotDistribution（ドット分布）
• [入力] double型配列
• [処理] double型配列で与えられる値を縦軸の座標として、値の分布をドット（小さい円）で表示する
• [出力] 作成したドット分布を表示

2)SampleDisplay2.java を利用して，ツール作成の準備をします †

• tetdmのフォルダ内の，moduleフォルダ内のVisualizationModuleフォルダ内にある，SampleDisplay2フォルダを，フォルダごとコピーします
• コピーしてできたフォルダの名前を，作成するツール名「DotDistribution」に変更します
• コピーして作成したフォルダ内のファイル名を変更します
  • SampleDisplay2.java -> DotDistribution.java
  • SampleDisplay2.txt -> DotDistribution.txt (テキストファイルの中身も「ドット分布」に変更します)
  • 必要に応じて，ツール完成後にREADME.txtを修正します

3)DotDistribution.java を編集し，プログラム作成の準備をします †

• プログラム中の SampleDisplay2 と書かれている箇所をすべて DotDistribution に変更します（コメント内を含め4カ所）
  • // DotDistribution.java Version 0.30
  • package module.VisualizationModules.DotDistribution;
  • public class DotDistribution extends VisualizationModule
  • public DotDistribution()

コンストラクタの記述の修正 †

• ツールのIDを決め，コンストラクタ内のメソッド setModuleID の引数として与えます（今回は9911とします）
• int型の配列，dataNumbersの値を初期化して，受け取るデータ型とその数を指定します．
  • 今回は，double 型の配列を1つ受け取ります．
    • setToolType(2); ツールタイプはプリミティブになります．

	public DotDistribution()
	{
		setModuleID(9911);	// Set your module ID after you have got it
		dataNumbers = new int[]{0,0,0,0,    // b,i,d,S
				0,0,1,0,    // bA,iA,dA,SA
				0,0,0};     // bA2,iA2,dA2
		setToolType(2);	
	}

4)一度コンパイルして，DotDistributionツールの動作を確認します †

• make または ant コマンドでコンパイルします
• コンパイル後TETDMプログラムを起動して，いずれかのテキストを読み込みます
• 楕円とテキストの一文目が表示されるのを確認して下さい（SampleDisplay2.java の処理）
  • もとのSampleDisplay2.javaがシンプルツールなので、任意の処理ツールとの組み合わせで表示されます

5)ドット分布を表示するプログラムを作成します †

ファイルからの日本語の読み込み（今回は不要） †

• もとからある下記変数とメソッドの内容は，インタフェース内に日本語を表示させたい場合は利用して下さい
• String outputText;
• initializePanel()
• initializeData()

• String inJapanese[]; （変数の定義はVisualizationModuleクラス内）
  • フォルダ内に，Japanese.txtファイルを用意している場合，自動的に各行の内容が，initializePanel()の実行前に，inJapaneseに読み込まれます．

処理ツールからデータを受け取り，ドット分布の表示に必要なデータを保存する変数を，グローバル領域で宣言します †

	double values[];

initializeData() 内で変数の初期化を行います（オーバーライド） †

• ドット分布の表示に必要なデータがない場合にエラーを出さないようにします

	public void initializeData()
	{
		values = new double[1];
	}

処理ツールからデータを受け取るメソッド，setDataを作成します（オーバーライド） †

• switch,case文を用いて作成します
• case文は0から作成します
• データの受け取りに成功したらtrue,失敗したらfalseを返すboolean型としてメソッドを作成します
• データを受け取った際に再描画するように、repaint(); メソッドを呼び出します

	public boolean setData(int dataID, double data[])
	{
		switch(dataID)
		{
			case 0:
				values = data;
				repaint();
				return true;
		}
		return false;
	}

ドット分布の表示プログラムを作成します †

• 画面のサイズに対して，上下左右に各20pixelの余白を設け，残りの領域にデータを最大限に大きく表示します
• displayOperations メソッドの case 0: が自動的に実行されますので，そこから呼び出されるところに記述します
• case 0:にrepaint(); を記述している場合は，paintComponent(Graphics g)から呼び出されるところに記述します
• スーパークラス内の変数，sizeX, sizeYには，表示できるパネルの縦と横のサイズが，メソッドgetPanelSize()が呼び出されるたびに格納されますので，この値を利用してパネルサイズの変更に対応できるようにします

	double max,min;
	int width,height;

	//background
	public void drawBackground(Graphics2D g2)
	{
		g2.setColor(Color.black);
		g2.fillRect(0,0, sizeX, sizeY);
	}

	public void drawDistribution(Graphics2D g2)
	{
		width = sizeX - 40;
		height = sizeY - 40;
		
		max = min = values[0];
		for(int i=1;i<values.length;i++)
		{
			if(values[i] > max)
				max = values[i];
			if(values[i] < min)
				min = values[i];
		}
		
		if(max == min)
			return;
		
		g2.setColor(Color.yellow);
		for(int i=0;i<values.length;i++)
			g2.fillOval(20 +  width * i/(values.length-1),
			(int)(20 + height * (max - values[i])/(max - min)), 10,10);
	}

	//////////paint
	public void paintComponent(Graphics g)
	{
		Graphics2D g2 = (Graphics2D)g;
		
		getPanelSize();
		
		drawBackground(g2);		//background
		drawDistribution(g2);
	}

	public void update(Graphics g)		//avoid from blinking
	{
		paintComponent(g);
	}

6)コンパイルして動作を確認します †

• 処理ツール「データ送信テスト」と組み合わせた場合，パネル下部のボタンを押すと，押したボタンに対応するデータによるドット分布が表示されます．
  • データが1つの場合は表示されません
  • 送られてくるデータが double 型でない場合でも、データ型コンバートによりdouble型に変換されて表示されます
• 統合環境のウインドウのサイズを変えても，パネル内の表示がサイズに応じて変更されることを確認します