これは古いリファレンスです。このドキュメントはメンテナンスされていません。
あたらしいリファレンスは こちら

Shade Widgetの作成

目次

Widgetを作成するための必要最低限のPython、HTML、JavaScript、XMLのコードです。
簡単なWidget作成を例に説明します。
各種コードは基本的にindex.html、widget.xml内の所定の位置に記述します。

Shade Widgetの概要 Shade Widgetの構成 Shade Widgetの作成

指定サイズの球を作成するwidgetの作成

テキストボックスに入力された数値を半径とする球を作成するwidget「my_widget」を作成します。

widget.xmlでwidgetの基本設定を行う

widget設定用のwidget.xmlにuuidやスクリプトメニューに表示されるwidgetの名称、ウインドウサイズなどの設定を行います。
一行目のuuidの作成については、用語と型一覧を御覧下さい。

  • widget.xml
<?xml version="1.0" encoding="utf-8"?>
<widget>
	<uuid>737AE286-B5A8-4D18-8ECE-5ADD5077D73E</uuid>←個別uuid
	<name lang="ja">my_widget</name>←widgetの名称(日本語環境で表示)
	<name lang="en">my_widget</name>←widgetの名称(英語環境で表示)
	<url>index.html</url >←widgetを適用するHTMLファイル
	<version>1.0</version >←widgetのバージョン番号
	<description lang="ja">
	my_widget←widgetの名称(日本語環境で表示)
	</description >
	<description lang="en">
	my_widget←widgetの名称(英語環境で表示)
	</description >
	<window initial_size="300 200"←widgetのウインドウサイズ
		position="0.42 0.63"←widgetの初期表示位置
		max_size="600 400"←widgetのウインドウの最大値
		min_size="100 100"←widgetのウインドウの最小値
		resizeable="true">←リサイズ設定:true:リサイズ可能、false:サイズ固定
	</window>
</widget>

インターフェイスの作成

index.htmlの<bocy>タグ内にHTMLを記述します。
テキストとボタン、それにテキストボックスをそれぞれ1つずつ配置します。
ボタンにはクリックしたときにJavaScriptの関数(do_script())を実行するようにonclickを設定します。

  • index.html
<body>
<h3>球作成widget</h3>←テキスト
半径:<input type="text" id="radius" size="6">mm<br />←id付テキストボックス
<input type="button" value="OK" onclick="do_script();">←javascript付ボタン
</body>

Pythonの記述

index.htmlの<textarea>タグ内に記述します。
<textarea>タグは、id付の<div id="debug">タグで囲みます。これはあとでこの部分を非表示にするためです。
このとき<div>や<textarea>をインデントしないようにしてください。
Pythonでは、半径を変数とした球を原点に作成するスクリプトを記述します。半径はあとでJavaScriptから設定します。

  • index.html
<div id="debug">
<textarea id="script_src">
scene=xshade.scene()
scene.begin_creating()
scene.create_sphere(None, (0.0, 0.0, 0.0), nValue)←半径は変数とする
scene.end_creating()
</textarea>
</div>

JavaScriptの記述

index.htmlの<script type="text/javascript">タグ内に記述します。
id設定した要素の値を半径値として取得し、他のpython用文字列と連結してからShadeに渡します。

  • index.html
<script type="text/javascript">
function do_script(){
	py_src = "nValue = " + document.getElementById('radius').value + "\n";←テキストボックスの値を呼び出す
	py_src += document.getElementById('script_src').value;←textareaの値を呼び出す
	window.external.setScript(py_src); ←py_srcをShadeに送る
}

textareaを非表示にする

Pythonスクリプトを書いたtextareaがウインドウに表示されないように、非表示にするJavaScriptを記述します。

  • index.html
function initialize(){
	document.getElementById('debug').style.display='none';
}

Widget起動時に、自動的にこのJavaScriptを実行するように<body>タグにonloadを設定します。

  • index.html
<body onload="initialize();">

動作確認

index.htmlとwidget.xmlを1つのフォルダに入れ、Shadeアプリケーションのあるwidgetフォルダ内に格納してShadeを起動します。
インストールが成功すれば、スクリプトメニューに「my_widet」が表示されます。
テキストボックスに半径値を入力してOKボタンをクリックすると球が作成されます。

