Page 1 of 1

SainSmart 1.8″ TFT Arduino Color LCD Display

SainSmart 1.8″ TFT Arduino Color LCD Display
   10

In this article I’ll show you how I connected a SainSmart 1.8″ Color display to my Arduino Uno and I’ll show you how to get some basic things to work.

The Arduino does not come with a display, and that’s perfectly fine as it’s intended to be used as a micro-controller and not a micro-computer.
Adding a display however, may be needed at times though to provide user feedback for when a user is using your marvelous Arduino invention.

User feedback can be done in several ways of course: a simple beep, a simple LED, a simple LCD screen, or like in this case, a more advanced Color Display.
Considering the price I decided to get one ($20 at Amazon, $13 at SainSmart, starting at $13 on eBay, or an Arduino version at AdaFruit for $20) and experiment with it.




SainSmart 1.8″ Color TFT LCD Display for Arduino

This 1.8″ display, can display 128 x 160 pixels, is capable of displaying 262,144 (18-bit) colors, measures 5 cm x 3.5 cm, and is about 6 mm thick.
The display has back-light and comes with a Micro-SD-Card reader (supporting FAT16 or FAT32 formatted Micro-SD-Cards).

The display is driven by a ST7735R controller (specifications), can be used in a “slow” and a “fast” write mode, and is 3.3V/5V compatible.

It’s size, and display qualities, makes this a very desirable display for use with the Arduino, or even Raspberry Pi (as shown on this website).

Sources to buy these displays:
– Arduino version at AdaFruit starting at $20
– $20 at Amazon,
– $13 at SainSmart,
eBay starting at $13

WARNING! 

This article is written with the SainSmart/Amazon version in mind – the pin-out of the AdaFruit board is slightly different!
I illustrate the differences in the tables, so please pay attention.

Note : The Shield version by AdaFruit also has a 5 direction “joystick” on board.

SainSmart - 1.8" TFT LCD Color Display for Arduino

SainSmart – 1.8″ TFT LCD Color Display for Arduino

Arduino Libraries

To save you a lot of time developing applications (Sketches) that use the display, both SainSmart and AdaFruit offer very helpful libraries.
Since the libraries offered by SainSmart can be confusing for beginners, we will use to the Libraries offered by AdaFruit.
The AdaFruit libraries are clearly designed for use with the Arduino developer tools, whereas the SainSmart files are less obvious for that purpose.
This is exactly the reason why I think buying your hardware at AdaFruit is recommended, for the one or two extra dollars, you’ll get awesome support.

Download the Libraries

Before we can get started, we will need to download the AdaFruit Libraries. We will need the following libraries:

Adafruit_GFX for graphics library functions like drawing lines, circles, etc. which is independent of the used controller.

Adafruit_ST7735 is the library we need to pair with the graphics library for hardware specific functions of the ST7735 TFT Display/SD-Card controller.

For SD-Card support you’ll also need the SD library from Adafruit.

As usual two options to get the files.
Get the files from GitHub (Adafruit_GFXAdafruit_ST7735 and optionally SD) or download the files from Tweaking4All.
The Tweaking4All files can be outdated, so always check for updates at the GitHub pages.

After download, install them in your Arduino software via the menu “Sketch Import Library… Add Library…”.
In the file dialog select the downloaded ZIP file and your library will be installed automatically. This will automatically install the library for you (requires Arduino 1.0.5 or newer). Restarting your Arduino software is recommended as it will make the examples visible in the examples menu.

GitHub ZIP files … 

With the current Adafruit software, the downloaded ZIP files from GitHub can be problematic when installing.

The easiest way to remedy this is by extracting the GitHub ZIP file. Place the files in a directory with the proper library name (Adafruit_GFX, Adafruit_ST7735 or SD) and zip the folder (Adafruit_GFX, Adafruit_ST7735.zip, SD.zip). Now the Arduino software can read and install the library automatically for you.

DOWNLOAD - Adafruit GFX 

Filename: Adafruit_GFX.zip
Size: 8.0 KiB
Date: January 26, 2014
 Download Now 

DOWNLOAD - Adafruit ST3775 

Filename: Adafruit_ST3775.zip
Size: 32.2 KiB
Date: January 26, 2014
 Download Now 

DOWNLOAD - SD 

Filename: SD.zip
Size: 56.9 KiB
Date: January 27, 2014
 Download Now 

Connecting the 1.8″ Display to your Arduino

In this example we will use an Arduino Uno R3, but I’m confident it will work with other Arduino versions as well.
The pin-out is for the SainSmart version of this display!

