Embedding Outline Fonts and Using the Draw Shape Tool

DownloadDownload sample project & program (for GT Design Studio & Arduino)

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.

This time, we will use the outline font embedding function and the draw shape tool of GT Design Studio to create a visually superior interface. Embedding outline fonts makes it easier to resize text, allowing for a more design-focused approach than traditional font-changing methods. The draw shape tool enables intuitive shape creation. As an interface sample, we will design a control panel for amusement park attractions.

Using Outline Fonts

Let’s discuss the features and usage of outline fonts, and how to set them in GT Design Studio.

Overview of Outline Fonts

Outline fonts can be freely resized, offering highly legible text display. They also provide clean, anti-aliased text rendering.

Advantages

• Easy Resizing: With outline fonts, you can easily change the font size from the text object’s properties.
• High-Resolution Support: Outline fonts look beautiful at any resolution, maximizing display performance.

Caution: Font Data License

When using outline fonts, it’s essential to check the font data license as they need to be embedded in the project file. For commercial or shared projects, ensure the font data’s license is appropriately covered.

Outline Font Format

GT Design Studio currently supports only TTF (TrueType Fonts). Ensure that the font you use is in TTF format and set it appropriately.

Previously, user fonts were registered as “USER_0” and required setting size, height, margin right, etc. Now, you set the font in “OUTLINE,” which is below those items.

In the image above, the “Montserrat Medium” font is set to “OUTLINE_0”.

Outline fonts do not require setting font size or height here, as it can be changed in the text object’s properties.

Montserrat Font
https://fonts.google.com/specimen/Montserrat

Practical Usage of Outline Fonts

Let’s use the OUTLINE font. In the above image, the font size for the text object “OUTLINE” is set to “OUTLINE_0” with a size of “80p<83>”.

By opening Text0 > Text0 size and changing “80p <83>” to another size, you can adjust the text size.

Using the Draw Shape Tool

We’ll introduce the shapes available in the draw shape tool and how to set their properties.

Types of Draw Shape Tool Objects

The draw shape tool offers various shapes. The types available in GT Design Studio include:

1. LINE <65>: Line
2. RECT <66>: Rectangle
3. CIRCLE <68>: Circle
4. ARC <69>: Arc
5. PIE <70>: Pie
6. TRIANGLE 1 <71>: (Isosceles) Triangle
7. TRIANGLE 2 <72>: (Right) Triangle
8. PENTAGON <73>: Pentagon
9. HEXAGON <74>: Hexagon
10. RHOMBUS <75>: Rhombus
11. PARALLELOGRAM <76>: Parallelogram
12. TRAPEZOID <77>: Trapezoid
13. ARROW <78>: Arrow

 

Detailed Settings for Special Shapes

Arc (ARC)

• Arc Adjustment: You can freely adjust the curvature and angle of the arc.
• Property Settings:
  • Start Angle: Set the starting angle of the arc.
  • End Angle: Set the ending angle of the arc.

Parallelogram/Trapezoid (PARALLELOGRAM/TRAPEZOID)

• Shape Customization: By precisely setting the angles and sizes, you can create unique designs.
• Property Settings:
  • Top Length: Set the length of the top side. If the value is 0, it will be automatic.

Arrow (ARROW)

• Shape Customization: You can finely set the style of the arrowhead and tail.
• Property Settings:
  • Shape Type2: Choose the shape of the arrow.
  • Top Length: Set the length of the arrowhead. If the value is 0, it will be automatic.
  • Bar Width: Set the thickness of the arrow. If the value is 0, it will be automatic.

Creating Screens with GT Design Studio

Let’s start creating actual screens.

 

When using the draw shape tool, start by placing basic shapes, then make fine adjustments. It’s also essential to set the properties of each object appropriately.

It helps to create sketches like these to visualize the design.

Creation Flow

1. Text Creation and Placement
   • Create text objects and set the outline fonts.
2. Design Creation and Placement
   • Create and place the necessary shapes using the draw shape tool. For this example:
     • RECT: Used to create the background and frames of the control panel.
     • CIRCLE: Used to decorate button objects.
     • TRIANGLE: Used to indicate the flow of operations (STEP) within the control panel.
3. Creating and Placing Operation Parts
   • Create parts for actual operations using button objects and slider objects. For this example:
     • Use button objects and slider objects.

Upper Center Section

Let’s look at the settings for the text object in the center top, labeled “Tea Cup Rides Attraction”.

Set the Text0 Size to OUTLINE_0_28p<75>.

Align the text to the center by setting Text0 Align X to CENTER and Text0 Align Y to MIDDLE.

Upper Left Section

The white rectangle in the top left of the control panel is created using the draw shape tool’s RECT.
Adjust the size and set the properties: Style -> Radius to 10 and Color -> Fill Color to white (#FFFFFF).

Above it, place the text object “POWER”, a black rectangle (#000000) using the draw shape tool’s RECT, and text objects “ON” and “OFF”.

Two circles for the operational part are created using button objects. Place a green button (#007F00) and a red button (#FF007F). Set the size (General -> Size X and Size Y), and for a circle, set the radius to half the size (e.g., size 60×60 with a radius of 30).

Set Style -> Contents Style to FLAT to remove the button’s three-dimensional effect.

 

Upper Right Section

In the top right of the control panel, place a yellow rectangle (#FFFF9F) using the draw shape tool’s RECT and adjust the radius as done for the top left.

Place the text object “RIDE STOP” and a button to the right.

Place a gray circle (#3f3f3f) using the draw shape tool’s CIRCLE and a yellow button (#FFFF00) above it.

Set the circle’s size to 90 and Style -> Frame Width to 10.

Then place the button object on top. Set the button size to 70 with a radius of 35.

Middle Row

The middle row contains STEP numbers for each control panel section, designed to flow from left to right.

Each shape consists of four parts:

• Left: Two TRIANGLE_2 shapes using the draw shape tool, adjusted with Style -> Angle.
• Center: A RECT shape.
• Right: A TRIANGLE_1 shape.

To remove the frame, set Style -> Frame Width to 0.

Place text objects on top.

Lower Row

The lower row arranges switches necessary for attraction operation from left to right.

Use the draw shape tool’s RECT to create frames. Set the background color to transparent (Color -> Fill Color -> Transparent).

• Left frame: Place text and slider objects.
• Center and right frames: Place text and rounded button objects.

 

Actual Design Placement

The image above shows the placement of all objects created in GT Design Studio. By utilizing the draw shape tool, you can freely customize designs and create visually understandable interfaces, providing a user-friendly environment.

DownloadDownload sample project & program (for GT Design Studio & Arduino)

Conclusion

In this article, we introduced the method and benefits of embedding outline fonts and using the draw shape tool, along with an example of designing an interface. By using outline fonts, you can achieve highly legible text display, and by using the draw shape tool, you can intuitively design.

In the next article, we will use the analog meter tool.