Tutorial 6: Adding views to the main view

Now let us add some more visualisation elements to the main view we just built.

We will add a standard button that will open a set of  pre-built swipe-windows for the PD 850 module - and for fun, we will also create our own button that opens the same windows.

What we will build:

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

Step 1: Adding a standard button that opens a PD850 swipe view.

Open your view "XX_Main_view_with_house_and_regulators"

Right click on view list and select "add"- "view to open another view in new window". Select PD_8640 - Open_view_with_pushbutton.

Find the data field Open_Info for the view, right click "View to open" "select" "view for control instance" find and double click on device PD850. Select "PD_15830- Swipe_view_for_PD850".

Change default label text on "open view with pushbutton" to "PD850"

At this point you can start the graphical editor and place the button in a suitable place on the main view.

Step 2: creating a custom icon that opens a PD 850 swipe view.

Open "PD 7815 -  PD850". Right click and select " Create new view for this type based on" "PD 11813 Comp_view". Rename to "XX_Button for PD_850"

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

Add "View for control instance" - double click on PD850 and select "PD_17591 - Show_PD850_module". Set scale factor to 0.4

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

Right click on the Open Info, press "view to open" -> "Select" ->Add  "view for control instance" find and double click on device PD850. Select "PD_17661- Swipe_view_for_PD850".

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 3: Add your button to the main view

Open your view "XX_Main_view_with_house_and_regulators"

Right click on view list and select "add"-"View for control instance" -  find and double click on device PD850. Select "XX_Button for PD_850".

Start the graphical editor and place your two buttons in a suitable position. Your view should look something like this:

Step 4: Save, build and run your project.

Open your project ""XX_Temperature_Regulator_notification_project". Save, build project, start project downloader (make sure your test bed is still connected and that the PC device is started)  and config all modules.

Open the different views and make sure to try the swipe functionality.

 

For our next tutorial we will enhance the popup-windows for our temperature regulators by adding pre-built buttons with swipe windows for the output and input components.