デバイスによってはデバイスに搭載されているディスプレイの操作が可能です。任意の文字や画像などを表示できます。
描画方法
displayでは1ピクセルずつどう表示するのかをdisplay.raw()により配列で送信します。左上を起点に白黒なら1pixel-1bitで白黒を、カラーなら対応している色深度により1pixelが何bitなのかが異なります。
また、Canvasを読み取りdisplayに描画するdisplay.draw()関数が用意されています。Nodejsの場合でもnode-canvasを利用することで同様な描画が可能です。
// Javascript Example
// browser
let ctx = $("#canvas")[0].getContext('2d');
// or Node.js
// $ npm install canvas ( version 2.0.0 or later required )
// const { createCanvas } = require('canvas');
// const canvas = createCanvas(128, 64);
// const ctx = canvas.getContext('2d');
ctx.fillStyle = "white";
ctx.font = "30px Avenir";
ctx.fillText('Avenir', 0, 40);
obniz.display.draw(ctx);
そのため、任意の文字・図形・画像・3Dなども表示可能です。
描画関数
obniz.jsではcanvasを直接操作せずに描画できる関数が用意されています。
- 文字の描画 ... display.print()
- 画面の消去 ... display.clear()
- 直線描画 ... display.line()
- 矩形の描画 ... display.rect()
- 円の描画 ... display.circle()
- QRコードの描画 ... display.qr()
- 文字のフォント指定 ... display.font()
- 文字の位置を変更 ... display.pos()
- 描画の色を変更 ... display.setColor()
例えば、display.print()を使うとすぐに文字を描画できます。
// Javascript Example
obniz.display.print("Hello World🧡");
ただし、実行環境によって描画できる文字の種類が限られています。
| 実行環境 | 描画方法 | 文字種 |
|---|---|---|
| ブラウザ | canvas | インストールされているフォントが対応するすべての文字種 |
| Node.js + canvas | canvas | インストールされているフォントが対応するすべての文字種 |
| Node.js のみ (canvas なし) | jsonコマンド | 英数字(A-Z,a-z,0-9)と記号(!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~) のみ※ASCIIコードに含まれる文字種 |
上の例はハートマークが含まれているため、Node.js のみ (canvas なし) の場合は警告が表示されます。npm install canvas で canvas を手動でインストールしてください。
フォントはデフォルトで Avenir が設定されており、display.font() で変更できます。
フォントが一切利用できない環境(repl.it など)では canvas がインストールされていると文字が表示できなくなります。
その他の描画関数は以下のように利用できます。
// Javascript Example
obniz.display.line(30, 30, 100, 30);
obniz.display.rect(20, 20, 20, 20);
obniz.display.circle(100, 30, 20);
obniz.display.line(60, 50, 100, 30);
obniz.display.rect(50, 40, 20, 20, true);
obniz.display.line(50, 10, 100, 30);
obniz.display.circle(50, 10, 10, true);
// 色変更はカラーディスプレイを持つ公式製品でのみ利用できます。
// それ以外ではモノクロに変換されます
obniz.display.setColor('#FF0000');
obniz.display.rect(50, 40, 20, 20, true);
obniz.display.setColor('blue');
obniz.display.circle(100, 30, 20, true);
色深度
カラー描画が可能なデバイス(M5StickCなど)では自動でカラー描画が有効となります。
// Javascript Example
obniz.display.font('Avenir',70)
obniz.display.print("🧡😁");
デフォルトでは「最もきれいな描画」ができる設定になっており、転送にも時間がかかります。通信状態が悪い場合や高速に描画したい場合はdisplay.setColorDepth()を使うことでビット深度を変更することができます。以下がサポートされています。
- 1: 1ビット深度でモノクロとなります。obnizBoardではこれのみです
- 4: 4ビット深度で16色カラーとなります。
- 16: 16ビット深度でRGB565のカラーとなります。
16を1にすることで16倍高速に描画可能です。色の変換はobniz.display.draw()内部で渡されたcanvasを元に自動的に処理されるので意識する必要はありません。
// Javascript Example
obniz.display.setColorDepth(4);
obniz.display.font('Avenir',70)
obniz.display.print("🧡😁");
4bit深度描画例
バッファリング
描画関数を利用した場合はその都度内部でcanvasに書き込み、デバイスに転送します。複数の描画を描画だけ行い、完成したらデバイスに転送とすることで、高速に描画することが可能です。バッファリングにはdisplay.drawing()を利用します。以下のようにすることで両方の文字が描画されたあとに完成したものがdrawing(true)指定時に一度だけ転送されます。
// Javascript Example
obniz.display.drawing(false);
obniz.display.print("Hello");
obniz.display.print("World");
obniz.display.drawing(true);