4.2 Using predefined controls¶

In this section we will take a look at how to use predefined controls to create dynamic elements.

4.2.1 Bar control

Create and open a display "TestDisplay2" as described in section 3.
In the bottom area of the graphics editor you can see a selection of predefined controls. Drag & drop the "Bar vertical" control into your drawing area.
On the right side, you can see a list of all parameters of the referenced control. Select the "testInt" data variable as the base address for this control by using the selector.
The control is now fully operative; you can also change the other parameters if you want to.

../../../_images/predefined_controls_add_scale_scada.png

Adding a bar control¶

4.2.2 Increment control

Now drag & drop a "Button Increment/Decrement" control into your drawing area.
Select the "testInt" data variable as the base address for this control by using the selector.
Enter "10" as the step. Now the value of the base will be increased by 10 every time you click on the button.

../../../_images/predefined_controls_add_increase.png

Adding an increment control¶

Hint

You can also change other parameters if you want to. Mandatory parameters are highlighted in red, all other parameters are optional. For example, to adjust the font size of the control, change the value of the parameter "Font -> size".

4.2.3 Decrement control

Copy & paste the increment control.
Choose -10 instead of 10 for the "step" parameter.

../../../_images/predefined_controls_add_decrease.png

Adding a decrement control¶

4.2.4 Opening the browser and testing the controls

Save the display, then open "TestDisplay2" in your browser and proceed as follows:

Click the Login button in the visualization.
Log in with user root (no password).
Confirm the given user data with the OK button.

Visualization login¶

Hint

Anonymous users (i.e. users that are not logged in) have no write access to the visualization by default. You can change this setting via access control.
If you want to keep users logged in after a browser refresh, you can enable cookies. Refer to Security > atvise access control > Information & notes - Cookie support for further information on enabling or disabling cookie support.

Change the value of the "testInt" data variable using your increment and decrement buttons after logging in. Now the bar should change according to the value of "testInt".