Call us! 512-349-0334 or (877) INDUSOFT

Building a Rotating Indicator for Your InduSoft Web Studio Project

Sometimes an application calls for a rotating indicator, and this is especially true in some alternative energy or vehicle control applications. This can be a tricky indicator to build, since there is some detail needed in the instrument that is not obvious at first glance.

Download the Rotating Indicator for InduSoft Web Studio

The following example shows how a Ship’s Heading Indicator can be built using InduSoft Web Studio. The example uses a ship as the stationary point on the indicator with the dial rotating around it, indicating where “North” is, which direction the ship is actually headed, and what direction it is being steered. Here is how the instrument is laid out:

r1 r2

There are several details that need to be observed before we can discuss how to address them. First on this indicator, notice that the names for the cardinal points are wider than they are taller, and yet they need to maintain the same distance from the blue circle. Additionally, notice that the lines that point to the cardinal directions are varying in length. Because the outside ring moves around the stationary ship, these lines need to resize in order to maintain the same distance from the cardinal point names. Next, the degree indicators (e.g., 000, 010, 020, etc.)  are set every 10 degrees apart and are a specific distance from the center, and also need to rotate around the stationary ship.

Thirty-six rectangles are created, 1 for each of the degree indicators from 000 to 350 and are assigned a Visibility/Position Animation. In order to make them stationary at the opening of the screen and in their unique place, each one is given a trigonometric expression which will determine it’s position, plus an offset measured from the center of the rectangle, which allows it to rotate around the circle.  Notice that the Horizontal and Vertical positions are slightly different, so that the label rectangles will move following an elongated ellipsoidal pattern, slightly narrower in the horizontal, in order to allow for the width of the word being more than the height. These expressions assume that the “0” or starting point is at the bottom of the circle.

r3 r4

These are stacked by aligning the middles and centers, then grouped. The same technique is applied to the cardinal name labels:

r5 r6

Finally, the horizontal and vertical lines indicating the cardinal directions are each repositioned around the center, and then grouped (at the center), where a Resize animation is applied to the group. Notice the expression has changed a bit, and this allows the lines to shrink and grow as they rotate around the instrument:

r7 r8 r9



Selecting all the groups of objects, and then using the Align Middle and Align Center, the object is complete.


A simple script is built to randomly choose directions and a digital indicator from our Free Symbol library in the Online Store is added to complete the demo application:

r11 r12

 A video of the rotating indicator can be seen here.

Comments are closed.