SainSmart 1.8″ Color Display Pins
Group Pin Purpose
Backlight VCC  +3.3 … 5 Volt
GND  Ground
Display SCL  Display Clock
SDA  LCD Data (SPI)
RS/DC   Mode: Command/Data
RES  Controller Reset
CS (TFT)   Chip Select for display
SD-Card MISO  Master In Slave Out (SPI)
SCLK  Clock (SPI)
MOSI  Master Out Slave In (SPI)
CS (SD)  Chip Select for SD-Card

If you’re like me, then you might be able to guess the purpose of the pins, but you might not be quite sure yet what to do with them.

Basically, besides the obvious backlight, we tell the controller first what we are talking to with the CS pins. CS(TFT) selects data to be for the Display, and CS(SD) to set data for the SD-Card. Data is written to the selected device through SDA (display) or MOSI (SD-Card). Data is read from the SD-Card through MISO.

MOSI = Master Out Slave In, or in other words: The Master (Arduino) sends data out to the Slave (Display).
MISO = Master In Slave Out, or the Slave (Display) sends data out to the Master (Arduino).

Both, for exchanging data and commands, of course need a clock for proper timing: SCL for the Display, and SCLK for the SD-Card.

For the display we need additionally the ability to toggle between sending data (text, drawings, etc) and sending command (clear screen, etc).
And we need a reset option for the display as well of course.

Adafruit vs SainSmart pins 

When comparing the Adafruit display with the SainSmart display, you’ll notice that the AdaFruit display has less pins, as they combined some pins:

  • SainSmart pins SDA (Display Data) and MOSI (Data to SD-Card) are combined to Adafruit pin MOSI
  • SainSmart pins SCL (Display Clock) and SCLK (SD-Card clock) are combined to Adafruit pin SCK

 

So when using both display and SD-Card, and utilizing the Adafruit libraries with a SainSmart display, you will need to connect SDA to MOSI, and SCL to SCLK.
Note that this does make sense, since the controller often works either in Display or SD-Card mode (through the chip select pins).

Group: Backlight

Well, I guess those are pretty obvious – connect them and your display has a backlight.
Vcc goes to +5 Volt (it’s actually 3.3 to 5V) and GND goes to ground.

Group: Display

As mentioned before, the display has a SLOW and a FAST mode, each serving it’s own purpose. Do some experiments with both speeds to determine which one works for your application. Of course, the need of particular Arduino pins plays a role in this decision as well …

Note : In either case, backlight is desired of course.
Note : The selected pins depend on the definitions in your Arduino sketch and on the type of pins needed (PWM vs SPI).

  Note : Adafruit displays can have different colored tabs on the transparent label on your display. You might need to adapt your code if your display shows a little odd shift. I noticed that my SainSmart display (gree tab) behaves best with the code for the black tab – try them out to see which one works best for yours.

Here is a little video demonstrating the Low Speed and High Speed speed difference (based on the awesome Adafruit Library and Demo’s):

Low Display Speed:

High Display Speed:

  Low Speed Display

Low Speed display is about 1/5 of the speed of High Speed display, which makes it only suitable for particular purposes, but at least the SPI pins of the Arduino are available.
For this purpose the PWM pins are being used as displayed in the table below.

Pay attention to the order of the pins! (pin 6 is the last one in the list!)

Display Pins – Low Speed Display
 SainSmart PIN  AdaFruit PIN  Arduino Pin  Purpose
 SCL  SCK (SCLK)  4  Display Clock
 SDA  MOSI  5  Display Data
 RS/DC  D/C  7  Command or Data Mode
 RES  RESET  8  Reset
 CS (TFT)  TFT_CS  6  Chip Select (Display)
SainSmart 1.8" TFT Arduino Display - LOW SPEED

SainSmart 1.8″ TFT Arduino Display – LOW SPEED

After connecting the display in Low Speed configuration, you can load the first example from the Arduino Software (“File Example Adafruit_ST7735” –  recommend starting with the “graphictest“).

Make sure to comment and un-comment the right parts and double check that the pin numbers in the defines match the pins you’re using.
Below the code parts for a LOW SPEED display (pay attention to the highlighted lines) – keep in mind that the names of the pins in the code are based on the Adafruit display:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
...

// For the breakout, you can use any (4 or) 5 pins
#define sclk 4  // SainSmart: SCL
#define mosi 5  // SainSmart: SDA
#define cs   6  // SainSmart: CS
#define dc   7  // SainSmart: RS/DC
#define rst  8  // SainSmart: RES

//Use these pins for the shield!
//#define sclk 13
//#define mosi 11
//#define cs   10
//#define dc   9
//#define rst  8  // you can also connect this to the Arduino reset

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>

