Controls

Controls: Custom Gauge

The Custom Gauge control is a flexible and visually engaging way to represent numeric values, such as sensor readings or system metrics, in a gauge-style display. This control allows users to upload their own custom SVG graphics for a fully personalized look, while also offering control over the gauge’s scale through configurable major ticks.

Key Features:

• Real-Time Value Display:
  Connect the Custom Gauge to a variable from a PLC or runtime source to display real-time data such as temperature, pressure, RPM, or flow rate.

• Custom SVG Support:
  Users can upload their own SVG graphics to fully define the appearance of the gauge. This makes it easy to create branded, thematic, or highly specific visual styles for the gauge needle, background, and scale.

• Configurable Major Ticks:
  Customize the number of major ticks on the gauge to define how the scale is divided. This allows for precise control over how values are represented and interpreted, ensuring that the gauge fits the specific measurement range and resolution needed.

• Flexible Design Integration:
  The Custom Gauge blends seamlessly into user interfaces thanks to its customizable visuals and scaling options, making it ideal for both standard dashboards and specialized applications.

Use Cases:

• Precision Monitoring:
  Use in applications requiring precise, real-time feedback such as pressure systems, speed monitoring, or flow control, with a scale that can be finely tuned.

• Branded Interfaces:
  Upload uniquely styled gauges that match your company or product branding, creating a cohesive and professional UI.

• Specialized Visualizations:
  Ideal for displaying values in systems that use non-linear or non-standard ranges, thanks to the ability to define the number and spacing of major ticks in combination with a custom design.

SVG ID Reference Table

#	Element	SVG ID
1	Needle / Arrow / Indicator	arrow
2	Origin for Needle Rotation	rotationPoint
3	Current Value	value_tspan
4	Unit	label_unit_tspan
5	Major Tick (Can be as many as needed )	tick_major_1_value
6	Root Class	custom_control_root