[Android] Battery Designer

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

『Battery Designer』は、フルカスタマイズ可能なバッテリー表示ウィジェットです。 バッテリー状態（充放電、AC・USB給電、健康状態や電圧、温度等）や残量をテキストで表示できるほか、バッテリー残量に応じたバーやサークル、画像を表示することも可能で、それぞれ表示位置や色・サイズをカスタマイズすることができます。ウィジェットサイズは、１×１・１×２・２×１・２×２・４×１（横×縦）から選ぶことができ、それらのデザインを個別にカスタマイズすることができます。 ダウンロードと、ものすっごい長い Readme は続きから

【ダウンロード】

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

【更新履歴】

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

【既知の不具合】

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

【インストール】

インストール後、通常の方法でウィジェットをホーム画面に設置してください。 設置できるウィジェットサイズは、「１×１、２×１、１×２、２×２、４×１（横×縦）」です。 ホーム画面には、異なるサイズのウィジェットをいくつでも設置することができ、各々に異なったスキンを適用することができます。 ウィジェットをクリックすると、下図の情報画面になります。 ※USBマウント時のような「SDカード非マウント時」には下記情報画面に遷移できません。

この画面では、【バッテリーの状態】と【ウィジェットのサイズ】情報を一覧することができます。 【バッテリーの状態】では、 種類　（Li-ion …） 状態　（放電中・充電中 …）、健康　（良好・過熱 …）、給電　（AC・USB） 充電率 電圧、温度 を知ることができます。

【ウィジェットのサイズ】では、

• 配置　（ホーム画面における配置サイズ）
• DIP　（密度非依存ピクセルでのサイズ　レイヤーの設定で用いる値）
• 実ピクセル　（デバイスにおける実際のピクセルサイズ　画像レイヤーの作成に用いる）

が表示されます。

この画面で[Menu]ハードボタンを押すと、右図オプションメニューが表示されます。

【スキンの読み込み】で、SDカード直下「com.gmail.kanitawa.dcd/skins/」以下にあるスキンファイルを読み込むことが、
【スキンの保存】で、現在のウィジェットのスキンを上記フォルダーに指定した名前で保存できます。
※ スキンファイルは「.skin」という拡張子を付けてありますが、中身は設定がJSON形式で書かれたテキストファイルですので、エディタ等で編集することが可能です。

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

【スキンとレイヤー】

これは、新規設置したウィジェットのスキン編集画面です。 「スキン」とは、バッテリー状態を表示する文字列や、残量を表現するバー・サークル、画像を表す「レイヤー」の集合体（リスト）です。 左図リストの上のレイヤーから順に重ね描きで描画されていき、最終的なウィジェット画面となります。

リスト項目を長押しして、［１つ上へ移動］［１つ下へ移動］させることで、重ね描きの順序を変更することができます。また、同様に項目を［削除］することもできます。
リスト最下段の［新規追加］をクリックし、新しいレイヤーを追加することができます。

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

【レイヤーの編集画面】

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

以下に、各レイヤー種別の編集画面と編集項目を見ていきます。

【［状態表示文字列］レイヤーの編集】

［状態表示文字列］レイヤーは、以下の設定を編集することができます。 表示文字 表示文字列：　表示されるバッテリー情報を表す文字列（下記囲み記事参照） 文字サイズ：　文字のサイズ　単位は 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	充電レベル	50	50
s	満充電レベル	100	100
P	充電率（％）	50	50
G	給電種	AC USB	AC USB
v	電圧（mV）	1234	1234
V	電圧（V）	1.234	1.234
T	温度（℃）	36.9	36.9
t	電池種	Li-ion	Li-ion

※シングルクォートで囲まれた文字列は上記解釈を受けずに、そのまま表示されます

【［残量バー］レイヤーの編集】

