Circle in TouchGFX is a widget that allows an application to draw a circle or a partial circle, that can either be filled or outlined. As fill type the
Circle can either use an image or a single color.
The article describes how to create and configure the
Circle widget with the TouchGFX Designer, and gives a few pointers on how user code can be used to alter a
Circle in an application at runtime.
Circle 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
Circle is selected and placed on the TouchGFX Designer canvas the properties from table 1 is used to configure the
Circle. Determining the area for the
Circle, is done by adjusting the properties under "Location". To set the location of the
Circle, the coordinate properties X and Y determine where the top left the corner of
Circle is placed. The size of
is determined by the properties W (width) and H (height).
In the picture below, an example of adjusting the location of a
Circle is shown. The area of
Circle is marked by the blue line.
Modifying Location properties in TouchGFX Designer
The "Location" settings defines the area for
Circle where the actual circle are drawn within. To configure the circle which is drawn within
Circle, the properties under "Appearance" are used. The position of the circle is defined by "Center Position" where the coordinates are relative to the
Circle. Setting a circular arc is done with the property "Start & End Angle" where the two angles both defines where on the circle the arc are and the size. Having a difference at more than 360 degrees between the two angles results in a full circle. The radius of the circle is configured with the property "Radius" which is measured in pixels. If the circle is outlined, the thickness of the line is adjusted with "Line Width" where the radius of the circle is measured from the center of the outline. Setting the "Line Width" to 0 results in a filled circle. If the circle is outlined and has an arc, the cap style used is set under "Cap Style" which has the options Butt (), Round () or Triangle (). The opacity of the
Circle is configured under "Alpha", where 255 is solid and 0 is completely transparent.
In the picture below, an example of a
Circle is shown. The
Circle is at the same location as earlier, with several of the properties under "Appearance" modified.
Circle on the TouchGFX Designer canvas on the left, and the "Appearance" configuration on the right"
The picture shows that the circle is drawn within the defined area. if the circle moves outside of the
Circle area it wil be cut of and only the part of the circle that is inside the area is drawn.
Changing the fill type for the
Circle can either be done by selecting a single color to fill the entire
Circle, 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.
Circle on the TouchGFX Designer Canvas with the selected color on the left and, and the "Image & Color" configuration on the right
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 circle is the area of the image which the circle covers and if the circle stretches beyond the border the image nothing is drawn.
The two images below show how an image is used as fill for a
Circle. The first image is the image which is used as fill for the circle, and the second is the
Circle with the image as fill, thereby showing the part of the image which is covered by the drawn circle.
The image that is used to fill
The Circle on the TouchGFX Designer Canvas with the selected image on the left and, and the "Image & Color" configuration on the right.
The properties for
Circle which is configured with the TouchGFX Designer throughout this article can also be configured with user code. This allow the properties of a
Circle to change dynamically. This could for example be used to change the radius or the arc of the
A part of tutorial 3 describes how to dynamically change the start and end angle for a
Circle, 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 a
- Designer Generated Code describes how to interact with the code generated by the TouchGFX Designer with user code.
- See API reference for
Circlefor exhaustive list of methods that can be used when working with
Linein user code.