On this page:
Table of Contents | ||||
---|---|---|---|---|
|
Requirements
Configurations
General
Linear Gauge General Settings | |
---|---|
Field | Description |
Gauge Orientation | Sets the orientation of the gauge. Options include "Horizontal" and "Vertical," allowing the gauge to be displayed either horizontally or vertically. |
Gauge Positions | Sets the position of the gauge relative to other elements. Options include "Above" and "Below," determining whether the gauge appears above or below other components. |
Linked Value | Links a specific data value or source to the gauge. In this example, it is set to "Tag.Level," indicating the gauge will display real-time data from this source. |
Range Start | Defines the starting value of the gauge range. Set to 0, it establishes the minimum value the gauge can represent. |
Range End | Specifies the ending value of the gauge range. Set to 100, it establishes the maximum value the gauge can represent. |
Scale
Linear Gauge Scale Settings | |
---|---|
Field | Description |
Scale Direction | Sets the direction of the scale. Options include "Forward," indicating a normal ascending scale, and potentially "Backward," which would indicate a descending scale. |
Scale Interval | Defines the interval between scale markings. Set to 100, this specifies the spacing of the major divisions on the scale. |
Scale Bar Size | Specifies the size of the scale bar. Set to 15, this determines the thickness or height of the scale bar. |
Scale Bar Stroke | Adjusts the stroke (outline) width of the scale bar. This setting influences the visual clarity and emphasis of the scale bar. |
Scale Bar BorderBrush | Defines the color of the scale bar border. The current setting is a shade of gray, which determines the visual appearance of the scale bar's border. |
Scale Bar Border Thickness | Specifies the thickness of the scale bar border. The setting "1,1,1,1" indicates uniform thickness on all sides, affecting the visual weight and prominence of the scale bar's border. |
Labels
Linear Gauge Labels Settings | |
---|---|
Field | Description |
Labels Visibility | Sets the visibility of the labels. Options include "Visible" to show the labels or potentially "Hidden" to hide them. |
Label Size | Defines the size of the labels. Set to 15, this determines the font size of the text labels on the gauge. |
Label Stroke | Adjusts the stroke (outline) color of the labels. The current setting is a shade of gray, which affects the visibility and emphasis of the label text. |
Label Postfix | Adds a postfix to the label text. This field is currently empty, allowing the user to add a suffix to each label value if needed. |
Label Prefix | Adds a prefix to the label text. This field is currently empty, allowing the user to add a prefix to each label value if needed. |
Ticks
Linear Gauge Ticks Settings | |
---|---|
Field | Description |
Major Tick Size | Defines the size of the major ticks. Set to 15, this determines the length of the major tick marks on the gauge. |
Major Tick Thickness | Specifies the thickness of the major ticks. Set to 2, this determines the width of the major tick marks. |
Major Tick Stroke | Adjusts the stroke (outline) color of the major ticks. The current setting is a shade of gray, affecting the visibility and emphasis of the major tick marks. |
Minor Tick Size | Defines the size of the minor ticks. Set to 7, this determines the length of the minor tick marks on the gauge. |
Minor Tick Thickness | Specifies the thickness of the minor ticks. Set to 1, this determines the width of the minor tick marks. |
Minor Tick Stroke | Adjusts the stroke (outline) color of the minor ticks. The current setting is a shade of gray, affecting the visibility and emphasis of the minor tick marks. |
Minor Ticks Per Interval | Defines the number of minor ticks per interval. Set to 5, this specifies how many minor tick marks will appear between each pair of major tick marks, allowing for finer granularity. |
Pointer
Linear Gauge Pointer Settings | |
---|---|
Field | Description |
Pointer Type | Sets the type of pointer used in the gauge. Options include "Bar Pointer" and "Symbol Pointer." The current selection is "Bar Pointer," indicating a bar-shaped pointer. |
Bar Pointer Stroke | Adjusts the stroke (outline) color of the bar pointer. This option is available only if "Bar Pointer" is selected as the pointer type. |
Bar Pointer Thickness | Specifies the thickness of the bar pointer. This option is available only if "Bar Pointer" is selected as the pointer type. |
Symbol Pointer Height | Defines the height of the symbol pointer. This option is unlocked and available if "Symbol Pointer" is selected as the pointer type. |
Symbol Pointer Width | Defines the width of the symbol pointer. This option is unlocked and available if "Symbol Pointer" is selected as the pointer type. |
Symbol Pointer Stroke | Adjusts the stroke (outline) color of the symbol pointer. This option is unlocked and available if "Symbol Pointer" is selected as the pointer type. |
Range
Linear Gauge Range Settings | |
---|---|
Field | Description |
Range | Indicates the specific range segment. The user can enable or disable each range by marking the checkbox next to the range entry. |
Range Start and End | Defines the starting and ending values for each range segment. This setting determines the minimum and maximum values for each color segment of the gauge. |
Color | Specifies the color for each range segment. This setting allows the user to visually differentiate between various segments of the gauge. |
Start and End Width | Defines the width of the start and end points of each range segment. This setting determines the thickness of the segment boundaries on the gauge. |
Runtime Execution
In this section:
Overview
<<<<. please note there is already some information about the Linear Gauge in the "User Interface Controls" content, which is different from the info in this doc. should we merge it? >>>>
This page provides information about the Linear Gauge control for WPF and HTML5, a tool for visualizing data on a linear scale. It discusses the main features, including adding scales, highlighting value ranges, and adding multiple pointers. The page guides users through configuration options such as General, Scale, Labels, Ticks, Pointer, and Range settings. In addition, it mentions the use of a code editor for advanced configurations and provides an example. Finally, it showcases the Linear Gauge control in runtime with default and modified settings.
On this page:
Table of Contents | ||
---|---|---|
|
Requirements
The Linear Gauge control is available for HTML5. It allows visualizing data in the form of Linear Scale, and is designed to see a simple display of value compared to a scale and one or more ranges. Some of the key features of the Linear Gauge are: adding a scale to linear gauge using horizontal and vertical orientations, highlight the desired ranges of values in the gauge scale and adding multiple pointers to the linear scale.
To start using the Linear Gauge, select the control from the component selection window (as shown below) and place it in the drawing window.
Once placed in the drawing window, the control with the default configurations will appear as shown below.
Configuration
Linear Gauge Settings
Field
Description
Control Name
Defines a name for the control so it can be accessed in the CodeBehind script. See Display Code Behind.
Value
The Tag that will receive the value selected.
Title
Name to be shown on the component.
Type
There different types of the Linear Gauge (Normal,RoundedRectangule, Thermometer).
Min
The minimum value in the scale.
Max
The maximum value in the scale.
Color
The color of the graph.
Orientation
Vertical or horizontal.
Runtime Execution
The following images show how the Linear Gauge control looks at runtime with default configurations.
- Linear gauge with default configurations
In this section...
Page Tree | ||||
---|---|---|---|---|
|