#if defined(__SAM3X8E__)
    #undef __FlashStringHelper::F(string_literal)
    #define F(string_literal) string_literal
#endif

// Option 1: use any pins but a little slower
Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, mosi, sclk, rst);

// Option 2: must use the hardware SPI pins
// (for UNO thats sclk = 13 and sid = 11) and pin 10 must be
// an output. This is much faster - also required if you want
// to use the microSD card (see the image drawing example)
//Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, rst);

...

Compile and Upload the Sketch and you should see the first results on your new TFT screen. 

 High Speed Display

High Speed is almost 5 times faster (according to Adafruit 4 – 8x faster) than Low Speed display and you’ll really notice the difference.
For High Speed display we will need to use the SPI pins of the Arduino – which can be a problem when you’d like to use these pics for other purposes.

Display Pins – High Speed Display
 SainSmart PIN  AdaFruit PIN  Arduino Pin  Purpose
 SCL  SCK (SCLK)  13  Display Clock
 SDA  MOSI  11  Display Data
 RS/DC  D/C  9  Command or Data Mode
 RES  RESET  8  Reset
 CS (TFT)  TFT_CS  10  Chip Select
SainSmart 1.8" TFT Arduino Display - HIGH SPEED

SainSmart 1.8″ TFT Arduino Display – HIGH SPEED

As with the previous setup; we will need to make sure that the proper lines are marked as comments or code.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
...

// For the breakout, you can use any (4 or) 5 pins
//#define sclk 4
//#define mosi 5
//#define cs   6
//#define dc   7
//#define rst  8  // you can also connect this to the Arduino reset

//Use these pins for the shield!
#define sclk 13  // SainSmart: SCL
#define mosi 11  // SainSmart: SDA
#define cs   10  // SainSmart: CS
#define dc   9   // SainSmart: RS/DC
#define rst  8   // SainSmart: RES

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>

#if defined(__SAM3X8E__)
    #undef __FlashStringHelper::F(string_literal)
    #define F(string_literal) string_literal
#endif

// Option 1: use any pins but a little slower
//Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, mosi, sclk, rst);

// Option 2: must use the hardware SPI pins
// (for UNO thats sclk = 13 and sid = 11) and pin 10 must be
// an output. This is much faster - also required if you want
// to use the microSD card (see the image drawing example)
Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, rst);

...

Compile and upload, and you will notice that this demo goes a lot faster now.

Group: SD-Card

For working with the SD-Card we will need to do some additional wiring and the display wiring will be based on the Fast Display Mode.
as mentioned before: The used pins depends on the defined pins in the Sketch, but here we assume the presented pins.

Connecting Display and SD-Card

  Note that SCLK is connected to SCL, and that MOSI is connected to SDA for the SainSmart variant of the 1.8″ TFT LCD Color Display.

Display Pins – High Speed Display and SD-Card
 SainSmart PIN  AdaFruit PIN  Arduino Pin  Purpose
 SCL  SCK (SCLK)  13  Display Clock
 SDA  MOSI  11
 Display Data
 RS/DC  D/C  9  Command or Data Mode
 RES  RESET  8  Reset
 CS (TFT)  TFT_CS  10  Chip Select Display
 MISO  MISO  12  SD Data (Read from SD)
 SCLK  SCK (SLK)  (13)  SD-Card Clock
 MOSI  MOSI  (11)  SD Data (Write to SD)
 CS (SD)  CARD_CS  4  Chip Select SD-Card
SainSmart 1.8" TFT Arduino Display - HIGH SPEED with SD-Card

SainSmart 1.8″ TFT Arduino Display – HIGH SPEED with SD-Card

Image on the SD-Card for the Demo’s

Before we can test this, we will need a 120×160 pixel BMP picture (24-bit) on an SD-Card.
The SD-Card needs to be FAT-16 or FAT-32 formatted, single partition, and the BMP file needs to be placed in the root (ie. not in a directory or anything like that).
You can name your BMP file “parrot.bmp” or modify the Sketch to have the proper filename (in “spitftbitmap” line 70, and in “soft_spitftbitmap” line 74).

Example:  bmpDraw("mypicture.bmp", 0, 0);   (in case you call your file “mypicture.bmp”).

Example BMP on a SainSmart Display w/Arduino

Example BMP on a SainSmart Display w/Arduino

Demo’s

The demo “spitftbitmap” is the easiest to modify:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
// TFT display and SD card will share the hardware SPI interface.
// Hardware SPI pins are specific to the Arduino board type and
// cannot be remapped to alternate pins.  For Arduino Uno,
// Duemilanove, etc., pin 11 = MOSI, pin 12 = MISO, pin 13 = SCK.
#define SD_CS    4  // Chip select line for SD card
#define TFT_CS  10  // Chip select line for TFT display
#define TFT_DC   9  // Data/command line for TFT
#define TFT_RST  8  // Reset line for TFT (or connect to +5V)

//Use these pins for the shield!
//#define TFT_CS   10
//#define TFT_DC   8
//#define TFT_RST  0  // you can also connect this to the Arduino reset

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
...

In the demo “soft_spitftbitmap” we need to modify the highlighted defines:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
...
// TFT display and SD card will share the hardware SPI interface.
// Hardware SPI pins are specific to the Arduino board type and
// cannot be remapped to alternate pins.  For Arduino Uno,
// Duemilanove, etc., pin 11 = MOSI, pin 12 = MISO, pin 13 = SCK.
#define SPI_SCK 13
#define SPI_DI  12
#define SPI_DO  11

#define SD_CS    4  // Chip select line for SD card
#define TFT_CS  10  // Chip select line for TFT display
#define TFT_DC   9  // Data/command line for TFT
#define TFT_RST  8  // Reset line for TFT (or connect to +5V)

//Use these pins for the shield!
//#define TFT_CS   10
//#define TFT_DC   8
//#define TFT_RST  0  // you can also connect this to the Arduino reset

Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, SPI_DO, SPI_SCK, TFT_RST);
...

Some Basic Grafphics Functions

Now that we did our first tests, time to play around with some of the basic functions to display data on a display.
As you have seen before the Adafruit_GFX library (supported by the Adafruit_ST7735 library) makes this easy for us – More information can be found at the GFX Reference page.

Basic code template

Based on our High Speed Display example: The following basic steps are needed before we can work with the graphics display.

The first block is to define the pins (lines 4-8), next add the needed libraries with includes (lines 12-14).
After that we need to define the variable “tft” of the object type “Adafruit_ST7735” (line 18).
In the setup() function one would typically first blank the screen (line 22).

Your code then can either be placed in setup() for a one time run or in loop() for repeating the code over and over again.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
...

// Init pins
#define sclk 13
#define mosi 11
#define cs   10
#define dc   9
#define rst  8  

...

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>

...

Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, rst);

void setup() {

  tft.initR(INITR_BLACKTAB);   // initialize a ST7735S chip, black tab
  // If your TFT's plastic wrap has a Red Tab, use the following:
  //tft.initR(INITR_REDTAB);   // initialize a ST7735R chip, red tab
  // If your TFT's plastic wrap has a Green Tab, use the following:
  //tft.initR(INITR_GREENTAB); // initialize a ST7735R chip, green tab  
}

void loop() {

... // do your thing here

}
Basic Coordinate System of a Display

The display is build up out of pixels, which each can be addressed through a X,Y coordinate system.

Back in school the X went from left to right, and Y from bottom to top. This is not the case in this X,Y system.
X still goes from left to right, but Y goes from top to bottom as shown below – which is very common in displayes.
Remember : Origin (0,0) is the UPPER LEFT CORNER.

X,Y Grid for a Display

X,Y Grid for a Display

Pixel Colors

Pixels in monochrome displays are easy: the pixels is either ON (1) or OFF (0).
With color displays this whole thing works a little bit more complicated as a color is build up out of 3 base colors: Red, Green and Blue.

Depending on your display this can be for example in 8 bit (256 colors), 16 bit (65,536 colors), 24 bit (16,777,216 colors), etc.
Our display (SainSmart or Adafruit) uses 16 bit colors.

Predefined colors:

The ST7735 library has some of the very basic colors predefined:

ST7735_BLACK     0x0000
ST7735_BLUE      0x001F
ST7735_RED       0xF800
ST7735_GREEN     0x07E0
ST7735_CYAN      0x07FF
ST7735_MAGENTA   0xF81F
ST7735_YELLOW    0xFFE0 
ST7735_WHITE     0xFFFF

 

Calculate Color Function:

Calculating colors, for this screen can be done with the Color565 function of the ST7735 Library, which takes 3 parameters: Red, Green and Blue.
For Red and Blue only 5 bits are used, and for Green it’s 6 bits (don’t ask me why), but you don’t have to worry about that with this function.


1
2
3
4
5
...
Adafruit_ST7735 tft ....
...
color = tft.Color565(r,g,b)
...

Color565( red, green, blue);
This function calculates the 16-bit color code, based on the 3 values red, green and blue (all 3 are 8 bit numbers).

You can pass variables (int), or enter numbers straight.
However, when you enter the number here straight, use hexadecimal numbers, as with decimal numbers you will get unexpected results, for example:
Red: Color565( 0xFF, 0, 0)
Green: Color565( 0, 0xFF, 0)

