GUI Designer Slider Control User Manual

1. Introduction to Slider

Sliders can be applied to adjustment functions such as temperature, volume, and brightness, and are faster and more intuitive compared to button controls.

2. How to Add a Slider

Open or create a new project, click the slider icon in the common controls module or toolbox to add a slider, as shown in Figure 2.1.

Figure2.1 Add Slider

3. How to Replace Images

Select the slider, click the property window on the right to modify the image,click the "Add" button to add a slider display, the background image is displayed when the slider is not dragged, and the state image is displayed when the slider is dragged. The slider displays the position of the slider when dragged, as shown in Figure 3.1.

Figure3.1 Image Replacement

During simulation, the slider displays the background image and slider when not operated, as shown in Figure 3.2.

Figure3.2 Slider Not Operated

Pull the slider as shown in Figure 3.3.

Figure3.3 Pull the slider

4. How to set miscellaneous items

Clickin the property window on the right to set the offset coordinates, maximum and minimum values, direction, and trigger mode of the slider, as shown in Figure 4.1.

Figure4.1 Set miscellaneous items

4.1 How to set the slider offset coordinates

Click the input box under the slider start/end offset coordinates to set the slider start/end offset coordinates using the keyboard or the "+", "- " buttons. Setting the slider offset coordinates means setting the range within which the slider can be pulled.The default is 0, which means there is no restriction on the slider start/end coordinates, and the slider can be pulled freely within the slider range.

The slider start offset coordinate is the starting coordinate for sliding the slider, and the slider end offset coordinate is the ending coordinate for sliding the slider. The leftmost point of the slider is the starting coordinate of 0, and the rightmost point is the ending coordinate of 305 (the ending horizontal coordinate of the slider is related to the width of the sliderThe end abscissa of the slider is related to the width of the slider).

The starting offset coordinate of the slider is 45, indicating that the starting position of the slider is at the 45th position of the slider bar. The ending coordinate of the slider is 100, indicating that the ending position of the slider (which cannot be dragged further) is at the 100th position of the slider bar. As shown in Figure 4.2.

Figure4.2 Slider Offset Coordinate

4.2 How to Set Maximum/Minimum Values

Click the input box under Maximum/Minimum Values to set the maximum/minimum values of the slider bar through the keyboard or the "+", "- " buttons. The default maximum value is 100, and the default minimum value is 0.

Setting the maximum/minimum values sets the maximum and minimum values represented by the slider bar.

If the minimum value is set to 16 and the maximum value is set to 35, it indicates that the starting value of the slider bar is 16 and the ending value of the slider bar is 35, as shown in Figure 4.3.

Figure4.3 Set Maximum/Minimum

4.3 How to Set the Direction of the Slider

Click the button under Direction to pop up a dropdown box with Horizontal and Vertical options. Selecting Horizontal means the dragging direction is horizontal, and selecting Vertical means the dragging direction is vertical, as shown in Figure 4.4.

Figure4.4 Set the Direction of the Slider

4.4 How to Set the Trigger Mode

Clicking the button in trigger mode will pop up a dropdown box, offering continuous triggering and triggering upon release modes. Choosing continuous triggering will result in continuous triggering when the slider is dragged. The triggering upon release mode triggers at the moment the slider is released after being dragged, as shown in Figure 4.5.

Figure4.5 Set trigger mode

5. Application cases

5.1 Event list

The event list is explained in the table below:

Control initialization	Trigger event when the "Slider" is initialized
Control destruction	Trigger event when the "Slider" is destroyed
Value changes	Triggered when the "Slider" is slid

5.2 How to send custom protocol commands through the slider

1How to add an event

Select the slider, click on the event in the property window on the right to add an event, as shown in Figure 5.1.

Figure5.1 Add event

2How to set the processing method

Custom protocol allows users to use other protocols in the project, such as the Modbus protocol.

Click on the lower right corner of the processing method, pop up the processing method window, select "Send" command → select "Custom Protocol" to send serial port commands → set the command, as shown in Figure 5.2.

Figure5.2 [Custom Protocol] Send Serial Command

Note: When clicking the input box for sending serial port commands in [Custom Protocol], a window will pop up displaying the description of the custom command function, as shown in Figure 5.3.

Figure5.3 Custom Instruction Function Description Window

3How to view the standard protocol instructions sent by the slider

When sending a custom protocol instruction "AB CD $BYTE(#3005) $CRC16MODBUS( 1,3) $DELAY(1000)", click the simulation run button

Slide the slider in the simulation interface to view the sent commands, as shown in Figure 5.4.

Figure5.4 Send the [Custom Protocol] command

5.3 How to control brightness through the slider

Adjust the brightness display by pulling the slider. The specific operation settings are as follows.

1How to add a text control and slider

Create a new text control to display the specific brightness value. Click the slider and text control icons in the common slider to add, as shown in Figure 5.5.

Figure5.5 Add control

2How to set text control variable binding

Click Variable Binding in the property window on the right → Add → The bound control property is "Text 1" → Data Source Binding "System Configuration - Brightness" → Conversion Mode "One-way" → Conversion Method "Default", as shown in Figure 5.6.

Figure5.6 Set text control variable binding

Note: The data source binding variable is "System Configuration - Brightness", as shown in Figure 5.7

Figure5.7 Brightness Variable

3How to set slider variable binding

Select the slider, click on "Variable Binding" in the property window on the right → click "Add" → set the bound control property to "Current Value" → set the data source binding to "System Configuration - Brightness" → set the conversion mode to "Bidirectional" → set the conversion method to "Default", as shown in Figure 5.8.

Figure5.8 Set slider variable binding

4Simulation run

Pull the slider to adjust the screen brightness, as shown in Figure 5.9.

Figure5.9 Simulation run

5.4 How to control animation playback speed through the slider

Control the playback speed of GIF animations through the slider. The specific steps are as follows.

1How to add animation controls and sliders

Click on the standard controls in the toolbox, and click on the animation and slider icons to add the corresponding controls, as shown in Figure 5.10.

Figure5.10 Add controls

2How to replace images for animation controls

Select the animation control and click on the image selection button in the property window on the right to choose an image. For dynamic images, select a GIF format image, as shown in Figure 5.11.

Figure5.11 Replacement of animation control image

3and how to set slider variable binding

Select the slider, click on "Variable Binding" in the property window on the right → click "Add" → select the bound control property "Current Value" → bind the data source to "Var0" → set the conversion mode to "Bidirectional" → set the conversion method to "Default", as shown in Figure 5.12.

Figure5.12 Slider variable binding

Note: The Var0 variable is

4and how to set animation variable binding

Select the animation control, click on "Variable Binding" in the property window on the right → click "Add" → select the bound control property as "Playback Speed" → bind the data source to "Var0" → set the conversion mode to "Unidirectional" → set the conversion method to "Default", as shown in Figure 5.13.

Figure5.13 Set animation control variable binding

5and simulation demonstration

Click the simulation run button to pop up the simulation run window. Drag the slider to control the playback speed of the animation, which can be played quickly or slowly, as shown in Figure 5.14.

Picture5.14 Simulation run