obnizのLCDにいろいろ表示する

obniz
DSC_0272

obnizのLCDに表示する文字列のフォントを変更する

今回は、Obniz.display.print() 以外の描画関数について解説します。

使用部品

今回は外部回路はありません。obniz 本体だけで動作します。

プログラム1:フォントサイズの変更

まずは表示に用いるフォントのサイズを変更してみましょう。

ソースコード

『obniz のLCDに文字列を表示する』のときとほぼ同じです。

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");      // 自分のobnizIDを記述すること
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.print("Hello,World!");
        obniz.display.font(null, 21);
        obniz.display.print("Hello,World!");
      };
    </script>
  </head>
  <body>
    <h1>hello world (font-size) test</h1>
  </body>
</html>

プログラムの解説

フォントを変更する display.font()
JavaScript
obniz.onconnect = async function() {
  obniz.display.clear();
  obniz.display.print("Hello,World!");
  obniz.display.font("serif", 21);
  obniz.display.print("Hello,World!");
};

今回新しく登場したのは Obniz.display.font() メソッドです。フォントの種類とサイズを指定できます。書式は以下の通りです。

font(fontFamily: string | null [, fontSize: number ] ): void
引数
名前意味
fontFamily文字列フォント名を指定します。
null を指定すると Arial を指定したことになります。
fontSize数値フォントのサイズをpx単位で指定します。
省略すると 16px を指定したことになります。
返却値

なし

違いが判りやすいように、最初の例ではフォントのサイズのみ変更しています。

プログラム1の実行

プログラム2:フォントファミリーの変更

続いて、フォントファミリー(明朝体やゴシック体など)を変更してみましょう。

ソースコード

HTML
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");      // 自分のobnizIDを記述すること
      var n=0;
      obniz.onconnect = async function() {
        obniz.display.font("sans-serif",21);
        obniz.display.print("Hello,World!");
        obniz.display.font("serif",21);
        obniz.display.print("Hello,World!");
        obniz.display.font("monospace",21);
        obniz.display.print("Hello,World!");
      };
    </script>
  </head>
  <body>
    <h1>hello world (font-family) test</h1>
  </body>
</html>

プログラムの解説

fontFamilyの変更
JavaScript
obniz.onconnect = async function() {
  obniz.display.font("sans-serif",21);
  obniz.display.print("Hello,World!");
  obniz.display.font("serif",21);
  obniz.display.print("Hello,World!");
  obniz.display.font("monospace",21);
  obniz.display.print("Hello,World!");
};

今度は、Obniz.display.font() メソッドで fontFamily を指定しています。指定可能な値は CSS の font-family プロパティと同じです。obnizデバイス自身はフォントデータを持たず、対応フォントはプログラムを実行しているブラウザに依存します。

”MS P明朝” などのフォント名も指定可能ですが、実行環境(ブラウザ)依存になってしまうので、総称フォントでの指定がよいと思います。

総称フォントとは、個別のフォント名ではなく、フォントの系統を表すもので、以下のようなものがあります。

名称意味具体例
serifセリフ(いわゆる『髭飾り』)の付いた文字“Times New Roman”、”MS P明朝” など
sans-serifセリフの付いていない文字“Arial”、”MS Pゴシック” など
system-uiシステム(OS)のUIフォント“Yu Gothic” など
monospace等幅フォント”Courier”、”MS ゴシック” など
cursive筆記体
fantasy装飾的フォント

プログラム2の実行

表示文字列を英文字『Hello,World!』から日本語『今日は世界』に変更するとこのようになります。さすがにこのピクセル数だとセリフ体は苦しい気がしますが…。

obnizのLCDに表示する文字列の位置を変更する

ここまでは、Obniz.display.print()で文字列が表示される位置は、Obniz.display.clear()直後は画面左上隅に始まり、Obniz.display.print()を実行するたびに『次の行』の行頭に変更されてきました。今度は、自由な位置から文字列を描画してみましょう。

