Import the user interface from another project and monitor some variables¶

Introduction

This tutorial shows how to import the user interface from another project and display the value of a few variables it contains, using OPC UA communication.

The server project contains the panel types needed to create the user interface on the client and contains some variables to be monitored by the client. The client project has no user interface and at runtime connects to the server to import the user interface and to import and synchronize the remote variables.

Download the example projects from here.

Steps

Create server and client projects
Server: define the user interface and the variables
Client: configure import
Client: prepare the user interface
Check operation

Create server and client projects

Create a new standard project called ServerProject. The project already contains an OPC UA server object, which exposes all the project nodes if there are no specific settings.
Create another new standard project called ClientProject*

Hint

before proceeding, remove the OPC UA Server object in the OPC UA project folder as it is not needed for this tutorial.

Server: define the user interface and the variables

In the UI folder, create a RemotePanels folder. Inside it create three types of panels named RemoteMainPanel, Panel1 and Panel2.
To create the navigation between Panel1 and Panel2, enter a Button object in both and associate the {MainPanelLoader}/MainPanelLoader/ChangePanel method with the MouseClick event in both. In the NewPanel method input argument, select Panel2 and Panel1 respectively.
(Optional) To recognize the two panels at runtime, enter a label in both with text that identifies them (ex. “Panel1” and “Panel2”).
In RemoteMainPanel, create a Dynamic panel object called MainPanelLoader. In its Panel property, select the Panel1 type to display it when the user interface is initialized at runtime.

Note

RemoteMainPanel is a widget that can be used to create the entire panels structure and relative navigation mechanisms.
In MainWindow, create a Dynamic panel object. In its Panel property, select RemoteMainPanel.
Create two integer variables, Speed and Acceleration, in the Model folder.
In Panel1, insert a Spin box object. In its Value property, set a dynamic link with the Speed variable.
In Panel2, insert a Linear gauge object. In its Value property, set a dynamic link with the Acceleration variable.

Client: configure import

In the OPC UA folder, create a OPC UA Client object (New > OPC UA Client): the ClientOpcUa1 object is created.
In the Endpoint URL server property of ClientOpcUa1, enter the endpoint of the OPC UA Server object present in the server project.
In the ClientOpcUa1 properties, add two runtime configurations (see Configure the import of the nodes at runtime).
Set the properties of the first runtime configuration to import the user interface:
- Local destination node: ClientProject/UI
- Remote source node: /Objects/ServerProject/UI/RemotePanels, i.e. the path of the RemotePanels folder on the server at runtime
- Content synchronization mode: Import only
- Include remote source node: True
Set the properties of the second runtime configuration to import and synchronize the variables:
- Local destination node: ClientProject/Model
- Remote source node: /Objects/ServerProject/Model, i.e. the path of the Model folder on the server at runtime
- Content synchronization mode: Import and synchronize values
- Include remote source node: False

Client: prepare the user interface

In MainWindow, create a Dynamic panel object named ClientPanelLoader. The panels imported from the server are displayed in this panel at runtime.

In MainWindow, create a NetLogic with the following code. The NetLogic invokes the ChangePanel method of the dynamic panel to display the RemoteMainPanel panel as soon as the client connects to the server.

public override void Start()
{
    // get imported panel and set it as a starting panel for the client's panel ClientPanelLoader
    // references to other remote panels are mantained when change panel is invoked
    var clientPanelLoader = (PanelLoader) LogicObject.Owner.Get("ClientPanelLoader");
    var serverPanel = Project.Current.Get("UI/RemotePanels/RemoteMainPanel");

    if (serverPanel == null)
    {
        Log.Error("Remote server main panel not found");
        return;
    }


    clientPanelLoader.ChangePanel(serverPanel.NodeId, NodeId.Empty);
}

Check operation

Start, in order, the server project and the client project to verify the following:

The client displays the server panels.
Changing the values of the variables on the server, the same values are shown on the client user interface.