UJMLサンプル069：グラフを作る。まずは棒で百分率を表示。アンケートのYES/NO回答に使えるかな。(2006/02/24)
前回紹介したUJMLサンプルは"062"だったが、今回は"069"だ。この間のものは、スマートにできず発表せずに蔵に入っている。
一応予告しておくと
UJMLサンプル063：任意の場所にティッカーを表示するステートマシン
UJMLサンプル064：ボタンを押すと、反応して少し大きくなる箱
UJMLサンプル065：ぷよぷよと漂うラベル
UJMLサンプル066：2つのティッカーでぐるぐる（説明不能）
UJMLサンプル067：画像をスライドさせ4コマ漫画を実現
UJMLサンプル068：UJMLでStringTokenizerの実装
といった具合だ。
さて、今回のサンプルは例えばアンケートの回答YES/NOの百分率結果を表示するためのグラフの例だ。グラフは順次拡張し、棒グラフ、折れ線グラフは作成できるようにする予定だ。（棒グラフは既に作成が進んでいるが、公開できるレベルになっていない。）
このサンプルは二つの箱を表示するために、ステート変数の配列と変数の配列を使用しているので配列の使い方の良い例になると思う。
★---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN"
"http://www.uievolution.com/dtd/ujml-1.5.dtd" [
<!ENTITY MSEC_TOTAL "1000"><!-- 何msec以内に完了するかを設定 -->
<!ENTITY MSEC_DELAY "100">
]>
<!-- http://uiengineda.blogs.com バーのグラフ YES NO の百分率を表示できるようにする。 -->
<!--
boxを2つ用意する。
高さは15ぐらい
横幅は画面の75%ぐらいにする。
中央に表示する。
-->
<ujml>
<application>
<state-variables>
<state-var name="sBox" type="boolean" size="2"/>
<state-var name="sLabel" type="boolean" size="2"/>
<state-var name="sTick" type="boolean"/>
<state-var name="sScreenBox" type="boolean"/>
</state-variables>
<variables>
<var name="mScrWidth" type="int" />
<var name="mScrHeight" type="int" />
<var name="mPosX" type="int" size="2"/>
<var name="mPosY" type="int" size="2" />
<var name="mLabelPosX" type="int" size="2"/>
<var name="mTotalWidth" type="int"/>
<var name="mWidth" type="int" size="2"/>
<var name="mHeight" type="int" size="2"/>
<var name="mBoxColor" type="int" size="2"/>
<var name="mScreenBoxWidth" type="int"/>
<var name="mScreenBoxHeight" type="int"/>
<var name="mStartTime" type="int" />
<var name="mTargetRatio" type="int" />
<var name="mRatio" type="int" size = "2"/>
<var name="mLabel" type="string" size = "2"/>
</variables>
<functions>
<!-- 中心から指定の割合に向けて移動する。 -->
<function name="processTick" type="void">
<variables>
<var name="mElapsedTime" type="int" />
</variables>
<script>
mElapsedTime = _msec()-mStartTime;
if (_lt(mElapsedTime, &MSEC_TOTAL;)) {
<!-- 徐々に箱のサイズを変化させる。 -->
mWidth[0] = (mScrWidth * 3 / 8) + (mScrWidth * 3 / 8) * (mTargetRatio -50) * mElapsedTime / &MSEC_TOTAL; / 50;
mWidth[1] = mTotalWidth - mWidth[0];
mPosX[1] = mPosX[0] + mWidth[0];
mRatio[0] = 50 + (mTargetRatio -50) * mElapsedTime / &MSEC_TOTAL; ;
mRatio[1] = 100 - mRatio[0];
<!-- ステート変数を切り替えて再描画させます。 -->
sBox[0] = false;
sBox[0] = true;
sBox[1] = false;
sBox[1] = true;
sLabel[0] = false;
sLabel[0] = true;
sLabel[1] = false;
sLabel[1] = true;
<!-- サイズ変更の再処理 -->
sTick = false;
sTick = true;
} else {
<!-- あらかじめ決めておいた時間が経過した。→最後の表示をきっちり行う。 -->
mRatio[0] = mTargetRatio;
mRatio[1] = 100 - mTargetRatio;
mWidth[0] = (mScrWidth * 3 / 8) + (mScrWidth * 3 / 8) * (mTargetRatio -50) / 50;
mWidth[1] = mTotalWidth - mWidth[0];
mPosX[1] = mPosX[0] + mWidth[0];
<!-- ステート変数を切り替えて再描画させます。 -->
sBox[0] = false;
sBox[0] = true;
sBox[1] = false;
sBox[1] = true;
sLabel[0] = false;
sLabel[0] = true;
sLabel[1] = false;
sLabel[1] = true;
sTick = false;
}
</script>
</function>
</functions>
<script>
<!-- スクリーンのサイズを調べる -->
mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
<!-- 幅 スクリーンの75% の半分ずつ -->
mWidth[0] = mScrWidth * 3 / 8;
mWidth[1] = mScrWidth * 3 / 8;
mTotalWidth = mWidth[0] + mWidth[1];
<!-- 高さ -->
mHeight[0] = 15;
mHeight[1] = 15;
<!-- 中心に配置 -->
mPosX[0] = (mScrWidth / 2) - (mWidth[0]);
mPosY[0] = (mScrHeight / 2) - (mHeight[0]);
mPosX[1] = mPosX[0] + mWidth[0];
mPosY[1] = mPosY[0];
mBoxColor[0] = &_COLOR_BLUE;;
mBoxColor[1] = &_COLOR_RED;;
mStartTime = _msec();
<!-- 左側の箱のサイズを指定（100以下で） -->
mTargetRatio = 68;
<!-- 2つの箱の初期割合を50ずつに -->
mRatio[0] = 50;
mRatio[1] = 50;
<!-- ラベルに何を表示するか指定する。 -->
mLabel[0] = "YES";
mLabel[1] = "NO";
<!-- ラベルの位置 -->
mLabelPosX[0] = mPosX[0];
mLabelPosX[1] = mPosX[0] + mTotalWidth - _text_width("NO:XX", &_FONT_SIZE_MEDIUM;, &_FONT_STYLE_PLAIN;, &_FONT_FACE_SYSTEM;);
<!-- 表示開始 -->
sTick = true;
</script>
<states>
<state var="sTick">
<transition value="true">
<delay>&MSEC_DELAY;</delay>
<script>processTick();</script>
</transition>
</state>
<state var="sBox" index="*">
<transition value="true">
<display>
<box>
<x><eval>mPosX[_state_index(0)]</eval></x>
<y><eval>mPosY[_state_index(0)]</eval></y>
<width><eval>mWidth[_state_index(0)]</eval></width>
<height><eval>mHeight[_state_index(0)]</eval></height>
<fg><eval>mBoxColor[_state_index(0)]</eval></fg>
<bg><eval>mBoxColor[_state_index(0)]</eval></bg>
</box>
</display>
</transition>
</state>
<state var="sLabel" index="*">
<transition value="true">
<display>
<label>
<text><eval>_strcat(mLabel[_state_index(0)],":",mRatio[_state_index(0)])</eval></text>
<x><eval>mLabelPosX[_state_index(0)]</eval></x>
<y><eval>mPosY[_state_index(0)] - _text_height(&_FONT_SIZE_MEDIUM;, &_FONT_STYLE_PLAIN;, &_FONT_FACE_SYSTEM;)</eval></y>
<fg><eval>mBoxColor[_state_index(0)]</eval></fg>
<bg>&_COLOR_TRANSPARENT;</bg>
</label>
</display>
</transition>
</state>
</states>
</application>
</ujml>
コメント