Designing Gauges
A gauge is a widget that displays the current value of a data metric. Gauges can include a scale on which the current value is marked. They also can include a text readout of the current value. As with all objects in DGLux5, you can use bindings to ensure that the properties of a gauge will change depending on the current data. DGLux5 includes pre-made gauges, and you can also design your own.
For a detailed reference of properties that affect gauges, see Common Properties and Gauge Scale Properties.
A pre-made gauge component in DGLux5
Another gauge created in DGLux5
Video Tutorial: Creating Custom Gauges in DGLux5
Use a Pre-Made DGLux5 Gauge
To use a pre-made DGLux5 gauge widget, you must have the Dashboard widget library installed. A normal DGLux5 installation includes this library.
To use a pre-made gauge:
- Import the
Dashboardwidget library into your project, by following the steps in Import a Widget Library. - In the widget palette at the bottom of the screen, expand Dashboard and then Gauges to display the pre-made DGLux5 gauges.
Find the gauge you want, and drag it to the Document window.
This inserts the gauge widget in your file.
- Make sure the gauge that you inserted is selected, and then in the Property Inspector, under Symbol, edit the properties of the gauge according to the following table. Which properties are available depends on which widget you choose.
| Property Name | Importance, When Available | Steps |
|---|---|---|
| Value or Status | Crucial | Bind a data metric to this property using the steps in Bind from a Data Metric. Alternatively, you can bind a data value that has been loaded by a Data Services block in the dataflow. |
| On | Crucial | Bind the same data metric to On that you bound to Value or Status. Value holds the string value for text readouts, and On holds the boolean value for determining other properties, such as color. |
| Units | Important | Enter the units, such as "kW," "cfm," or "acres." |
| Min and Max, or Min_Range and Max_Range | Important | Edit the lowest and highest values for the gauge scale. |
| Title | Important | Enter a title for the gauge, such as "Airflow." |
| Target | Optional | Enter the target value for this metric. If the target value changes based on other factors, you can use the dataflow to define a dynamic target value, and bind the result to Target. |
| Various color properties | Optional | Choose the colors for the appropriate gauge pieces and conditions. |
| Start Angle, End Angle | Optional | Edit the positions on the circle where you want the gauge scales to start and end. |
Create an Example Gauge
These steps create a basic, data-driven gauge widget with a track scale, label scale, and text readout. First, you style the appearance of the gauge. Next, you configure the gauge's behavior in reaction to data. Finally, you tie live data to the gauge.
Work from a Mockup
If you want to create a gauge based on a mockup:
- Insert the mockup image on the stage.
- In the Outline, next to the image, click the empty square in the
lock column so that a lock icon appears. This prevents you from editing the image. - Refer to the image as you work, and then delete it when you are done.
If your mockup does not include color codes, use a color picker browser plugin to match colors. You can paste the hex values into the DGLux5 fill and stroke pop-ups.
Style the Gauge Appearance
To style the gauge appearance:
- Create a group:
- Right-click in the Outline or Document window and select Insert > Components > Group.
- In the Property Inspector, under Position and Size, set the width and height of the group to 300px and 300px. You can make the size dynamic when the gauge is finished.
Make sure the group's layout is Absolute.
- Create scales inside the group:
- Right-click the group and select Insert > Gauge > Scale Labels.
- Right-click the group again, and select Insert > Gauge > Scale Track.
- Select both scale components by Shift+clicking them in the Outline, and then set the width and height to 300px and 300px.
With the scale components selected, under Position and Size, click the middle square in the grid, and enter
0in both fields that appear.This centers the scales in the group.
- In the Outline, select the scale track, and then set its properties:
- Set Radius to 70%.
Set Track Fill to the fill that you want.
- In the Outline, select the scale labels, and then set the properties:
- Set Radius to 90%.
Set Start Angle and End Angle to −105 and 105.
Set the font styling of the scale labels to your preferred styling.
- Create a text readout:
- In the Outline, right-click the group, and select Insert > Components > Text.
With the text component selected, under Position and Size, ensure Width and Height are set to Auto. If Width or Height is not Auto, hover over the property until a blue dot appears. Then, click the blue dot and select Reset.
With the text component selected, under Position and Size, click the middle square in the grid, and enter 0 in both fields that appear.
- Set the text component's font styling to your preferred styling.
Set the Horizontal Alignment and Vertical Alignment properties to centered.
- Create one or more circles to go behind the gauge information.
- Use the
Ellipse tool. Hold Shift while dragging the tool to create a circle. Style the circles' fill and stroke to your preference
- Drag the circles into the group to add them.
With the circles selected, under Position and Size, click the middle square in the grid, and enter 0 in both fields that appear.
Use the Outline to stack the group's items in the order you want them by selecting them and clicking
Send Backward and 
Bring Forward.
Select the group, and in the Property Inspector, under Scaling, select Fit Ratio.
Right-click the group, and select
Convert to Symbol.
When prompted, create a name for your symbol.
Create the Gauge Behavior
To create some behavior for this gauge:
- Add symbol parameters:
Right-click the symbol, and select Edit Properties.
Drag two instances of number and one instance of string from the left panel to the right panel.
- Name the two number parameters minimum and maximum, by double-clicking the labels and editing them.
Name the string parameter value.
Enter the default values
0and100for minimum and maximum, and55for value.
- In the Outline, select the Scale Labels component.
Bind the minimum and maximum symbol parameters to the Minimum and Maximum Scale Labels properties.
- Make the track's end angle dynamic:
Right-click the scale track, and select
Dataflow.
Bind the value symbol parameter to the Scale block's input property.
Bind the minimum and maximum symbol parameters to the Scale block's inputMin and inputMax properties.
Bind the scale label component's Start Angle and End Angle properties to the Scale block's outputMin and outputMax properties.
Bind the block's output property to the scale track's End Angle property.
- Map the data value to the text component:
Right-click the text box, and select
Dataflow.
In the Dataflow blocks palette, under Number Formatting, find a Round block, and drag the Round block to the dataflow view.
Bind the symbol's value parameter to the Round block's input property.
- For the Round block's precision property, enter 0 to ensure a round number in the text readout.
Bind the Round block's output property to the text component's Text property.
- Double-click the Document window to exit symbol editing mode.
Tie Data to the Gauge
To tie data to this gauge:
- Select the symbol instance in the Outline.
In the Property Inspector, open the Symbol properties.
In the Data Panel, navigate to the data source.
In the Metrics panel, find the data metric.
Drag the data metric from the metrics panel to the value property.
In the Binding dialog, specify Value, and click OK.
If you want, in the Property Inspector, change the minimum and maximum property values to your preferred range.
Save a Gauge as a Widget
If you want to save a gauge as a widget so that you can use it in other projects, follow the steps in Create Your Own Widget Library.
Gauge Scale Properties
These properties affect gauge scales. A gauge scale fits into one of three categories, based on whether it has ticks, labels, or a track. Each category has its own properties.
For a guide to using gauges, see Designing Gauges.
Gauges and gauge scales can also be affected using Common Properties.
Gauge Scale Properties
These properties affect gauge scales. A gauge scale fits into one of three categories, based on whether it has ticks, labels, or a track. Each category has its own properties.
For a guide to using gauges, see Designing Gauges.
Gauges and gauge scales can also be affected using Common Properties.
Shared Gauge Scale Properties
Scale Ticks Renderer Properties
Scale Labels Renderer Properties
Scale Track Renderer Properties
These properties affect a scale with a track.
Gauge Scale Properties
These properties affect gauge scales. A gauge scale fits into one of three categories, based on whether it has ticks, labels, or a track. Each category has its own properties.
For a guide to using gauges, see Designing Gauges.
Gauges and gauge scales can also be affected using Common Properties.
Shared Gauge Scale Properties
Scale Ticks Renderer Properties
Scale Labels Renderer Properties
Scale Track Renderer Properties
These properties affect a scale with a track.
More Resources
This thread in the DGLogik Community Forum addresses gauges: