Skip to content

Create Display in Program

Building and Flashing the Program

Let's connect a TFT LCD and perform drawing operations.

Here, we will create a sample program that implements a custom command named argtest. It displays the contents of the arguments passed to it.

Create a new Pico SDK project named tftlcd-hardcoded.

Create Pico SDK Project
  1. In VSCode, run >Raspberry Pi Pico: New Pico Project in the command palette.

  2. In the dialog below, select C/C++. new-project-dialog

  3. Create a project with the following settings:

    • Name ... Enter the project name.
    • Board type ... Select your board type.
    • Location ... Select the parent directory where the project directory will be created.
    • Stdio support ... Leave Console over USB unchecked when you use LABOPlatform or other USB features because they conflict with each other. You can enable it by editing the CMakeLists.txt file later.
    • Code generation options ... Check Generate C++ code.

new-project

Open Existing Pico SDK Project

Open the project folder in VSCode using one of the following methods:

  • In a command prompt, change the current directory to the project folder and execute code ..

  • In a Explorer, choose the project folder, push Alt+D to focus the address bar, and execute code ..

    vscode-from-explorer

If the folder is already prepared as a Pico SDK project, just proceed with editing and building the project.

If not, you will see the following message at the bottom right corner of VSCode.

do-you-want-to-import

Click Yes and you will see the following window.

import-project

Click Import and the project will be prepared as a Pico SDK project.

When the Do you want to import this project as Raspberry Pi Pico project? message disappears before you click Yes, you can reveal it by clicking the icon notify-icon at the bottom right corner of VSCode.

Clone the pico-jxglib repository from GitHub so the direcory structure looks like this:

├── pico-jxglib/
└── tftlcd-hardcoded/
    ├── CMakeLists.txt
    ├── tftlcd-hardcoded.cpp
    └── ...
Clone the Repository

Change the current directory to the parent directory where you want to clone the pico-jxglib repository and run the following commands:

$ git clone https://github.com/ypsitau/pico-jxglib.git
$ cd pico-jxglib
$ git submodule update --init --recursive

pico-jxglib is updated almost daily. If you've already cloned it, run the following command in the pico-jxglib directory to get the latest version:

$ git pull

A directory from a Git repository can safely be moved to another location even after cloning.

The breadboard wiring image is as follows:

circuit-st7789.png

Add the following lines to the end of CMakeLists.txt:

CMakeLists.txt
1
2
3
4
target_link_libraries(tftlcd-hardcoded
    jxglib_Shell jxglib_Serial jxglib_ShellCmd_Basic
    jxglib_Display_ILI9341 jxglib_DrawableTest)
add_subdirectory(${CMAKE_CURRENT_LIST_DIR}/../pico-jxglib pico-jxglib)

Edit the source file as follows:

tftlcd-hardcoded.cpp
 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
#include <stdio.h>
#include "pico/stdlib.h"
#include "jxglib/Shell.h"
#include "jxglib/Serial.h"
#include "jxglib/Display/ILI9341.h"
#include "jxglib/DrawableTest.h"

using namespace jxglib;

ShellCmd_Named(draw_rotate, "draw-rotate", "Rotate the image")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::RotateImage(display);
    return Result::Success;
}

ShellCmd_Named(draw_string, "draw-string", "Draw a string")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawString(display);
    return Result::Success;
}

ShellCmd_Named(draw_fonts, "draw-fonts", "Draw fonts")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawFonts(display);
    return Result::Success;
}

int main()
{
    ::stdio_init_all();
    // Prepare the Shell with Stdio
    Serial::Terminal terminal;
    Shell::AttachTerminal(terminal.Initialize());
    // Initialize the display
    ::spi_init(spi1, 125 * 1000 * 1000);
    GPIO14.set_function_SPI1_SCK();
    GPIO15.set_function_SPI1_TX();
    Display::ILI9341 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
    display.Initialize(Display::Dir::Rotate0);
    for (;;) {
        Tickable::Tick();
    }
}

The breadboard wiring image is as follows:

circuit-st7789.png

Add the following lines to the end of CMakeLists.txt:

CMakeLists.txt
1
2
3
4
target_link_libraries(tftlcd-hardcoded
    jxglib_Shell jxglib_Serial jxglib_ShellCmd_Basic
    jxglib_Display_ST7789 jxglib_DrawableTest)
add_subdirectory(${CMAKE_CURRENT_LIST_DIR}/../pico-jxglib pico-jxglib)

Edit the source file as follows:

