SainSmartTFT18LCD

obniz Boardからサインスマート 1.8インチ TFTカラーディスプレイに描画するためのライブラリです。ただし、このLCDに内蔵するMicroSDへのアクセスはサポートしていません。

このLCDはSPIインターフェースでアクセスしますが、obniz BoardではArduinoやRaspberry Piの様に高速に描画することはできません。また、LCDからデータを読み出すこともできません。

example.html

wired(scl, sda, dc, res, cs {, vcc, gnd })

scl, sda, dc, res, cs, vcc, gndをobniz Boardに接続し、接続したioをプログラムで以下のように記述します。SD-CARDのアクセスに必要なピンは接続しません。

// Javascript Example
lcd = obniz.wired('SainSmartTFT18LCD', { scl:4, sda:3, dc:2, res:1, cs:0, vcc:6, gnd:5 });

描画API

このパーツライブラリはLCDに描画するための様々なAPIを提供します。はじめに各APIに共通する事項から説明します。

witdhとheightプロパティ

LCDのサイズはwitdhとheightプロパティから得ることができます。

// Javascript Example
lcd = obniz.wired('SainSmartTFT18LCD', { scl:4, sda:3, dc:2, res:1, cs:0, vcc:6, gnd:5 });
console.log(lcd.width);  //128
console.log(lcd.height); //160 

color16(r, g, b)

描画APIは引数colorに16bitRGB値を指定します。color16()は、引数に指定した各色8bit値(0〜255)(つまり24bitRGB値)から減色して16bitRGB値を生成します。

16bitRGB値　=　赤(r)：8bit値の上位5bit、緑(g)：8bit値の上位6bit、青(b)：8bit値の上位5bit

また、引数colorには後述する16bitRGB値プリセットカラーを指定することもできます。
なお、後述するraw()とrawBound()で指定するpixelデータは24bitRGB値を指定しますが、実際の描画は18bitRGB値に減色してLCDに描画します。

// Javascript Example
let red = lcd.color16(255, 0, 0); //16bitRGB for red
lcd.drawRect(0, 0, lcd.width, lcd.height, red);

共通的な引数の説明

描画APIに共通する引数を以下に説明します。

描画API

fillScreen(color)

LCD全体をcolorで塗りつぶします。次のfillRect(0, 0, lcd.width, lcd.height, color)と等価です。

drawRect(x, y, width, height, color)
fillRect(x, y, width, height, color)

drawRect()は引数x, y, width, heightに指定した矩形をcolorで描画します。
fillRect()は塗りつぶします。

drawRoundRect(x, y, width, height, round, color)
fillRoundRect(x, y, width, height, round, color)

drawRoundRect()は引数x, y, width, height, roundに指定した角丸矩形をcolorで描画します。
fillRoundRect()は塗りつぶします。

drawCircle(x, y, radius, color)
fillCircle(x, y, radius, color)

drawCircle()は引数x, yを中心として半径radiusの円をcolorで描画します。
fillCircle()は塗りつぶします。

drawTriangle(x0, y0, x1, y1, x2, y2, color)
fillTriangle(x0, y0, x1, y1, x2, y2, color)

drawTriangle()は引数で指定した座標3点x0, y0とx1, y1とx2, y2を結ぶ三角形をcolorで描画します。
fillTriangle()は塗りつぶします。

drawVLine(x, y, height, color)
drawHLine(x, y, width, color)

drawVLine()は引数x, yで指定した座標点から高さheightの垂直線をcolorで描画します。
drawHLine()は引数x, yで指定した座標点から幅widthの水平線をcolorで描画します。これらの関数は次のdrawLine()より高速に描画します。

drawLine(x0, y0, x1, y1, color)

drawLine()は引数で指定した座標2点x0, y0とx1, y1をcolorで直線を描画します。

// Javascript Example
:  :
// 16bit-RGB color value
const BLACK   = 0x0000;
const BLUE    = 0x001F;
const RED     = 0xF800;
const GREEN   = 0x07E0;
const CYAN    = 0x07FF;
const MAGENTA = 0xF81F;
const YELLOW  = 0xFFE0;
const WHITE   = 0xFFFF;
lcd.fillScreen(BLACK);
lcd.drawRoundRect(0, 0, lcd.width, lcd.height, 8, RED);
lcd.fillRect(10, 10, lcd.width - 20, lcd.height - 20, MAGENTA);
await obniz.wait(1000);
lcd.drawRect(14, 14, lcd.width - 28, lcd.height - 28, GREEN);
lcd.fillRoundRect(20, 20, lcd.width - 40, lcd.height - 40, 4, CYAN);
await obniz.wait(1000);
lcd.drawCircle(0, 0, 100, BLACK);
lcd.fillCircle(64, 80, 40, YELLOW);
lcd.drawCircle(64, 80, 40, RED);
await obniz.wait(1000);
lcd.drawTriangle(64, 24, 24, lcd.height - 24, lcd.width - 24, lcd.height - 24, BLACK);
lcd.fillTriangle(64, lcd.height - 48, 24, 48, lcd.width - 24, 48, GREEN);
await obniz.wait(1000);
lcd.drawVLine(64, 10, lcd.height - 20, RED);
lcd.drawHLine(10, 80, lcd.width - 20, BLUE);
lcd.drawLine(10, 10, lcd.width - 10, lcd.height - 10, BLACK);

