ディスプレイ - obniz Docs

Display Class リファレンス
 Display API リファレンス

デバイスによってはデバイスに搭載されているディスプレイの操作が可能です。任意の文字や画像などを表示できます。

描画方法

displayでは1ピクセルずつどう表示するのかをdisplay.raw()により配列で送信します。左上を起点に白黒なら1pixel-1bitで白黒を、カラーなら対応している色深度により1pielが何bitなのかが異なります。

また、Canvasを読み取りdisplayに描画するdisplay.draw()関数が用意されています。Nodejsの場合でもnode-canvasを利用することで同様な描画が可能です。

// Javascript Example


let ctx = $("#canvas")[0].getContext('2d');

// When 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()を使えばすぐに文字を描画できます。内部で自動的にcanvasが作られ(ブラウザの場合のみ)自動的に描画されます。

// Javascript Example

obniz.display.print("Hello World🧡");

他にもいくつかの描画関数が用意されています。

display.clear() 画面の消去
display.line() 直線描画
display.rect() 矩形描画
display.circle() 円描画
display.qr() QRコードの描画
display.font() print()使用時のフォント指定
display.pos() print()使用時の文字の位置
display.setColor() 描画の色を変更します

// 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);

描画方法

描画関数

色深度

バッファリング

タイトル