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

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

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

割合を棒グラフで表現する「プログレスバー」

今回はモジュールの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で天気情報を表示させてみます。