Using the GMSI.NET Angular Gauge - Part 1

Special Note: This tutorial is aimed at showing a software developer how easy it is to configure a GMSI.NET component and how much flexibility these components provide. Please keep in mind that these are software components, NOT complete applications.

1. Place an Angular Gauge GMSI.NET Control on a form. Resize the Angular Gauge to suit your needs. This Angular Gauge control is Size (240, 192)







2. Either click the Advanced Configuration link in the Angular Gauge property browser, or simply right click the control and choose Advanced Configuration. From here you will have control of Scales, Needles, Annulars, Ticks, and Captions, which will all be used for this control. Left-click the Advanced Configuration window and drag it off of the control to see the real-time changes.


3. First, click on the Control property and under Appearance change the BackColor to a dark gray or black. For all color choices, you can choose from the System color set, the Web color set, and the Custom color set by clicking the tabs at the top of the drop-down color menu.






4. Then Click on the angularScale1 property
   • Under Misc change the MaxValue property to 140.


5. Next, click on the angularTick1 property
   • Under Appearance change the BackColor to white.
   • Under Label change LabelColor to white and LabelRadius to 0.75either using the drop down slider that is available for many of the properties concerning placement or by typing directly into the field.
   • Under Misc change the Delta to 20, InnerRadius to 1, the OuterRadius to 1.17, and the StopValue to 140.


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


7. Click on the Annular property and click the Insert New button three times. This will add three annulars named annular1, annular2, and annular3.


8. Click on annular1.
   • Under Appearance change the BackColor to white.
   • Under Misc change the InnerRadius to 1.12, the OuterRadius to 1.17, and StopValue to 180 so it will wrap all the way around the angularScale.


9. Click on annular2.
   • Under Appearance change the BackColor to Gray.
   • Under Misc change the InnerRadius to 1.165, the OuterRadius to 1.22, and StopValue to 180.


10. Click on annular3
    • Under Appearance change the BackColor to dark gray and the BorderType to RaisedThin.
    • Under Misc change the InnerRadius to 0, the OuterRadius to 0.15, and StopValue to 180.


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


12. Click on the Ticks property and click the Insert New button . This will add another angularTick named angularTick2.






13. Click on angularTick2
    • Under Appearance change the BackColor to white.
    • Under Label change the LabelType to Text.
    • Under Misc change the InnerRadius to 1.05, the OuterRadius to 1.17, the Delta to 10, and the Stop Value to 140.
    • Now the first angularScale is complete and should look like this.


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