7 Parameterization option 2b - object oriented

In this section we will take a look at another way of object-oriented engineering in the atvise builder. We will create a dynamic object display for the light objects (L001,L002) in our structure as described in the previous section, but this time we will only create one display parameter for the object's base address. All data variables of the object will be addressed relatively to this base address.

Hint

Use this type of parameterization if you use multiple data variables in your object display that belong to an object type and have a clear object structure.

7.1 Adding a new object display

In the first step, we will add a new display named "Office_Light2" to the project.

  1. Right-click on the Library ‣ PROJECT ‣ Object Displays ‣ MyObjectDisplays folder which we've created in section 6.2 and choose "Add Display".

  2. Type in "Office_Light2" as name for the display and add it to the project by clicking OK.

../../_images/w2b_add_display.png

Adding a second display to the MyDisplayObjects folder

7.2 Designing an object display

Open the "Office_Light2" display in the graphics editor.

Design an object display similar to section 6.3. You can also copy the elements from the display you have drawn in section 6.3 and remove the dynamizations afterwards.

The following steps illustrate how to remove the dynamizations from the copied elements:

  1. Click on the circle to mark it.

  2. Right-click on the color change entry in the dynamization area located at the lower right side of the atvise builder interface.

  3. Choose the Delete option from the menu which appears.

  4. Remove the dynamization of the red border the same way.

  5. Mark one of the three buttons by clicking on it. Delete the value of the "base" parameter in the "Attributes" area located at the middle right side of the atvise builder interface.

  6. Delete the values of the base parameters of the remaining two buttons the same way.

../../_images/remove_parameters.png

Deleting dynamics

../../_images/delete_base.png

Deleting the value of the "base" parameter

7.3 Creating display parameters

In this step we will define a parameter for the object's base address.

  1. Choose File ‣ Parameters from the symbol bar.

  2. Type in "mybase" as the name for the object base parameter.

  3. Type in a description for the parameter.

  4. Select "mandatory" in the "Behavior" column.

  5. Apply the edit parameters dialog by clicking OK.

  6. Save the display.

../../_images/w2b_parameters.png

Adding a parameter for the object's base address to the display

7.4 Adding dynamization

In this section we want to use predefined controls and simple dynamics to add dynamization to our object display.

7.4.1 Parameterizing the three buttons

We want to set the value of LightIntensity, so we have to parameterize the three buttons for 0 %, 50 % and 100 % light intensity.

  1. Mark one of the three buttons by clicking on it.

  2. On the right side, you can see a list of all parameters of the referenced control. Set the text of the button by entering "0" in  the "label" field.

3 To set its "base" parameter, click the relative_button button to activate relative addressing.

  1. Use the drop-down list to choose "mybase".

  2. Enter ".LightIntensity" into the address field manually as the relative part. (Don't forget the ".")

  3. Set the "value" parameter by entering "0". This value will be set to the base when the button is clicked.

  4. Parameterize a button with the label "50" and value "50" the same way.

  5. Parameterize a button with the label "100" and value "100" the same way.

../../_images/w2b_dyn_buttons.png

Parameterizing the three buttons

7.4.2 Color change of the light bulb to display the light intensity

In this section, we want to add a simple dynamic to our bulb to display the light intensity.

  1. Click on the circle of the bulb to mark it and open the "Simple Dynamics" dialog as described in section 5.3.1

    Hint

    The simple dynamics in this section will be similar to section 6.5. The only new thing is that we will address our data variables relatively with reference to the object's base address.

  2. Choose single_node_button from the possibilities on the left.

  3. Click on the button relative_button to activate relative addressing.

  4. Use the drop-down list to choose "mybase".

  5. Enter ".LightIntensity" into the address field manually (Don't forget the "."). ".LightIntensity" is the relative part which is found in all base objects.

  6. Choose "Number" as the value type.

  7. We want to change the color of the circle, so we choose color_button to the left in the ACTION part.

  8. The range of our "LightIntensity" variable is from 0 - 100 so we choose "Value Range" as the type and then type in the minimum and maximum value.

  9. We want to display the circle in a color range from gray to yellow, so we check the fill box and choose a gray color as the start fill and a yellow color as the stop fill by clicking on pointpointpoint.

    Hint

    If the value of the data variable is 0, the start fill will be displayed, if it is 100, the stop fill will be displayed. Values in between are merged according to the gradient from the start fill to the stop fill.

    We are now finished with the dynamization. Apply the dialog by clicking "OK".

../../_images/w2b_dyn_bulb.png

"Simple Dynamics" dialog for the circle of our light bulb

7.4.3 The visibility of the malfunction border

  1. Mark the red border and start the "Simple Dynamics" dialog.

  2. Choose single_node_button from the possibilities on the left.

  3. We want to add a relative address, so click the relative_button button.

  4. Use the drop-down list to choose "mybase".

  5. Enter ".InternalMalfunction" into the address field manually as relative part (Don't forget the ".").

  6. Choose "Boolean" as the value type.

  7. We want to change the visibility of the border, so choose button_visibility in the ACTION part.

  8. If the value is true, we want the border to be visible, so choose "visible" for this condition. Add a second condition by clicking on add_after_button, changing the value column to "false" and choosing "invisible".

  9. Apply the "Simple Dynamics" dialog by clicking OK.

../../_images/w2b_dyn_border.png

Changing the visibility of the border in dependence on a VariableBoolean

Now we have finished the engineering of our object display.

7.5 Adding objects to Light_Background

  1. Open the "Light_Background" display (which we added in step 6.1).

  2. Drag & drop the "Office_Light2" object display into the "Light_Background" display.

  3. Make sure the "Office_Light2" object is marked. On the right of the atvise builder interface, you will see a list of all its parameters.

  4. Select "L001" as the address for the "base address of the object" parameter using the pointpointpoint selector.

  5. Drag & drop the Objects ‣ L001 ‣ InternalMalfunction variable into the "Light_Background" display. A small button will appear which can be used to set the variable in the visualization.

  6. Repeat steps 2 to 5, but now choose "L002" as the "base address of the object" and drag & drop Objects ‣ L002 ‣ InternalMalfunction into the display .

  7. Position the 2 displays in 2 different rooms of the office plan.

../../_images/w2b_create_instances.png

Dragging & dropping the "Office_Light2" display into the "Light_Background" display and setting the base parameter

7.6 Generating and viewing the visualization

Save the display by clicking save_button and generate the visualization by choosing Guided Actions ‣ Distribute to Webserver ‣ DemoServer. Then start a web browser (as described in section 4) and view the "Light_Background" display in the visualization. Set the value of the light intensity of one of the objects using the three buttons and see how the color of the bulb changes. Also use the InternalMalfunction buttons to make the red border appear and disappear.