GoogleAnalytics

SyntaxHighlighter

2011年9月23日金曜日

[Glaeja] 円環の理

私、結構頻繁にエゴサーチをするんです。
自分の名前(リアル・ハンドル)や、作ったソフトウェア名なんかをググってみるんです。
で、ついさっき『Glaeja』での検索結果からリンク辿っていくと、
『サークルの設定難しすぎ』みたいなツイートが見つかりました
(リンクは貼りませんが…)。

というわけで、[サークル ]レイヤーのチュートリアル、というかお勉強です。



Glaeja』[サークル ]レイヤーの持つ設定パラメータは結構多いんですが、
それらは機能別に以下の4つに分類できます。
  1. サークルをどこどんな大きさで表示するか
  2. サークルが表現する比率は何
  3. 比率の0%と100%の角度は何度か
  4. 円弧のどの範囲を何色に塗るか
1.サークルをどこにどんな大きさで表示するか

これは、[線の幅 ][サークルの半径 ][中心座標(水平) ][中心座標(垂直) ]が該当します。
各々の意味は以下の図の通りです。















注意する点は、[サークルの半径 ]は、サークル中心から、描かれる[線の幅 ]の真ん中までである、というところです。
つまり、実際に描かれるサークルの外寸は、[サークルの半径 ]×2より大きく、[線の幅 ]+[サークルの半径 ]×2 となります。

例えば、[サークルの半径 ]=20dp.、[線の幅 ]=10dp. のサークルは以下のようになります。
















また、[線の幅 ]を[サークルの半径 ]の2倍にすることで、円グラフのようにすることができます。

2.サークルが表現する比率は何か

『Glaeja』のサークル(とバー)は、比率を表現するためのものです。
要するに、「あるものが、比較対象に対して何%であるか」を表示するものです。

この「あるもの」が[現在値となる項目 ]で、「比較対象」が[最大値となる項目 ]です。

サークルとは、現在値となる項目 ]÷[最大値となる項目 ]×100(%)となる円グラフを描く
というようなものだ、と考えておけばイイでしょう。

※この 現在値となる項目 ]÷[最大値となる項目 ]×100(%)となる比率のことを、Glaejaでは「レベル」と呼び、後の4.で扱います。

では、[現在値となる項目 ][最大値となる項目 ]に何を記述すればイイか、具体的に見て行きましょう。

まず、「バッテリー残量を表現したい」とします。
この場合、[現在値となる項目 ]はエスケープキャラクタを使って「#P#」と書けばイイでしょう。
そして「#P#」は充電率を%単位で返すキャラクタなので、 [最大値となる項目 ]は「100」と書けばよろしいです。

他にもこのような比率を%と単位で返すキャラクタとして、ストレージ容量に関するものがありますが(&h&, &H&, &l&, &L&)、
それらの [最大値となる項目 ]は全て「100」と書けばよろしいです。

つぎに、「現在時刻の分をサークルで表現したい」とします。
この場合、[現在値となる項目 ]はエスケープキャラクタを使って「$m$」と書けばイイでしょう。
そして [最大値となる項目 ]は当然「60」となります。
これにより、このサークルの表現する比率は、現在時刻が
  • 5分なら、5÷60×100=8.33%
  • 10分なら、10÷60×100=16.67%
  • 30分なら、30÷60×100=50.00%
  • 45分なら、45÷60×100=75.00%
となります。

最後に、「現在曜日をサークルで表現したい」とします。
この場合、[現在値となる項目 ]はエスケープキャラクタを使って「$f$」と書けばイイでしょう。

この「$f$」は「日曜=0、月曜=1、、、金曜=5、土曜=6」を返すので、 [最大値となる項目 ]は「6」となります。
これにより、このサークルの表現する比率は、現在曜日が
  • 日曜なら、0÷6×100=0.00%
  • 月曜なら、1÷6×100=16.67%
  • 金曜なら、5÷6×100=83.33%
  • 土曜なら、6÷6×100=100.00%
となります。

3.0%と100%の角度は何度か

これらは、[0%の絶対角度 ][100%の絶対角度 ]の2つに該当します。

これは、上記2.で決めた比率をサークル上のどの部分どのようにマッピングするか、に相当します。
つまり、 上記1.で定めたサークルのうち、[0%の絶対角度 ]から[100%の絶対角度 ]までの円弧部分をゲージとして、上記2.で決めた比率を表示する、ということを意味します。

