Getting Started with Gauges

Comments | Share

Introduction to Radial and Linear Gauge

• Radial Gauge
• Linear Gauge
• Deployment

Let’s start by creating an AJAX Enabled Website, and dropping an “UltraGauge” control into the Web Page, initially you would see a blank Gauge, this gives the opportunity to select the type of gauge we need for the web page, for your convenience there are tones of Gauges available in the presets, there are Radial Gauges, Linear Gauges, Digital Gauges and other combination Gauges like Radial and Digital together, or Linear ad Digital, or even all three on one gauge, please select the most appropriate one that is the closest to what you intended to build and start from there to save time.

There are three ways you can create a Gauge in design time.

First simple option is to select a Gauge preset by the quick menu on the Gauge and selecting a preset name.

Second way is to open the UltraGaugeDesigner from the quick menu and select the preset using the “Choose a Preset” button and select the gauge by looking at it in the available preview of the Gauge (My Favorite)

Third way to create a Gauge is by selecting the quick design from the quick menu, quick design surface contains a section where you will see “Presets” and inside that there is “Manage Presets” you would be able to select the gauge type and have a glance of it through the section on the right side of it.

I have opted to create the Gauge by selecting UltraGaugeDesigner (the second way) by clicking directly on quick menu and click on UltraGaugeDesigner, the UltraGaugeDesigner is incredibly helpful designing a Gauge, creating a Gauge is not a very easy task but given the UltraGaugeDesigner you will find it interesting to work with and end up having a great Gauge.

Figure 1: Selecting UltraGauge from Tool Box

Hint: You can simply copy a Gauge that you like in samples and paste it in your Visual Studio

First let’s understand the UltraGaugeDesigner, it consist of 3 major sections GaugeExplorer, Properties Panel, and the Preview Area, as the names suggest you can drill down to a particular part of the Gauge through the explorer type navigation using the GaugeExplorer, once you select a part of the Gauge either from the GaugeExplorer or clicking on the Preview area you will get the properties pane populated and you can use it to change or add properties, the properties pane will change according to the Gauge object you have selected. The Preview Area is a interactive WYSIWUG where you can see the changes that are effecting the Gauge.

Hint: You can select the Part of the Gauge simply by selecting it in the preview area

Radial Gauge

There are 3 major components to build a Radial Gauge, Scale, Markers, and Tick Marks. The hierarchy is a radial Gauge contains Dial, Over Dial, and Scales.

Scales contain Label, Tick marks, Markers and Ranges, and the Marker can contain Needles.

Let me introduce you to all of them pictorially, the Major Tick Mark is outlined in red in Figure 2, the Minor Tick Marks are outlined in Figure 3, the Needle is Outlined in Figure 4 and also the Range is outlined in red in Figure 5.

Figure 2: Major Tick Marks	Figure 3: Minor Tick Marks
Figure 4: Needle	Figure 5: Range

The individual parts of the Gauge have their own set of properties let’s examine the properties of the needle.

Let’s say you selected the Needle which is shown in figure 6 outlined red, which has following properties, Marker Layout where you have options like width of the needle in different positions the length of the needle, then you can select the Value of the needle where it will point, all the values that you provide could be either in percentage or pixels. The appearance can be changed by the appearance tab where you can add as many brush elements to make the needle have colors and so on. You can set a shadow effect from the Effects tab.

There are so many properties and effects that you can have on the Gauge that it’s not possible to cover each and every in the article but it was just to point you to some of the properties and give it a kick start.

Getting back to the UltraGaugeDesigner, where GaugeExplorer is really important to add new items in the Gauge, and yes you can add multiples of it, for example you would like to add a digital Gauge inside the radial Gauge or wanted to have another needle or wanted to show range.

Figure 6: Selecting Needle

Let’s add a range and examine it, go through the hierarchy Gauge|Scales|Range inside Range you have to select Add Range in that select New Range it will add a default range as shown in figure 7.

Figure 7: Range Hierarchy

Assume we wanted to show a range between 0 to 40 in thin green color what do we do, First select the Value as 0 to 40, then position the range by changing the values in Extent, I selected them between 65 to 70, this will create a 5 Pixel line from 0 to 40, now let’s select our color through the Appearance tab, and selected the Brush to be Solid Green color, you can definitely give gradient effects and stroke and all the options in the world. Here is the way the Gauge will look just doing the basic changes we did in Figure 8.

Figure 8: Range

