Dial widget

Here are the steps to utilize the Dial widget:

Drag and drop the Dial widget onto the design view and adjust its size as needed.

Customize the three default layers of the Dial widget (Background, Foreground, and Needle image layer) by adding images.

Dial Widget

In the Advanced Properties section, configure the widget by setting the Direction as Clockwise, mapping the Data variable to “Cur Val,” and defining the Minimum and Maximum range.

Advanced Properties settings

Explore the Advanced tab within the Properties section. For the Foreground Image layer, configure the Rotation , such as Image Style (Radial Clipping-Outside), Pivot, Center, Start Angle, and End Angle. Map the Widget data to Current Angle.

Foreground Layer Properties

In the Needle layer, set the width and height mode to Wrap in Dimensions. Under Rotation, configure the Image Style as Rotated Image, and set the Pivot, Center (axis of Needle image rotation), Start Angle, and End Angle. Map the Widget data to Current Angle.

Needle Layer Properties

Export and simulate the project. The needle and bar will respond based on the data value.

Dial Simulation

Tips - For a quality outcome, it is recommended to have at least one transparent pixel around the needle image (or any other rotating image) to prevent unexpected visual distortions.