Link Search Menu Expand Document

Horizontal Slider is an input/output widget. When the knob is enabled, this widget is an input one; otherwise, it is an output widget.

This widget allows users to load images for the background, liquid column, knob, and bore. It also allows users to set style for the scale.

An educational vidoe is availble to get users started:

  • Educational Video

Widget Property

Hoirzontal Slider

Property Description Operation
Widget Name Widget displayed name Name
Link to Educational Video Link to IOT’s website for Educational Video  

Visibility Control

Property Description Operation
Binding Hidden Control Register Select a binding register to control the visibility of this widget Checkbox
Hidden Control Register Choose a binding regsiter Register Selector

Background Image Setting

Property Description Operation
Show Image Show the background image Checkbox
Show Handler Show the handler for the background image
The handlers indicates the outline and the center point of the widget.
Checkbox
Load Image Load an image from the file system as the background File Open Dialog Box
Edit Image Edit the background image Image Editor Dialog Box
Paste Image Paste an image from the clipboard as the background  

Liquid Column Image Setting

Property Description Operation
Show Image Show the liquid column image. This image moves according to the value of the binding register of the widget Checkbox  
Show Handler Show the handler of the liquid column
Users can use this handler to adjust the position and width of the liquid column.
Checkbox
Liquid Column Top Left Set the coornidate values for the top-left corner of the liquid column
This feature is available only when the Handler is enabled.
Alignment Selector
Liquid Column Bottom Right Set the coordinate values for the bottom-right corner of the liquid column
This feature is available only when the Handler is enabled.
Alignment Selector
Load Image Load an image from the file system as the liquid column File Open Dialog Box
Edit Image Edit the liquid column image Image Editor Dialog Box
Paste Image Paste an image from the clipboard as the liquid column  

Knod Image Setting

Property Description Operation
Show Image Show the knob image Checkbox
Show Handler Show the handler for the knob.
Users can use this handler to adjust the starting and ending point of the knob as well as the size of the knob.
Checkbox
Knob Top Left Set the coordinate values for the top-left corner of the knob
This feature is available only when the Hander is enabled.
Alignment Selector
Knob Bottom Right Set the coordiante values for the bottom-right corner of the knob
This feature is available only when the Handler is enable.
Alignment Selector
Load Image Load an image from the file system as the knob File Open Dialog Box
Edit Image Edit the knob image Image Editor Dialog Box
Paste Image Paste an image from the clipboard as the knob  

Bore Image Setting

Property Description Operation
Show Image Show the bore image Checkbox
Show Handler Show the handler of the bore
Users can use this handler to adjust the bore’s position and width.
Checkbox
Bore Top Left Set the coordinate values for the top-left corner of the bore
This feature is available only when the Hander is enabled.
Alignment Selector
Bore Bottom Right Set the coordiante values for the bottom-right corner of the bore
This feature is available only when the Handler is enable.
Alignment Selector
Load Image Load an image from the file system as the bore File Open Dialog Box
Edit Image Edit the bore image Image Editor Dialog Box
Paste Image Paste an image from the clipboard as the bore  

Scale Setting

Property Description Operation
Enable Scale Enable scale on this widget Checkbox
Tick Head Style Select the tick head style to be round or square Dropdown List
Enable Scale Stencil Enable stencil on the scale
If enabled, scales display the color of the behind image.
Checkbox
Mark Start Location Set the starting point’s coordinates
This feature is available only when scales are enabled.
Alignment Selector
Mark End Location Set the ending point’s coordinates
This feature is available only when scales are enabled.
Alignment Selector
Tick Granularity Select the granularity for the ticks Number Editor
Tick Color Select a color for the ticks Color Selector
Tick Style Select a line style for the ticks Frame Selector
Enable Sub Tick Enable the sub ticks Checkbox
Sub Tick Granularity Select the granularity for the sub ticks Number Editor
Sub Tick Color Select a color for the sub ticks Color Selector
Sub Tick Style Select a line style for the sub ticks Frame Selector
Sub Tick Length as % Set the sub ticks’ length as a percentage (1-100%) of the ticks Number Editor
Display Number Display numbers on the scales Checkbox
Starting Number Set the value for the starting number of the scales Number Editor
Ending Number Set the value for the ending number of the scales Number Editor
Alignmnet Select an alignment method Alignment Selector
Number Font Set the font style Font Selector
Number Color Select a color for the numbers Color Selector

Knob Behavior Setting

Property Description Operation
Minimum Data Value The starting point value for the knob Number Editor
Maximum Data Value The ending point value for the knob Number Editor
Reversed Value Mapping Reversing the mapping for the knob
Minimum Data Value is mapped to the ending point of the knob whereas Maximum Data Value is mapped to the starting point of the knob.
Checkbox
Value Binding Register Bind a register for the knob Register Selector

Preview

Property Description Operation
Animate The knob move throughout the entire range simulating the change of the binding register’s value.  

On-Widget Editor

Property Description Operation
Adjust the liquid column’s position and width Liquid Column Editor
Adjust the knob’s starting and ending positions and the size Knob Editor
Adjust bore’s position and width Bore Editor
Adjuist tick’s position Scale Editor
Adjust cale number’s position Scale Editor

Right-Click Menu

Tick Head Style

Property Description Operation
Tick Head Style Set the tick head style to be round or square  

Display Number

Property Description Operation
Display Number Set to display the numbers on the scales Checkbox

Alignment

Property Description Operation
Alignment Select the alignment method Alignment Selector

Reversed Value Mapping

Property Description Operation
Reversed Value Mapping Rseversing the value mapping for the knob Checkbox

Widget-Specific Actions

Property Description Operation
Load Backgrond Image… Load an image from the file system as the background File Open Dialog Box
Edit Background Image Edit the background image Image Editor Dialog Box
Paste to Background Image from Clipboard Paste an image from Clipboard as the background image  
Load Liquid Column Image… Load an image from the file system as the liquid column File Open Dialog Box
Edit Liquid Column Image Edit the liquid column image Image Editor Dialog Box
Paste to Liquid Column Image from Clipboard Paste an image from Clipboard as the liquid colum  
Load Knob Image… Load an image from the file system as the Knob File Open Dialog Box
Edit Knob Image Edit the knob image Image Editor Dialog Box
Paste to Knob Image from Clipboard Paste an image from clipboard as the knob  
Load Bore Image… Load an image from the file system as the bore File Open Dialog Box
Edit Bore Image Edit the bore image Image Editor Dialog Box
Paste to Bore Image from Clipboard Paste an image from the clipboard to the bore  
Preview Press Animation Preview the widget by automatically moving the knob  
Link to Educational Video… Connect to the education video and play it