tftlcd-hardcoded.cpp
 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
#include <stdio.h>
#include "pico/stdlib.h"
#include "jxglib/Shell.h"
#include "jxglib/Serial.h"
#include "jxglib/Display/ST7789.h"
#include "jxglib/DrawableTest.h"

using namespace jxglib;

ShellCmd_Named(draw_rotate, "draw-rotate", "Rotate the image")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::RotateImage(display);
    return Result::Success;
}

ShellCmd_Named(draw_string, "draw-string", "Draw a string")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawString(display);
    return Result::Success;
}

ShellCmd_Named(draw_fonts, "draw-fonts", "Draw fonts")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawFonts(display);
    return Result::Success;
}

int main()
{
    ::stdio_init_all();
    // Prepare the Shell with Stdio
    Serial::Terminal terminal;
    Shell::AttachTerminal(terminal.Initialize());
    // Initialize the display
    ::spi_init(spi1, 125 * 1000 * 1000);
    GPIO14.set_function_SPI1_SCK();
    GPIO15.set_function_SPI1_TX();
    Display::ST7789 display(spi1, 240, 240, {RST: GPIO10, DC: GPIO11, BL: GPIO13});
    display.Initialize(Display::Dir::Rotate0);
    for (;;) {
        Tickable::Tick();
    }
}

The breadboard wiring image is as follows:

circuit-st7789.png

Add the following lines to the end of CMakeLists.txt:

CMakeLists.txt
1
2
3
4
target_link_libraries(tftlcd-hardcoded
    jxglib_Shell jxglib_Serial jxglib_ShellCmd_Basic
    jxglib_Display_ST7735 jxglib_DrawableTest)
add_subdirectory(${CMAKE_CURRENT_LIST_DIR}/../pico-jxglib pico-jxglib)

Edit the source file as follows:

tftlcd-hardcoded.cpp
 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
#include <stdio.h>
#include "pico/stdlib.h"
#include "jxglib/Shell.h"
#include "jxglib/Serial.h"
#include "jxglib/Display/ST7735.h"
#include "jxglib/DrawableTest.h"

using namespace jxglib;

ShellCmd_Named(draw_rotate, "draw-rotate", "Rotate the image")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::RotateImage(display);
    return Result::Success;
}

ShellCmd_Named(draw_string, "draw-string", "Draw a string")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawString(display);
    return Result::Success;
}

ShellCmd_Named(draw_fonts, "draw-fonts", "Draw fonts")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawFonts(display);
    return Result::Success;
}

int main()
{
    ::stdio_init_all();
    // Prepare the Shell with Stdio
    Serial::Terminal terminal;
    Shell::AttachTerminal(terminal.Initialize());
    // Initialize the display
    ::spi_init(spi1, 125 * 1000 * 1000);
    GPIO14.set_function_SPI1_SCK();
    GPIO15.set_function_SPI1_TX();
    Display::ST7735 display(spi1, 80, 160, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
    display.Initialize(Display::Dir::Rotate0);
    for (;;) {
        Tickable::Tick();
    }
}

The breadboard wiring image is as follows:

circuit-st7789.png

Add the following lines to the end of CMakeLists.txt:

CMakeLists.txt
1
2
3
4
target_link_libraries(tftlcd-hardcoded
    jxglib_Shell jxglib_Serial jxglib_ShellCmd_Basic
    jxglib_Display_ST7735 jxglib_DrawableTest)
add_subdirectory(${CMAKE_CURRENT_LIST_DIR}/../pico-jxglib pico-jxglib)

Edit the source file as follows:

tftlcd-hardcoded.cpp
 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
#include <stdio.h>
#include "pico/stdlib.h"
#include "jxglib/Shell.h"
#include "jxglib/Serial.h"
#include "jxglib/Display/ST7735.h"
#include "jxglib/DrawableTest.h"

using namespace jxglib;

ShellCmd_Named(draw_rotate, "draw-rotate", "Rotate the image")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::RotateImage(display);
    return Result::Success;
}

ShellCmd_Named(draw_string, "draw-string", "Draw a string")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawString(display);
    return Result::Success;
}

ShellCmd_Named(draw_fonts, "draw-fonts", "Draw fonts")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawFonts(display);
    return Result::Success;
}

