SainSmartTFT18LCD

Library for Sainsmart 1.8 inch TFT

Drawing supports. But This library doesn't include MicroSD access yet.

SPI is used to communicate.
obniz Board can't draw fast as Arduino/Raspberry Pi.

example.html

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

Connect scl, sda, dc, res, cs, vcc, gnd to an obniz Board and specify ios like follow.
sd-card related io is not necdesarry.

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

Drawing API

witdh and height property

You can retrive witdhandheight from property.

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

Get 16bit color pallet for specified rgb. Each r,g,b msut be in 0 to 255.
Result is 16bit format.

16bitRGB　=　Red(r)：upper 5bit、Green(g)：lower 6bit、Blue(b)： lower 5it

Or you can specify preset 16bit RGB color.

pixel for raw() and rawBound() is 24bit. But It down to 18bit RGB when drawing.

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

Common arguments

Drawing API

fillScreen(color)

Fill whole screen with specified color.

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

Draw a rectangle. Regarding x, y, width, height and color.
This draw only border. fillRect() will Fill a rectangle.

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

Draw a rectangle with corner radius. Regarding x, y, width, height and color and round.
This draw only border. fillRoundRect() will Fill a rectangle.

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

Draw a circle. Regarding x, y and radius and color.
fillCircle() will fill a circle.

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

drawTriangle() will draw a triangle regarding three points x0, y0,x1, y1,x2, y2 with color.
fillTriangle() will fill a triangle.

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

drawVLine() will draw a vertical line x, y to height
drawHLine() will draw a horizonal line x, y to width with color.
Each function works faster than drawLine().

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

drawLine() will draw a line x0, y0 to x1, y1 with 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() draw ACII single character atx, y with char specified with color and backgroundColor and size.

drawString() draw string.

wrap=true will automatically use new line when overflow.
And final coordinate wil be returnd.

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

If you want to draw not ascii string. Use Canvas and transfer by using drawContextBound() and drawContext().

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

drawContextBound() and drawContext() use canvas.context(2D) to draw a LCD.

Specify context to canvas.context and region x0, y0, width, height.
And destination is x1, y1.

drawContext()is equal to drawContextBound(context, 0, 0, lcd.width, lcd.height, 0, 0).

Drawing speed depends on network. At minimum drawContext() takes around 300 msec.

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

Other APIs

setRotation(dir)

Set LCD direction by specifing 0 to 3. Default is 0.
This function doesn't affect current display.

After calling this, witdh and height will be updated. x=0, y=0 points is like this image.

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

Invert a displayed color.

setInversionOn(): Invert

setInversionOff(): Not Invert

setInversion(inversion): inversion=true is Invert.

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

rawBound() directly draw pixels.

Regions is x, y, width, height.

Pixels are pixel0, pixel1, pixel2, .... Each pixel is 24bit RGB color.

raw() is equal to rawBound(0, 0, lcd.width, lcd.height, [pixel0, pixel1, pixel2, ...]).

Each function will draw faster than drawPixel(). But it require more data transfer. Sigle calling of raw() takes 800 msec.

Attention pixel[] is 24bit RGB color. If you use 16bit color, then strange color you will see.

Single calling of raw() tansfer data is 60Kbyte( 128 x 160 x 3byte（18bitcolor) )

Preset Color（16bitRGB）

Preset colors.
This color can be used for color on each function.

// Javascript Example
lcd.drawLine(0, 0, lcd.width, lcd.height, lcd.color.AliceBlue);