*チュートリアルで試せる内容 [#ac9974d8]

-[[可視化インタフェースモジュールの作り方]]
-[[パネルサイズに応じた表示更新]]
--動作確認のために,[[処理モジュール作成1改2]]の処理モジュールを先に作成して下さい


*1)作成する処理モジュールの仕様を決めます [#b8d97133]
-[モジュール名] BarGraph(棒グラフ)
-[入力] String型配列,int型配列
-[処理] int型配列で与えられる数字による棒グラフを作成,各棒の名前にString配列で与えられる文字を利用して,棒グラフを作成
-[出力] 作成した棒グラフを表示
-[モジュール名] DotDistribution(ドット分布)
-[入力] double型配列
-[処理] double型配列で与えられる値を縦軸の座標として、値の分布をドット(小さい円)で表示する
-[出力] 作成したドット分布を表示

*2)SampleDisplay2.java を利用して,モジュール作成の準備をします [#v3000f78]
-tetdmのフォルダ内の,moduleフォルダ内のVisualizationModuleフォルダ内にある,SampleDisplay2フォルダを,フォルダごとコピーします
-コピーしてできたフォルダの名前を,作成するモジュール名「BarGraph」に変更します
-コピーしてできたフォルダの名前を,作成するモジュール名「DotDistribution」に変更します
-コピーして作成したフォルダ内のファイル名を変更します
--SampleDisplay2.java -> BarGraph.java
--SampleDisplay2.txt -> BarGraph.txt (テキストファイルの中身も「棒グラフ」に変更します)
--SampleDisplay2.java -> DotDistribution.java
--SampleDisplay2.txt -> DotDistribution.txt (テキストファイルの中身も「ドット分布」に変更します)
--必要に応じて,モジュール完成後にREADME.txtを修正します

*3)BarGraph.java を編集し,プログラム作成の準備をします [#k7486b19]
-プログラム中の SampleDisplay2 と書かれている箇所をすべて BarGraph に変更します(コメント内を含め4カ所)
---// BarGraph.java Version 0.30 
---package module.VisualizationModules.BarGraph;
---public class BarGraph extends VisualizationModule
---public BarGraph()
*3)DotDistribution.java を編集し,プログラム作成の準備をします [#k7486b19]
-プログラム中の SampleDisplay2 と書かれている箇所をすべて DotDistribution に変更します(コメント内を含め4カ所)
---// DotDistribution.java Version 0.30 
---package module.VisualizationModules.DotDistribution;
---public class DotDistribution extends VisualizationModule
---public DotDistribution()

**コンストラクタの記述の修正 [#a4da05d6]

-モジュールのIDを決め,コンストラクタ内のメソッド setModuleID の引数として与えます(今回は9977とします)
-モジュールのIDを決め,コンストラクタ内のメソッド setModuleID の引数として与えます(今回は9911とします)
-int型の配列,dataNumbersの値を初期化して,受け取るデータ型とその数を指定します.
--今回は,整数型の配列と文字型の配列をそれぞれ1つずつ受け取ります.
---&color(red){setToolType(3); [[ツールタイプ]]はセミプリミティブになります.};
--今回は,double 型の配列を1つ受け取ります.
---&color(red){setToolType(2); [[ツールタイプ]]はプリミティブになります.};

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

*4)一度コンパイルして,BarGraphモジュールの動作を確認します [#w252be71]
*4)一度コンパイルして,DotDistributionモジュールの動作を確認します [#w252be71]
-make または ant コマンドでコンパイルします
-コンパイル後TETDMプログラムを起動して,いずれかのテキストを読み込みます
-[[処理モジュール作成1改2]]で作成した処理モジュール「名詞TOP10」があれば,これを選択して,楕円とテキストの一文目が表示されるのを確認して下さい
(SampleDisplay2.java の処理)
-楕円とテキストの一文目が表示されるのを確認して下さい(SampleDisplay2.java の処理)
--もとのSampleDisplay2.javaがシンプルツールなので、任意の処理ツールとの組み合わせで表示されます

*5)棒グラフを表示するプログラムを作成します [#o5c0ad7c]
*5)ドット分布を表示するプログラムを作成します [#o5c0ad7c]

**ファイルからの日本語の読み込み(今回は不要) [#n093dcd1]
-もとからある下記変数とメソッドの内容は,インタフェース内に日本語を表示させたい場合は利用して下さい 
-String outputInJapanese;
-String outputText;
-initializePanel()
-initializeData()

**処理モジュールからデータを受け取り,棒グラフの表示に必要なデータを保存する変数を,グローバル領域で宣言します [#q937648f]
**処理モジュールからデータを受け取り,ドット分布の表示に必要なデータを保存する変数を,グローバル領域で宣言します [#q937648f]

	String names[];
	int values[];
	double values[];

**initializeData() 内で変数の初期化を行います(オーバーライド) [#b2b29e53]
-棒グラフの表示に必要なデータがない場合にエラーを出さないようにします
-ドット分布の表示に必要なデータがない場合にエラーを出さないようにします

	public void initializeData()
	{
		names = new String[0];
		values = new int[0];
		values = new double[1];
	}

**処理モジュールからデータを受け取るメソッド,setDataを作成します(オーバーライド) [#dbb85a8a]
-switch,case文を用いて作成します
-case文は0から作成します
-データの受け取りに成功したらtrue,失敗したらfalseを返すboolean型としてメソッドを作成します
-データを受け取った際に再描画するように、repaint(); メソッドを呼び出します

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

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


**棒グラフの表示プログラムを作成します [#h0e0adf2]
**ドット分布の表示プログラムを作成します [#h0e0adf2]
-画面のサイズに対して,上下左右に各20pixelの余白を設け,残りの領域にデータを最大限に大きく表示します
-displayOperations メソッドの case 0: が自動的に実行されますので,そこから呼び出されるところに記述します
-case 0:にrepaint(); を記述している場合は,paintComponent(Graphics g)から呼び出されるところに記述します
-今回は,可視化モジュール ScoreDist の内容をほぼ転用して作成しています
-スーパークラス内の変数,sizeX, sizeYには,表示できるパネルの縦と横のサイズが,メソッドgetPanelSize()が呼び出されるたびに格納されますので,この値を利用してパネルサイズの変更に対応できるようにします

	int width;
	int max,min;
	int width,height;

	//background
	public void drawBackground(Graphics2D g2)
	{
		if(values.length == 0)
			width = 0;
		else
			width = (sizeY-10)/values.length;			
		
		g2.setColor(Color.cyan);
		g2.setColor(Color.black);
		g2.fillRect(0,0, sizeX, sizeY);
 		g2.setColor(Color.white);
		g2.drawRect(10,10, sizeX-20, values.length*width);	
	}

	public void drawData(Graphics2D g2)
	public void drawDistribution(Graphics2D g2)
	{
		int max=1;
		width = sizeX - 40;
		height = sizeY - 40;
		
		for(int i=0;i<values.length;i++)
		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];
		}
		
		g2.setColor(Color.white);
		for(int i=0;i<values.length;i++)
			g2.fillRect(10,10+width*i, (int)((sizeX-20)*(double)values[i]/max), width);
		if(max == min)
			return;
		
		g2.setFont(new Font("Dialog", Font.BOLD, 20));	
		g2.setColor(Color.black);
		for(int i=0;i<names.length;i++)
			if(i < values.length)
				g2.drawString(names[i]+"("+values[i]+")", 20,(int)(10+width*i+width*0.5));
			else
				g2.drawString(names[i], 20,(int)(10+width*i+width*0.5));				
		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		
		if(values.length == 0)
			return;		
		drawData(g2);
		getPanelSize();
		
		drawBackground(g2);		//background
		drawDistribution(g2);
	}

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

*6)コンパイルして動作を確認します [#t99bd5fa]
-浦島太郎を入力し,「名詞TOP10」と組み合わせた場合,各名詞と頻度に応じた棒グラフ,および名詞と頻度が表示されます.
-処理ツール「データ送信テスト」と組み合わせた場合,パネル下部のボタンを押すと,押したボタンに対応するデータによるドット分布が表示されます.
--データが1つの場合は表示されません
--送られてくるデータが double 型でない場合でも、[[データ型コンバート]]によりdouble型に変換されて表示されます
-統合環境のウインドウのサイズを変えても,パネル内の表示がサイズに応じて変更されることを確認します


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS