Arduino 1.8" Kleuren Display

SainSmart 1.8″ Kleuren TFT LCD Display voor Arduino

Dit kleine 1.8″ display kan 128 x 160 pixels weergeven in 262,144 (18-bit) kleuren, en meet slechts 5 cm x 3.5 cm, en is ongeveer 6 mm dik.
Het display heeft achtergrondverlichting en een Micro-SD-Kaart lezer aan boord (ondersteund FAT16 en FAT32 geformatteerde Micro-SD-Kaarten).

Het display wordt aangestuurd met een ST7735R controller (ST7735R-specifications.pdf (2.1 MB)), welke een “Slow” (langzaam) en “Fast” (snel) mode heeft voor weergave en dat alles is 3.3V/5V compatible.

Het scherm formaat, de kleuren ondersteuning en beeld kwaliteit maken het een uitsteken Arduino kleuren display, maar het is ook zeker bruikbaar voor b.v. een Raspberry Pi (zoals je kunt zien op deze website).

War kun je dit display kopen:
– Arduino versie via AdaFruit vanaf $20
– $20 op Amazon,
– $13 bij SainSmart,
– op eBay vanaf $13

Sainsmart 1.8″ TFT LCD Kleuren Display voor gebruik met een Arduino

Arduino code Bibliotheken

Er zijn een aantal Libraries (bibliotheken) beschikbaar voor dit display, wat je een hoop werkt bespaard, van zowel SainSmart als AdaFruit.
De libraries van SainSmart zijn een beetje een rommeltje dus we gebruiken hier de Libraries van AdaFruit.
De AdaFruit libraries zijn overigens erg netjes en dit is een van de redenen waarom ik de volgende keer zeker bij Adafruit ga winkelen voor Arduino en Raspberry Pi spullen.

Download van de Libraries

Voor we beginnen moeten we dus eerst de AdaFruit Libraries downloaden. We hebben de volgende libraries nodig:

Adafruit_GFX voor basis grafische functies zoals het tekenen van lijnen, cirkels, etc. welke onafhankelijk is van de gebruikte controller.

Adafruit_ST7735 is de library die we combineren met de grafische library voor de specifieke controller functies van de ST7735 TFT Display/SD-Kaart controller.

Voor SD-Kaart ondersteuning hebben we ook de SD library van Adafruit nodig.

Zoals gebruikelijk bieden we twee manieren om deze bestanden te downloaden.
Het beste is via GitHub (Adafruit_GFX, Adafruit_ST7735 en optioneel SD), zodat je de meest actuele versie hebt.
Je kunt ze ook van Tweaking4All downloaden maar deze versies kunnen verouderd zijn.

Na het downloaden van de bestanden, kun je ze installeren met “Sketch”  “Import Library…”  “Add Library…” in de Arduino software.
Inde bestandsdialoog kies je het gedownloade ZIP bestand en de bibliotheek wordt nu automatisch geïnstalleerd (Arduino 1.0.5 of nieuwer). Herstarten van de Arduino software is aan te raden zodat je de voorbeelden in het “examples” menu kunt vinden.

Aansluiten van het 1.8″ Display voor de Arduino

In dit voorbeeld gebruik ik een Arduino Uno R3, maar andere Arduino versies zullen waarschijnlijk vergelijkbaar werken.
De pin-out is gebaseerd op de SainSmart versie van dit display!

Je zult misschien al wel zien wat het e.e.a. moet voorstellen, maar aansluiten is misschien niet meteen duidelijk.

De aansluiting van de achtergrond verlichting is wel duidelijk neem ik aan.

Als eerste moeten we de controller vertellen tegen wie we gaan praten: het scherm of de SD-Kaart lezer, we doe dit via de twee CS pinnen. CS(TFT) voor het display en CS(SD) voor de SD-Kaart lezer. Data wordt vervolgens geschreven via de SDA (display) of MOSI (SD-Kaart) pinnen. Data wordt gelezen van de SD-Card via de MISO pin.

MOSI = Master Out Slave In, of te wel: De Master (Arduino) stuurt data naar de Slave (Display).
MISO = Master In Slave Out, of te wel: De Slave (Display) stuurt data naar de Master (Arduino).

Uiteraard is een goede timing nodig voor de data overdracht en daarvoor gebruikt men een klok signaal: SCL voor het Display, en SCLK voor de SD-Kaart.

Voor het display hebben we ook nog een pin (RS/DC) voor het onderscheiden tussen het versturen van commando’s of data.
Oh dan vergeet ik bijna de reset optie (RES) om het display te resetten.

Groep: Achtergrondverlichting

Deze groep is erg voor de handliggend: Vcc gaat naar de +5 Volt (3.3V … 5V) en GND gaat naar aarde.

Groep: Display

Zoals eerder vermeld, het display kan in “Snelle” en “Langzame” schrijfmode werken – het e.e.a. hangt af van de beschikbare pinnen in jouw project.

Merk op : Achtergrond verlichting is natuurlijk altijd nodig.
Merk op : De pinnen die gebruikt worden kunnen aangepast worden in de Arduino sketch maar hangt wel af van het type pin dat je nodig hebt (PWM vs SPI).

  Merk op : Displays worden uitgeleverd met een transparant labeltje om het scherm te beschermen. Ze hebben een klein stukje dat uitsteekt om het te verwijderen en de kleur van dit stukje kan bepalend zijn voor jouw code. Dit is met name het geval voor de Adafruit displays. Mijn SainSmart had een groen stukje maar werkte het beste met de instellingen van de Adafruit met het zwarte stukje. Als jouw beeld een beetje vreemd en verschoven over komt, probeer dan een de instelling van een andere tab.

Hieronder twee video’s die het verschil laten zien tussen de langzame en snelle beeldweergave (gebaseerd op de Adafruit Library Demo’s):

Langzaam of te wel Low Display Speed:

Snel of te wel High Display Speed:

  Low Speed Display (Langzaam)

Low Speed display gata met ongeveer een een vijfde van de High Speed display snelheid, wat niet altijd geweldig is maar bruikbaar is als je de SPI pinnen al voor iets anders gebruikt. Voor de langzame methode gebruiken we de PWM pin zoals hieronder aangegeven.

Let op de pin volgorde! (pin 6 staat als laatste in de lijst!)

SainSmart 1.8″ TFT Arduino Scherm – Lage Snelheid opstelling

Na het aansluiten van het display laden we het erste voorbeeld in de Arduino Software (“File”  “Example”  “Adafruit_ST7735” –  begin met de “graphictest” demo).

Hieronder zie je een stukje van de code waarin we moeten zorgen dat we de juiste regels als opmerkingen markeren (‘//’ ervoor zetten) en de juiste regels als code markeren (‘//’ weghalen). Zie de gele regels – de pin namen zijn gebaseerd op de Adafruit pin namen, ik heb commentaar toegevoegd om de SainSmart namen te identificeren:

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


...

Compileer en Upload de Sketch en je zult nu de eerste demo van het TFT scherm zien. 

 High Speed Display (Snel)

High Speed Display is ongeveer 5x sneller dan de Slow Speed Display mode (volgens Adafruit 4 – 8x sneller), en je zult het verschil echt zien.
Voor High Speed display gebruiken we de SPI pinnen van de Arduino – wat soms kan conflicteren met de pinnen die je nodig hebt voor jouw project.

SainSmart 1.8″ TFT Arduino Scherm – Hoge Snelheid opstelling

Ook hier moeten we bepaalde regels markeren als commentaar (‘//’ toevoegen) of als code (‘//’ weghalen).

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


...

Na compilatie en uploaden zien we de snelle demo, en dat gaat echt sneller dan de langzame mode.

Groep: SD-Card

Voor het werken met de SD-Kaart moeten we wat extra verbindingen leggen. Voor de SD-Kaart mode gebruiken we overigens de High Speed Display mode omdat de SD-kaart toch al de SPI pinnen gebruikt.

Aansluiten van Display en SD-Card

  Merk op dat voor de SainSmart de SCLK met SCL verbonden is, en dat de MOSI met de SDA verbonden is.

SainSmart 1.8″ TFT Arduino Scherm – Lage Snelheid opstelling met SD-kaart

Afbeelding op de SD-Kaart voor de Demo’s

Voor we dit kunnen testen hebben we een BMP afbeelding nodig (120×160 pixels BMP, 24-bit) op de SD-Kaart.
De SD-Card moet FAT-16 of FAT-32 geformateerd worden met een enkele partitie en de BMP mag niet in een directory geplaatst worden.
Je kunt daarna het BMP bestand hernoemen naar “parrot.bmp” of de Sketch code aanpassen voor de corrrecte naam (in “spitftbitmap” regel 70, en in “soft_spitftbitmap” regel 74).

Voorbeeld:  bmpDraw("mijnafbeelding.bmp", 0, 0);   (als jouw BMP “mijnafbeelding.bmp” heet).

Voorbeeld BMP weergave op het SainSmart Display met de Arduino

Demo’s

De demo “spitftbitmap” is is het eenvoudigste wat aanpassingen betreft (zie geel gemarkeerde regels):

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

...

De demo “soft_spitftbitmap” vereist wat meer aanpassingen (zie geel gemarkeerde regels):

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

...

Een aantal Grafische Basis Functies

Nu dat we onze eerste tests gedaan hebben, is het misschien tijd om te gaan kijken wat we zelf kunnen bouwen.
Zoals je misschien al gezien hebt, maakt de Adafruit_GFX library (gecombineerd met de Adafruit_ST7735 library) dit erg eenvoudig – meer info kan gevonden worden op de GFX Referentie pagina.

Basis code sjabloon

We baseren dit voorbeeld op het High Speed Display voorbeeld waarbij de volgende basis stappen nodig zijn om met het display te kunnen gaan spelen.

In heet eerste blok (regels 4-8) definiëren we de gebruikte pinnen.
Vervolgens zorgen we ervoor dat de libraries gebruikt kunnen worden via includes (regels 12-14).
En vervolgens definieren we de varaiable “tft” als een “Adafruit_ST7735” object (regel 18).
In de setup() functie zullen we vaak beginnenmmet het scherm leeg te maken (regel 22).

Je kunt vervolgens jouw code in setup() zetten voor eenmalige afloop, of in de loop() als de code oneindig herhaald dient te worden.

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 pinnen

#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);   // initializeer de ST7735S chip, zwarte tab
  // Als de transparante lable op het display rood is:

  //tft.initR(INITR_REDTAB);   

  // of als het groen is:

  //tft.initR(INITR_GREENTAB);   

}



void loop() {



... // jouw code hier



}

Coördinaten System van een Display

Het display is opgebouwd uit individuele pixels of puntjes die we met een X,Y coördinaten systeem kunnen aanspreken.

Het X,Y systeem klinkt misschien bekend van de wiskunde klas, X gaat van links naar rechts, en Y gaat van beneden naar boven.
Het X,Y systeem voor een display werkt net even anders. X werkt nog steeds van links naar rechts, maar Y werkt van boven naar beneden – dit is erg gebruikelijk voor displays.
Let dus op : Het nul punt is dus (0,0) en zit dus LINKS BOVENIN.

X,Y Grid van het beeldscherm

Pixel Kleuren

Pixels in monochrome displays zijn eenvoudig: ze staan AAN (1) of UIT (0).
Voor kleuren pixels is dat wat moeilijker, omdat het een combinatie is van Rood, Groen en Blauw.

Afhankelijk van het beeldscherm is dit 8 bit (256 kleuren), 16 bit (65,536 kleuren), 24 bit (16,777,216 kleuren), etc.
De Adafruit library gebruikt voor ons beeldscherm 16 bit.

Voor gedefinieerde kleuren:

De ST7735 library heeft de volgende kleuren voor gedefinieerd:

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

Andere kleuren bepalen:

Het bepalen van andere kleuren kan met de Color565 functie van de ST7735 Library, welke 3 parameters nodig heeft: Rood, Groen en Blauw.
De significante bits, waar we ons niet druk over hoeven te maken, zijn voor Rood en Blue slechts 5 bits en voor Groen 6 bits (vraag me niet waarom).

1
2
3
4
5
...

Adafruit_ST7735 tft ....

...

color = tft.Color565(r,g,b)

...

Color565( rood, groen, blauw);
Deze functie berekend de 16-bit kleur code gebaseerd op 3 8-bit nummers voor rood, groen en blauw.

Je kunt hiervoor een variabele doorgeven (int), of een nummer typen.
Ik heb echter gemerkt dat een decimaal nummer onverwachte problemen veroorzaakt. Het gebruik van hexadecimale nummers echter werkt uitstekend.
Rood: Color565( 0xFF, 0, 0)
Groen: Color565( 0, 0xFF, 0)

Ik vindt het gebruik van HTML codes het eenvoudigste voor het bepalen van een kleur, en ik heb daarom een kleur kiezer in deze pagina gebakken.

Kleur kiezer:

Gebruik:
Klik op het invoer veld en kies een kleur waarna een HTML hexadecimale kleur code verschijnt.
Voor het gebruik van deze kleur in jouw Arduino Sketch: De eerste twee karakters representeert de hexadecimale waarde voor ROOD, de tweede set van 2 karakters is voor GROEN en de laatste set van twee karakters is voor BLAUW. Type nu voor ieder setje ‘0x’ (wat aangeeft dat het een hexadecimaal getal is).

Voorbeeld:
Voor paars hebben we een hexadecimale code: B700FE.
De hex waarden zijn voor rood B7, groen 00 en blauw FE.
Jouw Color565 aanroep ziet er dan als volgt uit: Color565( 0xB7, 0x00, 0xFE );

Merk op : Je kunt natuurlijk ook andere zogenaamde color pickers gebruiken die een hexadecimale code weergeven, of bijvoorbeeld de kleur kiezer in Adobe Photoshop.

Grafische Functies

drawPixel( x, y, kleur );
Tekent een enkele pixel op de (x,y) coordinaten in de aangegeven kleur.

drawLine( x0, y0, x1, y1, kleur );
Tekent een lijn van (x0,y0) naar (x1,y1) in de aangegeven kleur.

drawFastHLine( x, y, breedte, kleur );
Tekent een horizontale lijn vanaf (x,y), met aangegeven breedte en kleur.
Deze functie werkt sneller dan de drawLine().

drawFastVLine( x, y, hoogte, kleur );
Tekent een verticale lijn vanaf (x,y), met aangegeven hoogte en kleur.
Ook deze functie is sneller dan de drawLine().

drawRect( x, y, breedte, hoogte, kleur );
Tekent een open rechthoek op (x,y) met aangegeven breedte, hoogte en kleur.
(x,y) is het start punt, wat de hoek links boven in is.

fillRect( x, y, breedte, hoogte, kleur );
Tekent een gevulde rechthoek op (x,y) met aangegeven breedte, hoogte en kleur.
(x,y) is het start punt, wat de hoek links boven in is.

drawCircle( x, y, straal, kleur );
Tekent een open cirkel met (x,y) als middelpunt, met aangegeven straal en kleur.

fillCircle( x, y, straal, kleur );
Tekent een gevulde cirkel met (x,y) als middelpunt, met aangegeven straal en kleur.

drawTriangle( x0, y0, x1, y1, x2, y2, kleur );
Tekent een open driehoek tussen de punten (x0,y0), (x1,y1) en (x2,y2), met de rand in aangegeven kleur.

fillTriangle( x0, y0, x1, y1, x2, y2, kleur );
Tekent een gevulde driehoek tussen de punten (x0,y0), (x1,y1) en (x2,y2), met de rand in aangegeven kleur.

drawRoundRect( x, y, breedte, hoogte, straal, kleur );
Tekent een open rechthoek met geronde hoeken, met (x,y) als start punt links boven in, met aangegeven breedte, hoogte en kleur.
De aangegeven straal wordt gebruikt om de ronding van de hoeken te bepalen.
Als de straal x 2 groter is dan de breedte of de hoogte, dan kun je rare dingen verwachten.

fillRoundRect( x, y, breedte, hoogte, radius, kleur );
Tekent een gevulde rechthoek met geronde hoeken, met (x,y) als start punt links boven in, met aangegeven breedte, hoogte en kleur.
De aangegeven straal wordt gebruikt om de ronding van de hoeken te bepalen.
Als de straal x 2 groter is dan de breedte of de hoogte, dan kun je rare dingen verwachten.

drawBitmap( x, y,  *bitmap, breedte, hoogte, kleur );
Deze functie staat het toe om een bitmap weer te geven (verwar dit niet met een BMP bestand!).
De bitmap moet voor-gedefinieerd zijn en is per definitie monochrome met aangeven breedte en hoogte.
De afbeelding wordt in de aangegeven kleur weergegeven en de hoek links boven is is (x,y).

Tekst Functie

drawChar( x, y, karakter, kleur, achtergrondkleur, letter-grootte );
Tekent een karakter op de locatie (x,y), waarbij (x,y) de linker boven hoek van het karakter is, in aangeven letter en achtergrond kleur, in aangegeven letter grootte.

setCursor( x,  y );
Zet de (x,y) coordinaten van de “cursor”. Dit is de plaatst waar de print() of println() tekst begint te typen.

print( tekst );
println( tekst );
Print de aangegeven tekst string, vanaf de huidige cursor positie. De println() voegt een ENTER toe zodat de volgende print() of println() op de volgende regel begints.

setTextColor( kleur );
Stelt de letter kleur in van de tekst die NA dit commando uitgevoerd worden.

setTextColor( kleur, achtergrondkleur );
Stelt de letter en achtergrond kleur in van de tekst die NA dit commando uitgevoerd worden.

setTextSize( letter-grootte );
Dit stelt de letter grootte in van de text die hierna uitgevoerd wordt. Typische waarden zijn 1,2,3,4,5,6,7,8,9,10, etc.
Deze waarden zijn gewoon nummers, en hebben niets te maken met pixels.
De letter grootte heeft alleen invloed op de tekst uitvoer NA dit commando.

setTextWrap( boolean );
Zet tekst-omloop aan (true) of uit (false) zodat regels aan het einde van het scherm wel/niet verder gaan op de volgende regel.
Dit betreft weer alleen maar tekst die na dit statement wordt uitgevoerd.

Scherm Functies

setRotation( draaiing );
Deze functie staat het toe het nul punt (0,0) te verplaatsen zodat je het beeld in portret of landschap mode kunt gebruiken.
Hierdoor kun je jouw 128×160 (Breedte x Hoogte) omzetten naar een 160×128 beeldscherm.
Standaard staat het scherm in portret mode en is (0,0) links boven in.
Rotatie waarden: 0 (0 graden), 1 (90 graden), 2 (180 graden) and 3 (270 graden).

fillScreen( kleur );
Vult het hele beeld met de aangegeven kleur wat vaak gebruikt wordt om het scherm leeg te maken.

invertDisplay( boolean );
Met deze functie, bijvoorbeeld handig voor waarschuwingen, staat het toe het beeld te inverteren (true) of normaal te zetten (false).

Display Demo

Op basis van deze functies heb ik een kleine demo gemaakt waarbij de code iets beter leesbaar is zodat je er mee kunt spelen. Kopieer de onderstaande code in een nieuwe Arduino Sketch of download het bestand.

Demo Video:
(merk op dat ik een behoorlijk aantal pauzes in de code heb gezet, zodat je beter kunt zien welke functie nu precies wat doet)

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



// Initialiseer de pinnen

#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 Functies

In de demo en de tekst en de demo’s heb ik niet alle functies in detail besproken.
Functies zoals het gebruik van bitmaps en eigen fonts is de moeite om eens door te kijken, maar dat gaat een beetje buiten de scope van dit artikel.