【Zooper Widgetの使い方】第3回 : プログレスバーを使って、バッテリーや時間をバーで表現する

投稿日:2014/07/11 更新日:2014/07/12[PR記事]

Zooper Widgetの使い方、第3回です。

まだまだ基礎的な説明が続き、すでにZooper Widgetを使っている人にはもどかしいかもしれませんが、改めて見直すことで新たな発見もあるかもしれません。記事の最後には今回のまとめで作例も掲載しますので、そちらもぜひご覧ください。

Zooper Widget

価格：無料
開発：MYCOLORSCREEN

今回はモジュールの1つ「プログレスバー」を扱います。
プログレスバーは、何かしらの値の割合を棒グラフで表現するモジュールです。

画像ではバッテリー残量が棒グラフで描画されており、緑の部分がバッテリー残量、そこと白い部分を合わせたものがバッテリー総量となります。全体に対してどれくらいバッテリーが残っているか、視覚的に分かりやすいですね。

今回の設定で重要になるのは「プログレスの最小/最大/値を編集」という項目です。
この項目では、そのバーがどういったものの値を表現するのか、それを設定します。よく使いそうなものはあらかじめ用意されているので、それを選ぶだけでも大丈夫です。

このバーは直線だけでなく、「カーブ」で曲げたり、もっと曲げて円にしたり、「Spacing」「Split」を使って点線にすることもできます。

点線はその設定がちょっとわかりにくいのですが、
・Spacing…点と点の間のスペースの大きさ
・Split…点1つでいくつ分の値を意味するか
となっています。

例えばバッテリーを表すバーを作ったとして、最大値は100です。Splitを5とすると、100÷5で20個の点を使った点線となります。Splitが10なら10個の点となり、1つの点の長さはSplitが5の時よりも大きくなります。
Splitを100にすれば、1％ごとに1つの点を使うことになりますね。

「Fill Mode」という項目では、このバーにグラデーションなどを掛けることができます。
・グラデーション…元々の色から指定した色までだんだん変わるグラデーションで表示されます。指定した色に完全に変わるのは最大値の時になります。
・Fade…バー全体が、値によって色を変化させていきます。
・Highlight Current…点線を使った時に、その現在値を表す点の部分だけ色を変えます。

プログレスバーを使って、バッテリー残量と日付時間（7月11日14時43分）を表示するスキンを作ってみました。

4つ並んだ円は左から月/日/時/分を表しています。
例えば日を表す2番目の円は、最大値を「その月の日数」を表す「#Dl#」と入力し、「値」に「#Dd#」と入力します。これで現在の日数分が塗られたバーになります。このバーを曲げて円にしています。

このままでも良かったのですが、もう一工夫してみます。
例えば「月」を表すバーは1月から12月までの12段階でしか変化しません。これをもっと細かく、1分ごとに変化させてみました。

それぞれの円の最大/最小/値はこのようになります。
分…最大:60　値:#Dm#
時…最大:1440　値:#DH#*60+#Dm#
日…最大:#Dl#*1440　値:(#Dd#-1)*1440+#DH#*60+#Dm#
月…最大:365*1440　値:(#DD#-1)*1440+#DH#*60+#Dm#

1日は24時間、つまり1440分です。そして現在は#DH#で表示される値に60をかけて現在の分(#Dm#)を足したものです。
そうやって、すべての値を分に換算して入力します。これで1分ごとに少しずつ進むプログレスバーができあがりました。（ちなみにうるう年は考えていません。）

クリックで拡大します

今回の結果がこのホーム画面です。
さきほどの画像とあまり変わっていないかもしれませんが、そういう細かいところにこだわってこそ、ですよね？

今回は値を棒グラフで表す「プログレスバー」を学びました。
次はZooper Widgetで天気情報を表示させてみます。

Zooper Widget

価格：無料
開発：MYCOLORSCREEN