Home · Register · Login · Contact

Using the GMSI.NET Odometer

Title: Using the Odometer Component to create, a custom Odometer
Estimated Time: 5 minutes
Video: Odometer Tutorial (with embedded player - Filesize: 5.7 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. Keep in mind that these are software components, NOT complete applications.


  1. Place an Odometer GMSI.NET Control on a form. If the Odometers property browser is not already open, right click the control and choose Properties.
    1. To resize the Odometer, click the expander expander.jpg next to Font (under Appearance) on the Odometer property browser and change the Size to suit your needs.

  2. odometer_step1_wopt.jpg


  3. Within the odometers property browser, change the DigitBackgroundImage (under Appearance) to grad_gray_1.jpg and the DecimalBackgroundImage to grad_gray_2.jpg (this image was included in your GMSI.NET installation and is located in C:/Program Files/Global Majic Software/Graphics). These images produce a realistic odometer-like visual effect.
    1. Under Appearance, adjust the OutlineColor, DigitTextColor, and DecimalTextColor to the desired colors. 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.
    2. The Odometer should now look like this

    odometer_step2.jpg


  4. Click on the Visual Studio ToolBox and select Windows Forms. Double-Click the Timer timer.jpg to add it to the Windows Form.

  5. Click on the Timer property browser and change the Enabled property to true and the Interval property to 150 or whatever speed desired (the higher the interval, the slower the speed).
  6. Now click the Events events.jpg Tab in the property browser, and double-click Tick. This will automatically generate the code for the Timers tick event named timer1_Tick.
    1. Type odometer1.Value = odometer1.Value + 0.05; between the brackets of the timer1_Tick event. This will increment the odometers Value by 0.05.

    odometer_step5_wopt.jpg


  7. Go to the Build menu and choose Build Solution to build the project. Under the Debug menu, choose Start to run it. The Odometer is now complete and will roll numbers for a realistic odometer-like effect.

odometer_step6.jpg


Note: The speed of the rolling numbers can be increased or decreased by changing the Timer's Interval property or the Value by which the Odometer is incremented.

Recently Visited Products

Recently Visited Pages