I found the easiest way to pick a color is by looking at HTML Color codes, and for this purpose I’ve added one on this page.


Color picker:

Usage:
Click the input box and a popup will show a color picker. Choose your color, and the hex value will appear.
To use this in your Arduino Sketch: The first 2 characters represent RED, the second set of two characters is for GREEN and the last 3 characters represent BLUE. Add ‘0x’ in front of each of these hex values when using them (‘0x’ designates a hexadecimal value).

Example:
This purple is B700FE.
The hex values are: red is B7, green is 00 and blue is FE.
Your Color565 call will be: Color565( 0xB7, 0x00, 0xFE );

Note : You can of course, use any application for color picking that shows hex values, or for example the color picker in Adobe Photoshop.

Graphics Functions

drawPixel( x, y, color );
Draws a single pixel at (x,y) in the indicated color.

 

drawLine( x0, y0, x1, y1, color );
Draw a line from (x0,y0) to (x1,y1) in the indicated color.

drawFastHLine( x, y, width, color );
Draws a horizontal line, starting at (x,y), of indicated width and color.
This function works faster for horizontal lines when compare to drawLine().

drawFastVLine( x, y, height, color );
Draws a vertical line, starting at (x,y), of indicated height and color.
This function works faster for vertical lines when compare to drawLine().

 

drawRect( x, y, width, height, color );
Draws an open rectangle, starting at (x,y) with a width, height, and a border line in the indicated color.
(x,y) indicates the upper left corner.

fillRect( x, y, width, height, color );
Draws a filled rectangle, starting at (x,y) with a width, height, in the indicated color.
(x,y) indicates the upper left corner.

 

drawCircle( x, y, radius, color );
Draws an open circle at (x,y) with the indicated radius (in pixels) and a border in indicated color.
(x,y) indicates the center of the circle.

fillCircle( x, y, radius, color );
Draws a filled circle at (x,y) with indicated radius and filled with indicated color.
(x,y) indicates the center of the circle.

 

drawTriangle( x0, y0, x1, y1, x2, y2, color );
Draws an open triangle, between the points (x0,y0), (x1,y1) and (x2,y2), with a border in the indicated color.

fillTriangle( x0, y0, x1, y1, x2, y2, color );
Draws a filled triangle, between the points (x0,y0), (x1,y1) and (x2,y2), in the indicated color.

 

drawRoundRect( x, y, width, height, radius, color );
Draws an open rectangle with rounded corners at (x,y) with indicated width and height and a border in the indicated color.
The radius indicates the radius of the individual corners.
(x,y) indicates the upper left corner of the rounded rectangle.
If radius times 2 is greater than the width or height: be prepared to see some unexpected effects.

fillRoundRect( x, y, width, height, radius, color );
Draws a filled rectangle with rounded corners at (x,y) with indicated width and height in the indicated color.
The radius indicates the radius of the individual corners.
(x,y) indicates the upper left corner of the rounded rectangle.
If radius times 2 is greater than the width or height: be prepared to see some unexpected effects.

 

drawBitmap( x, y,  *bitmap, width, height, color );
This function can draw a single color bitmap (not to be confused with a BMP file).
For this you’ll need to define the constant “bitmap”.
The use of this function is a little beyond the scope of this article, but I just wanted to show that there is more depth to these libraries.
The bitmap upper left corner is (x,y), presumed to have a width and height as indicated, and will be drawn in the indicated color.

Text Functions

drawChar( x, y, character, color, backgroundcolor, fontsize );
Draws a character at a given location (x,y), where (x,y) represents the upper left corner of the character.

setCursor( x,  y );
Positions the text “cursor” at the given location. This is where the text output continues when using print() or println().

print( text );
println( text );
Prints the given text string at the current cursor position. The println() variant will add a carriage return, so that the next text output starts on a new line.

setTextColor( color );
This sets the font color. Everything printed AFTER this statement will appear in the indicated color.

setTextColor( color, backgroundcolor );
This sets the font background color. Everything printed AFTER this statement will appear with the indicated background color.

setTextSize( fontsize );
With this statement, you can set the font size for tekst out put AFTER this statement. Typically fontsize values are 1,2,3,4,5,6,7,8,9,10, etc.
See the demo below for an example output. The size is an arbitrary number and does not match for example pixel height or anything like that.

setTextWrap( boolean );
Enable (true) or disable (false) word wrapping at the end of a line and will only affect text output AFTER this statement.

Screen Functions

