Using the GMSI.NET Knob

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. Keep in mind that these are software components, NOT complete applications.

1. Place a Knob GMSI.NET Control on a form. Resize the Knob to suit your needs. This Knob control is Size (264, 232).






2. Either click the Advanced Configuration link in the Knob property browser, or simply right click the control and choose Advanced Configuration. From here you will have control of Scales, Dials, Markers, 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. Click on dial1 and under Appearance change the Dials BackColor to DimGray (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). Then change the BorderType to RaisedThick and the FillType to TextureClamped.
4. Click on the Images property, click Image on the right and then click on the More button. This will open the ImageObject Collection Editor window.
   1. Click the Add button once to create Image
   2. Then, click on Image in the Image Properties box on the right side of the ImageObject Collection Editor window, and click on the More button.
   3. In the Open window, select knobcenter_sil.jpg (this image was included in your GMSI.NET installation and is located in C:/Program Files/Global Majic Software/Graphics) and click Open. Click OK in the ImageObject Collection window.
   4. Click on the Dial1 property.
   5. Click on Picture (under Appearance) and use the drop down menu to choose Image.


5. Click the Marker property under the Dial property and under Appearance change the BackColor to DimGray, the BorderType to RaisedThin, and the FillType to Gradient.
   1. Under Misc, change the MarkInnerRadius to 0.7, and the MarkOuterRadius to 0.77. The Knob should now look like this.
   
   
   
   
   
   Note: The MarkInnerRadius and MarkOuterRadius may be slightly different depending on the size of the Knob.
   
   
6. Next, we will configure the knobScale and angularTicks. Again, in the Advanced Configuration window, click the knobScale1 property and under Misc change the MaxValue to 100.
   1. Click the Ticks property and click the Insert New button. This will add another angularTick named angularTick2.
   2. Click on the angularTick1 property and under Label change the Font to 8pt and the LabelRadius to 1.13. Under Misc, change the Delta to 10, the InnerRadius to 0.86, the OuterRadius to 0.98, the StopValue to 100, and the Width to 0.15.
   3. Now, click on the angularTick2 property and under Label change the LabelType to Text. Under Misc change the Delta to 2.5, the InnerRadius to 0.86, the OuterRadius to 0.92, the StopValue to 100, and the Width to 0.15.
   4. The Knob should now look like this.
   
   
   
   
   
   Note: The LabelRadius, InnerRadius, and OuterRadius of the angularTicks may be slightly different depending on the size of the Knob.
   
   
7. Finally, we will configure the Caption and the Annulars.
   1. Once again in the Advanced Configuration window, click on Captions and then click the Insert New button. This will add a caption named caption1.
   2. Under Misc, Change the caption1 Position property to (0, -1), and the Text, Color and Font to the desired styles.
   3. Click on the Annulars property and click the Insert New button three times. This will add three annulars named annular1, annular2, and annular3.
   4. Click on the annular1 property and change the BackColor to Black. Under Misc, change the InnerRadius to 0.85, the OuterRadius to 0.87, and the StopValue to 100. Click on the annular2 property and under Misc change the InnerRadius to 0.875, the OuterRadius to 0.92, the StartValue to 70, and the StopValue to 85.
   5. Under Appearance change the BackColor to yellow or another preferred color.
   6. Click on the annular3 property and under Misc change the InnerRadius to 0.875, the OuterRadius to 0.92, the StartValue to 85, and the StopValue to 100.
   7. Under Appearance change the BackColor to red or another preferred color.
   8. The VolumeKnob is now complete and should look like this.





Note: The InnerRadius and OuterRadius of the annulars may be slightly different depending on the size of the Knob. The Knobs BackPicture or BackColor and BorderType can be changed to give it a life-like visual effect. You can also enable the AntiAlias properties to smooth the lines and text in the control.


---