evive TFT Display

June 2, 2017

Introduction

evive has a 1.8” TFT Display which is mainly used for visual feedback. The display has a 128 x 160 color pixels. The TFT driver (ST7735R) can display full 18-bit color (262,144 shades).

ST7735R Driver

The ST7735 is a single-chip controller/driver for 262K-color, graphics type TFT-LCD. It consists of 396 source line and 162 gate line driving circuits. This chip is capable of connecting directly to an external microprocessor and accepts Serial Peripheral Interface (SPI), 8-bit/9-bit/16-bit/18-bit parallel interface. Display data can be stored in the on-chip display data RAM of 132 x 162 x 18 bits. It can perform display data RAM read/write operation with no external operation clock to minimize power consumption.

Controlling display using Arduino IDE

We will use evive Library to control the TFT display in Arduino IDE. You can download it from here. If you don’t know how to install a library, click here to see the tutorial.

Display Functions

Following are the functions available for use:

Function	Description
drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color)	Draw a line using two points
drawFastVLine(int16_t x, int16_t y, int16_t h, uint16_t color)	Draw a vertical line
drawFastHLine(int16_t x, int16_t y, int16_t w, uint16_t color)	Draw a horizontal line
drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color)	Draw a rectangle using one point coordinate, width and height
fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color)	Draw a filled rectangle using one point coordinate, width and height
fillScreen(uint16_t color)	Change screen colour
drawCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color)	Draw a circle using center point coordinate and radius of the circle
fillCircle(int16_t x0, int16_t y0, int16_t r, uint16_t color)	Draw a filled circle using center point coordinate and radius of the circle
drawTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color)	Draw a triangle using three points coordinate
fillTriangle(int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color)	Draw a filled triangle using three points coordinate
drawRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color)	Draw a round rectangle using one point coordinate, width, height and radius
fillRoundRect(int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color)	Draw a filled round rectangle using one point coordinate, width, height and radius
drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color)	Draw a Bitmap
drawBitmap(int16_t x, int16_t y, const uint8_t *bitmap, int16_t w, int16_t h, uint16_t color, uint16_t bg)	Draw a Bitmap
setCursor(int16_t x, int16_t y)	Set cursor to a location
setTextColor(uint16_t c)	Set text colour
setTextColor(uint16_t c, uint16_t bg)	Set text colour
setTextSize(uint8_t s)	Set text size
setTextWrap(boolean w)	Set text wrap
setRotation(uint8_t r)	Set rotation
int16_t height(void) const;	Get height
int16_t width(void) const;	Get width
uint8_t getRotation(void) const;	Get Rotation
int16_t getCursorX(void) const;	Get curser X position
int16_t getCursorY(void) const;	Get curser Y position
println(text)	Write text

Example

Alert: Please not that if your evive is not displaying the right color (RED) for this example code, change the argument in the function, tft.init(INITR_BLACKTAB); to INTR_GREENTAB. Always remember which argument to use while initializing INITR_BLACKTAB or INITR_GREENTAB.

Controlling Display using Scratch

Using the Display Extension blocks you can control the TFT display of evive.

Block	Function
	The block is used to change the color of the entire TFT screen of evive. You can select the color from the color picker.
	The block sets the cursor at the specified coordinate in the TFT Display of evive. Origin (0,0) is at the top left corner of the screen. Positive X-direction is to right while positive Y-direction is downward. Once the cursor has moved to the specified coordinate, you can write text using that point as the reference.
	The block sets a text color (choose from the color selector), a particular background color (choose from the color selector) and the text size (value varying from 1 to 7) for the text.
	The block is used to write text on evive’s TFT display.
	The block allows you to enter the coordinates of two points on the TFT display and joins them using a straight line of the specified color which you can choose from the color picker.
	The block is used to draw or fill a rectangle on the evive TFT display. It takes the coordinates of a point as input alongside the required width, height, and color and draws/fill the rectangle.
	The block is used to draw the outline or a filled rectangle with rounded corners. It takes the following parameters as input: fill/draw, starting coordinates, width, height, the radius at corners and color. It draws a rectangle rounded at edges where the radius is input by the user.
	The block is used to draw an outline of the circle or a filled circle of a specified radius and center position on evive TFT display. It takes the center and the radius of the circle from the user and draws a circle.
	The block is used to draw an outline of the ellipse or a filled ellipse of a specified X length, Y length and center position on evive TFT display. It takes the color, center, X length and Y length of the ellipse from the user and draws an ellipse.
	The block is used to draw an outline of the triangle or a filled triangle of a points on evive TFT display. It takes the color and the 3 points for the corner of the triangle to draws a triangle.