evive’s 1.8″ TFT Display

TFT Displa with Menu
Description
Control evive’s 1.8″ TFT Display with Arduino IDE and PictoBlox to create unique visuals, with its wide range of functions. Learn how to use the display with this tutorial!

Introduction

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

evive TFT Display

ST7735R Driver

The ST7735 is a single-chip controller/driver for 262K-color, graphics type TFT-LCD. It consists of 396 source lines 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:

FunctionDescription
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 1: All functions of Display

evive Alert
Alert: Please note 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.

TFT Graphics

/* 
 * evive TFT Display
 * 
 * This code demonstrates how to use TFT Display functions.
 * 
 * Created by Pankaj Kumar Verma
 * On 7 Mar, 2017
 */

#include<evive.h>

void setup() {
  Serial.begin(9600);
  tft.init(INITR_BLACKTAB);   // initialize a ST7735S chip, black tab
  tft.setRotation(1);
  Serial.println("Initialized");
  tft.fillScreen(ST7735_BLACK);
}

void loop() {
  // Drawing Lines
  tft.drawLine(10, 10, 150, 118, ST7735_RED);
  tft.drawLine(10, 118, 150, 10, ST7735_RED);
  delay(1000);
  tft.fillScreen(ST7735_BLACK);

  // Drawing Fast Verticle Lines
  for(int i = 10; i< 151; i = i+10)
    {
      tft.drawFastVLine(i, 1, 128, ST7735_RED);
    }

  // Drawing Fast Horizontal Lines
  for(int i=10; i<121; i = i+10)
    {
      tft.drawFastHLine(1, i, 160, ST7735_RED);
    }
  delay(1000);
  tft.fillScreen(ST7735_BLACK);

  // Draw Rectangle
  tft.drawRect(10, 10, 140, 108, ST7735_WHITE);
  tft.fillRect(20, 20, 120, 88, ST7735_RED);
  delay(1000);
  tft.fillScreen(ST7735_BLACK);

  // Draw Round Rectangle
  tft.drawRoundRect(10, 10, 140, 108, 10, ST7735_WHITE);
  tft.fillRoundRect(20, 20, 120, 88, 4, ST7735_RED);
  delay(1000);
  tft.fillScreen(ST7735_BLACK);

  // Draw Circle
  tft.drawCircle(80, 64, 60, ST7735_WHITE);
  tft.fillCircle(80, 64, 50, ST7735_RED);
  delay(1000);
  tft.fillScreen(ST7735_BLACK);

  // Draw Triangle
  tft.drawTriangle(80, 10, 10, 118, 150, 118, ST7735_WHITE);
  tft.fillTriangle(80, 30, 30, 108, 130, 108, ST7735_RED);
  delay(1000);
  tft.fillScreen(ST7735_BLACK);

  // Write text
  tft.setCursor(0,5);
  tft.setTextColor(ST7735_WHITE);
  for(int i = 1; i < 6; i++)
    {
      tft.setTextSize(i);
      tft.println("evive");
      delay(100);
    }
  delay(1000);
  tft.fillScreen(ST7735_BLACK);
}

Example 2: Hello World!

/*
  Using TFT Display

  This code shows how to use TFT display attached on evive.
  Explore more on:https://thestempedia.com/tutorials/tft-hello/
*/

#include <evive.h>
void setup() {
tft_init(INITR_BLACKTAB); // this is used to initialize TFT display
tft.setRotation(1); // this rotates screen by 90 degree
tft.fillScreen(ST7735_BLACK); // this filles display with black colour
tft.setCursor(0,10); // this sets corser to write on (0,10) location
tft.setTextColor(ST7735_WHITE);
tft.println("Hello World!"); //print function
tft.println("");
tft.print("My name is evive and this is my first TFT display code.");
 
// put your setup code here, to run once:
}

void loop() {
// put your main code here, to run repeatedly:

}

evive TFT Display: Hello World

Example 3: Display values of variables on evive’s TFT screen line by line

In this example, you will learn to print the value of the variable on TFT display screen of evive line by line. It is printed in the same way as the value of variables is printed on a serial monitor continuously in Arduino IDE.

In this example analog value of Pot 1(pin A9) is read and printed on Tft monitor using function print() and println() functions.

/*
	This example shows how to plot any variable on evive TFT display.

  Explore more on: https://thestempedia.com/tutorials/tft-monitor/
  Created by Dhrupal Shah.
  
  This code is in public domain.
  
*/

#include<evive.h>                         //include evive library

TftMonitor tft_Monitor;                     // Initialize a class object

void setup(){
  tft_init(INITR_BLACKTAB);               //Use either INITR_BLACKTAB or INITR_GREENTAB. Initialize TFT screen in library screen.cpp
  tft_Monitor.begin();                     // Begins tftMonitor
  pinMode(A9,INPUT);                      // Set pin as input mode (POT1 = A9) 
}

// the loop function runs continuously when you select the user defined function
void loop(){
  tft.setTextColor(ST7735_WHITE,ST7735_BLACK);
  tft_Monitor.print("Pot 1 value: ");
  tft_Monitor.println(analogRead(A9));     // Pot1 Value is printed on TFT Monitor
  delay(50);
}

Controlling Display using PictoBlox

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

Conclusion

In conclusion, the evive 1.8” TFT Display is a great tool for providing visual feedback on projects. It is easy to control using the Arduino IDE and Scratch, making it a great choice for projects that require visual feedback. With its wide range of functions, it can be used to create unique displays and visuals.

Table of Contents