Skip to content

Tutorial 4: Random color box

Goals:

In this tutorial you will:

  • Add a behavior: Script and variables
  • Connect behavior's elements to the component's elements
  • Change color property on component click.

New component

Let's start by creating a new component in the Library page. If you don't know how to do it, please take a look to Creating a new component.

We will use the default cube for this tutorial. However, before continuing, let's add a material element to the component, as we did on the Tutorial 2.

Behavior

The behavior is the part of the component that gives life to it. It is a logic function with some input and output variables that can be used to define parts of the component's behavior that cannot be defined directly by other elements, like for example the physic attributes.

For now, the logic can be defined using a python script which will be executed periodically or when the inputs change. The defined variable elements will be available inside the script, and when the script is executed, the value of the output variables will be updated and transferred to other elements within the component.

alt text

In the diagram above, user_input and color are both elements included in the visual element. The goal of this component is to change its color on click, therefore we need to be able to read the user_input and write the color.

The script can only interact with elements within the behavior. Therefore, the variable elements act as a bridge between the script and the elements outside the behavior. This is why we created one input variable (is_pressed) connected to the user_input and one output variable (cube_color) connected to the color.

Variables

Let's start by adding is_pressed and cube_color variables. Right-click the behavior element and then pick variable. Do that step for both of them.

alt text

Variable elements have several properties, such as data-type (smtk_int, stmk_string, etc), that must match the element it will be connected to. Furthermore, they have a type property to specify if it will act as input or output.

Click on the first variable you have created and name it is_pressed, by clicking on the Name field at the bottom. We don't need more changes, as by default, it will be an input variable of type smtk_bool.

alt text

Next, click on the second variable and name it cube_color. For this variable we will need to set the data-type to smtk_rgba, as it is a color, and the type to output.

alt text

Script

First, let's download the script with the logic by right-clicking here and selecting Save Link As... Go back to the Component Information tab and upload it as an asset.

alt text

Go again to the 3D tab. Inside the behavior element, click on the script and finally on the Value field at the bottom to pick the logic asset. If you did it correctly, now you should be seeing the logic code in the editor.

alt text

The box logic is following the statement below:

If a click is performed on the component, randomly generate values for red, green and blue (from 0.0 to 1.0) and update the component's color using these values.

Note

In the script, the initialize part is a predefined block in Simumatik that will be run each time we play the emulation.

Step time

By default, the script only runs when an input variable changes. However, you can tweak it to run periodically by clicking on the step_time element, inside behavior, and setting its Value to the amount of seconds to wait per execution.

Connections

Connections act as a bridge between the variables inside the behavior and any element from a component, so the script can read and write them.

To manage the connections, it is as easy as drag-and-drop any element from the tree to a variable of the behavior. Let's drag-and-drop the user_action element into is_pressed and color into cube_color. Inputs will be on the left side and outputs on the right:

alt text

Each time an element connected to a variable changes, the behavior's logic will be rerun. If an output variable changes, the element connected to it value will be updated.

Result

Your random color box is now finished! Let's take a screenshot of your newest component and save it. You can now add it to a library and start using it. You can see an example below:

Tip

Let's make the color changing automatically every 2 seconds! Click on step_time, inside behavior, and change its Value to 2.