setRotation( rotation );
This function is used to indicate what corner of your display is considered (0,0), which in essence rotates the coordinate system 0, 90, 180 or 270 degrees.
The SainSmart display uses (0,0) as the upper left corner when the display is standing up right (i.e. pins in a breadboard for example).
However, if your application needs your screen sideways, then you’d want to rotate the screen 90 degrees, effectively changing the display from a 128×160 pixel (WxH) screen to a 160×128 pixel display. Valid values are: 0 (0 degrees), 1 (90 degrees), 2 (180 degrees) and 3 (270 degrees).

fillScreen( color );
Fills the entire screen with a give color, ideal for example for blanking the screen by setting the color to black.

invertDisplay( boolean );
Sets the screen to inverted (true) or normal (false);

Display Demo

Based on these functions, I did create a little demo to show what these functions do. Either download the file or just copy the code and paste it into an empty Arduino Sketch.

DOWNLOAD - T4a Display Demo 

Filename: t4a_display_demo.zip
Size: 1.7 KiB
Date: January 28, 2014
 Download Now 

Demo Video:
(I’ve put quite a lot of delays in the code, just to give you a chance to see what is what)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
// Display Test
// Test several Display Adafruit_GFX functions
// for 1.8" TFT LCD Color Display (SainSmart).
// Hans Luijten, Tweaking4All.com

// Init pins
#define sclk 13
#define mosi 11
#define cs   10
#define dc   9
#define rst  8  

#include <Adafruit_GFX.h>    // Core graphics library
#include <Adafruit_ST7735.h> // Hardware-specific library
#include <SPI.h>

Adafruit_ST7735 tft = Adafruit_ST7735(cs, dc, rst);

void setup() {
  // Init serial for serial monitor, so we can see debug text in the Serial Monitor Window
  Serial.begin(9600);
  Serial.println("Display Function Tests Started");

  // If your TFT's plastic wrap has a Black Tab, use the following:
  tft.initR(INITR_BLACKTAB);   // initialize a ST7735S chip, black tab
  // If your TFT's plastic wrap has a Red Tab, use the following:
  //tft.initR(INITR_REDTAB);   // initialize a ST7735R chip, red tab
  // If your TFT's plastic wrap has a Green Tab, use the following:
  //tft.initR(INITR_GREENTAB); // initialize a ST7735R chip, green tab  
  Serial.println("setup() - Init Completed");
}