プログラム3:文字列表示位置の変更

プログラム

HTML
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");
      var n=0;
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.pos(0,0);
        obniz.display.print("左上");
        obniz.display.pos(96,0);
        obniz.display.print("右上");
        obniz.display.pos(0,48);
        obniz.display.print("左下");
        obniz.display.pos(96,48);
        obniz.display.print("右下");
        obniz.display.pos(48,24);
        obniz.display.print("中央");
      };
    </script>
  </head>
  <body>
    <h1>position test</h1>
  </body>
</html>

プログラムの解説

文字列表示位置を指定する display.pos()
JavaScript
obniz.onconnect = async function() {
  obniz.display.clear();
  obniz.display.pos(0,0);
  obniz.display.print("左上");
  obniz.display.pos(96,0);
  obniz.display.print("右上");
  obniz.display.pos(0,48);
  obniz.display.print("左下");
  obniz.display.pos(96,48);
  obniz.display.print("右下");
  obniz.display.pos(48,24);
  obniz.display.print("中央");
};

文字列の表示位置は Obniz.display.pos() メソッドで指定できます。書式は以下の通りです。

pos(x: number, y: number): {x: number, y: number}
引数
名前意味
x数値文字列描画位置の左上隅のx座標を指定します。画面左端が x=0、右に行くほどx座標の値は大きくなります。
y数値文字列描画位置の左上隅のy座標を指定します。画面上端が y=0、下に行くほどy座標の値は大きくなります。下が正方向の座標軸は、コンピュータの画面ではお馴染みですが、一般的なグラフの座標軸とは逆なので注意して下さい。
返却値

返却値は座標値 {x, y} です。今回のプログラム例では捨ててしまっています。

実行

『左下』の下の横棒が表示されていません。フォントサイズ16pxなのでy=48から表示すればちょうど下端まで表示できるかと思ったのですが。

obnizのLCDにQRコードを表示する

今度はテキストではなくもQRコードを表示してみましょう。

プログラム4:QRコードの表示

プログラム

HTML
<html>
  <head>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/obniz@3.26.0/obniz.js"></script>
    <script>
      const obniz = new Obniz("1234-5678");
      obniz.onconnect = async function() {
        obniz.display.clear();
        obniz.display.qr("https://workshop.aaa-plaza.net/");
      };
    </script>
  </head>
  <body>
    <h1>QR code test</h1>
  </body>
</html>

プログラムの解説

QRコードを表示する display.qr()
JavaScript
obniz.onconnect = async function() {
  obniz.display.clear();
  obniz.display.qr("https://workshop.aaa-plaza.net/");
};

obnizでは、Obniz.display.qr() メソッドで簡単にQRコードを表示することが出来ます。書式は以下の通りです。

qr(text: string [ , correction: "L" | "M" | "Q" | "H" ] ): void
引数
名前意味
text文字列QRコードにする文字列を指定します。
correction文字誤り訂正レベルを”L”、”M”、”Q”、”H”のいずれかの文字で指定します。省略可能です。省略した場合は”M”を指定したことになります。

correction に指定する文字と意味は以下の通りです。

correctionの文字誤り訂正符号の比率
L7%
M(デフォルト)15%
Q25%
H30%

誤り訂正符号とは、QRコードの一部が欠損していても正しいデータを復元できるようにするための符号です。誤り訂正符号の比率が大きい方が、より大きな欠損でもデータ復元が可能になりますが、元のデータのサイズに対するQRコードの面積も大きくなります。

返却値

なし

実行

サンプルはこのサイトのURLです。

まとめ

  • obniz本体LCDに表示するフォントを変更するには display.font() メソッドを使用する
  • obniz本体LCDに文字列を表示する位置を設定するには display.pos() メソッドを使用する
  • obniz本体LCDにQRコードを表示するには display.qr() メソッドを使用する

コメント

タイトルとURLをコピーしました