image:My_widget_folder.png


Image:My_widget_image.jpg


「my_widget」index.htmlコード全文

  • すべてのコードをまとめると、index.htmlは次のようになります。
  • これをひな形として、編集を加えることで別のインターフェイスと機能をもったwidgetとすることができます。
  • 完全な別のwidgetとして利用するためには前述のwidget.xml内に適切なuuidなどを設定する必要があります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function initialize(){
	document.getElementById('debug').style.display= 'none';
}
function do_script() {
	py_src = "nValue = " + document.getElementById('radius').value + "\n";
	py_src += document.getElementById('script_src').value;
	window.external.setScript(py_src);
}
</script>
</head>
<body onload="initialize();">
<h3>球作成widget</h3>
半径:<input type="text" id="radius" size="6">mm<br />
<input type="button" value="OK" onclick="do_script();">

<div id="debug">
<textarea id="script_src">
scene=xshade.scene()
scene.begin_creating()
scene.create_sphere(None, (0.0, 0.0, 0.0), nValue)
scene.end_creating()
</textarea>
</div>
</body>
</html> 

Shadeから情報を得るWidgetの作成

  • WidgetでShadeの形状の座標値などの情報を扱うには変数「result」を使用します。
  • 変数「result」には必ず「string」の値を代入します。
  • ボタンをクリックすると、選択している形状の名称と中心座標をフォームに表示する「my_widget2」を作成します。

Pythonでresultに情報を代入する

複数の値を得るには、任意の区切り文字で連結した1つの文字列にしてresultに代入します。
ここでは、名称と中心座標を「/」を区切りとする1つの文字列にしてresultに代入します。

  • index.html
<textarea id="script_src">
scene = xshade.scene()
shape = scene.active_shape()
sname = shape.name←名前は文字列なのでそのまま代入
scenter = str(shape.center_position)←タプルは文字列に変換して代入
result = sname + '/' + scenter←「/」記号で区分けして連結する
</textarea>

HTMLでインターフェイスを作成する

  • index.html
名前:<input type="text" value="" id="obj_name" size="30"><br />
中心:<input type="text" value="" id="obj_center" size="30"><br />
<input type="button" value="GET INFO" onclick="do_script();">

JavaScriptで情報を得てフォームに表示する

文字列を分割するには「split」を使用します。

  • index.html
py_scr = document.getElementById('script_src').value;
the_result = window.external.setScript(py_scr);←resultの返り値をthe_resultに格納
obj_info = the_result.split('/');←「/」記号で分割した配列にする
document.getElementById('obj_name').value = obj_info[0];←名前を表示
document.getElementById('obj_center').value = obj_info[1];←中心を表示

動作確認

index.htmlとスクリプト名称部分を「my_widget2」に変更したwidget.xmlを1つのフォルダに入れ、Shadeアプリケーションのあるwidgetフォルダ内に格納してShadeを起動します。
インストールが成功すれば、スクリプトメニューに「my_widet2」が表示されます。
「GET INFO」ボタンをクリックすると、選択されている形状の名称と中心座標がテキストボックスに表示されます。

Image:My_widget2.jpg


「my_widget2」index.htmlコード全文

  • すべてのコードをまとめると、index.htmlは次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function initialize(){
	document.body.style.overflow="hidden";
	document.getElementById('debug').style.display= 'none';
}

function do_script() {
	py_scr = document.getElementById('script_src').value;
	the_result = window.external.setScript(py_scr);
	obj_info = the_result.split('/');
	document.getElementById('obj_name').value = obj_info[0];
	document.getElementById('obj_center').value = obj_info[1];
}
</script>
</head>
<body onload="initialize();">
名前:<input type="text" value="" id="obj_name" size="30"><br />
中心:<input type="text" value="" id="obj_center" size="30"><br />
<input type="button" value="GET INFO" onclick="do_script();">
</div>

<div id="debug">
<textarea id="script_src">
scene = xshade.scene()
shape = scene.active_shape()
sname = shape.name
scenter = str(shape.center_position)
result = sname + '/' + scenter
</textarea>
</div>
</body>
</html>
Shade Widgetリファレンス
ライブラリ/サンプル
ツールボックス