Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


On this page:

Table of Contents
maxLevel3
stylenone


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
maxLevel3

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.

Image Removed

Once placed in the drawing window, the control with the default configurations will appear as shown below.

Image Removed

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

Image Removed

In this section...

Page Tree
root@parent
spacesV10