Line in TouchGFX is a widget that allows an application to draw a straight line between two points and can either use an image or a single color to as a fill type.
This article describes how to create and configure a
Line with the TouchGFX Designer, and gives a few pointers on how user code can be used to alter a
Line in an application at runtime.
Line is located under Shapes in the TouchGFX Designer.
|Image & Color||Select to use an image or a color as fill type including the specific image or color.|
Configure the appearance of the
Line is selected and place on the TouchGFX Designer canvas the properties from table 1 are used to configure the
Line. Determining the area wherein the
Line can be drawn, is done by adjusting the properties under "Location". To set the location of the
Line, the coordinate properties X and Y determines where the top left corner of the
Line is placed. The size of
Line is determined by the properties W (width) and H (height).
In the picture below, an example of adjusting the location of a
Line is shown. The area for
Line is marked by the blue dotted line.
Modifying "Location" properties in TouchGFX Designer
Setting the "Location" of the
Line only changes the area in which the
Line is drawn inside. To configure the appearance of the actual
Line, the properties under "Appearance" are used. The length and angle of the
Line is set by setting the coordinates under "Start Position" and "End Position" and the
Line is drawn between the two points. The width of the Line is set with the property "Line Width". The start- and end-cap style for the line, is change under "Cap Style" which has the three options Butt (), Round () and Square (). The opacity of the
Line is configured under "Alpha", where 255 is solid and 0 is completely transparent (i.e. invisible).
In the picture below shows an example of a
Line in the same location as earlier, with its "Appearance" changed to draw a solid line from the top left corner of the area to the bottom right corner.
Line in the TouchGFX Designer drawn from the top left corner to the bottom right, of its area on the left and the "Appearance" configuration for the
Line on the right.
Changing the fill type for the
Line can either be done by selecting a color to fill the entire line with or use an image. Both fill types are selected under the property "Image & Color".
Below is an example of using a color as the fill type, which is done via the color picker.
Line with the fill type color on the left matching the selected color in the color picker on the right.
With the color picker, there are three ways of setting the color of the
- By using the two images to select the Hue, Saturation and Value
- By insert a the Hex value in the bar below the Saturation and Value image
- By setting the RGB value with the sliders or the text boxes next to the sliders.
Using an image as a fill type is done by either selecting an image from the TouchGFX Designer skins or by importing a custom image. When selecting an image the fill inside the line is the area of the image which the line covers. If the line stretches beyond the border the image nothing is drawn.
The two images below illustrate using an image as fill for
Line. The first image is the image which is used as fill for the line, and the second image is a
Line using the selected image as fill thereby showing part of the image.
The image that is used as fill for the
Line with the previous image as the fill on the left, and the image selected under the "Image & Color" property on the right.
The properties for
Line which is configured with the TouchGFX Designer throughout this article, can also be configured with user code and thereby change a
Line dynamically. This way it is possible to change the start, end, width, line width, color etc. of the
A part of tutorial 3 describes how to dynamically change the start and stop angle for a
Circle, which is based on some of the same conpects as
Line, and the Line and Circle Example, which can be downloaded from the TouchGFX Designer, shows the effect of changing different properties at runtime.
- Canvas Widgets explains how the concepts Canvas Widgets work, which is used to draw
- Designer Generated Code describes how to interact with the code generated by the TouchGFX Designer with user code.
- See API reference for
Linefor exhaustive list of methods that can be used when working with
Linein user code.