［残量バー］は、現在のバッテリー残量を棒グラフで表すレイヤーで、以下の設定を編集することができます。 バーの設定 （棒グラフ全体） バーの幅：　グラフの幅　単位は dp 100%時のバーの長さ：　棒グラフ全体の長さ　単位は dp バーの色：　グラフのレベル領域の色と透過度 バーの背景色：　グラフのレベル領域以外の色と透過度 レベル領域 （バッテリー残量を意味する領域） この［レベル領域］は、残量に応じて色を変化させる領域のことで、この設定を変更することで多彩な表現が可能となります（下記囲み記事参照）。 開始位置のタイプ：　レベル領域開始位置のタイプ（ある％に固定・残量から％で相対指定） 開始位置：　上記タイプに応じた％値 終了位置のタイプ：　レベル領域終了位置のタイプ（ある％に固定・残量から％で相対指定） 終了位置 ：　上記タイプに応じた％値 アンカーポイント 開始位置（水平）：　バーの 0％となる水平座標位置　単位は dp 開始座標（垂直）：　バー幅の中心高さとなる垂直座標位置　単位は dp 傾き：　上記ポイントを通る水平線に対するバーの傾き　時計回りがプラス

※レベル領域とグラフの色について
グラフの色分けは、バッテリー残量％で直接色分けされるのではなく、「レベル領域」というものでワンクッションはさんで色分けされています。「レベル領域」は、バッテリー残量％から相対的に指定されることで、色分けする部分を可変にすることができ、そのことにより多彩なグラフ表現が可能となっています。
「レベル領域」の開始位置・終了位置は、

• ある％で固定（バッテリー残量とは無関係な絶対％指定）
• 残量から％で相対指定（バッテリー残量に応じて変化する）

という２つの指定方法があります。
例えば、バッテリー残量が６０％、「バーの色（レベル領域）」を赤、「バーの背景色（それ以外の部分）」を黒にしたとして、
『開始：ある％で固定（０％）、終了：残量から％で相対指定（０％）』だと、

のような普通の棒グラフになります。

これを、『開始：ある％で固定（１０％）、終了：残量から％で相対指定（０％）』にすると、
となります。


『開始：残量から％で相対指定（－５％）、終了：残量から％で相対指定（５％）』とすると、

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


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

【［残量サークル］レイヤーの編集】

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

※［０％・１００％の絶対角度］と円グラフの描画方向

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


［１００％の絶対角度］を指定する際に、［０％の絶対角度］からプラス方向に見た角度で指定すれば円グラフの描画方向はプラス、マイナス方向に見た角度で指定すれば描画方向はマイナスとなる。
つまり、バッテリー残量が６０％、［サークルの線色］が赤、［サークルの背景色］が黒として、

［０％の絶対角度］を「－９０°」、［１００％の絶対角度］を「２７０°」と指定すると、左のようにプラス方向に描画されます。

逆に［０％の絶対角度］を「２７０°」、［１００％の絶対角度］を「－９０°」と指定すると、左のようにマイナス方向に描画されます。

また、［１００％の絶対角度］には３６０°分より小さな値を用いることも可能です。
［０％の絶対角度］を「－９０°」、［１００％の絶対角度］を「９０°」となる一番左のサークルと、［０％の絶対角度］を「２７０°」、［１００％の絶対角度］を「９０°」となる真ん中のサークルという２つのレイヤーを重ねることで、左右対称にレベル領域が伸縮する円グラフを実現することができます。

【［イメージ］レイヤーの編集】

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

【［残量イメージ］レイヤーの編集】

［残量イメージ］レイヤーは、バッテリー残量に応じて異なった画像ファイルのイメージを表示するレイヤーで、基本的に全ての設定項目は、上記［イメージ］レイヤーと同じです。 残量に応じて表示される画像ファイルは、『（基本名）_###.png』という形式のファイル名を持ちます（###は３桁の整数で000、010や100といったもの）。また、ギャラリーに表示させるため、『（基本名）_100.png』というファイルは必ず存在させるようしてください。 現在の残量％に近い最大の ### を持つファイルが選ばれて、ウィジェットにそのイメージが表示されます。例えば、現在の残量が５０％の場合、『（基本名）_050.png』というファイルが存在すればそれが表示され、『（基本名）_040.png』『（基本名）_060.png』しかなければ『（基本名）_060.png』が表示されます。

【［充電イメージ］レイヤーの編集】

［充電イメージ］レイヤーは、充電時の給電種別に応じて異なった画像ファイルのイメージを表示するレイヤーで、基本的に全ての設定項目は、［残量イメージ］レイヤーと同じく、上記［イメージ］レイヤーと同じです。 このレイヤーでは、給電種別が『AC』の場合と、『USB』の場合ごとに画像ファイルを選ぶ必要があります。給電種別を表示し分ける必要がない場合には、同じファイルを指定してください。

Readme は以上です。

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