5.3 Using the simple dynamics dialog

In this section we will take a look at how to create your own individual dynamics using the simple dynamics dialog.

5.3.1 Adding a text element, editing it and starting the simple dynamics dialog for it

First, we will directly display the value of a data variable in the visualization using simple dynamics.

  1. Open "TestDisplay1" in the graphics editor as described in section 3.2.

  2. Add a text element to the display. Click on the "Add Text" symbol to do so.

  3. Click somewhere in the drawing area and type in some random characters to get a preview of how the text will look in the visualization.

  4. Make sure that the text element is marked. Change the text size to 72 in the style area on the middle right side of the atvise builder interface.

  5. Right-click "add" in the dynamics area on the bottom right of the atvise builder interface. The "Simple Dynamics" dialog will appear on your screen.

    Hint

    There are 3 ways in total to open the "Simple Dynamics" dialog. Each of them will open the very same dialog, so it's your choice:

    • You can right-click on the dynamics area as described above.

    • You also can double-click on the whitespace in the dynamics area.

    • The third way to use simple dynamics is by right-clicking on the element to which you want to add a dynamization and choosing "Add dynamics".

../../../_images/add_text_element.png

Adding a new text element and starting the "Simple Dynamics" dialog

5.3.2 The "Simple Dynamics" dialog

The "Simple Dynamics" dialog offers you a very powerful way to create individual dynamics with minimal effort.

You can create many different types of dynamics in four steps:

../../../_images/sd_right.png

In this step you can check a user right which is then necessary to activate the dynamization. We don't need this for our current example.

../../../_images/sd_event.png

In this step you can decide which event activates the dynamization.

  1. In our case we want to react to the change of a data variable, so we choose single_node_button from the possibilities on the left side.

  2. Now we have to specify this data variable. Click on the pointpointpoint symbol and choose "VariableString" from the list which appears.

../../../_images/sd_result.png

In this step, you can change the result of the event. We don't need this for our current example.

../../../_images/sd_action.png

In this step, you can define the action that will be executed when the event is triggered. For our example we will define the way the result is displayed in the visualization.

  1. We want to display the value of the data variable directly, so we choose text_value_button from the possibilities on the left side.

  2. Check display_value_directly.

  3. Now that all the necessary information is entered, we can apply the dialog by clicking OK.

../../../_images/sd_display_directly.png

Adding dynamization to the text element using simple dynamics

Hint

Afterwards, you will see an entry for this dynamization in the dynamics list of this text element. To edit or view an existing dynamization, you can open the "Simple Dynamics" dialog for this entry by double-clicking on it.

5.3.3 Adding an input element to set VariableString

In order to change the value of VariableString, we have to add an input element.

  1. Open the Servers ‣ DemoServer ‣ Objects folder in the structure on the left side of the atvise builder interface.

  2. Drag & drop the "VariableString" data variable into the drawing area of "TestDisplay1".

  3. An "In/Out Value" control which is assigned to "VariableString" will appear. You can use this control to set the value of "VariableString" in the visualization.

../../../_images/add_value_in_out.png

Adding an "In/Out Value" control to set "VariableString"

5.3.4 Activating and viewing the dynamization

Now we want to view our dynamization in the visualization.

  1. Save the display and generate the visualization by choosing Guided Actions ‣ Distribute to Webserver ‣ DemoServer.

  2. Open "TestDisplay1" in the browser of your choice (as described in section 4.1).

  3. Change the value of "VariableString" several times. To do so, click on the "In/Out Value" control and enter several texts, for example "I am dynamic".

  4. In the visualization, you will see that the random characters of the text element are replaced by the current value of the data variable "VariableString".

../../../_images/display_dynamic_text.png

Change the value of "VariableString" and see how it is displayed in the dynamic text element.

5.3.5 Adding simple dynamics to change the color of an element

In this section, we want to change a graphic attribute of one of our elements in dependence on a data variable. Let's say we choose the circle in our "TestDisplay1" and we want its color to depend on the value of our "VariableBoolean" data variable. If the value is true, we want to fill the circle with green, if the value is false, we want to fill it with red.

  1. In the first step, we have to mark the element to which we want to add a dynamization. Go back to the graphics editor, click on the circle to mark it and start the "Simple Dynamics" dialog by right-clicking add_button

  2. The event we want to react to is a change of "VariableBoolean", so we choose this variable as described in section 5.3.2 .

  3. Now that we have an event to react to, we must define the action that is to be executed. We want to change the color of our circle, so we choose color_button from the possibilities on the left side.

  4. We want to react to discrete values, so we choose check_discrete from the type selection list.

  5. If the value is true, we want to fill the circle with green, so we choose a green color for this condition by clicking pointpointpoint at the right side of the condition list.

  6. Furthermore, we will add a second condition by clicking on add_after_button.

  7. We change the "Value" column of the new condition to "false" and select a red color by clicking on pointpointpoint.

  8. Now that all the necessary information is typed in, we can apply the dialog by clicking OK.

../../../_images/sd_change_color.png

"Change Color" dialog

5.3.6 Adding a control to change the state of VariableBoolean

In order to change the state of "VariableBoolean", we have to add a new control.

  1. Open the Servers ‣ DemoServer ‣ Objects folder in the structure on the left side of the atvise builder interface.

  2. Drag & drop the "VariableBoolean" data variable into the drawing area of "TestDisplay1".

  3. A switch control which is assigned to "VariableBoolean" will appear. You can use this control to change the state of "VariableBoolean" in the visualization.

../../../_images/add_bool_switch.png

Adding a control to change the state of "VariableBoolean"

5.3.7 Activate and view the dynamization

  1. Save the display and generate the visualization by choosing Guided Actions ‣ Distribute to Webserver ‣ DemoServer.

  2. Open "TestDisplay1" in the visualization. If you have already opened this display, please reload it.

  3. You will see that the color of the circle now shows the state of the "VariableBoolean" variable.

  4. Change the value of "VariableBoolean" several times by clicking on the switch control and look at how the color of the circle changes.

../../../_images/display_dynamic_bool.png

Change the state of "VariableBoolean" and see how the color of the circle changes.