int main()
{
    ::stdio_init_all();
    // Prepare the Shell with Stdio
    Serial::Terminal terminal;
    Shell::AttachTerminal(terminal.Initialize());
    // Initialize the display
    ::spi_init(spi1, 125 * 1000 * 1000);
    GPIO14.set_function_SPI1_SCK();
    GPIO15.set_function_SPI1_TX();
    Display::ST7735::TypeB display(spi1, 128, 160, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
    display.Initialize(Display::Dir::Rotate0);
    for (;;) {
        Tickable::Tick();
    }
}

The breadboard wiring image is as follows:

circuit-ili9341.png

Add the following lines to the end of CMakeLists.txt:

CMakeLists.txt
1
2
3
4
target_link_libraries(tftlcd-hardcoded
    jxglib_Shell jxglib_Serial jxglib_ShellCmd_Basic
    jxglib_Display_ILI9341 jxglib_DrawableTest)
add_subdirectory(${CMAKE_CURRENT_LIST_DIR}/../pico-jxglib pico-jxglib)

Edit the source file as follows:

tftlcd-hardcoded.cpp
 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
#include <stdio.h>
#include "pico/stdlib.h"
#include "jxglib/Shell.h"
#include "jxglib/Serial.h"
#include "jxglib/Display/ILI9341.h"
#include "jxglib/DrawableTest.h"

using namespace jxglib;

ShellCmd_Named(draw_rotate, "draw-rotate", "Rotate the image")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::RotateImage(display);
    return Result::Success;
}

ShellCmd_Named(draw_string, "draw-string", "Draw a string")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawString(display);
    return Result::Success;
}

ShellCmd_Named(draw_fonts, "draw-fonts", "Draw fonts")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawFonts(display);
    return Result::Success;
}

int main()
{
    ::stdio_init_all();
    // Prepare the Shell with Stdio
    Serial::Terminal terminal;
    Shell::AttachTerminal(terminal.Initialize());
    // Initialize the display
    ::spi_init(spi1, 125 * 1000 * 1000);
    GPIO14.set_function_SPI1_SCK();
    GPIO15.set_function_SPI1_TX();
    Display::ILI9341 display(spi1, 240, 320, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
    display.Initialize(Display::Dir::Rotate0);
    for (;;) {
        Tickable::Tick();
    }
}

The breadboard wiring image is as follows:

circuit-ili9341.png

Add the following lines to the end of CMakeLists.txt:

CMakeLists.txt
1
2
3
4
target_link_libraries(tftlcd-hardcoded
    jxglib_Shell jxglib_Serial jxglib_ShellCmd_Basic
    jxglib_Display_ILI9488 jxglib_DrawableTest)
add_subdirectory(${CMAKE_CURRENT_LIST_DIR}/../pico-jxglib pico-jxglib)

Edit the source file as follows:

tftlcd-hardcoded.cpp
 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
#include <stdio.h>
#include "pico/stdlib.h"
#include "jxglib/Shell.h"
#include "jxglib/Serial.h"
#include "jxglib/Display/ILI9488.h"
#include "jxglib/DrawableTest.h"

using namespace jxglib;

ShellCmd_Named(draw_rotate, "draw-rotate", "Rotate the image")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::RotateImage(display);
    return Result::Success;
}

ShellCmd_Named(draw_string, "draw-string", "Draw a string")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawString(display);
    return Result::Success;
}

ShellCmd_Named(draw_fonts, "draw-fonts", "Draw fonts")
{
    auto& display = Display::GetInstance(0);
    DrawableTest::DrawFonts(display);
    return Result::Success;
}

int main()
{
    ::stdio_init_all();
    // Prepare the Shell with Stdio
    Serial::Terminal terminal;
    Shell::AttachTerminal(terminal.Initialize());
    // Initialize the display
    ::spi_init(spi1, 125 * 1000 * 1000);
    GPIO14.set_function_SPI1_SCK();
    GPIO15.set_function_SPI1_TX();
    Display::ILI9488 display(spi1, 320, 480, {RST: GPIO10, DC: GPIO11, CS: GPIO12, BL: GPIO13});
    display.Initialize(Display::Dir::Rotate0);
    for (;;) {
        Tickable::Tick();
    }
}

Running the Program

  • Running draw-rotate displays an image on the LCD. If you enter any key the image will be rotated by 90 degrees and redrawn.

tftlcd-RotateImage.jpg

  • Running draw-string displays Japanese text across the entire LCD screen. You can change the font type, font scaling, and line spacing in the serial terminal.

tftlcd-DrawString.jpg

  • Running draw-fonts displays strings in different fonts on the LCD. You can change the font type and scaling in the serial terminal.

tftlcd-DrawFonts.jpg