void loop() {
  // This keeps repeating ...
  Serial.println("loop() - starting (again) ...");

  // Clear screen
  Serial.println("Fill screen with BLACK");
  tft.fillScreen(ST7735_BLACK);

  // Hello
  Serial.println("Hello message");
  tft.setTextSize(1);
  tft.setCursor(0, 50);
  tft.setTextColor(ST7735_WHITE);
  tft.print("   Tweaking");
  tft.setTextColor( tft.Color565( 0xFF, 0xCC, 0x00) );
  tft.print("4");
  tft.setTextColor(ST7735_WHITE);
  tft.println("All.com");
  tft.setTextSize(1);
  tft.println("     Display Demo");
  delay(3000);

  // Clear screen
  Serial.println("Fill screen with BLACK");
  tft.fillScreen(ST7735_BLACK);

  // Draw some pixels
  Serial.println("Draw 4 pixels");
  tft.drawPixel(10,10,ST7735_WHITE);
  tft.drawPixel(100,100,ST7735_GREEN);
  tft.drawPixel(10,50,ST7735_RED);
  tft.drawPixel(100,50,ST7735_YELLOW);
  delay(3000);

  // Draw some lines
  Serial.println("Draw some lines");
  tft.drawLine(10,10,100,100,ST7735_WHITE);
  tft.drawLine(100,100,10,50,ST7735_GREEN);
  tft.drawLine(10,50,100,50,ST7735_RED);
  tft.drawLine(100,50,10,10,ST7735_YELLOW);
  delay(3000);

  // Draw some rectangles
  Serial.println("Draw some rectangles, with delay between open and filled rectangle");
  tft.drawRect(20,20,100,100,ST7735_RED);
  tft.drawRect(40,10,10,100,ST7735_YELLOW);
  delay(2000);
  tft.fillRect(50,10,50,20,ST7735_RED);
  tft.fillRect(80,80,10,10,ST7735_YELLOW);
  delay(3000);

  // Clear screen
  Serial.println("Fill screen with BLACK");
  tft.fillScreen(ST7735_BLACK);

  // Draw some circles
  Serial.println("Draw some circles, with delay between open and filled cicle");
  tft.drawCircle(70,70,10,ST7735_WHITE);
  tft.drawCircle(70,70,50,ST7735_RED);
  delay(2000);
  tft.fillCircle(20,20,50,ST7735_YELLOW);
  tft.fillCircle(20,20,10,ST7735_BLUE);
  delay(3000);

  // Draw some triangles
  Serial.println("Draw some triangles, with delay between open and filled triangles");
  tft.drawTriangle(64,100, 64,150, 100,150, ST7735_YELLOW);
  tft.drawTriangle(64,100, 44,150, 84,150,  ST7735_RED);
  delay(1000);
  tft.fillTriangle(64,100, 64,150, 100,150, ST7735_YELLOW);
  tft.fillTriangle(64,100, 44,150, 84,150,  ST7735_RED);
  delay(3000);

  // Clear screen
  Serial.println("Fill screen with BLACK");
  tft.fillScreen(ST7735_BLACK);

  // Draw rectangles with rounded corners for a dialog
  // Big box
  Serial.println("Display panic message!");
  tft.fillRoundRect( 14,16, 100, 100, 8, tft.Color565( 0xC4, 0xC4, 0xC4) );
  tft.drawRoundRect( 14,16, 100, 100, 8, tft.Color565( 0x99, 0x99, 0x99) );
  // Title
  tft.fillRoundRect( 20,8, 60, 20, 4, tft.Color565( 0xFF, 0, 0) );
  tft.drawRoundRect( 20,8, 60, 20, 4, tft.Color565( 0x99, 0x99, 0x99) );
  // Title text
  tft.setCursor(28, 14);
  tft.setTextColor(ST7735_WHITE);
  tft.print("WARNING");
  // Message
  tft.setTextColor(ST7735_RED);
  tft.setCursor(22, 38);
  tft.print("Something is");
  tft.setCursor(22, 48);
  tft.print("very wrong!");
  tft.setCursor(22, 68);
  tft.print("OMG - PANIC !");
  tft.setCursor(22, 88);
  tft.print("We're out of");
  tft.setCursor(22, 98);
  tft.print("COFFEE!!!");
  delay(3000);

  // Display blinking -- invert or normal
  Serial.println("Display blinking ...");
  for(int i=0; i<10; i++)
  {
    tft.invertDisplay(true);
    delay(500);
    tft.invertDisplay(false);
    delay(500);
  }  
  delay(3000);

  // Clear screen
  Serial.println("Fill screen with BLACK");
  tft.fillScreen(ST7735_BLACK);

  // Write a long text with word wrap
  tft.setTextColor(ST7735_WHITE);
  tft.setCursor(0, 0);
  tft.print("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur adipiscing ante sed nibh tincidunt feugiat. Maecenas enim massa, fringilla sed malesuada et, malesuada sit amet turpis. Sed porttitor neque ut ante pretium vitae malesuada nunc bibendum. Nullam aliquet ultrices massa eu hendrerit. Ut sed nisi lorem. In vestibulum purus a tortor imperdiet posuere. ");
  delay(2000);

  // Clear screen
  Serial.println("Fill screen with BLACK");
  tft.fillScreen(ST7735_BLACK);

  Serial.println("Test font sizes");
  tft.setTextWrap(true);
  tft.setTextColor(ST7735_WHITE);
  tft.setCursor(0, 0);
  delay(1000);

  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.println("1 (default)");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(2);
  tft.println("2");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(3);
  tft.println("3");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(4);
  tft.println("4");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(5);
  tft.println("5");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(6);
  tft.println("6");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(7);
  tft.println("7");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(8);
  tft.println("8");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(9);
  tft.println("9");
  delay(1000);

  tft.fillScreen(ST7735_BLACK);
  tft.setCursor(0, 0);
  tft.setTextSize(1);
  tft.println("Fontsize:");
  tft.setCursor(0, 30);
  tft.setTextSize(10);
  tft.println("10");
  delay(3000);
}
Extra Functions

In the demo and the text, not all functions have been explained or demoed.
Functions like the use of bitmaps and custom fonts is something I haven’t done much with (yet), but might certainly be worth exploring.

Donation options


Donations are very much appreciated, but not required. Donations will be used for web-hosting expenses, project hardware or a motivational boost (a drink or snack). Thank you very much for those have donated already! It's truly AwEsOmE to see that folks like our articles and small applications.

Comments


