If you are having issues with the exercises, please create a ticket on DevZone:
Click or drag files to this area to upload. You can upload up to 2 files.

Exercise 2 – Interfacing with a TFT screen

In this exercise, we will use, connect, and control the ILI934X TFT controller via the SPI interface. We will use a 2.8” Adafruit TFT screen shield. The shield is compatible with the arduino-compatible-interface available on Nordic DK’s, which simplifies the hardware connections.

ILI934x Screen Controller: Adafruit 2.8” TFT Screen Sheild

The image below shows the 2.8” TFT screen that we are using in this exercise.

2.8” TFT Screen Shield (Back)
2.8” TFT Screen Sheild (Front)

Although the module also supports the capacitive touch, we will only use it as a display screen in this exercise. To use this screen, we will be using the overlay that is extracted from the shield Devicetree structure. The module is based on the ILI9431 TFT Controller.

The ILI9341 controller is a 262K color single-chip SoC driver for a TFT screen with a resolution of 240×320 RGB dots. It is comprised of a 720-channel source driver, a 320-channel gate driver, and has 172 kilobytes of GRAM (graphic memory) for display data.

Looking at the datasheet of the controller, the controller supports many different types of interfaces, e.g. with the 8086 based systems, and also provides serial interfaces for microcontrollers and supports a different number of lines (e.g data lines). The serial interface itself supports both a 3-wire and 4-wire interface. However, the configuration of the ILI controller on the shield that we are using is for a 4-wire, 8-bit data serial interface (called type II as per the datasheet).

On the ILI9341 controller side, which should act as a slave device for our DK, the pins used for communication are: Data/Command selection input (D/CX), Chip-Select signal input (CSX), the Serial-clock input (SCL), Serial-data input (SDI) and Serial-data output (SDO). Using the D/CX signal, we can send a command or data byte to the TFT controller.


Do not be confused by the naming. The screen (2.8” Adafruit shield) has a TFT controller on it. However, this (screen) will act as an SPI slave and our DK will be the SPI master.

Serial Interface

As the ILI9341 controller supports several interfaces, the selection is made by setting the IM[3:0] pins. On the shield, these pins are configured to be “1110” which refers to the Serial interface type II that offers 8-bit bi-directional communication and uses 5 following lines:

  • D/CX (Data / Command selection)
  • CSX (Chip enable signal)
  • SCL (Serial clock input)
  • SDI (Serial data input)
  • SDO (Serial data output)

The figure below is taken from the datasheet of the ILI9341 TFT controller and shows the timing diagram for SPI communication, sending a command, and reading data afterward.

ILI9341 controller SPI communication

The figure below shows the setup for SPI connection where parallel-data lines are grounded and not used. This is the configuration used on the shield.

TFT Shield: ILI9341 controller configuration on the shield

As the shield supports the SPI interface and easily fits onto the Nordic DK, we don’t need to worry about these connections, we just need to setup the overlay.

The write mode of the interface means that the host writes the command or data to the ILI9341. If the D/CX bit is “low,” then the transmission byte is interpreted as a command byte. If the D/CX bit is “high”, then the transmission byte is treated as a data byte and is stored in the display data RAM or in the command register as a parameter. Any instruction can be sent in any order to ILI9341, and the MSB is transmitted first. A falling edge on CSX enables the serial interface and indicates the start of data transmission. The figure below shows the data format for the 4-wire serial interface.

All of the details about the shield and the TFT controller could not be described here. For further information on that, please refer to their datasheet / technical documentation. Here, we will focus on the use of TFT for our exercise.

ILI Commands

The full list of commands supported by the ILI controller is listed in the datasheet. We will mention some of the important commands that we will use in the exercise:

Display OFF (0x28): The command is used to enter into DISPLAY OFF mode. In this mode, the output from the Frame Memory is disabled, and a blank page is inserted. The figure below shows the effect of the command. The contents of the Frame Memory will stay the same.

Display ON (0x29): The command is used to recover from the DISPLAY OFF mode. In this mode, the output from the Frame Memory is enabled. The figure below shows the effect of the command. The contents of the Frame Memory will stay the same.

Column Address Set (0x2A): The command is used to define the column address of the Frame Memory area that the MCU can access. After the command byte, we need to send 4 bytes as command parameters. These 4 bytes are SC_UpperByte, SC_LowerByte, EC_UpperByte, and EC_LowerByte, where the SC refers to the starting column, and the EC refers to the ending column. These values (of SC and EC) are used when a memory write command is issued. So basically, before writing, we need to set the area where we want to write, and this command will set the column addresses. The figure below shows the illustration of this command.

Page Address Set (0x2B): The command is just like the Column Address Set command except that it refers to the page (row) starting and ending address. The figure below shows the illustration of this command.

Memory Write (0x2C): This command is used to transfer data from the MCU to the Frame Memory. This command utilizes the SC, EC, SP and EP addresses set by the above two commands. The command follows N parameter values where each value is 18-bit color information. The flowchart below shows the use of this command along with the above two commands.

Exercise steps

Open the code base of the exercise by navigating to Create a new application in the nRF Connect for VS Code extension, select Copy a sample, and search for Lesson 5 – Exercise 2.

1. Enable drivers and increase heap

1.1 Enable the SPI and GPIO driver.

Just like in the previous exercise, we want to include the SPI and GPIo drivers by enabling the following Kconfings in the prj.conf file

1.2 Enable the display drivers and increase the memory heap.

Include the display drivers and increase the memory heap size for storing buffers.

Add the following in the prj.conf file

2. Create an overlay file for your board.

In the boards directory of the application, rename the overlay file to the name of the build target for the board you are using, for example nrf52840dk_nrf52840.overlay.

We have obtained the following code snippet from the shield overlay. We can see that ILI9340 and SDHC are two nodes configured under the spi3 controller. CSX pin for ILI9340 is 0x10, while the D/CX (data/command) pin for the ILI9340 is 0xf, both at arduino-header. We can also see other information like the width and height of the screen and the SCK, MOSI, MISO pins used for the spi3.

Add the following contents to it

nRF52 DK
nRF52833 DK
nRF52840 DK
nRF5340 DK
nRF7002 DK
nRF9160 DK
nRF9161 DK

Next, we will complete the custom source code file. Please open the ili_screen_controller.c file and perform the following steps.

3. Add the relevant header files.

3.1 Include the header files for SPI, GPIO, and devicetree.

Add the following code snippet in ili_screen_controller.c

3.2 Include the display drivers and custom header file.

Add the following code snippet in ili_screen_controller.c. The byteorder.h is used to convert the endianness of the data where required.

4. Create the function spi_ctrl_transmit() to transmit commands and data over SPI.

We want to create a function that takes in the SPI device pointer, a 1-byte command, optional data pointer, and length and calls the underlying GPIO and SPI functions to transmit the command to the screen.

4.1 Declare and configure the transmit buffers with command parameters.

Before sending the command, we must configure the transmit buffers for SPI accordingly. Note that the transmit buffers will point to the command byte, and we are transferring 1-byte only.

Add the following code snippet in spi_ctrl_transmit().

4.2 Set the GPIO pin for the command and write using spi_write_dt().

Next, we write the command using the transmit buffers we set in the previous step and using the spi-configuration that we received via the device struct (dev->config->spi).

First, we set the D/CX (data/command) pin (found in &config->cmd_data) to ‘1’ to say that the byte being transferred is a “command” and then we write using the spi_write_dt() function.

Add the following code snippet in spi_ctrl_transmit().

4.3 Transmit the data that follows the command, if any.

After the command, we need to transmit the data that follows it, if any. Therefore, we check if there is data to send (i.e. tx_data is not empty), then we transfer the whole data by (a) setting the transmit buffers (b) setting D/CX pin for data, and (c) calling spi_write_dt().

Add the following code snippet in spi_ctrl_transmit().

5. Call spi_ctrl_transmit() to transmit the column set and page set commands.

Next, in the ili_ctrl_setmem() function, we will transmit the CASET (column set) and PASET (page set) commands using the spi_ctrl_transmit() function that we have just completed.

Add the following code to ili_ctrl_setmem().

6. In screen_write(), call spi_ctrl_transmit() to send the RAMWR command.

The last function in the ili_screen_controller.c file is screen_write(), which takes the device pointer, starting coordinates (x,y) descriptor, and buffer, and calls ili_ctrl_setmem() to set the active area and writes the buffer into the active area memory using spi_ctrl_transmit().

Call the spi_ctrl_transmit function to send the write command (RAMWR) to write pixel information to the buffer that will be displayed accordingly.

Add the following code in screen_write().

Notice that afterwards, we are setting the SPI transmit buffers and writing using spi_write_dt() function which will actually send the buffer (buf) as the command parameters.

Now is the time to complete the code in main.c. The subsequent steps should be done in the main.c file.

7. Include the header file for the ili_screen_controller module.

In order to call the functions that we defined in ili_screen_controller.c from main.c, we need to include the header file of the module, ili_screen_controller.h at the top of main.c.

Add the following line to main.c

8. Write background values to screen (row by row).

The function set_background_color() takes in the device pointer for the screen and its display capabilities and sets the background color (defined as BKGCOLOR). We first set the memory buffer with the background color (greyscale) and then we want to call the screen_write() function to write this buffer to a row. We write the same buffer to all of the rows in a loop and then release the buffer memory at the end.

Add the following code snippet inset_background_color() to complete the function.

9. Display a diagonal line given a starting location (x,y).

In the draw_diagonal_line function, we want to draw a line starting at pixels (uint8_t x,uint8_t y) and of length nump (number of pixels).

First, we set a buffer for a single pixel and fill it with DLINECOLOR.

Then we want to call screen_write() in foor-loop to display the pixel at (x,y) location and then update the coordinates, to display a new pixel diagonally at the next iteration.

Add the following code snippet in draw_diagonal_line() to complete the function

10. Display multiple straight lines with screen_write().

The draw_lines() function displays multiple straight lines. It takes in the starting coordinates (x,y), the size of the lines in pixels, w, the difference of pixels between respective lines, dy, and the total number of lines to draw,numl.

After setting the buffers, we want to call screen_write() in a for-loop and decrease the y-coordinate by dy so that we see multiple lines (stacked upon each other).

Add the following code in draw_lines() to complete the function

11. Draw a rectangular box, given the top left-hand corner (x,y).

In the draw_box() function, we want to draw a complete rectangular box given the top left-hand corner (uint8_t x, uint8_t y), the width uint8_t w, and the height uint8_t h.

To do this, it is only necessary with one call to screen_write(), because display_buffer_descriptor buf_desc contains information about the width and heigh of the box.

Add the following code snippet in draw_box() to complete the function

12. Obtain the screen node from the devicetree.

In main() function, we obtain the screen device instance from the node label ili9340

Add the following code snippet

13. Observe that we call the previously defined functions one-by-one.

In main(), observe that we are calling the previously defined functions one-by-one:

  • set_background_color() – Set the background color
  • draw_diagonal_line() – Draw a diagonal line, 100 pixels long, starting at (20,20)
  • draw_lines() – Draw 25 lines, all 80 pixels wide, starting at (100,100) with 3-pixel distance
  • draw_box() – Draw a rectangular box, starting at (100,100)


14. Install the screen on top of the DK and turn on the DK

Install the screen as a shield on top of a Nordic DK using Arduino I/O interface. Essentially the screen will be upside up and the 6pin female connector on the shield will be connected with the 6pin male connector on the DK. See below for reference:

Nordic DK and Shield: 6pin connectors are highlighted.

Afterwards, turn ON the DK and notice that screen lights up white.

15. Build and flash the application to the board.

We see the correct output on the screen, which shows:

  • setting of the background color
  • drawing a pixelated diagonal line starting at (20,20) and of length 100 (num_pixels)
  • a series of lines one-by-one on top of each other starting at (100,100), i.e. a stack of 25 lines (num_lines)
  • displaying a rectangular box starting at (30, 130)

The log output should look similar to below

The solution for this exercise can be found in the GitHub repository, lesson5/inter_less5_exer2_solution.

Register an account
Already have an account? Log in
(All fields are required unless specified optional)

  • 8 or more characters
  • Upper and lower case letters
  • At least one number or special character

Forgot your password?
Enter the email associated with your account, and we will send you a link to reset your password.