例えば、[0%の絶対角度=0°、[100%の絶対角度=90°とした場合、ゲージとなる円弧は以下のようになります。
















上図の灰色の円弧部分が0~100%を表現するゲージとなるわけです。
この円弧で比率30%となるものを表示した場合、以下のように表示されます。















さて、上図でもわかるように、[0%の絶対角度 ][100%の絶対角度 ]を記述する絶対角度は、時計で言う12時が0°で、時計回り方向にプラス、反時計回り方向がマイナスとなるものです。

ここで、0%の絶対角度 ][100%の絶対角度 ]の大小が、ゲージのすすむ方向(0→100%)を決定します。
例えば、[0%の絶対角度=90°、[100%の絶対角度=0°とした場合には、ゲージとなる円弧は上図と同じになるのですが、ゲージのすすむ方向が下図のように反対向きになります。















では、ここからはちょっと難しくしてみましょうw
下図のようなゲージとなる円弧にしたい場合、[0%の絶対角度 ][100%の絶対角度 ]にはどんな値を入れればイイでしょう?












100%の絶対角度=90°なのは確実だとして、[0%の絶対角度 ]は「-90°」なのか「270°」なのかどちらでしょうか?
ここで0%の絶対角度 ][100%の絶対角度 ]の大小が重要になってきます。

  • 0%の絶対角度 ] < [100%の絶対角度 ]の場合、ゲージは時計回りにすすむ
  • 0%の絶対角度 ] > [100%の絶対角度 ]の場合、ゲージは反時計回りにすすむ
という規則があります。この規則をもうちょっと簡単に書くと
  • 比率50%となる絶対角度は、[0%の絶対角度 ][100%の絶対角度 ]の平均値である
と書くこともできます。

よって、上図のようにしたい場合だと、比率50%の絶対角度が0°にならないといけないので、 [100%の絶対角度=90°なのであれば、[0%の絶対角度=-90°としなければなりません。

これを、[0%の絶対角度=270°としてしまった場合、[0%の絶対角度 ][100%の絶対角度 ]の平均値は「180°」となるため、以下のようなゲージになってしまいます。












実際にパラメータを設定する場合には、「比率50%」の絶対角度を先に決めた上で、「0%がそこから何度」「100%がそこから何度」か、というふうに考えたほうが楽チンかも知れません。


4.円弧のどの範囲を何色に塗るか

よくある円グラフのように0%からある比率までにのみ色を塗る、ってんなら簡単なんですが、それでは芸がないので、Glaejaでは色の塗りに関する概念を拡張してあります。それが「レベル領域」というものです。

先の2.で「レベル([現在値となる項目 ]÷[最大値となる項目 ]×100(%)となる比率のこと)」 について触れましたが、「レベル領域」とは、このレベルをサークル上に色として表現するための「塗り範囲」となります。

グラフの色に関するパラメータは、サークルの線色 ][サークルの背景色の2つです。
Glaejaではまず、[0%の絶対角度 ][100%の絶対角度 ]で指定された円弧全体を[サークルの背景色で塗りつぶし、その後に「レベル領域」を[サークルの線色で塗ります。

このサークルの線色で塗られる「レベル領域」の開始・終了位置をレベルに対してどう設定するのか、というパラメータが開始位置のタイプ ][開始位置 ][終了位置のタイプ ][終了位置の4つになります。

開始位置のタイプ ][終了位置のタイプは、
  • ある%で固定」 : レベルとは関係なく、開始位置 ][終了位置で指定した%値とする
  • 現在の%から相対指定」 : 現在のレベルから開始位置 ][終了位置で指定した量だけズラした%値とする
という2つのタイプからなります。

例えば、先の「よくある円グラフのように0%からある比率までにのみ色を塗る」場合なら、
塗り範囲である「レベル領域」の開始位置は常に0%なので、
  • 開始位置のタイプ: 「ある%で固定
  • 開始位置: 「0.0
となります。
また、「レベル領域」の終了位置は「ある比率(=現在のレベル)まで」なので、
  • 終了位置のタイプ: 「現在の%から相対指定
  • 終了位置: 「0.0
とすれば、(終了位置=現在のレベル+0.0)で、現在のレベルがレベル領域の終了位置となります。

では、開始位置のタイプ ][終了位置のタイプをともに「現在の%から相対指定」とするとどうなるのでしょう。
こうすると、「レベル領域」の開始位置・終了位置ともに現在のレベルに依存して変化することになります。

例えば、
  • 開始位置のタイプ: 「現在の%から相対指定
  • 開始位置: 「-5.0
  • 終了位置のタイプ: 「現在の%から相対指定
  • 終了位置: 「10.0
とした場合、現在のレベルが30%であれば、そのレベル領域は下図の赤部分のようになります。
















つまりレベル領域の幅は、[終了位置 ]-[開始位置 ]=10.0-(-5.0)=15%分に相当します。
このとき、サークルの0~100%の円弧は元のものより膨らんで表示されます。
この膨らみの量は、0%側が[開始位置 ]分だけ、100%側が[終了位置 ]分だけ、となっています。
例えば、 [0%の絶対角度0°、[100%の絶対角度90°であった場合には、以下のようになります。















これは、現在のレベルが0%および100%になった時に、レベル領域がはみ出る分を見込むようにしてあるためです。

0 件のコメント: