GoogleAnalytics

SyntaxHighlighter

2011年7月10日日曜日

[Android] Battery Designer

※『Battery Designer』は2015-03-20をもって
※ Playストアでの公開を停止しました。
※ これまでご使用いただいた皆様に感謝申し上げます。
※ 本エントリは記念に残しておきます。


『Battery Designer』は、フルカスタマイズ可能なバッテリー表示ウィジェットです。

バッテリー状態(充放電、AC・USB給電、健康状態や電圧、温度等)や残量をテキストで表示できるほか、バッテリー残量に応じたバーやサークル、画像を表示することも可能で、それぞれ表示位置や色・サイズをカスタマイズすることができます。ウィジェットサイズは、1×1・1×2・2×1・2×2・4×1(横×縦)から選ぶことができ、それらのデザインを個別にカスタマイズすることができます。

ダウンロードと、ものすっごい長い Readme は続きから

【ダウンロード】
ココか、右のコードでマーケットにジャンプできます。

【更新履歴】
  • ver. 1.0.3(20110725a版):
    起動直後等のSDカードにアクセスしづらい状況でクラッシュしていた不具合を修正
  • ver. 1.0.2(20110712a版):
    • レイヤー編集画面で稀にクラッシュするバグを修正
    • [状態表示文字列]レイヤーの[ケース]デフォルトを「そのまま」に変更
  • ver. 1.0.1(20110711a版):[充電イメージ]で選択した画像ファイルが表示されないバグを修正。
  • ver. 1.0(20110710a版):マーケット公開。

【既知の不具合】
  • 設定画面でダイアログを開くときに入力されているデフォルト値が、その項目の既設定値ではなく、前回入力した値になっている → 直そうと思えば直せなくもないんですが、同じ項目値を持つレイヤーを作るときに便利なので残してあります。

【インストール】
インストール後、通常の方法でウィジェットをホーム画面に設置してください。

設置できるウィジェットサイズは、「1×1、2×1、1×2、2×2、4×1(横×縦)」です。

ホーム画面には、異なるサイズのウィジェットをいくつでも設置することができ、各々に異なったスキンを適用することができます。


ウィジェットをクリックすると、下図の情報画面になります。
※USBマウント時のような「SDカード非マウント時」には下記情報画面に遷移できません。
この画面では、【バッテリーの状態】と【ウィジェットのサイズ】情報を一覧することができます。

バッテリーの状態】では、
  • 種類 (Li-ion …)
  • 状態 (放電中・充電中 …)、健康 (良好・過熱 …)、給電 (AC・USB)
  • 充電率
  • 電圧、温度
を知ることができます。

ウィジェットのサイズ】では、
  • 配置 (ホーム画面における配置サイズ)
  • DIP (密度非依存ピクセルでのサイズ レイヤーの設定で用いる値)
  • 実ピクセル (デバイスにおける実際のピクセルサイズ 画像レイヤーの作成に用いる)
が表示されます。
この画面で[Menu]ハードボタンを押すと、右図オプションメニューが表示されます。
スキンの読み込み】で、SDカード直下「com.gmail.kanitawa.dcd/skins/」以下にあるスキンファイルを読み込むことが、
スキンの保存】で、現在のウィジェットのスキンを上記フォルダーに指定した名前で保存できます。
※ スキンファイルは「.skin」という拡張子を付けてありますが、中身は設定がJSON形式で書かれたテキストファイルですので、エディタ等で編集することが可能です。

最下段の【スキンの編集…】をクリックすると、以下に示すような、ウィジェットのスキンを編集するための画面に遷移します。

【スキンとレイヤー】
これは、新規設置したウィジェットのスキン編集画面です。
「スキン」とは、バッテリー状態を表示する文字列や、残量を表現するバー・サークル、画像を表す「レイヤー」の集合体(リスト)です。
左図リストの上のレイヤーから順に重ね描きで描画されていき、最終的なウィジェット画面となります。
リスト項目を長押しして、[1つ上へ移動][1つ下へ移動]させることで、重ね描きの順序を変更することができます。また、同様に項目を[削除]することもできます。
リスト最下段の[新規追加]をクリックし、新しいレイヤーを追加することができます。

編集したいリスト項目をクリックすると、レイヤー編集画面に遷移します。画面は、編集するレイヤーの種類によって異なります。

【レイヤーの編集画面】
左図は、[状態文字列]レイヤーの編集画面ですが、どのレイヤー編集画面でも、その最上段はウィジェットのサンプル画像になっています。
このサンプル画像をクリックすると、右図のような「バッテリー情報偽装ダイアログ」が表示され、サンプル画像で表示されるバッテリー残量や充放電状態を仮変更することができます。
以下に、各レイヤー種別の編集画面と編集項目を見ていきます。

【[状態表示文字列]レイヤーの編集】
[状態表示文字列]レイヤーは、以下の設定を編集することができます。
  • 表示文字
    • 表示文字列: 表示されるバッテリー情報を表す文字列(下記囲み記事参照)
    • 文字サイズ: 文字のサイズ 単位は sp 
    • 文字の色: 文字の色と透過度
    • 文字の背景色: 文字背景の色と透過度
  • ロケール
    • ロケール: 表示される文字列のロケール(下記囲み記事参照)
  • フォント
    • 外部フォントを利用: チェックすると、下の[外部フォント名]で、SDカード直下「com.gmail.kanitawa.dcd/fonts/」以下にインストールされたフォントを選ぶことができる
    • 外部フォント名:  SDカード直下「com.gmail.kanitawa.dcd/fonts/」以下にインストールされたうち、表示に用いるフォント名
    • ファミリー名: 外部フォントではなく、組み込みフォントを用いる場合のファミリー名(SERIF・SANS SERIF・MONOSPACE)
    • フォントスタイル: 用いる組み込みフォントのスタイル(ノーマル・ボールド・イタリック・ボールド+イタリック)
    • ケース: 表示文字列の大文字・小文字を設定(そのまま、全て大文字化、全て小文字化、先頭のみ大文字化)
  • アンカーポイント
    • 水平アンカーポイント: 文字列表示の水平基準位置
    • 垂直アンカーポイント: 文字列表示の垂直基準位置 この高さに文字列のベースラインがくる
    • 揃え方: 上記アンカーポイントに対する文字列の揃え方(左揃え・中央揃え・右揃え)
    • 文字列の傾き:上記アンカーポイントを通る水平線に対する文字列の傾き 時計回りがプラス
※バッテリー情報を表す文字列について
表示文字列の記号には、以下のような記号があります。
記号意味表示例
日本語英語
S充放電状態不明
充電中
放電中
充電断
満充電
unknwon
charging
discharging
not charging
full
H健康状態不明
良好
過熱
死亡
過電圧
未詳
unknown
good
overheat
dead
over voltage
unspecified_failure
l充電レベル5050
s満充電レベル100100
P充電率(%)5050
G給電種AC
USB
AC
USB
v電圧(mV)12341234
V電圧(V)1.2341.234
T温度(℃)36.936.9
t電池種Li-ionLi-ion
※シングルクォートで囲まれた文字列は上記解釈を受けずに、そのまま表示されます

【[残量バー]レイヤーの編集】
残量バー]は、現在のバッテリー残量を棒グラフで表すレイヤーで、以下の設定を編集することができます。
  • バーの設定 (棒グラフ全体)
    • バーの幅: グラフの幅 単位は dp
    • 100%時のバーの長さ: 棒グラフ全体の長さ 単位は dp
    • バーの色: グラフのレベル領域の色と透過度
    • バーの背景色: グラフのレベル領域以外の色と透過度
  • レベル領域 (バッテリー残量を意味する領域)
    この[レベル領域]は、残量に応じて色を変化させる領域のことで、この設定を変更することで多彩な表現が可能となります(下記囲み記事参照)。
    • 開始位置のタイプ: レベル領域開始位置のタイプ(ある%に固定・残量から%で相対指定)
    • 開始位置: 上記タイプに応じた%値
    • 終了位置のタイプ: レベル領域終了位置のタイプ(ある%に固定・残量から%で相対指定)
    • 終了位置 : 上記タイプに応じた%値
  • アンカーポイント
    • 開始位置(水平): バーの 0%となる水平座標位置 単位は dp
    • 開始座標(垂直): バー幅の中心高さとなる垂直座標位置 単位は dp
    • 傾き: 上記ポイントを通る水平線に対するバーの傾き 時計回りがプラス
※レベル領域とグラフの色について
グラフの色分けは、バッテリー残量%で直接色分けされるのではなく、「レベル領域」というものでワンクッションはさんで色分けされています。「レベル領域」は、バッテリー残量%から相対的に指定されることで、色分けする部分を可変にすることができ、そのことにより多彩なグラフ表現が可能となっています。
「レベル領域」の開始位置・終了位置は、
  • ある%で固定(バッテリー残量とは無関係な絶対%指定)
  • 残量から%で相対指定(バッテリー残量に応じて変化する)
という2つの指定方法があります。
例えば、バッテリー残量が60%、「バーの色(レベル領域)」を赤、「バーの背景色(それ以外の部分)」を黒にしたとして、
『開始:ある%で固定(0%)、終了:残量から%で相対指定(0%)』だと、
のような普通の棒グラフになります。

これを、『開始:ある%で固定(10%)、終了:残量から%で相対指定(0%)』にすると、
となります。


『開始:残量から%で相対指定(-5%)、終了:残量から%で相対指定(5%)』とすると、

のように、スライダーっぽいグラフを作成することができます。ただし、レベル領域がグラフ全体をはみ出ないよう、[開始座標(水平)]と[100%時のバーの長さ]で指定したグラフより、相対指定した%で分だけグラフが長くなる、という点に注意しないといけません。


「E 20 40 60 80 F」という文字列の上に、背景色を透過にしてレベル領域をごく狭くしたバーを重ね描きすることで、残量を表すゲージを表現することもできます。

【[残量サークル]レイヤーの編集】
残量サークル]は、現在のバッテリー残量を円グラフで表すレイヤーで、以下の設定を編集することができます。
  • サークルの設定
    • 線の幅: 円グラフの線幅 単位は dp
    • サークルの半径: 円の半径 単位は dp
    • サークルの線色: 円グラフのレベル領域の色と透過度
    • サークルの背景色: 円グラフのレベル領域以外の色と透過度
    • 0%の絶対角度: 円グラフの開始角度 単位は度
    • 100%の絶対角度: 充電率100%が円の何度分になるか 単位は度
    • この[100%の絶対角度]の指定方法によって、円グラフの描画される方向が変化します(下記囲み記事参照)。
  • レベル領域
    • 開始位置のタイプ: レベル領域開始位置のタイプ(ある%に固定・残量から%で相対指定)
    • 開始位置: 上記タイプに応じた%値
    • 終了位置のタイプ: レベル領域終了位置のタイプ(ある%に固定・残量から%で相対指定)
    • 終了位置 : 上記タイプに応じた%値
  • サークル中心の設定
    • 中心座標(水平): サークル中心の水平座標位置 単位は dp
    • 中心座標(垂直): サークル中心の垂直座標位置 単位は dp
※[0%・100%の絶対角度]と円グラフの描画方向


これらの角度指定は、左図のように「サークル中心から水平右方向を0°」とし、時計回りにプラス・反時計回りにマイナスとしている。


100%の絶対角度]を指定する際に、[0%の絶対角度]からプラス方向に見た角度で指定すれば円グラフの描画方向はプラス、マイナス方向に見た角度で指定すれば描画方向はマイナスとなる。
つまり、バッテリー残量が60%、[サークルの線色]が赤、[サークルの背景色]が黒として、
0%の絶対角度]を「-90°」、[100%の絶対角度]を「270°」と指定すると、左のようにプラス方向に描画されます。
逆に[0%の絶対角度]を「270°」、[100%の絶対角度]を「-90°」と指定すると、左のようにマイナス方向に描画されます。

また、[100%の絶対角度]には360°分より小さな値を用いることも可能です。

0%の絶対角度]を「-90°」、[100%の絶対角度]を「90°」となる一番左のサークルと、[0%の絶対角度]を「270°」、[100%の絶対角度]を「90°」となる真ん中のサークルという2つのレイヤーを重ねることで、左右対称にレベル領域が伸縮する円グラフを実現することができます。




【[イメージ]レイヤーの編集】
イメージ]レイヤーは、画像ファイルのイメージを表示するレイヤーで、以下の設定を編集することができます。
  • 画像の設定
    • 画像ファイル: クリックすると右のようなギャラリーダイアログが開くので、表示したい画像ファイルを選択します。
      ギャラリーには、 SDカード直下「com.gmail.kanitawa.dcd/images/」以下にインストールされた拡張子「.png」を持つファイルが表示されます。
    • 拡大率: ファイルの画像をウィジェットに描画する際の拡大率
  • アンカーポイント
    • 水平アンカーポイント: 
    • 垂直アンカーポイント: ファイルの画像をウィジェット中に描画する位置。単位は dp。この位置に画像の左上がくるように描画される。

【[残量イメージ]レイヤーの編集】
残量イメージ]レイヤーは、バッテリー残量に応じて異なった画像ファイルのイメージを表示するレイヤーで、基本的に全ての設定項目は、上記[イメージ]レイヤーと同じです。

残量に応じて表示される画像ファイルは、『(基本名)_###.png』という形式のファイル名を持ちます(###は3桁の整数で000、010や100といったもの)。また、ギャラリーに表示させるため、『(基本名)_100.png』というファイルは必ず存在させるようしてください。

現在の残量%に近い最大の ### を持つファイルが選ばれて、ウィジェットにそのイメージが表示されます。例えば、現在の残量が50%の場合、『(基本名)_050.png』というファイルが存在すればそれが表示され、『(基本名)_040.png』『(基本名)_060.png』しかなければ『(基本名)_060.png』が表示されます。


【[充電イメージ]レイヤーの編集】
[充電イメージ]レイヤーは、充電時の給電種別に応じて異なった画像ファイルのイメージを表示するレイヤーで、基本的に全ての設定項目は、[残量イメージ]レイヤーと同じく、上記[イメージ]レイヤーと同じです。

このレイヤーでは、給電種別が『AC』の場合と、『USB』の場合ごとに画像ファイルを選ぶ必要があります。給電種別を表示し分ける必要がない場合には、同じファイルを指定してください。

Readme は以上です。

レイヤーを組み合わせて複雑な見た目のスキンを構成するチュートリアルや、サンプルスキンの配布は別エントリに分けます。

23 件のコメント:

匿名 さんのコメント...

質問失礼します。
残量イメージは一つ作っただけで100%から50%になると画像が自動で切り替わるんですよね?
それとも一つの画像につき残量イメージを一つ作る感じなんですかね?
画像が切り替わらなくて困ってます。
フォルダーの中のイメージのなかに♯♯♯-090.pngゎあるんですが…

kanitawa さんのコメント...

> フォルダーの中のイメージのなかに♯♯♯-090.pngゎあるんですが…

ファイル名の付け方が間違ってるんではないでしょうか?
残量イメージのファイル名は「bat_090.png」のような感じで、
(適当な文字列)_(ゼロから始まる3桁の数値).png
という形式でないといけません。

(適当な文字列)は###でも構わないのですが、アルファベットを使ったほうが無難でしょう
(適当な文字列)と(ゼロから始まる3桁の数値)を繋ぐのは「半角のアンダースコア」です。マイナス記号ではありません。
(ゼロから始まる3桁の数値)は必ず「半角数字」を用いてください。

kanitawa さんのコメント...

あ、書き忘れた。

それと、「(適当な文字列)_100.png」という画像ファイルを必ず用意してください。
残量イメージレイヤー編集画面の画像ファイル選択ダイアログは、
この「(適当な文字列)_100.png」の一覧を表示しますので、
これがないと選ぶことが出来ません。

kanitawa さんのコメント...

つまり、「100%から50%になると画像が切り替わる」という場合、
「bat_100.png」「bat_050.png」という2枚の画像が絶対に必要になります。

100~0%を10%刻みで、なら
「bat_100.png」「bat_090.png」「bat_080.png」「bat_070.png」「bat_060.png」
「bat_050.png」「bat_040.png」「bat_030.png」「bat_020.png」「bat_010.png」
「bat_000.png」と全部で11枚の画像が必要です。

先頭の文字列は「bat」でなくても「abc」でも「miku」でも何でも構いません。

匿名 さんのコメント...

それが…一応設定ゎしてるんですが…
因みにイメージフォルダーの中で大丈夫ですよね?
もし考えられる原因ゎ他に何がありますか?

kanitawa さんのコメント...

その画像ファイルは、残量イメージレイヤーの画像ファイル選択でギャラリーに表示はされるのでしょうか?
画像ファイルの命名が間違ってなくて、残量イメージレイヤーの画像ファイル選択でギャラリーに表示されるのだとしたら、
あと疑われるのは画像フォーマットですかね?画像は「24ビットPNGファイル」でなければなりません。

よろしければ、skinsフォルダ中に保存されているスキンファイルとimagesフォルダ中の画像ファイルを私宛にメールで送ってもらえますか?

匿名 さんのコメント...

100に設定している画像しか表示されません…
新しくウィジェットを作り直してもイメージにも残量イメージにも100意外に設定した画像ゎ表示されませんでした。
_080の部分を消去すればイメージには表示されます。

匿名 さんのコメント...

あ、この問題とスキンが読み込めない問題は関係ありますか?
私の場合スキンの読み込みができません。
拾ってきたスキンなので壊れているのかと思い、自分で作って保存したとしてもそのスキンは読み込めなくなります…

kanitawa さんのコメント...

> 100に設定している画像しか表示されません…

それは残量イメージレイヤー編集画面として正しい挙動です。
画像選択ギャラリーは「_100.png」で終わる画像ファイルのみを表示します。
ユーザーはギャラリーに表示された画像の1つをクリックして選択します。
すると、選択された画像ファイル名の「_100.png」以外の部分が基本名として編集画面に表示されるはずです。
このようにして画像ファイルを選択してやれば、バッテリー残量に応じて「_###.png」の###部分が異なる画像ファイルが表示されるはずです。

kanitawa さんのコメント...

> この問題とスキンが読み込めない問題は関係ありますか?

関係ありません。

> 自分で作って保存したとしてもそのスキンは読み込めなくなります…

新規設置したウィジェットのスキンを編集して名前つけて保存した後、別に設置したウィジェットでその名前つけたスキンを読み込めないということですか?

匿名 さんのコメント...

スキンの問題は再インストールで直りました。すいません。

匿名 さんのコメント...

読んで確認する限り設定どうりだと思います…

イメージで画像が表示されるということは画像に問題がないという事で大丈夫ですよね?

ウィジェットのレイアウトが表示されている所でも設定がうまくいっていれば画像ゎ変化しますか?

匿名 さんのコメント...

読んで確認する限り設定は大丈夫です。


ウィジェットのレイアウトでうまくいっていれば画像ゎ変化する事が確認できますか?

kanitawa さんのコメント...

> ウィジェットのレイアウトが表示されている所でも設定がうまくいっていれば画像ゎ変化しますか?

残量イメージレイヤー編集画面の一番上にあるサンプル画像は、編集画面を開いた時のバッテリー残量のまま変化しません。この画面のままずーっと放置してバッテリー残量が減ったとしても、サンプル画像は変わりません。

しかし、残量イメージレイヤー編集画面の一番上にあるサンプル画像をクリックすると、バッテリー残量を仮に変化させるダイアログが出ますので、そこでバッテリー残量を値を変えてやれば、サンプル画像が変化するはずです。

残量イメージレイヤー編集画面のスクリーンショットと、アストロやESなどのファイラーでimagesフォルダーの中を見たときのスクリーンショットを、よろしければkanitawa@gmail.comまで送ってもらえますか?

匿名 さんのコメント...

メール送らせていただきました。

匿名 さんのコメント...

すいません。
うまく書き込めてなかったみたいです。

メール送信しました。

kanitawa さんのコメント...

スクショとスキン、確認しました。

画像ファイル名を「dot.0_###.png」から「dot0_###.png」に変更してみてください。
ファイル名の途中に「.」が含まれていると上手く表示されないと思います。

匿名 さんのコメント...

変更しました!残念ながら結果は同じでした。

kanitawa さんのコメント...

頂いたスクショのimagesフォルダ内ファイル一覧を見てて思ったんですが…

「dot.0_100.png」があるのは確認できたんですが、
「dot.0_090.png」とか「dot.0_080.png」は無いのですか?

残量イメージレイヤーで「dot.0_100.png」を選択して、
バッテリー残量が100%から90%に変化したときに
「GrS_090.png」が表示されるはず、、、とか思ってませんか?

匿名 さんのコメント...

もしかして…基本名は全部統一でないと…駄目ということですか…???
100%から90%に変化したとき同じ基本名の_090.pngが表示されるということですか???

kanitawa さんのコメント...

> 基本名は全部統一でないと…駄目ということですか

その通りです。「基本名」ですからね。

> 100%から90%に変化したとき同じ基本名の_090.pngが表示される

その通りです。
だって、そうじゃないと、複数のウィジェットで異なるバッテリー残量画像を使えないじゃないですか。

匿名 さんのコメント...

あああ
本当にすいません。
こんな基本的な事で何時間もお時間をとらせてしまって…
無事画像が切り替わるように設定できました(ノД`)
本当にありがとうございました!
あと無駄な御時間とらせてしまって
本当にすいませんでした!

kanitawa さんのコメント...

> 何時間もお時間をとらせてしまって

いえいえ、Glaejaの次バージョンのための作業が煮詰まってたとこだったので。

ともかく上手く動いてよかったですね。では寝ます。