Series: Tried Using Touch Panel TFT Display GT-SP with Arduino

Display values obtained from Arduino in a highly visible design

Display values obtained from Arduino in a highly visible design

Hello everyone, I’m @kissaten, a beginner in electronics. In this series, I’m explaining the process of connecting a 7-inch touch display (GT-SP series “GTWV070S3A00P”) to an Arduino and working on various projects.

Last time, we created a project that reads temperature and humidity from the DHT11 temperature and humidity sensor module and displays it on the screen. This time, I will introduce the process of adding decorations such as changing text color and bars.

Please note that this article is a continuation of the previous one (“Displaying DHT11 Sensor Module Values on Touch Screen“). If you haven’t seen the previous content yet, you can check it out here.

Decorating with GT Design Studio

This time, to decorate the sensor values, we will make some design adjustments in GT Design Studio. Specifically, we will change settings in GT-SP such as background images, font registration, and font size.

Additionally, we will also change the text color based on certain temperatures. This will be done through the Arduino program.

Object Placement

First, we place the objects. Ultimately, the image below shows the placement of text objects and bar objects.

The object assignments are as follows:

  • Object 0 … TEXT_0
  • Object 1 … TEXT_1
  • Object 2 … TEXT_2
  • Object 3 … TEXT_3
  • Object 4 … BAR_0
  • Object 5 … BAR_1

TEXT_1 and TEXT_3 each have a default numerical value of “0.0 deg C” and “0 %” respectively.

Adding a Background Image

The background image for the page is registered in the properties.

After selecting the page object “PAGE_0”, clicking the blank part of the “Image” column in the “Image” group of properties will open the image registration screen.

In the IMAGE Select window, you register an image using the “Add” button. This time, I registered a PNG file of size 800×480 as shown below.

After selecting the registered image, pressing the “Select” button at the bottom right of the IMAGE Select window will display it as the page background image.

Registering User Fonts

This time, instead of the default font, I tried registering a free PC font as a user font for the various text objects.

First, prepare the font you want to register. This time, I downloaded the “Melete” font from the following site:

Next, from “Font” at the top of the GT Design Studio screen, display the registration screen.

Then press “User_0” and then the “Edit” button at the top left.

In the next screen, from the Convert Setting section, select the font you want to register from the dropdown under ①Font.

Then, pressing the red inverted triangle “Convert” button ② below will convert the font and display it in the preview.

Here, change the “Height,” “Size,” and “Margin Right” until it reaches the desired size.

Finally, register the user font by pressing the ③ “Set Font Data” button at the bottom right.

This time, I set USER_0 to the PC font “Melete Light” with a Height of “80,” Size “40,” and “Margin Right” of “10”. For USER_1, I set the PC font “Melete Medium” with a Height of “24,” Size “16,” and “Margin Right” of “5.”

After registration, press the “All Set” button at the bottom right.

Using User Fonts

The registered fonts can be selected and used from the properties of the text object. Below is the property screen for TEXT_1.

In the properties, select “Text0” > “Text 0 Size” Value and set it to “USER0<5>”. This applies the USER_0 user font we registered earlier. Since there are four text objects this time, each has been selected as follows:

  • TEXT_0  —– USER1<6> (Melete Medium)
  • TEXT_2  —– USER1<6> (Melete Medium)
  • TEXT_1  —– USER0<5>  (Melete Light)
  • TEXT_3  —– USER0<5>  (Melete Light)


Changing Colors

Next, we change the color of the text.

You can set this from the COLOR Select window that appears when you click the square in the IMG column of “Color” > “Text Color” (which is black by default).

You can set the desired color by selecting it and pressing Set at the bottom right. This time, I set “green (0x0000FF00)” as the Text Color for TEXT_1 and TEXT_3. The background color is set similarly with “Back Color”.

Adjusting the Design of the Bar

We will keep the bar object’s color as default for this time.

However, the default bar displays values within it, which we want to remove.

Select the bar object and set the ‘Style’ > ‘Text Format’ property to ‘Blank<0>’. This will hide the values displayed inside the bar.

Design Confirmation

Ultimately, we achieved a preview screen like the one above.

The objects TEXT_1, TEXT_3, BAR_0, and BAR_1 serve as the recipients for the values transmitted from the Arduino, so there’s no need to set event actions for them.

Creating a Project that Writes to the Touchscreen

Following the program written in the previous article, I made the text object’s color change depending on conditions. I also made it send values to the bar object.

As a condition, if the temperature exceeds 21 degrees, the text object’s color turns red. Also, if the humidity falls below 36%, the text object’s color turns red.

Here is the program.

Interpreting the Program

From the last program, we added sections to change the text color based on temperature and humidity values and to send numbers to the bar object. These are the sections starting with “if (temperature >= 21.0) {” and “if (humidity < 36) {“, as well as the “int tempbar” and “int humbar” parts.

Also, we’ve added the “gtsp_ObjPrpSet_val” function this time. For example, “gtsp_ObjPrpSet_val(1, 0x50, 4, 0x00FF0000);” sends a command to change the text color property No. “0x50” for text object 1 to red color “0x00FF0000” (FF0000 in hexadecimal).

For “int tempbar = map(temperature, 0, 30, 0, 100);”, we are using the Arduino’s map function to map the temperature range from 0 to 30 degrees to a scale from 0 to 100. This determines the position of the bar.

In this case, the range is only from 0 to 30 degrees. If you need to measure a different range, you can adjust the values of 0 and 30 accordingly.

Execution Results

Although the numbers that appear are the same as in the previous article, changing the color and size of the text has increased visibility. Also, being able to actively check the increase and decrease of numbers with the bar is a good feature.

Next time, we will try a project to control a servo motor from the display.