Tutorial 5: Creating views in views

Having built a component using the supervisor/servant notification model, let us spend some time learning how to create views

What we want to build - logic:
A house control where two rooms have a temperature regulator in them.

What we want to build - visual:
a view showing a floor plan of a house, with a temperature regulator placed in two of the rooms. The actual temperature should be visible in the overview picture. When we press on the temperature regulator icon, a window opens, showing the set point (editable) and the actual temperature (read only). We will also show the name of the (instance of the) assembly.

We will reuse the window we already created in tutorial 4 for the assembly with supervisor/servant notification:

This will be the window that opens, so all we need to build is the "button" that opens this window.

The below illustration shows what you will build in this tutorial. The red dots indicate tutorial steps.

Before we start building, here are a few important facts about how to work with views.

  • Views can be created for data types (which we will see examples of in tutorial 7), devices (which we will do in tutorial 6), components (as we did in tutorial 1), for assemblies (as we did in tutorial 4) and for main assemblies (which we will do later in this tutorial. You cannot create views for projects.
  • You can design as many views as you want for a given component or assembly.
  • The elements that you can visualise are registers and (results of) Get/Set-methods (which will typically return one or more values).
  • You can add drawings (in SVG-format) as we will do later in this tutorial
  • You can also add labels - that can be used to show a "fixed text" information.
  • And finally you can add existing views, so your view can be composed of a mix of exising views and your own additions.

You can only visualise what the component/assembly has access to, so as a rule of thumb:

  • Create Main Assembly views to  visualise your total project functionality.
  • Create Assemby views to demonstrate the  functionality of a component that connect to other components (as e.g the visualisation we created in tutorial 4).
  • Create component views  if your component contains all the information inside itself - possibly by reading the information from others into registers (as we did in tutorial 1)
  • Create device views to visualise any device related information (serial numbers, wiring info, temperature of the module etc.)
  • Create data type views to visualise data such as e.g. an enumerated types, registers etc. 

Step 1: Creating the button

The button is created as a new view for our assembly "XX_Temperature_regulator_notification_assembly"

Open the assembly.

Right click and select "create new view for this type based on  PD_13556 - asm_view". Rename to "button_for_XX_Temperature_regulator_notification_assembly".

Set view region - bottom right to y=50[mm] and x=50[mm]

Right click on view list and add drawing PD_17418- Temperature_Regulator

Right click on view list and add "view for control instance" - press on temperature- actual rec - value (which represent actual temperature). Select view type PD_2159- Number_name_value_unit

Right click on view list and the name of the (instance of the) assembly. Right click on view list and select "add"- "view for control instance"  Double click on "XX_temperature_regulator_notification".  Select PD_2292 - Name.

Save the view and launch the graphical editor. Your view will look something like this:

This is because your drawing is a bit bigger than the view area defined, so we need to scale it.

Click in the black part of the view - this will select the drawing in the editor. Switch to the editor and set scale factor 0.4

Now move your visualisation elements around, so they look something like this:

Now you need to indicate which window to open when the button is pressed. And here we will reuse the visualisation we made in tutorial 4.

Right click on view and add: view to open another view in new window and select: PD_16706 - Open_view_in_new_window.

Right click on the Open Info, press "view to open" -> "Select" -> view for control instance, double click on the assembly"XX_Temperature_Regulator_notification_assembly" select "Window_for_XX_Temperature_Regulator_notification_assembly".

The last thing you need to do is to make sure that the window opens, no matter where the user clicks on the button.

For all elements in the view list except the "open view in new window" mark the parameter "disable hit test". Find the view method " get view region" and press override. Add this code line:

Open_view_in_new_window.Set_view_region(View_region:= View_region)

What your code should look like:

Now all mouse clicks or screen taps will go to the "open view in new window".

NB! You cannot use the graphical editor to view your button now. This is because the view region calculation uses methods that are only available at run-time.

Step 2: Adding a new instance of your temperature assembly:

According to the specifications, we need two instances of the temperature regulator, and we want to display their names, so a few updates are needed in the existing main assembly.

Open your main assembly from tutorial 4, ie. XX_Temperature_regulator_notification_main.

Rename the assembly instance"XX_temperature_regulator_notification_assembly" to "Bathroom"

Add a new instance of assembly "XX_temperature_regulator_notification_assembly". Rename it to "Dining room". Locate the new control components on PD 850. On your testbed, connect a temperature regulator to 11/31 and a DC output to 2/22.

Here we see one of the very powerful features in VIGO6. Having built a complex functionality (the temperature regulator assembly) once, we can reuse instances of it easily, simply by adding a new instance to our assembly (and eventually wiring up any I/O of course).


Step 3: Building the main view.

We are now ready to build our main view using the building blocks we just created.

Right click and select "Create new view for this type based on" and select "PD_13556 Asm_view". Rename to "XX_Main_view_with_house_and_regulators". Set view region bottom right y=200[mm] and x= 300[mm]

Right click on view list and add:

  • Drawing: PD_17425 Plan_Drawing_Tutorial. Set the scale factor to 1.8
  • view for control instance: find and double click on  assembly "Bathroom" and select the view "button_for_XX_Temperature_regulator_notification_assembly". Set the scale factor to 0.9.
  • view for control instance: find and double click on  assebly "Dining room" and select the view "button_for_XX_Temperature_regulator_notification_assembly". Set the scale factor to 0.9.

Save the view and launch the graphical editor. Now drag the elements around to find suitable rooms for your icons/buttons.

Your visualisation should look something like this:


Step 4: Build and run your project.

Now open your project "XX_Temperature_regulator_notification_project", find the "COPP PC with display". Open the guest view - delete the existing view and add your view "XX_Main_view_with_house_and_regulators".

Save, build and run your project on the test bed.

Make sure to click on the regulator buttons to see your windows open and test your two regulator instances via the test bed.

Having created a temperature regulator assembly with an icon/button and a popup-window, we can now easily use instances of this in other projects on different types of hardware modules.

If we are not happy with the visualisation, we can always create new views for the assembly and/or the main assembly or modify existing views by inheriting or cloning.

Now let us add a few more elements to the main assembly view we have just created.