Page 1 of 1

SainSmart 1.8″ TFT Arduino Color LCD Display

SainSmart 1.8″ TFT Arduino Color LCD Display
   64

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 Graphics 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 64 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

  • Dec 3, 2014 - 2:40 PM - alex Comment Link

    Thank you for this tutorial. But I could use some help. I want to have the LCD sideways and in the center of the screen have text scrolling across the screen. I need the text to be set in one line not spaced out like this.

    tft.print("T");
    tft.print("E");
    tft.print("S");
    tft.print("T");

    Also if possible it would be cool to have variable text size and scrolling speed.

    If this is not possible or part of it is not let me know. 

    Thanks!!

    Reply

    alex

    • Dec 4, 2014 - 2:58 AM - hans - Author: Comment Link

      Hi Alex,

      Sounds like you need to use the “setRotation” function first, so text is displayed sideways.

      With functions like “setCursor(x, y);” you can position the text, and “print(“Something”);” and allow you to print the text at indicated position.

      setTextSize” allows you to change font size, but you could also explore the option to upload your oen font/font size.

      As for scrolling, you’ll have to play a little with the other functions available in the library. I haven’t done any testing lately, but you could draw the text, draw a black rectangle, reposition the cursor, draw text, etc. (for some of the functions, see the chapter “Some Basic Graphics Functions” above)

      I hope this helps you get started – unfortunately, I’m not anywhere near my equipment (traveling) to do some of these tests for you. 

      Reply

      hans

  • Jan 20, 2015 - 11:03 AM - Daniel Gordon Comment Link

    Hello, 

    I am having issues with getting the high speed code to work. The low speed works just fine but as soon as I modify the pins listing and comment/uncomment the two lines of code the display just stays white.

    Suggestions? 

    DG

    Reply

    Daniel Gordon

    • Jan 21, 2015 - 5:24 AM - hans - Author: Comment Link

      Hi Daniel!

      If you modified the code and changed the physical pins, then the high speed code should work just fine.
      I’m assuming you’re using the exactly same display?

      Reply

      hans

  • Jan 22, 2015 - 4:41 AM - Tanu Comment Link

    Hello Hans,

    I am using the following components for my project :SainSmart MEGA2560 R3, SainSmart 7″ TFT LCD Display, SainSmart TFT LCD Adjustable Shield. I wanted to get the .bmp file image on the lcd screen to create some user interface. So which libraries should i use in order to suceed in my task.

    PS: I tried Arduino TFT library, but I think it is not compatible to this display kind.

    Reply

    Tanu

    • Jan 22, 2015 - 5:25 AM - hans - Author: Comment Link

      Hi Tanu!

      Did you mean this one (found at Amazon)?
      They state that they “will provided you the whole document including the example project of the kit“.

      At Amazon they provide a link to a downloadable zip file for this setup.
      The ZIP file has a folder in it called “CTE_MEGA_shield” which seems to address how to connect it to the Arduino.

      In the end, I’m not quite sure what setup you’re using, do you have a link?

      At the SainSmart website they also offer an email address for support: support@sainsmart.com. Maybe you can contact them?

      Reply

      hans

      • Jan 22, 2015 - 5:34 AM - Tanu Comment Link

        Hans, 

        Thanks for the early reply. This is the one I’m using rite now: http://www.amazon.de/SainSmart-Display-Shield-Arduino-Raspberry/dp/B00IYHZQUU

        Sainsmart is worst in technical support, won’t reply any of our mails, regretting buying their product.

        Currently I have UTFT and UTFT_touch libraries, but there’s no example in it to try how to get the image from SD card on to the screen. So please assist.  

        Reply

        Tanu

        • Jan 22, 2015 - 5:35 AM - Tanu Comment Link

          Sorry i mean UTouch library*

          Reply

          Tanu

        • Jan 22, 2015 - 5:50 AM - hans - Author: Comment Link

          I know they are not the “cleanest” when it comes to support.
          I’ve also read some comments at Amazon – for some it works great for other not at all.

          I just downloaded the file they offer at Amazon (your link), it does include the library (UTouch_DUE) and a demo, I assume those work?

          Under the firectory “UTFT_DUE” I do see some files suggesting the ability to display a PICture.
          I also found the developers website of this library: http://www.henningkarlsen.com/electronics/

          Maybe the UTFT info here can get you started, and I assume this UTouch info will be helpful as well?

          I’m rather limited in how I can assist, since I do not have the hardware … 

          Reply

          hans

          • Jan 22, 2015 - 6:10 AM - Tanu Comment Link

            Examples like button test, calibration , Quickdraw, etc., with respect to those libraries are working fine. But there is no example on image fetch from SD. So I am not sure which libraries I should go with.

            Tanu

          • Jan 22, 2015 - 6:21 AM - Tanu Comment Link

            I am using the following code along with the libraries tinyFAT and UTFT tinyFAT: (Please correct me if there is any mistake in this code)

            #include <tinyFAT.h>

            #include <UTFT.h>

            #include <UTFT_tinyFAT.h>


            // Declare which fonts we will be using

            extern uint8_t SmallFont[];


            UTFT myGLCD(ITDB32S, 38, 39, 40, 41); // Remember to change the model parameter to suit your display module!

            UTFT_tinyFAT myFiles(&myGLCD);

            char* files800[]={"PIC801.RAW"}; // 800x480 resolution

            char* files[1];


            int picsize_x, picsize_y;

            boolean display_rendertime=false; // Set this to true if you want the rendertime to be displayed after a picture is loaded

            boolean display_filename=true; // Set this to false to disable showing of filename


            word res;

            long sm, em;


            void setup()

            {

              myGLCD.InitLCD();

              myGLCD.clrScr();

              file.initFAT();

              myGLCD.setColor(255,255,255);

              myGLCD.setFont(SmallFont);

              picsize_x=myGLCD.getDisplayXSize();

              picsize_y=myGLCD.getDisplayYSize();

              switch (picsize_x)

              {

                case 800:

                  for (int z=0; z<sizeof(files800)/sizeof(*files800);z++)

                    files[z] = files800[z];

                  break;

              }

            }


            void loop()

            {

              

              for (int i=0; i<(sizeof(files)/sizeof(*files)); i++)

              {

                if (files[i]!="")

                {

                  sm=millis();

                  res=myFiles.loadBitmap(0, 0, picsize_x, picsize_y, files[i]);

                  em=millis();

                  if (res!=0)

                  {

                    if (res==0x10)

                    {

                      myGLCD.print("File not found...", 0, 0);

                      myGLCD.print(files[i], 0, 14);

                    }

                    else

                    {

                      myGLCD.print("ERROR: ", 0, 0);

                      myGLCD.printNumI(res, 56, 0);

                    }

                    delay(3000);

                    myGLCD.clrScr();

                  }

                  else

                  {

                    if (display_rendertime==true)

                    {

                      myGLCD.print("Rendertime (secs):", 0, 0);

                      myGLCD.printNumF(float((em-sm)/1000.0), 2, 160,0);

                    }

                    if (display_filename==true)

                    {

                      myGLCD.print(files[i], CENTER, myGLCD.getDisplayYSize()-12);

                    }

                    delay(3000);

                  }

                }

              }

            }

            Tanu

          • Jan 22, 2015 - 6:27 AM - Tanu Comment Link

            The output I’m getting on the screen as:

            File not found…

            PIC801.RAW

            Tanu

          • Jan 22, 2015 - 8:17 AM - hans - Author: Comment Link

            Hi Tanu,

            that sounds like we might have a typo or wrong path for the picture file?
            From your filename I assume it’s placed in root, and saved as you described (allcaps)?

            I also noticed that you will need to convert a picture first, but by the filename you’re using, you have indeed done this.

            In the documentation, it also states: “Requires that you #include <avr/pgmspace.h> when using an Arduino other than the Due” (Page 8 of the reference manual).

            I’m also wondering if you could change this line:

            res=myFiles.loadBitmap(0, 0, picsize_x, picsize_y, files[i]);

            to something like this:

            res=myFiles.loadBitmap(0, 0, picsize_x, picsize_y, "PIC801.RAW");

            Obviously just for testing, and if you use only one picture then you might want to remove the loop, or even move this to the “setup()” section (since it might be needed only once).

            Not sure if the latter will matter or not.

            hans

  • Jan 23, 2015 - 3:51 PM - Dirk Comment Link

    Hans,

    thank you very very much for your efforts to provide this perfect tutorial! For a (still secret ;-) project I build up your configuration and it works perfectly! I want to file my project also in an tutorial and therefore I ask you kindly, if you could provide me your fritzing library for the Display?

    many thanks in advance an go ahead with further perfect tutorials!

    Dirk

    Reply

    Dirk

    • Jan 24, 2015 - 4:11 AM - hans - Author: Comment Link

      Hi Dirk!

      A secret project,… interesting ….

      As for the libraries: In the green boxes above you’ll find the files, but I’m not the copyright holder of those files. You’d have to contact the creators through their website (AdaFruit). Since they are on Github, I assume you’re free to use them, just keep the Copyright statements in tact.

      As for my own code: feel free to use it, and if relevant please leave the copyright notice …

      Thank you very much for the polite way of asking, most people do not take the effort … and will you let us know when the secret project becomes public? I’m really curious now 

      Reply

      hans

  • Jan 24, 2015 - 2:51 PM - Dirk Comment Link

    Hi Hans,

    thank you very much for your quick response. Sorry, my request was not clear enough described (I didn’t mean the arduino/adfruit libraries for the Arduino IDE): I want to file my project with nice self explaining pictures like your tutorial here. Therefor I asume you used also fritzing to make pictures like fig4. right? These files are a type *.fzz if I know this right. Up to now I couldn’t find a fritzing library for the Display. Hopefully I’m not to stupid but up to now I could find this in the standard fritzing library.

    I really appreciate your help, thanks again!

    Dirk 

    Reply

    Dirk

    • Jan 24, 2015 - 2:53 PM - Dirk Comment Link

      damned – I pushed the wrong button (not reply..) please move my last input to the tread above – if possible. thx!

      Reply

      Dirk

    • Jan 25, 2015 - 3:26 AM - hans - Author: Comment Link

      Hi Drik,

      Dorry for not right away understand what you’re asking, … I was not familiar with Fritzing (thanks for the tip though!).

      I actually did draw these figures with PhotoShop … Based on a drawing I once made of the Arduino Uno I (and re-using it in each drawing).

      Looking at the Fritzing website, it seems that there should be an Arduino component though, but the display might be a problem, but I have yet to test it.

      I also have seen quite a few folks working with so called Arduino Simulators/Emulators, AutoDesk (it’s free as far as I can see) allows you to make electronic designs as well with 123D Circuits and allows you to download the image as well. Not sure if they have the display available though either  ….

      Reply

      hans

      • Jan 25, 2015 - 4:09 AM - Dirk Comment Link

        ah fine – this explains a lot. Thanks for information to the other simulators, I will have a look at them. If I will succseed with fritzing I will let you know.

        Again, many thanks for your efforts!

        Dirk

        Reply

        Dirk

        • Jan 25, 2015 - 5:12 PM - Dirk Comment Link

           So, after a few hours of challenging searching through many many web sites I finally was able to create my first, own fritzing part – the Display we talked about here in this thread:

          I created a *.svg-file with “Sketsa SVG Editor” and created a new part in fritzing – it works !

          This took my just 20 Minutes, so I think, the work is useful.

          I already tried to start with an tutorial – which obviously will be bloddy primitive, but it might help somebody to turn on the right street…

          If there out is none with better proposal I will share this tutorial in short time on an appropriate forum.

          Thanks a lot!

          Reply

          Dirk

        • Jan 26, 2015 - 2:57 AM - hans - Author: Comment Link

          Hi Dirk,

          well done! 

          Please feel free to share it in the Arduino forum here … I’m sure others will benefit from it in the future. 
          Thank you very much for the hard work and for sharing!

          Reply

          hans

      • Jan 25, 2015 - 4:54 AM - hans - Author: Comment Link

        Thanks Dirk, and you’re most welcome! 

        Reply

        hans

  • Mar 24, 2015 - 4:30 PM - Jan Comment Link

    Hi!

    I’m using this saindsmart tft together with an Adafruit Data logger shield. I can make the tft work and print some stuff, and previously also the data logging worked fine…
    When i tried to show the data on the screen though, by adding some code from and example i found using the same tft, i noticed that the data logging shield can’t write on the SD card anymore.

    Allthought i’m not using the SD capabilities of the tft and haven’t wired those, and I have wired all pins like you showed in the ‘slow’ mode…

    I’m guessing there must be some kind of conflict with the SD cards but i can’t imagine where…

    Thanks for any help!

    Jan

    Reply

    Jan

    • Mar 25, 2015 - 3:34 AM - hans - Author: Comment Link

      Hi Jan,

      First thing that comes to mind is a conflict in used libraries maybe?
      Even if you’re not using the SD card functionality, maybe something in one of the libraries is still “talking” to the pins and therefor conflicting with another library?

      I’m just guessing here, since I do not know all the details of your setup. But most often I found that to be the cause of such unexpected issues.

      I do not have the AdaFruit Data Logger Shield, and at first glance I see RT Clock and space to solder as an advantage, but not much more than that (please correct me if there are mote advantages).
      Can you run your experiments without the data logger? Just to see if everything works fine anyway. After all, the TFT has an SD card available.

      Reply

      hans

      • Mar 25, 2015 - 4:18 AM - Jan Comment Link

        Hi Hans,

        I was thinking the same, some conflict in libraries; because everything seems to be working just fine untill I put them to work together. I tried taking out pieces of code of the data logging to see if it would show the sensor readings without writing them to an SD card and noticed that everything suddenly worked when i removed this, and only this, piece of code:

         if (! logfile) {
         error(“couldnt create file”);
          }

        This piece of code always worked before, without using the tft, so i’m guessing it’s this piece of code that made the conflict happen.

        After changing this, It stopped giving that error and for some reason, writing on the SD card still works without a problem…

        In other words, everything is working fine now, but i have no idea whatsoever why that is. :)
        (and it’d be quite educational to know what the problem could be since i’m just a beginner in the whole arduino story..)

        Thanks for the help already!

        Jan

        Reply

        Jan

      • Mar 25, 2015 - 9:41 AM - hans - Author: Comment Link

        Interesting … what is “logfile”? An object, function or a variable?

        If it’s an object or function, might it initializing something that interferes?

        Reply

        hans

        • Mar 25, 2015 - 10:45 AM - Jan Comment Link

          It’s a part of the code I used from the Data logging shield which I found here: https://learn.adafruit.com/adafruit-data-logger-shield/using-the-real-time-clock-3

          Cause i’m just a beginner, I don’t really know much about what is what yet exactly :)
          As far as i’m concerned, i think it’s the file created to write on (a .csv file), a bit like writing on a tft or lcd.

          Reply

          Jan

        • Mar 25, 2015 - 12:40 PM - hans - Author: Comment Link

          Don’t worry Jan – I’m not the biggest expert either 

          I see that “logfile” is a “File” handle (code: File logfile;), and created in this section:

            // create a new file
            char filename[] = "LOGGER00.CSV";
            for (uint8_t i = 0; i < 100; i++) {
              filename[6] = i/10 + '0';
              filename[7] = i%10 + '0';
              if (! SD.exists(filename)) {
                // only open a new file if it doesn't exist
                logfile = SD.open(filename, FILE_WRITE); 
                break; // leave the loop!
              }
            }

          It will NOT overwrite a file … so if you have 99 files (LOGGER01.CSV … LOGGER99.CSV), the program will fail. This is where this part of the code comes in:

            if (! logfile) {
              error("couldnt create file");
            }

          As I understand, such a file is created each time you start the Arduino – so boot the Arduino 99 times and you’re done … not sure why that second part would break things though.

          Reply

          hans

  • Apr 3, 2015 - 4:07 PM - Günther Comment Link

    Hi,

    thanks for that nice tutorial!

    Two questions: I cannot manage to get the display into sleep mode with the DISP_OFF flag. How do I do it? Also, is it possible to deactivate the backlight by software command?

    thanks

    Reply

    Günther

    • Apr 4, 2015 - 3:10 AM - hans - Author: Comment Link

      Hi Günther!

      Thanks you very much for the compliment! 

      Unfortunately, I’m traveling at the moment and am nowhere near my stuff to try what might work and what not. I’m pretty sure though there is a way to get the backlight to go off – or maybe better put: get the display to go to sleep.

      When looking at the library code, around line 152, I’ve noticed quite a few commands that could possible do this (sleep mode, power control). I also read somewhere that the display automatically enters a sleep mode after a soft reset. The spec-sheet of the ST7735R suggests there is the display off option (as you mentioned) and a “sleep IN” mode as well (page 80) – but like I said; I do not have access to my Arduino w/Sainsmart display at the moment to test any of this … 

      Reply

      hans

      • Apr 4, 2015 - 5:35 AM - Günther Comment Link

        Hi

        thanks for the reply!  

        I edited the Adafruit_ST7735.h library to get the possibility of activating the sleep mode by command. I changed the part where the “writecommand” can be found from private to public

        public:
        uint8_t tabcolor;

        void spiwrite(uint8_t),
        writecommand(uint8_t c),
        writedata(uint8_t d),
        commandList(const uint8_t *addr),

        In that way I can use “writecommand(SLPIN);” and “writecommand(DISP_OFF);”.

        However, by using that, the display goes white and the LED backlight remains switched on. No content is shown anymore. But having the display in a bright white even with backlight is not the sleep mode or display off mode that I would expect .

        It seems that the LED backlight is powered by a regulator or another circuit on board, since there is no backlight pin as in the Adafruit version of the screen.

        I will try to get more familiar with the libraries and that stuff.

        Thanks, and have a nice journey.

        Best regards

        Günther

        Reply

        Günther

      • Apr 4, 2015 - 10:43 AM - hans - Author: Comment Link

        Thanks Günther for sharing 

        Interesting find – I’d expect that “sleep” would mean “backlight OFF” as well … if not, then this would be a rather useless function 

        I wish I could access my stuff right now to test along,… please let us know if you find out a trick that might do it right. I’d be very interested in that as well – specially when I decide to use the display in a more permanent setting.

        Maybe add a switch that we can control with software, although I’d hate to have to add this extra “hardware” to get a basic function to work.

        Reply

        hans

        • Apr 5, 2015 - 5:50 AM - Günther Comment Link

          Hi,

          I guess it is just “the wrong display” (https://github.com/notro/fbtft/wiki/LCD-Modules#sainsmart-18). It seems that the sainsmart version doesn’t allow to control the backlight. Since I use this display in a remote sleep phase scanner that I am programming, it drained the LiPo battery (1000mAh) during the night. My circuit draws up to 90 mA only due to the backlight. So, this is not the display that I need. I have already ordered the adafruit version where backlight can be controlled.

          Reply

          Günther

        • Apr 5, 2015 - 6:28 AM - hans - Author: Comment Link

          That’s good to know … well, not really good, but at least something to take into account when choosing this display.

          To wake the display up, I assume you’d use a button of some sorts. Maybe with small effort, the +5V (Vcc) can be “switched”, my initial thought was a small relay, but I’m sure there is a good way to do this in solid state. I’d have to toy around with that to find the proper way to do this.

          Thanks Günther for the great info! 

          Reply

          hans

          • Apr 5, 2015 - 6:31 AM - Günther Comment Link

            Exactly, the display should be in sleep mode mostly all the time. Only when user input is made, the display shall wake up and display data.

            Well, if I cut VCC to the sainsmart version, the µSD slot cannot be used anymore. Since I also need the data store, this isn’t the solution for me. :(.

            I will give a comment about the backlight function as soon as the adafruit version is there.

            have a nice Eastern!

            Günther

          • Apr 5, 2015 - 6:35 AM - hans - Author: Comment Link

            Doh! I should have thought about that … good catch!

            Happy Easter to you too! I’ll be looking forward to your findings with the AdaFruit model. 

            hans

  • Jun 8, 2015 - 4:55 PM - Mike Comment Link

    Hello,

    Thank you for creating this website, been very helpful.

    I have a problem when using my Arduino UNO with a generic Ebay 128×160 TFT display & SD card.  I’m using it in the high-speed configuration.  Both devices work well individually, but whenever the SD card is written to, the display will glitch.  The display’s data is never lost (I don’t have to re-write over glitch data).  I amusing the Arduino .h files and the chip selects are separate.  It appears that the display does not like to have data on the SPI buss that does not belong to the display.  I have also verified with a scope that the chip select lines are not being activated simultaneously.

    Have you ever run into this before?  Thanks!

    Reply

    Mike

    • Jun 9, 2015 - 3:29 AM - hans - Author: Comment Link

      Hi Mike,

      I have ran into situations before with SPI pin issues … specially when “one” device (TFT+SD) use the same pin. However, with the proper switching I did get it to work just fine on the Sainsmart. 

      Does the seller of your display offer any libraries/code/documentation?

      Reply

      hans

      • Jul 7, 2015 - 7:28 AM - Mike Comment Link

        Hi Hans, sorry for the late reply.  I did figure out that the line of code which opens the SD card for writing is what has been causing the display to refresh and blink.  I checked the enable lines for the display and SD card with a scope and there is never a time when they are both enabled simultaneously.  So I “fixed” the problem by minimizing the number of instances where I open the SD card for writing.

        Reply

        Mike

      • Jul 8, 2015 - 3:53 AM - hans - Author: Comment Link

        Thanks Mike for posting your work-around. Too bad a work-around is needed … 
        But I’m happy to hear that you’ve got it to work now. 

        Reply

        hans

  • Jun 28, 2015 - 3:22 PM - Mike Bowen Comment Link

    You obviously gave excellent examples. I’ve only just started playing with arduino and I got the ‘slow’ screen version working second time around (first time it tried to go to wrong comm port, so I unplugged arduino board and restarted the IDE and it worked just fine). OH, and I used a Nano instead of an UNO and still it worked. Thank you. Now I just have to figure out how to write text on the screen only (temp and humidity) and log the temp/humidity/date/time data to a micro sd card and I’m set. Thank you. 

    Reply

    Mike Bowen

    • Jun 29, 2015 - 2:25 AM - hans - Author: Comment Link

      Hi Mike!

      Great to hear that you’re having fun with this little project, and all that with a Nano – very cool! 

      As you can see in the demo, pushing Text to the screen is not that complicated either;

        tft.setCursor(0, 0);
        tft.setTextSize(1);
        tft.println("Some text you'd like to display");

      To format things nice, you might have to juggle the coordinates (setCursor) and play a bit with that, but I guess that’s also part of the fun.
      Above you’ll find a list with Text functions as well, like setting color and such.

      Reply

      hans

  • Jul 1, 2015 - 4:34 PM - Jack Comment Link

    Hi!

    This is a really helpful tutorial, thanks for making it! I’m having an issue with initiating the graphicstest from the Adafruit_ST7735 library using the high speed display set-up. When I use the code you provided, nothing shows up on my screen, but when I change it so that I use option 1, the graphicstest runs fine. What’s wrong with option 2?

    Thanks again.

    Reply

    Jack

    • Jul 2, 2015 - 1:13 AM - hans - Author: Comment Link

      Hi Jack,

      did you change the wiring? The low-speed version uses very different pins than the high-speed version.

      Reply

      hans

      • Jul 2, 2015 - 11:24 AM - Jack Comment Link

        Yes, the wiring is correct. At the moment, I have the wiring set up to also connect the SD card, but I don’t think that’s where the issue is coming from. Any other ideas?

        Thanks for replying.

        Reply

        Jack

    • Jul 3, 2015 - 1:45 AM - hans - Author: Comment Link

      As far as I recall, that should indeed work (figure 4 I assume).
      Are you using a SainSmart display or an AdaFruit display?

      Reply

      hans

      • Jul 6, 2015 - 10:59 AM - Jack Comment Link

        I’m using the same SainSmart display you used in this tutorial. I’m not sure if this affects anything, but the Arduino board I’m using is Mega and I’m doing my wiring over a GPS shield (I’m using the GPS for another part of my project). I’m pretty new to working with Arduino, so sorry if I’m sounding really clueless.

        Reply

        Jack

      • Jul 7, 2015 - 2:31 AM - hans - Author: Comment Link

        Hi Jack,

        Don’t say sorry – I’m not an expert either and I have been a newby too … 

        I have not tried the MEGA yet, but I do know there are some differences (like some pins) that you have to take in consideration.
        The GPS shield might interfere as well. I’d start with as little components as possible so you can break down where the issue occurs.

        Reply

        hans

        • Jul 7, 2015 - 11:53 AM - Jack Comment Link

          Hey, Hans

          So I switched my Mega board for an Uno and now everything runs perfectly! Thank you so much for your help and patience with me, I really appreciate it!

          Reply

          Jack

          • Jul 8, 2015 - 3:52 AM - hans - Author: Comment Link

            Awesome Jack! 

            I’m sure you will get it to work with the MEGA, just have to figure out which pins to use and see if the library defines those same pins as well – just in case you’d like to figure this out in the future.

            hans

  • Jul 21, 2015 - 5:13 PM - Agbaria Comment Link

    Hi

    Thanks very much . 

    I have the same st7735 , and every thing is working perfect except one thing : white screen all the time.

    Any ideas please?

    Thanks again

    Agbaria

    Reply

    Agbaria

    • Jul 22, 2015 - 3:11 AM - hans - Author: Comment Link

      Hi Agbaria,

      First thing I’d check is the wiring, I’d assume you’d use the wiring as suggested here, but I had to ask, since some folks mix the wiring for fast and slow refresh …

      Just an initial thought … 

      Reply

      hans

  • Aug 14, 2015 - 7:49 AM - Paula Comment Link

    Hi everyone, 

    I am new in this so I have no experience. Actually I am trying to create a good interface with the spark core and the HX8357 touchscreen to control a treadmill. I want to get access to the SD card images to make them the icons of my application. 

    The problem is that I can’t get the access to the SD card and I don’t know why this is happening. I tried several connections between the core and the touchscreen but it doesn’t  work. I took care of both CS pins separately but it seams that I am blocked with this. I think I can only get access to the touchscreen and not to the SD card. I don’t know what else to do. Can somebody help me please? 

    Thanks in advance, 

    Reply

    Paula

    • Aug 15, 2015 - 3:38 AM - hans - Author: Comment Link

      Hi Paula,

      I have no experience with the Spark One (I’m assuming it this one), maybe one of the other readers is more familiar with it.

      What I do see is that it’s Arduino compatible, yet uses an ARM processor instead of a microcontroller like the Arduino does. So I’m not 100% sure if it emulates parts or not, and how compatible it really is. Maybe the CS pin implementation isn’t as compatible as they claim (I wouldn’t know to be honest).

      The Spark One looks like a fun thing to play with though … is there a way to contact the developers?

      Reply

      hans



Your Comment …

Please share:
*
*
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.