drawChar(x, y, char, color, backgroundColor {, size })
drawString(x, y, string, color, backgroundColor {, size {, wrap }})

drawChar()は引数x, yで指定した座標点に引数charで指定したASCII文字をcolorで描画します。文字の背景色はbackgroundColorで指定します。文字サイズを引数sizeで指定します。sizeを省略すると1と解釈します。

drawString()は文字列stringを描画します。1文字づつ1文字分の横幅ピクセル数をxに加えながら、drawChar()を呼び出して描画します。
引数wrapがtrueの場合は、xがwidthを超えた場合に、yに1文字分の縦幅ピクセル数を加え、x=0にします（つまり、改行します）。また、文字列中に改行コード'\n'が出現した場合はwrapの値によらず改行します。
このようにdrawString()内ではxとyを更新しながら文字列を描画して、最後の文字を描画し終わった後の[x, y]をリターンします。つまり、戻り値のx, yを再使用することで、drawString()を繰り返し呼ぶことができます。
sizeを省略すると1と解釈します。wrapを省略するとfalseと解釈します。

// Javascript Example
:  :
let white = lcd.color16(255, 255, 255);
let red = lcd.color16(255, 0, 0);
let yellow = lcd.color16(255, 255, 0);
lcd.drawChar(0, 0, '+', yellow, red, 4);
var x = 7, y = 32;
[x, y] = lcd.drawString(x, y, 'This is 1st draw.', white, white);
[x, y] = lcd.drawString(x, y, 'This is 2nd draw.', red, red, 2, true);

文字フォントを指定したり漢字や他言語などASCII文字以外を描画する場合は、一旦Canvasに描画してから次のdrawContextBound()やdrawContext()を使用してLCDに転送してください。

drawContextBound(context, x0, y0, width, height, x1, y1)
drawContext(context)

drawContextBound()とdrawContext()はcanvas.context(2D)に描画した内容をLCDに転送します。転送元(context)と転送先(LCD)の関係を下図に示します。

転送元のcanvas.contextを引数contextに、転送範囲を引数x0, y0, width, heightに指定し、転送先のLCDの座標を引数x1, y1に指定します。drawContextBound()とdrawContext()はcontextの内容を18bitRGB値に減色したカラーで描画します。
drawContext()はdrawContextBound(context, 0, 0, lcd.width, lcd.height, 0, 0)と等価です。
ネットワーク環境にもよりますがdrawContext()で約300ミリ秒を要します。なお、描画性能はネットワーク環境にも依存します。

// Javascript
//<canvas id="canvas" width="128" height="160"></canvas>
let canvas = $('#canvas');
let context = canvas[0].getContext('2d');
context.fillStyle = '#FFFFCC';
context.fillRect(0, 0, lcd.width, lcd.height);
lcd.drawContext(context, false);

その他のAPI

setRotation(dir)

LCDの向きを0から3で指定します。初期化後は 0 (正位)です。
この設定後の描画から有効となり、描画済みの内容の向きは変わりません。

指定した向きに応じてwitdhとheightプロパティも再設定されます。また、描画の原点{x:0, y:0}は図の赤点の位置、つまり、向きに応じた左上となります。

// Javascript Example
:  :
lcd.fillScreen(0); //clear screen to black
for (let n = 0; n < 4; n++) {
  lcd.setRotation(n);
  lcd.drawChar(0, 0, n+'', 0xFFFF, 0xFFFF, 2);
  lcd.fillCircle(2, 2, 2, 0xF800); // plots origin point to red
}

setInversionOn()
setInversionOff()
setInversion(inversion)

LCD表示の色反転を制御します。LCD自体の機能です。
setInversionOn()：LCD表示を色反転します。
setInversionOff()：LCD表示の色反転を戻します。
setInversion(inversion)：引数inversionがtrueの場合、LCD表示を色反転します。falseの場合、LCD表示の色反転を戻します。

rawBound(x, y, width, height, [pixel0, pixel1, pixel2, ...])
raw([pixel0, pixel1, pixel2, ...])

rawBound()は引数x, y, width, heightに指定したLCDの範囲にpixel0, pixel1, pixel2, ...の順に描画します。各ピクセルデータは24bitRGB値の配列を指定します。実際の描画は18bitRGB値に減色されます。
raw()はrawBound(0, 0, lcd.width, lcd.height, [pixel0, pixel1, pixel2, ...])と等価でLCD全体を描画します。
これらの関数はdrawPixel()の繰り返しより遥かに高速で描画できますが、大量のデータ転送を必要とするため、raw()で約800ミリ秒を要します。なお、描画性能はネットワーク環境にも依存します。
注意）pixel[]は24bitRGBカラー値を指定するため、後述の16bitRGB値プリセットカラーを指定すると色が異なります。

raw()1回当たりのLCDへの転送データ量：60Kbyte ≒ 128 x 160 x 3byte（18bitカラー値）

プリセットカラー（16bitRGB値）

このライブラリで提供する16bitRGB値プリセットカラーを下表に示します。各描画APIのcolor引数に使用することができます。なお、プリセットカラーは24bitRGB値から16bitRGB値を生成しているため、名前は異なるが値(色)が同じ場合があります。

// Javascript Example
:  :                 引数colorに「xxx.color.プリセット名」で指定します。
lcd.drawLine(0, 0, lcd.width, lcd.height, lcd.color.AliceBlue);
:  :