Installing and starting the PROCON-WEB IoT Designer

1. Double-click the file PWeb_x.y.z-IOT_Full.exe and follow the instructions of the installation program.
   This file can be obtained from logi.cals (x.y.z is a placeholder for the respective version number).

2. Attach the USB-stick to an USB-port in order to activate the PROCON-WEB license.
   The USB stick can be obtained from GTI control. Without a license, PROCON-WEB IoT Designer can be operated as demo version only.

3. Select the item PROCON-WEB x.y Designer 32Bit in the Windows start menu (x.y is a placeholder for the respective version number).

Creating the visualization project

How to create the visualization project in the PROCON-WEB IoT Designer (called "Designer" in the following text) and how to use the visualization data from logi.CAD 3 in the Designer:

1. In the ribbon pane, click New Project, enter a project name, select IoT under Target type and click OK.
   Result: The project tree provides the PROCON-WEB functions.

2. Determine the communication for the process:

   1. In the project tree, expand the item Process connection.

   2. Select the item Tag.
      Result: The main area displays the tab Tag with 5 predefined process variables. Moreover, the ribbon pane switches to the tab TAG.

   3. In tab TAG, click Driver Selection.

   4. In the dialog, select LogiCAD3 and click OK.
      

      

3. Import the variables from logi.CAD 3 into the Designer:

   1. In tab TAG, click PLC Import.
      Result: The main area displays the tab PLC tag import. Right of this tab, the area Import settings with the driver LogiCAD3 is displayed.

   2. In the area Import settings, click Add..

   3. In the dialog, select the XML-file containing the visualization data of logi.CAD 3 and click Open.
      

      

      
      Result: The file is listed in the area Import settings.

   • Click Read symbol in the lower area of Import settings.
     

     

     
     Result: The process variables are listed in the tab PLC tag import.
     

     

   1. Select the variables required for the visualization. Open the context menu for these variables and select the command Import now.
      

      

      
      Result: Now the process variables have been created within the Designer and are visible within the tab Tag.

4. Create the first process image in which the variables from logi.CAD 3 will be visualized:

   1. In the project tree, expand the item Userinterface and the child item Startpictures.

   2. Double-click the image Start that is provided in a new project by default.
      Result: The main area displays the editor for Start. Moreover, the ribbon pane switches to the tab PICTURE EDITING.

   3. In the tab PICTURE EDITING, click the button for the required control, e.g. click Checkbox or Button.

   4. In the dialog Edit Control, define the appropriate settings (e.g. the text for the control). It is also possible to connect the control with a process variable.

      Control	Connection possible at	Example
      Checkbox	setting Value
      Button	setting Action Bool 1

      Selecting the button within the line of the setting will display a dialog in which you are able to select a process variable – see the example for the checkbox.

   5. Position the controls within the process image.

5. Save the visualization project within the Designer: e.g. menu File – Save Project