|
|
Using the Angular Gauge
Project: Creating a Virtual Amp Meter using Angular Gauge ActiveX
Total Setup Time: 14 minutes
Special Note: This tutorial is aimed at showing a software developer how easy
it is to configure a Global Majic Software ActiveX component and how much flexibility
these components provide. Remember, these are software components, NOT full-up
applications.
Place an Angular Gauge ActiveX on
a VB form along with an image control using the actual gauge picture. Resize the
Angular Gauge to match the image's Height and Width properties.
Right click on the Angular Gauge ActiveX and choose the
"Properties" menu to go to the custom properties.
This is perhaps the most important step and could take
several minutes. In this particular gauge, the origin of the scaling actually
occurs somewhere below the actual gauge itself. We can set the origin of the
scaling relative to the Angular Gauge's internal scaling in order to achieve
this effect. The Angular Gauge scales itself with 0,0 as the center of the
control, bottom left at -1, -1, and top right at 1, 1. Knowing this, we need
to set the scale somewhere below the gauge and get the slightly arched effect
of the actual gauge with the needle entering the meter from the bottom.
The trick here is to get part of the tic graphic into the viewable area and
play with the scaling and the tic graphic until it looks correct. This will
take a little practice and a few back and forths between the Scale and Tic
Property Pages.
Set the TicLabel to true and change the TicDelta to 2 to match
the delta on the actual gauge.
Next, go to the Scales property page and move
it below the Angular Gauge's visible area. Set the ScaleY position to -5.2
and move the TicLabels into the viewable area. After setting the TicLabel
position to 5.5, the numbers was viewable in the correct area.
![]()
To get all the numbers to appear in the viewable area,
change the StartAngle and StopAngle to 345 degrees and 15 degrees, respectively.
Set the TicInner to 5.0 and TicOuter to 5.3 and make them a
little wider by setting the TicWidth property to 0.04.
Now set up the second set of tics by setting the Tics property to 2
and the TicID to 1.
Set the TicInner to 5.0 and the TicOuter to 5.2 and turn TicLabel to
FALSE.
Add two (2) annulars to the virtual gauge. Go to the Annulars Property
Page, set the Annulars property to 2, and adjust the first annular (AnnularID = 0).
The AnnularColor is a dark gray for the first annular and a kind of reddish-pink
for the second annular.
Next, add the "DC Amperes" caption on the gauge. Move the caption to
the desired position using the sliders for the X and Y positions on the Captions Property
Page. Note: You will have to play around with the font to get it to look right.
Select an appropriate BackColor that matches the real Amp meter.
Set the BevelWidth and BorderWidth properties
equal to zero, and the BevelInner and BevelOuter properties to "None".
Go to the Needles Property Page and set the NeedleLength to a value
that will display on the gauge.
Finally, put the black frame around the gauge. Chose black as the
color for the frame and make it rectangular. Use the sliders to control the Top,
Bottom, Left, and Right properties for the frame.
You could get more elaborate by placing the actual image of the real gauge as
the FramePicture property and then size the Top, Bottom, Left, and Right frame
properties to get an exact duplicate of the frame on the actual gauge.
This project took me 14 minutes and that was while taking screenshots along the way!
|
|
|
Recently Visited Products
|
Ecommerce Solutions by Mountain Media