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

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デバイス自身はフォントデータを持たず、対応フォントはプログラムを実行しているブラウザに依存します。

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

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

名称	意味	具体例
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 に指定する文字と意味は以下の通りです。