International weather information is displayed on a touch screen where the user selects weather information for different cities and chooses between two screens of displayed information. Initially, this chapter describes displaying text and shapes on the screen, calibrating the touch function of the screen, and creating images by pressing the touch screen. Once sketches are developed to display information and utilize the touch function of the touch screen, the focus shifts to accessing international weather data from OpenWeatherMap.org and the reformatting of the OpenWeatherMap data to display on a touch screen.
Displaying text and shapes on a touch screen or creating images by pressing the touch screen does not require Internet access. An Arduino Uno or Nano is sufficient to run the sketches, but a logic-level converter is required to reduce the voltage to the touch screen to 3.3 V, as the Arduino Uno and Nano operate at 5 V. Accessing OpenWeatherMap data requires connection to the local Wi-Fi network, which is provided by an ESP8266 or ESP32 microcontroller.
ILI9341 SPI TFT LCD touch screen
The 2.4-inch ILI9341 SPI TFT LCD touch screen with 240 × 320 pixels has touch screen functionality for displaying text and drawing shapes with different colors on the screen. The acronyms SPI, TFT, and LCD represent Serial Peripheral Interface, Thin-Film Transistor, and Liquid Crystal Display, respectively. The ILI9341 SPI TFT LCD screen and the ESP8266 and ESP32 microcontrollers operate at 3.3 V, so a logic-level converter is not required. Connections for the ILI9341 SPI TFT LCD screen with the ESP8266 and ESP32 development boards are shown in Figures 3-1 and 3-2 and given in Table 3-1. Note that the microcontroller SPI MOSI, MISO (Main-In Secondary-Out), and serial clock (SCL) pins are connected to both the display and the touch function pins of the ILI9341 SPI TFT LCD screen.
Figure 3-1
ILI9341 SPI TFT LCD screen and the LOLIN (WeMos) D1 mini development board
Figure 3-2
ILI9341 SPI TFT LCD screen and the ESP32 DEVKIT DOIT development board
Table 3-1
ILI9341 SPI TFT LCD screen and ESP8266 and ESP32 development boards
Component
Pin Function
ESP8266 Pin
ESP32 Pin
ILI9341 TFT screen VCC 3.3V
3V3
3V3
ILI9341 TFT screen GND
GND
GND
ILI9341 TFT screen CS
Chip select
D8
GPIO 5
ILI9341 TFT screen RESET
D0
GPIO 25
ILI9341 TFT screen DC
Data command
D4
GPIO 26
ILI9341 TFT screen SDA (MOSI)
Serial data in (DI)
D7
GPIO 23
ILI9341 TFT screen SCL (CLK)
Serial clock
D5
GPIO 18
ILI9341 TFT screen LED
3V3
3V3
ILI9341 TFT screen SDO (MISO)
Serial data out
D6
GPIO 19
"touch"
ILI9341 TFT screen T_CLK
Serial clock
D5
GPIO 18
ILI9341 TFT screen T_CS
Chip select
D1
GPIO 27
ILI9341 TFT screen T_DIN
Data input
D7
GPIO 23
ILI9341 TFT screen T_DO
Data output
D6
GPIO 19
ILI9341 TFT screen T_IRQ
Interrupt
D2
GPIO 13
Listing 3-1 demonstrates displaying text and drawing shapes on the ILI9341 SPI TFT LCD screen. The Adafruit ILI9341 and Adafruit GFX libraries are installed within the Arduino IDE. The Adafruit GFX and SPI libraries are referenced by the Adafruit ILI9341 library, so are not explicitly included in the sketch. Color codes are available within the Adafruit ILI9341library, so HEX codes for colors are not defined in the sketch. The screen orientation is set as portrait or landscape with the instruction setRotation(N) with value of 0 or 1, respectively, or the value of 2 or 3 to rotate the screen image by 180° for portrait or landscape, respectively. For example, portrait orientation with pin connections at the top of the ILI9341 SPI TFT LCS screen is set with setRotation(2). The default font size is 5 × 8 pixels per character that is increased to 5N × 8N pixels with the setTextSize(N) instruction.
#include <Adafruit_ILI9341.h> // include ILI9341 library
tft.setRotation(2); // portrait, connections at top
tft.fillScreen(ILI9341_BLACK); // fill screen in black
tft.drawRect(0,0,239,319,ILI9341_WHITE); // draw white frame line
tft.drawRect(1,1,237,317,ILI9341_WHITE); // and second frame line
tft.setTextSize(4); // set text size
}
void loop()
{ // clear screen apart from frame
tft.fillRect(2,2,235,314,ILI9341_ BLACK);
for (int i=0; i<8; i++) // for each color
{
color = colors[i]; // set color
text = texts[i]; // set text for color
tft.setTextColor(color); // set text color
tft.setCursor(20,40*i+2); // position cursor
tft.print(text); // print color text (name)
delay(250); // delay 250ms between colors
}
for (int i=0; i<8; i++) // for each color
{
color = colors[i];
text = texts[i];
tft.fillRect(2,2,235,314,ILI9341_BLACK);
tft.setCursor(20,25); // cursor to position (20, 25)
tft.setTextColor(color);
tft.print(text); // draw filled-in triangle
if ((i+1) % 3 == 0) tft.fillTriangle(20,134,64,55,107,134,color);
// draw open rectangle
else if ((i+1) % 2 == 0) tft.drawRect(20,55,88,80,color);
else tft.fillCircle(64,95,39,color); // draw filled-in circle
delay(250);
}
tft.fillRect(2,2,235,314,ILI9341_BLACK);
tft.drawLine(2,158,236,158,ILI9341_RED); // draw horizontal RED line
delay(250);
}
Listing 3-1
Display text and shapes
In Listing 3-1, SPI pins are defined for an ESP8266 development board, which must be changed for an ESP32 development board. Alternatively, the instructions in Listing 3-2 can be included at the start of a sketch. See Chapter 21 (Microcontrollers) for more information.
#ifdef ESP32
int tftCS = 5; // screen chip select pin
int tftDC = 26; // data command select pin
int tftRST = 25; // reset pin
#elif ESP8266
int tftCS = D8;
int tftDC = D4;
int tftRST = D0;
#else // Arduino IDE error message
#error "ESP8266 or ESP32 microcontroller only"
#endif
Listing 3-2
Pin definitions for ESP8266 and ESP32 development boards
Touch screen calibration
A library for the touch screen function with the ESP8266 and ESP32 microcontrollers, TFT_eSPI by Bodmer, is available within the Arduino IDE. Prior to using the TFT_eSPIlibrary in sketches, the touch screen driver, pin connections to the ESP8266 or ESP32 development board, and SPI frequencies must be defined in the file User_Setup.h, which is located in the TFT-eSPI library folder. Listing 3-3 includes the settings used in this chapter for ESP8266 and ESP32 microcontrollers, with the settings for the ESP32 microcontroller commented out. Note that default pin connections for the ESP8266 SPI MOSI, MISO, and CLK are not required, but pin numbers for the ESP8266 development board are preceded with PIN_, while the ESP32 microcontroller GPIO numbers are sufficient.
#define TFT_CS PIN_D8 // ESP8266 SPI and touch screen
TFT-eSPI library User_Setup settings for ESP8266 and ESP32 development boards
Before using the touch screen facility of the ILI9341 SPI TFT LCD screen, the screen must be calibrated (see Listing 3-4). Arrows are displayed on the ILI9341 SPI TFT LCD screen, which the user presses with a screen pen. Five calibration parameters are displayed on the ILI9341 SPI TFT LCD screen, which are included in the calData array of subsequent sketches. The SPI library is referenced by the TFT_eSPI library, so is not explicitly included in the sketch. Listing 3-4 is adapted from the Touch_calibrate sketch in the TFT-eSPI ➤ Generic library.
#include <TFT_eSPI.h> // include TFT_eSPI library
TFT_eSPI tft = TFT_eSPI(); // associate tft with TFT-eSPI lib
uint16_t calData[5]; // calibration parameters
String str;
void setup()
{
tft.init(); // initialise ILI9341 TFT screen
tft.setRotation(1); // landscape, connections on right
tft.setTextFont(1); // set text font and size
tft.setTextSize(1);
calibrate(); // call calibration function
}
void calibrate() // function to calibrate ILI9341 TFT screen
{
tft.fillScreen(TFT_BLACK); // fill screen in black
tft.setTextColor(TFT_WHITE, TFT_BLACK); // set text color, white on black
tft.setCursor(30, 0); // move cursor to position (0, 30)
for (int i=0; i<4; i++) str = str + String(calData[i])+",";
str = str + String(calData[4]);
tft.setCursor(0, 90);
tft.print(str);
}
void loop() // nothing in loop function
{}
Listing 3-4
Calibration of the ILI9341 SPI TFT LCD screen
For example, the calibration parameters for the ILI9341 SPI TFT LCD screen used in this chapter of 450, 3400, 390, 3320, and 3 are copied into the calDat array of the instruction uint16_t calData[] = {450, 3400, 390, 3320, 3} of subsequent sketches. However, the calibration parameters for your ILI9341 SPI TFT LCD screen would be included in the sketches.
Painting on-screen
The sketch in Listing 3-5 draws images on the ILI9341 SPI TFT LCD screen when the screen is pressed with a screen pen, with colors selected from a color palette. The first section of the sketch installs libraries and defines the touch screen pins and the paintbrush size. The setupfunction sets the touch screen orientation and incorporates the touch screen calibration parameters obtained in Listing 3-4. When a screen press is detected, the touch position is identified; and if the x co-ordinate is less than 20, then the screen was pressed on the color palette and the selected color, mapped to the y co-ordinate, is subsequently used for drawing on the screen. Color codes are available in the file TFT_eSPI.h of the TFT_eSPI library. The clear function resets the screen, displays the title, and redraws the color palette. Have fun painting!
#include <TFT_eSPI.h> // include TFT-eSPI library
TFT_eSPI tft = TFT_eSPI(); // associate tft with TFT-eSPI lib
tft.fillRect(0,125,20,20,TFT_GREEN); // build color palette
tft.fillRect(0,150,20,20, TFT_BLUE);
tft.fillRect(0,175,20,20, TFT_WHITE);
tft.drawCircle(10,225,10, TFT_WHITE); // select to clear screen
tft.setCursor(25,217);
tft.setTextColor(TFT_WHITE);
tft.print("clear");
color = TFT_WHITE;
}
Listing 3-5
Paintpot with TFT-eSPI library
ESP8266-specific touch screen calibration and paint
The advantage of the TFT-eSPI library is that one library incorporates screen display and touch functionality, with the applicability to both ESP8266 and ESP32 microcontrollers in conjunction with the ILI9341 SPI TFT LCD screen. The Adafruit_ILI9341esplibrary, adapted specifically for the ESP8266 microcontroller, has an excellent touch screen painting function. The Adafruit_ILI9341esp library by NailBuster Software is contained in the tft28esp.zip file that is downloaded from nailbuster.com/?page_id=341. The Adafruit_ILI9341esp library requires the XPT2046 library by Spiros Papadimitriou, which is downloaded from github.com/spapadim/XPT2046.
Calibration for the ILI9341 SPI TFT LCD screen with the XPT2046 library differs from calibration with the TFT-eSPI library. In the calibration sketch (see Listing 3-6), two crosses, at 20-pixel margins from the screen edges, are displayed on the ILI9341 SPI TFT LCD screen, which the user presses with a screen pen. Four calibration parameters are then displayed on the ILI9341 SPI TFT LCD screen, that are included in the touch.setCalibration instruction of subsequent sketches.
The getPointsfunction determines the touched screen position, with the & parameter referencing a pointer to a whole array, rather than a pointer to the first element of the array. A touched position, (p, q), is mapped to a display position, (np, nq), of the 240 × 320–pixel ILI9341 SPI TFT LCD screen. For the screen used in this chapter, the regression equations, np = (150 - p) × 240/145 and nq = (115 - q) × 320/100, were determined from a series of marked positions on the ILI9341 SPI TFT LCD screen and the corresponding touched positions identified by the XPT2046 library.
#include <Adafruit_ILI9341esp.h> // include ILI9341esp and
#include <XPT2046.h> // XPT2046 libraries
int tftCS = D8;
int tftDC = D4;
int tftRST = D0; // define screen and touch pins
int touchCS = D1;
int touchIRQ = D2; // associate tft with ILI9341 lib
void getPoints(uint16_t x, uint16_t y, uint16_t &i, uint16_t &j)
{
marker(y, x, ILI9341_WHITE); // draw white cross on screen
while (!touch.isTouching()>0) delay(10); // wait for screen touch
touch.getRaw(i, j);
marker(y, x, ILI9341_BLACK); // over-write cross
touch.getPosition(p, q); // get position of screen touch
np = (150.0-p)*240.0/145.0; // transform from touch to tft
nq = (115.0-q)*320.0/100.0;
tft.fillCircle(np, nq, 2, ILI9341_GREEN);
} // indicated touch position
void marker(unsigned short x, uint16_t y, int col)
{
tft.setTextColor(col); // set marker color
tft.drawLine(x-8, y, x+8, y, col); // draw horizontal line
tft.drawLine(x, y-8, x, y+8, col); // draw vertical line
}
void loop() // nothing in loop function
{}
Listing 3-6
Calibration of the ILI9341 SPI TFT LCD screen for the XPT2046 library
The sketch in Listing 3-7 has the same structure as Listing 3-5, which uses the TFT_eSPI library. The differences between the sketches are that screen pins, touch pins, and rotation parameters are defined in the sketch, rather than in an external file with the TFT_eSPI library, and that colors are referenced to the Adafruit_ILI9341 and TFT_eSPI libraries. The paint function with the XPT2046 library is more responsive than with the TFT-eSPI library, which is more suited for a screen pointer. The sketch in Listing 3-7 operates with any screen rotation position, but either landscape orientation is recommended.
#include <Adafruit_ILI9341esp.h> // include ILI9341esp and
#include <XPT2046.h> // XPT2046 libraries
int tftCS = D8;
int tftDC = D4;
int tftRST = D0; // define screen and touch pins
int touchCS = D1;
int touchIRQ = D2; // associate tft with ILI9341 lib
touch.setRotation(XPT2046::ROT270); // connections on left
break;
}
}
Listing 3-7
Paintpot with the XPT2046 library
Weather data for several cities
Another example of using the ILI9341 SPI TFT LCD touch screen displays detailed weather information for several cities, with weather data from OpenWeatherMap.org. OpenWeatherMapdata is free to access within limits defined on the website. The OpenWeatherMap data requires a username, a password, an API (Application Programming Interface) key, and the city identity (ID) code. Details on opening an account and obtaining an API key for OpenWeatherMap are available at openweathermap.org/appid. The API key identifies the client to the web server. The city ID is obtained, from the OpenWeatherMap.org website, by entering the city name in the Your city name search box. Select the relevant city, and the city ID is the number at the end of the URL. For example, the Berlin URL is openweathermap.org/city/2950159.
The ESP8266WiFi or WiFi, ArduinoJson, and Time libraries are required for Wi-Fi communication, interpreting JSON (JavaScript Object Notation) formatted data, and calculating the date and time. Both the ArduinoJson library by Benoît Blanchon and the TimeLib library by Michael Margolis are available in the Arduino IDE, with the latter listed under Time. Several data providers format the date and time as the number of seconds since January 1, 1970, the Unix epoch time. The Time library converts the Unix epoch time to the corresponding minute, hour, day, month, and so on.
An example sketch (see Listing 3-8) obtains and displays the ultraviolet (UV) index for Edinburgh from OpenWeatherMap data. If there are problems with the Wi-Fi connection, HTTP request, or data receipt, then a message is displayed. The message instructions are optional and not incorporated in the connect function of Listing 3-9, but the client instructions in bold must be retained. If the instructions
if (!client.find("
"))
{
Serial.println("Received data not complete");
return;
}
regarding a data error are deleted, then they must be replaced with the instruction client.find("
").
The JSON formatted data consists of the name and value pairs, such as lat and 55.95, that form the JSON document, which is defined as the character array, jsonDoc[], in the sketch. The value of a name and value pair is identified by the name and extracted with the instruction jsonDoc['name'].as<x>(), where x refers to float, long, or char* for a real number, an integer, or a string, respectively. For example, latitude = jsonDoc['lat'].as<float>().
In Listing 3-8, the libraries are installed, a Wi-Fi connection is established, and an HTTP request is sent to the OpenWeatherMap server for the Edinburgh UV index. The latitude, longitude, date, and UV index are extracted from the JSON document, received in response to the HTTP request. A comprehensive set of error checks are made regarding establishing the Wi-Fi connection, the HTTP request, the response to the HTTP request, the receipt of the JSON document in the HTTP response, and the extraction of the JSON document.
#include <ESP8266WiFi.h> // library to connect to Wi-Fi network
#include <ArduinoJson.h>
WiFiClient client; // create client to connect to IP address
char ssid[] = "xxxx"; // change xxxx to your Wi-Fi SSID
char password[] = "xxxx"; // change xxxx to your Wi-Fi password
String APIkey = "xxxx"; // and xxx to openweathermap API key
char server[]="api.openweathermap.org";
String output;
void setup()
{
Serial.begin(115200); // Serial Monitor baud rate
WiFi.begin(ssid, password); // initialise Wi-Fi and wait
while (WiFi.status() != WL_CONNECTED) delay(500); // for Wi-Fi connection
Serial.print("IP address: ");
Serial.println(WiFi.localIP()); // Wi-Fi network IP address
Serial.println("Connecting...");
client.connect(server, 80); // connect to server on port 80
if (!client.connect(server, 80)) // connection error message
Listing 3-9 displays OpenWeatherMap data for a selected city with weather information displayed on different screens. The first screen displays the current minimum and maximum temperature and the forecasted weather, with the current humidity and pressure. The second screen displays cloud cover, the wind speed and direction, and more details on forecasted weather, with sunrise and sunset times. A city is selected from the city abbreviations on the right of the screen, and the screen displays are alternated by touching the ⊕ symbol on the left of the screen. The sketch is lengthy, due to processing the comprehensive weather data, and is split into functions to make the sketch more readily interpretable. The weather information is reduced by deleting the secondScreenfunction and the reference to it in the getWeather function.
The first section of the sketch includes the libraries and defines the screen and touch pins, OpenWeatherMap API key, and city identity codes. The first element of the days and mths arrays is a blank, so that days[1] and mths[1] correspond to Sunday and January, respectively. The setup function establishes the Wi-Fi connection, initializes the touch screen, and incorporates the touch screen calibration parameters obtained in Listing 3-4. The loop function calls the checkTimefunction to determine if the required time has elapsed since the screen was last refreshed and the selected city. The connect function sends a GET HTTP request to the OpenWeatherMap server, incorporating the API key, and downloads the JSON-formatted data for display on the ILI9341 SPI TFT LCD screen. The JSON-formatted data from OpenWeatherMap is displayed with the following instructions:
String output
serializeJson(jsonDoc, output)
Serial.println(output.length())
Serial.println(output)
An example of OpenWeatherMap JSON-formatted data is
Values are referenced according to the class outside the curly brackets, {}, the category within the curly brackets, and the variable name, with each term enclosed by square brackets, [ ]. For example, the humidity value of 62 is referenced as [“main”][“humidity”]. The weather class may have two levels, referenced as [0] and [1]. Times are expressed in Unix epoch time. For example, the sunrise value of 1591846048, referenced as [“sys”][“sunrise”], is 04:27 GMT on June 11, 2020.
JSON-formatted data is equated to a string, float, or unsigned long, such as
String weather = jsonDoc["weather"][0]["main"]
float temp = jsonDoc["main"]["temp"]
unsigned long srise = jsonDoc["sys"]["sunrise"]
and displayed with a print instruction, for example, Serial.println(weather). JSON-formatted data is displayed directly by including the data reference and the output format in the print instruction, for example
The structures of the firstScreen and secondScreen functions are the same (see Figure 3-3). The citySquare function clears the screen; displays the list of city abbreviations, using the screen function that positions and displays strings; and draws a rectangle around the selected city abbreviation. The Unix epoch time for the weather update is converted to day, date, and time and displayed on the screen. Weather data is extracted from the JSON document, and the screen function positions and displays the string in the required color. To maintain text positioning, text is padded with blanks using the addbfunction. To make the functions in Listing 3-9 more readily interpretable, the first part of the instruction screen("variable" is in bold.
Figure 3-3
OpenWeatherMap information by screen
#include <ESP8266WiFi.h> // include ESP8266WiFi library
#include <ArduinoJson.h> // include JSON library
#include <TimeLib.h> // include TimeLib library
#include <TFT_eSPI.h> // include TFT_eSPI library
TFT_eSPI tft = TFT_eSPI(); // associate tft with TFT-eSPI lib
else screen(desc,TFT_WHITE,20,205,2); // font size depends on text length
if(desc2 == "null") desc2="";
addb = blank(desc2);
desc2=desc2+addb;
if(desc.length()<13 && desc2.length()<13)
screen(desc2,TFT_WHITE,5,235,3);
else screen(desc2,TFT_WHITE,5,235,2);
screen("sunrise",TFT_GREEN,20,270,2); // sunrise time
text = String(minute(srise));
if(minute(srise)<10) text = "0"+text;
text = String(hour(srise)+1)+":"+text;
screen(text,TFT_WHITE,40,295,2);
screen("sunset",TFT_GREEN,140,270,2); // sunset time
text = String(minute(sset));
if(minute(sset)<10) text = "0"+text;
text = String(hour(sset)+1)+":"+text;
screen(text,TFT_WHITE,150,295,2);
}
void citySquare() // display header and city abbreviations
{
tft.fillRect(2,2,235,315,TFT_BLACK); // clear screen apart from frame
// display city abbreviations
for (int i=0; i<Ncity; i++) screen(city[i],TFT_YELLOW,210,10+i*25,2);
for (int i=0; i<Ncity; i++) tft.drawRect(208,8+i*25,29,19,TFT_BLACK);
// draw rectangle for selected city
tft.drawRect(208,8+cityNow*25,29,19,TFT_WHITE);
screen("X",TFT_YELLOW,7,31,2); // draw X with circle
tft.drawCircle(11,37,11,TFT_WHITE);
unsigned long stime = jsonDoc["dt"]; // time in secs since 1 Jan 1970
hr = hour(stime)+1;
mn = minute(stime);
dy = day(stime); // convert time
wkdy = days[weekday(stime)];
mth = mths[month(stime)];
text = wkdy+" "+String(dy)+" "+mth; // display day, date and time
screen(text,TFT_YELLOW,10,5,2);
text = "at "+String(hr)+":"+String(mn);
if(mn<10) text = "at "+String(hr)+":0"+String(mn);
screen(text,TFT_YELLOW,60,30,2);
}
// function to position and display strings
void screen(String text, unsigned int color, int x, int y, int size)
{
tft.setCursor(x, y); // position cursor
tft.setTextColor(color,TFT_BLACK); // background color: black
tft.setTextSize(size);
tft.print(text);
}
String blank(String txt) // function to add spaces to text
{
String addb = "";
int len = 12-txt.length(); // add up to 11 spaces
for (int i=0;i<len;i++) addb=addb+" ";
return addb;
}
Listing 3-9
OpenWeatherMap information
Summary
The Wi-Fi functionality of the ESP8266 and ESP32 microcontrollers enabled Internet access to weather data from OpenWeatherMap. The ILI9341 SPI TFT LCD touch screen function enabled a city to be selected from the touch screen menu. The JSON-formatted weather data was extracted and displayed on the ILI9341 SPI TFT LCD screen. Use of the TFT-eSPI and XPT2046libraries illustrated two screen calibration processes and differences in ILI9341 SPI TFT LCD touch screen function applied to a screen painting example.
Components List
ESP8266 microcontroller: LOLIN (WeMos) D1 mini or NodeMCU board
ESP32 microcontroller: DEVKIT DOIT or NodeMCU board
The 2.4-inch ILI9341 SPI TFT LCD touch screen with 240 × 320 pixels has touch screen functionality for displaying text and drawing shapes with different colors on the screen. The acronyms SPI, TFT, and LCD represent Serial Peripheral Interface, Thin-Film Transistor, and Liquid Crystal Display, respectively. The ILI9341 SPI TFT LCD screen and the ESP8266 and ESP32 microcontrollers operate at 3.3 V, so a logic-level converter is not required. Connections for the ILI9341 SPI TFT LCD screen with the ESP8266 and ESP32 development boards are shown in Figures 3-1 and 3-2 and given in Table 3-1. Note that the microcontroller SPI MOSI, MISO (Main-In Secondary-Out), and serial clock (SCL) pins are connected to both the display and the touch function pins of the ILI9341 SPI TFT LCD screen.
The sketch in Listing 3-5 draws images on the ILI9341 SPI TFT LCD screen when the screen is pressed with a screen pen, with colors selected from a color palette. The first section of the sketch installs libraries and defines the touch screen pins and the paintbrush size. The setup function sets the touch screen orientation and incorporates the touch screen calibration parameters obtained in Listing 3-4. When a screen press is detected, the touch position is identified; and if the x co-ordinate is less than 20, then the screen was pressed on the color palette and the selected color, mapped to the y co-ordinate, is subsequently used for drawing on the screen. Color codes are available in the file TFT_eSPI.h of the TFT_eSPI library. The clear function resets the screen, displays the title, and redraws the color palette. Have fun painting!
Another example of using the ILI9341 SPI TFT LCD touch screen displays detailed weather information for several cities, with weather data from OpenWeatherMap.org. OpenWeatherMap data is free to access within limits defined on the website. The OpenWeatherMap data requires a username, a password, an API
(Application Programming Interface) key, and the city identity (ID) code. Details on opening an account and obtaining an API key for OpenWeatherMap are available at openweathermap.org/appid. The API key identifies the client to the web server. The city ID is obtained, from the OpenWeatherMap.org website, by entering the city name in the Your city name search box. Select the relevant city, and the city ID is the number at the end of the URL. For example, the Berlin URL is openweathermap.org/city/2950159.