Using the GMSI.NET Angular Gauge - Part 2

Title:	Using the Angular Gauge to create a Speedometer Part 2
Estimated Time:	5 minutes
Video:	Angular Gauge Tutorial - Part 2 (with embedded player - Filesize: 7.1 MB)

Special Note: This tutorial is aimed at showing a software developer how easy it is to configure a Global Majic Software .NET component and how much flexibility these components provide. Remember, these are software components, NOT complete applications.

This tutorial is continued from Creating a Speedometer Part I. It assumes you are starting with the partially completed project created with that tutorial that looks like this:

To add the second angular scale, open the Advanced Configuration windoweither by clicking on the Advanced Configuration link in the Angular Gauge properties browser or by simply right clicking the control and selecting Advanced Configuration. Click on the Scales property in the Advanced Configuration window and click the Insert New button. This will add another angularScale named angularScale2.

Click on angularScale2.
1. Under Misc change the MaxValue property to 220.
2. Then click on Ticks under angularScale2.
3. Click the Insert New button twice to add two more angularTicks named angularTick3 and angularTick4.

Click on angularTick3.
1. Click on angularTick3.
2. Under Label change the Font to 3pt, LabelColor to White, LabelRadius to 0.4, and LabelType to Text.
3. Under Misc change the Delta to 10, InnerRadius to 0.485, OuterRadius to 0.54, the StopValue to 220, and the Width to 0.15.

Note:The LabelRadius, InnerRadius, and OuterRadius of angularTick3 may be slightly different depending on the size of the Angular Gauge.

Note: The LabelRadius, InnerRadius, and OuterRadius of angularTick3 may be slightly different depending on the size of the Angular Gauge.
1. Under Appearance change the BackColor to white.
2. Under Label change the Label Color to white, Font to 3pt., and LabelRadius to 0.4.
3. Under Misc change the Delta to 20, InnerRadius to 0.51, OuterRadius to 0.54, the StopValue to 220, and the Width to 0.15.

Now the second angularScale is complete and should look like this.

Note:The InnerRadius and OuterRadius of angularTick4 may be slightly different depending on the size of the Angular Gauge.

Now we will change the needle1 properties and add two captions.
1. Click on the needle1 property in the Advanced Configuration window
2. Under Appearance change the BackColor to gold, and the BorderType to RaisedThin.
3. Under Misc change the Length to 0.75, and the Style to Pointer.
4. Under Misc change the Length to 0.75, and the Style to Pointer.

Finally click on the Captions property and click the Insert New button twice. This will add two captions named caption1 and caption2.

Click on caption1.
1. Under Misc change the Color to white, then click the expander to the left of Font and change the Size to 3.7 and Bold to true.
2. Change the Position to (0.48, -0.89), and the Text to MPH

Click on caption2.
1. Under Appearance change the Color to white, then click the expander to the left of Font and change the Size to 3.
2. Change the Position to (-0.15, -0.38), and the Text to km/h. The Position of the captions may be a little off depending on the size of the Angular Gauge.

The Speedometer is now complete and should look like this.

Note: The Font and Size of the angularTicks Label can be changed to alter the look of the Speedometer. You can also enable the AntiAlias properties to smooth the lines and text in the control. The Global Majic Software .NET Odometer or NumericLed can also be added to the Speedometer to give it a life-like visual effect.

Using the GMSI.NET Angular Gauge - Part 2

Recently Visited Products

Recently Visited Pages