テーマの基本　その３
（テキスト表示編）

テーマの基本 その１とその２で、テーマを作る準備が整いました。
これからプログラミングを始めていきますが、手始めにテキストによるバッテリー残量表示をやってみましょう。

残量を表示してみる

雛形によって、あとは描くだけの状態までになりましたので、実際に何か書いてみましょう。
手始めですので、見た目よりも機能を重視し、シンプルなものにしたいと思います。
テキストのみではありますが、バッテリーの残量を表示してみましょう。

バッテリーの残量は取得できており、その内容は「数値」ですので、図形を描くのではなく、文字を表示することになります。
canvasに対しJavaScriptで文字列を表示するには、fillTextを使います。
プログラムでは、以下のように記述します。
ctx.fillText(文字列, X座標, Y座標); strokeTextというのもありますが、輪郭を表示するよりも、塗りつぶした方が見やすいので、最初からfillTextを使いました。

文字列の部分には、バッテリーの残量をそのまま表示すれば良いのですが、座標は考えないといけません。
用意したキャンバスは正方形ですので、中央に表示させるために、高さの半分をそれぞれの座標に割り当てましょう。

では、実際のプログラム見てみます。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
このプログラムを.js拡張子で保存し、Lithium Ion のテーマフォルダーに転送してみます。
このテーマを適用してみると、こんな感じに反映されました。

小さいながらも、バッテリーの残量が表示されていますね。
テキストの装飾で何とでもなりますので、装飾は次に回します。

このサンプルのダウンロード　ー＞　basic3_1.zip

文字を大きくする

とりあえず、バッテリーの残量を表示できましたが、表示しただけで終わりました。
真ん中にあるのでしょうが、文字が小さく、色も黒で固定されていますね。

先ずは、文字を大きくしましょう。
と言っても、どれくらいの大きさにすれば良いか分からないので、ステータスバーの高さを流用してみます。
ステータスバーの高さをそのままフォントサイズとして指定してみようというものです。
使うのは、fontプロパティで、以下のように記述します。
ctx.font = "フォント名　サイズ　スタイル"; 基本的には、スタイルシートと同様ですので、さらに詳しく知りたい方はググってください。

fontプロパティを利用して、フォントサイズを指定した全体のプログラムは、以下の通りです。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.font = height + "px";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
表示してみると、こんな感じです。

小さいままですね・・・

このサンプルのダウンロード　ー＞　basic3_2.zip

フォントサイズはそのままで、フォント名を以下のように指定してみました。
ctx.font = height + "px Helvetica Neue"; 表示してみると、こんな感じです。

大きくなりましたね！
大きすぎてはみ出しているように見えますが、表示する位置を中央に指定しているためにこのようになったと考えると、調整しなければなりませんね。

このサンプルのダウンロード　ー＞　basic3_3.zip

この手の表示位置は、左上を原点とし、右や下がプラス方向であることが通例です。
大きくなった文字の左下がキャンバスの中央にあるように見えますので、左下を目標に表示してみましょう。
表示位置を、以下のように指定し直してみました。
ctx.fillText(percent, 0, height); 表示してみると、こんな感じです。

ある程度の矯正はできましたね。
しかし、納得はできません。
やはり中央に表示したいですよね。

このサンプルのダウンロード　ー＞　basic3_4.zip

ここで、フォントが持つプロパティを駆使しましょう。
textAlignとtextBaselineを使って文字列自体を中央表示にし、文字列を中央に配置することにします。
試したプログラムは、以下の通りです。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.font = height + "px Helvetica Neue";
　ctx.textAlign = "center";
　ctx.textBaseline="middle";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
表示してみると、こんな感じです。

悪くはありませんが、キャンバスの大きさが気になります。

このサンプルのダウンロード　ー＞　basic3_5.zip

単純に、フォントが大きすぎるだけだと思うので、フォントサイズを修正してみます。
何となく、８割くらいかな？と思ったので、フォントサイズを0.8倍とし、以下のように書き直してみました。
(height, percent, charge, low, lpm, m_color, b_color) {

　var canvas = document.createElement("canvas");
　canvas.height = height;
　canvas.width = height;
　var ctx = canvas.getContext("2d");

　ctx.font = height*0.8 + "px Helvetica Neue";
　ctx.textAlign = "center";
　ctx.textBaseline="middle";
　ctx.fillText(percent, height/2, height/2);

　return canvas.toDataURL("image/png");
}
表示してみると、こんな感じです。

まぁ、こんな感じでしょうか。
今回は、ここまでとします。

このサンプルのダウンロード　ー＞　basic3_6.zip