Hint: you can use the Range also as a changeable value from code behind (gauge1.Scales(0).Ranges(0).EndValue = 50)

Save the Gauge and close the UltraGaugeDesigner.

We are all set to run the application now but first let’s access the needle through Code and put a different value,

In C#

RadialGauge gauge = this.UltraGauge1.Gauges[0] as RadialGauge;

RadialGaugeMarker marker = gauge.Scales[0].Markers[0];

marker.Value = 63;

In Visual Basic

Dim gauge As RadialGauge = Me.UltraGauge1.Gauges(0)

Dim marker As RadialGaugeMarker = gauge.Scales(0).Markers(0)

marker.Value = 63

Remember that there could be multiple Gauges and multiple scales and not necessary each scale has the needle (Marker), please check the hierarchy in the UltraGaugeDesigner for reference.

Linear Gauge

Similar to the Radial Gauge but this time you will notice we do not have the Dial and Over Dial, the linear Gauge is a little bit different than the radial ones, and here you will also see there is something called as Bar Marker as shown in the Figure 9.

Figure 9: Bar Marker

Lets create Linear Gauge, in the UltraGaugeDesigner click on Add Gauge, and select Linear Gauge set a background, I am using a simple gradient, between black and grey as a backward diagonal as style, try vertical bump.

Next step adding a scale, change the Start, End to 10, 90 respectively, Start value as 0 and end value as 100, Tick Mark Interval as 5, Select the Labels from the Gauge Explorer, go to Label Appearance and set it to Solid White, go back to Label Layout and position the Label, I changed the extent to 25 which moves the labels right below the Bar, and frequency as 4 and the Gauge should look like Figure 10.

Figure 10: Scale End Value

Let’s get the Tick marks, set the appearance of both tick marks as solid white, select the Major Tick marks and set values as Extent Start, End as 70, 80, Width Start, End as 1,4 and frequency again as 4 to match with the Labels and as you can see in Figure 11 the alignment should work properly.

Figure 11: Scale Major Tick Mark

Select the Minor Tick marks set the values as Extent Start, End as 70, 75, Width Start End 1, 2 and frequency as 2

Note the changes in the values here the minor tick marks are smaller in size by values in width and extent, also importantly the Frequency is 2 instead of 4 in order to get them right in the middle of the Major Tick Marks as shown in Figure 12.

Figure 12: Scale Minor Tick Mark

Now that we have the tick marks and labels let’s add a Bar Marker, click on Add Marker and select Bar Marker, set the values as Extent Inner, Outer, Start as 35, 65, 0 and Segment Span as 100, set any value for trial purpose I set it to 50, now styling the bar go to appearance I created a Multi Stop Linear Gradient and started and ended with a red and somewhere in the starting of the gradient I added a black it will look more like a vertical bump, remember to change the angle to 90.

Figure 13: Bar Marker in Linear Gauge

Hint: if you need some values like Labels overlap the Bar Marker, or the Tick Marks overlap the Bar markers add another Scale and inside that scale set the value that needs to be overlapping.

To access the value of the Bar Marker through code

In C#

LinearGauge gauge = this.UltraGauge1.Gauges[0] as LinearGauge;

LinearGaugeMarker marker = gauge.Scales[0].Markers[0];

marker.Value = 63;

In Visual Basic

Dim gauge As LinearGauge = Me.UltraGauge1.Gauges(0)

Dim marker As LinearGaugeMarker = gauge.Scales(0).Markers(0)

marker.Value = 63

Yes they look similar, just replace Radial with Linear.

Deployment

Next Really important one time setting you have to do is set the deployment scenario the default is File System where you have to create a folder named as “GaugeImages” on the root of the website that will contain the Gauge images also remember you have to assign Write permission to the ASPNET account when you deploy it to a webserver, Please refer to the Figure 14.

Figure 14: File System Deployment

Second option is Session Deployment the setting can be found in the properties section where you have to change the Mode to Session, the moment you change the mode to session it will ask you for creating the GaugeImagePipe as shown in Figure 15, if you say yes at that moment it will create one for you named as “GaugeImage.aspx” on the root again remember Session deployment seems the easy option but you might lose the images when there is a appdomain recycle.

Figure 15: Auto Generate Image Pipe

This is a multi part Article, this one covers only Radial Gauge and Linear Gauge I will create another 2 for Digital Gauge and Advance Complex Gauges which will include mouse interaction and other advance features