There are 10 comments. You can read them below.
You can post your own comments by using the form below, or reply to existing comments by using the "Reply" button.

  • May 7, 2014 - 9:10 AM - Henry Comment Link

    Thanks so much for your tutorial!
    I just don’t understand the SD Card wiring. How can I connect SCLK to SCL and MOSI to SDA on my Sainsmart TFT LCD? I was using male-female wires in all my wiring but I just don’t know how to wire those two things.
    Please reply!

    Reply

    Henry

    • May 7, 2014 - 9:55 AM - hans Comment Link

      Hi Henry,

      I would love to help out, but I’m not sure what the problem is that you’re running into.

      If I understand you correctly, you’re not having the right wires?
      I used a breadboard for the experiment, which gives me the option to connect multiple wires to one pin.

      Another trick, if you’re not using a breadboard and your wire ends allow this, is by sticking a wire in the back of the wire that’s already there – it’s not perfect and like I said, it depends on the ends of your jumper wires, mine allow this (although it most certainly was not made for that).

      For a final setup, you could split a wire and solder it together with another wire.

      I apologize if I didn’t understand you question correctly.

      Reply

      hans

      • May 7, 2014 - 1:13 PM - Henry Comment Link

        Thanks for the reply, Hans!

        I apologize for not being specific in my issue. I’m a beginner in these things but I’ll try detailing it as well as possible.

        In your tutorial, I connected each part of my LCD to the Arduino exactly as you said. However, I wasn’t using a breadboard so I wasn’t able to connect multiple wires to one pin as you did. This is why I didn’t (and still don’t) know what to do when you mention that SCLK should be connected to SCL (which is then connected to pin 13) and MOSI to SDA (which is then connected to pin 11) on my LCD. I understood that SCL is connected to pin 13 and that SDA is connected to pin 11 but how can I connect SCLK to SCL and MOSI to SDA? Basically, How can I connect a pin on my LCD to another pin on the same LCD without using a breadboard?

        PS: If I am to use a breadboard just to connect SCLK to pin 13 and MOSI to pin 11, is it still possible to have my LCD not fixed to the breadboard? If it is possible, then how do I do so?

        I apologize if I still don’t make any sense!

        Reply

        Henry

      • May 7, 2014 - 2:45 PM - hans Comment Link

        No worries Henry,…

        Sometimes it can be difficult to explain in text what you’re looking at 

        So you’re wondering how to connect 2 connectors to one pin (basically), right?

        I guess it depends on the materials you have available,… breadboard (for experimenting) works easiest, but for a “final” product it’s obviously not a good solution. For a final product I’d actually make a suitable cable for that, with 3 ends. One end to the Arduino, and the other 2 ends to each of the LCD pins.

        If you’re just using jumper wires, then you could cut two of them in 2 pieces. I’d say, one cut in the middle, strip the wires at the ends you cut and twist them together. Grab the 2nd jumper wire and cut it as close as possible to the pin you don’t need or want to use. Strip the wire again and twist it with the previous cable you made. This way you might be able to still use it in other future projects.
        (hope that made sense)

        You could also consider using a Multiway Screw terminal (a.k.a. “kroonsteen” in Dutch) and bind the pins together there (link for a picture), or you could consider using test cable with crocodile clip (picture).

        Hope this helps …

        Reply

        hans

  • Aug 21, 2014 - 1:33 PM - Neil Comment Link

    Do you know if you can use the Arduino TFT library with the SainSmart 1.8 TFT ?  After reading the Arduino website, it sounds likes the Arduino library adds things to the GFX and ST3775 library that may not work with the SainSmart TFT…..

    Neil ;o)

    Reply

    Neil

    • Aug 21, 2014 - 2:56 PM - hans - Author: Comment Link

      I have only tested the AdaFruit libs …
      One of these days I’ll try the Arduino ones, but so far I have found that the one from AdaFruit works great … 

      If you decide to give it a try: please let me know your findings 

      Reply

      hans

      • Aug 23, 2014 - 7:14 PM - Neil Comment Link

        Just tested with arduino TFT library. It works!  But you must adjust screen orientation using setRotation(0) to match arduino TFT screen. 

        Reply

        Neil

      • Aug 24, 2014 - 9:04 AM - hans - Author: Comment Link

        Thanks Neil for letting us know – this is good news and I’m sure others will benefit from this. 

        Would you say the Arduino library is better (smaller/faster)?

        Either way; it’s nice to know that it’s compatible … for when one would like to use an existing sketch that already uses the Arduino lib!

        Reply

        hans

  • Sep 9, 2014 - 7:23 PM - cody Comment Link

    well i always have a error on all the sketches and it says adafruit st7735 does not name a type. is is my arduino version 1.0.5 or the codes are outdated help please i never got my screen to work because of that one error help:(

    Reply

    cody

    • Sep 10, 2014 - 8:57 AM - hans - Author: Comment Link

      Hi Cody,

      sounds to me that there is something wrong with the way the library has been installed.

      I’d at least check that out.

      Reply

      hans



Your Comment …

*
*
Notify me about new comments (email).
       You can also use your RSS reader to track comments.


Tweaking4All uses the free Gravatar service for Avatar display.
Tweaking4All will never share your email address with others.