WebVisit 6.01.02 User course
1 Project creation and the user interface WebVisit User course 2 Getting started with visualization creation 3 Access to structures and fields 4 Macros in WebVisit Pro 5 Language selection 6 Startup and scaling Your speaker: CCAX AUTOMATIONWORX Competence Center Do you have any questions or suggestions? Contact us on: + 49 5281 9-462101 This document may not be distributed or reproduced and its contents utilized and disclosed unless specifically authorized. Violators are liable for damages. All rights reserved. All other product names are trademarks or registered trademarks of their respective companies, and they are used without representation as to their general use. 2010 Phoenix Contact GmbH & Co. KG 2012/01-06
Notes:
Project creation and the user interface 2012/01-06 1-1
Project creation and the user interface Notes: 1-2
Project creation and the user interface Contents This section describes the user interface of WebVisit 6.01.02 and the basic functions of the toolbar. In addition, a project will be created and the basic settings explained. Note Information Tip 1-3
Project creation and the user interface Notes: 1-4
Project creation and the user interface The easiest way to start WebVisit is via the Start menu. The path is shown above. 1-5
Project creation and the user interface The screen depicts the user interface of WebVisit when it is started for the first time. If projects have already been processed with WebVisit then the project that was opened last is loaded when the program is started. As of Version 6.01.05, German, English, and French can be selected as the program language. The window contains a toolbar, a tool box (the Painters Library toolbar), a status bar, a layout toolbar, and the project tree window (the Project Files tree toolbar). Some of the elements are described below. The design may vary depending on the operating system. Toolbar: Display the local variables Display the external variables (PDD for PC Worx) Create HTML files (e.g., multi-language projects) Compile the project Download the project to the WebVisit server 1-6
Project creation and the user interface Painters Library toolbar Select the area to be edited Insert static text (single-row) Insert static text (multi-row) Insert a line Insert a rectangle Insert a circle/oval Insert a polygon Insert an image (GIF format only) Insert an editable field Insert a switch Insert a bar graph Insert a macro from the macro library Layout toolbar In addition to the Move to front and Move to back buttons and the grouping/ungrouping of objects, there are additional buttons that allow you to resize multiple objects uniformly and to align objects located in other objects, for example. The functions are not described further here. Status bar The status bar displays various information. E.g., when you hold the mouse over a button icon, additional information is displayed. On the right, you can see whether the Scroll Lock, Num Lock or Caps Lock keys are active. 1-7
Project creation and the user interface To create a new project, do not click on the blank page button in the toolbar. Instead, select the File menu followed by New Project. (1) In the next window, you have the option of assigning a custom name and specifying the file path. The default path is specified in the example above. (2) The checkbox for a hardware-specific project can be ignored as it does not offer any further functions in the WebVisit version described here (6.01.02). 1-8
Project creation and the user interface Once the project has been created, four elements appear in the project tree window. The element with the extension jar is a Java archive for the distribution of class libraries that are used by the web server. Files with the extension tcr and itq are variable initialization files. These files and the graphic views (extension: teq) must be present in order to achieve a functioning visualization on a web server. The MsgBox.teq graphic view, which is generated when the project is created, outputs various information and warning messages during operation and appears automatically in such instances. In order to now generate a graphic view, which is to be displayed later, click on the button with the blank page. Or select File > New Project In the window that opens, the suggested file name is the name of the project followed by a one. It is recommended that you use a concise name which describes the function of the graphic view. First, you should specify the size of the graphic view in the project settings. The default size used is 640 x 480 pixels. If Service Pack 1 (Version 6.01.05) is installed, there is a wizard to guide you through the initial settings. 1-9
Project creation and the user interface The project settings are called via the Project > Project Configurations menu item. The first tab that is displayed (Project TEQ Configurations) contains size information for the graphic views (referred to as TEQ here). The other project settings are, in large part, only explained briefly here. Other settings will be explained in more detail in later sections. TEQ Configurations: Default settings for new graphic views. Width: Default width of a graphic view in pixels. Height: Default height of a graphic view in pixels. Background Color: Default background color. Foreground Color : Default font/outline color. Font: Default font type for graphic icons. Background TEQ: Specify graphic view as the background view for new graphic views. Foreground TEQ: E.g., for elements that are to be shown under specific conditions. Applet params: Parameters for the Java applet. Period: Update rate for the process data points in ms. Main TEQ: Start screen when the HMI is loaded. Debug: When debug mode is activated, advanced debug information can be used. A Java console is required for this. Message Box: When activated, error messages are displayed. HTML parameters in csv file: Not supported at present. Order per view: Only updates process data points for the active view. Encode Special Chars: When activated (recommended), special characters in the PPO name are also processed correctly. 1-10
Getting started with visualization creation 2012/01-06 2-1
Getting started with visualization creation Notes: 2-2
Getting started with visualization creation Contents This section uses an example to explain how a PC Worx project that controls a system can be visualized. A background image is inserted, a logo is created in every view, and switches and indicators are used which are linked to variables. Note Information Tip 2-3
Getting started with visualization creation Notes: 2-4
Getting started with visualization creation In order that variables can be displayed and manipulated with WebVisit, they must be marked as PDD (Process Data Directory) in the variable table in the PC Worx project. The project is then compiled and written to the controller. 2-5
Getting started with visualization creation In order to now use the PDD variables that were created in the PC Worx project in WebVisit, you must specify the corresponding CSV file to WebVisit. This is done in the project settings under Project Phoenix Advanced. You simply need to select the project file (.mwt) from PC Worx. The path to the corresponding PDD file is determined automatically. 2-6
Getting started with visualization creation To set a graphic as the background for the graphic view, select the Image tool and draw a rectangle. The size of rectangle is unimportant as the size of the graphic will later correspond to the actual size in pixels. You must therefore first check whether the image (GIF format only) is of suitable size and adjust it if necessary. 2-7
Getting started with visualization creation To integrate an existing image file, select the rectangle to display the properties in the Properties window. Select the Repaints item (1). When the Edit a Source option is activated, you can click on the... button in the Name line (2). Now select the image file via the new window that opens (3). Once this is selected, you are taken back to the corresponding view with the image now inserted (4). The image is now also listed in the project tree window (Project Files). 2-8
Getting started with visualization creation As with the Image tool, a button can also be created by clicking and dragging to the appropriate size. All settings for the button should be made in the object properties. They can always be displayed by selecting the relevant object in the Properties window. 2-9
Getting started with visualization creation Using the button as an example, the object properties that apply to most of the other control elements are explained below. Area: General The exact pixel size of the object can be specified in the General area. The outline color, background color, and their font type can also be defined here. The Painter Position Offset Settings can also be used to modify the object position according to local or external variables. In the Repaints area, you can set the source that is to be used for the object marking. In the case of the String type, the name can be entered directly. The default button name is Button. Instead of a String, the HTML TAG type can also be used. This is explained in more detail in the Language selection section. The PPO type allows you to select a variable marked as PDD in PC Worx. While the Container type allows you to select a local variable. The File type also enables an image to be selected as the background for the button. This is useful, for example, if you wish to use customized buttons. The On Condition checkbox enables conditional naming, for example. Two sources can be set for a button. Area: Actions Set Variables Here you can set the function that is to be executed when the button is pressed (Set Var on Mouse DOWN) and released (Set Var on Mouse UP). When this checkbox is activated, the fields for the variable type and name are also shown. Next to Condition you can also specify the value that the variable should allow for the assigned action. 2-10
Getting started with visualization creation Area: Actions Toggle Increment Variable As the name suggests, a type of inching mode can be set up for a variable or a variable value can be incremented by a specified value every time the object is actuated. Area: Actions Jump View Jump jumps to a definable graphic view. When this checkbox is activated, a selection list of available graphic views is provided. The Back Button checkbox is used to select the button function for jumping back to the previously active graphic view. URL Jump can be used to select an html file that is then opened. Area: Hide and Disable Painter Here you can deactivate the function of the object under certain conditions. You can also define whether or not the object is visible. In this case, please note that a hidden button is not the same as a non-functioning button. I.e., it can be operated even when it is not displayed. Area: Border Advanced The fill and outline color can be set under Border Advanced and these settings can also depend on various adjustable conditions. Depending on which checkboxes are selected, the appearance of the window will change and the corresponding selection options will be displayed as per the Color Conditions. Area: Text Positions Advanced Various setting options are available here for aligning the object text. Instead of just general text alignment, you can also set conditions here for when the text is to be aligned as specified. Area: Function Keys A shortcut for activating the button can be defined in this area. Please note that this function only works with the micro browser on the web panels. 2-11
Getting started with visualization creation If a PDD variable provided via PC Worx is to be used, the Action Toggle Increment Variables tab should be selected, e.g., for a normal on/off operation, and the Toggle checkbox activated. The type used is a PPO variable. The variable that is to be toggled is selected in the next window via Select (1) and the selection is confirmed with OK (2). PPO for stands for process point; corresponds to PDD in PC Worx. 2-12
Getting started with visualization creation The @GV.Heating variable is to be switched via the button. A rectangle that changes color between blue = off and red = active is to indicate whether or not the variable is switched. To do this, draw a rectangle over the heating using the rectangle tool. In the rectangle properties, the corresponding color settings are made in the Border Advanced area and the reference variable is specified. Clicking on the Color button opens another window where various colors can be selected. 2-13
Getting started with visualization creation There are two options for displaying text. Firstly by means of custom text input (string) and secondly by outputting the contents of a variable. In the above example, the value of a variable is to be output. The Static Text tool has been used for this and the corresponding settings as well as the selected variable can be seen above. Once everything is set, the value of the variable will be displayed in WebVisit after transferring the project. 2-14
Getting started with visualization creation The PPO Initialisation window is used to assign a unit for a variable value. All external variables that are used are listed here. Simply enter the desired unit in the Unit column. There are also columns for the minimum and maximum permissible value. Plus a column for the variable format. The format is required in order to enter a minimum or maximum value. The limit value settings only apply for the Edit Box tool. This checks the specified limits when a value is entered. 2-15
Getting started with visualization creation In addition to the familiar setting options of the Button tool, the BarGraph tool also includes the Bargraph Advanced area. Under Source Ranges you can set the value at which the maximum and minimum value for filling is reached, and the direction in which filling is to take place can be set under Orientation. In the Scale area, you can display a scale and define its spacing. 2-16
Getting started with visualization creation The Line tool also offers additional properties in the Line Advanced area where you can specify the line style as a line or arrow. The other properties are the same as those described for buttons. 2-17
Getting started with visualization creation Instead of the usual repaint properties, the Multi-Line Label tool has a tab called Multiline Repaints. Here multiple lines of text can be generated one after the other. However, variable contents cannot be displayed using this tool. 2-18
Access to structures and fields 2012/01-06 3-1
Access to structures and fields Notes: 3-2
Access to structures and fields Contents This section covers access to field and structure variables in PC Worx. Note Information Tip 3-3
Access to structures and fields Notes: 3-4
Access to structures and fields If a structure is defined in PC Worx, it is a custom data type that can be used for variables. A structure element can be accessed in PC Worx via the variable name and the relevant structure element which are separated by a dot. 3-5
Access to structures and fields In this example, the PC Worx structure variable shown on the previous page is being accessed. When selecting variables (@GV.Mixer) in WebVisit, no other information is available. In order to access it, the structure element must now be manually specified according to the declaration in PC Worx. 3-6
Access to structures and fields If a field is defined in PC Worx, it is a custom data type that can be used for variables. An individual field element can be accessed in PC Worx via the variable name and an index. 3-7
Access to structures and fields In this example, the PC Worx variable shown on the previous page is being accessed. When selecting variables (Main.ProgrammInfo) in WebVisit, no additional information is available. The field level must now be specified manually according to PC Worx and the corresponding field value can then be accessed at this position. 3-8
Access to structures and fields If various field levels are to be accessed via an index variable, this must be accomplished as follows: If the value of another variable is to act as the field element placeholder, this index variable should be integrated as shown above. In the screen, the Arraynr container variable has been used as the index variable. The formula for integrating an index variable is: @Variablename[@CO_Indexvariable@]. The method described above for accessing an index variable applies to Version 6.01.02 or later. The variable is integrated differently in earlier versions. See program help for more detailed information. 3-9
Access to structures and fields Notes: 3-10
Macros in WebVisit Pro 2012/01-06 4-1
Macros in WebVisit Pro Notes: 4-2
Macros in WebVisit Pro Contents This section covers Macros in WebVisit Pro. Note Information Tip 4-3
Macros in WebVisit Pro Notes: 4-4
Macros in WebVisit Pro There are primarily two ways in which a macro can be inserted. Firstly via the button icon in the tool box and secondly via the Library > Get Object From Library menu item. In the selection screen that then opens, the desired macro is selected in the menu structure and inserted via Insert. Version 6.01.05 also provides a separate window for macro selection. 4-5
Macros in WebVisit Pro As seen on the previous slides, there are various macro variants in the Password Login folder. The way in which they differ is described in the WebVisit help. The macro overview can be accessed via the Help > Help Topics menu, Contents tab, and then via Advanced Functions > Macro Library Index. By way of illustration, one of these macros is described below. In the macro properties dialog box, which can be accessed by double-clicking, a separate password can be assigned for each user level as shown in the example above. You need to choose whether the variable that is to be assigned the password is a local or external variable and what name should be assigned. In this case they are PPO variables with the names level1pw, level2pw, etc. Depending on which password is used for login, the userlevel variable (a local variable here) is assigned the corresponding value 1... 4. A wide range of conditions can be linked with it. All variables selected as containers are created automatically and can be edited under Project > Init Containers or via the button in the toolbar shown on the left (password assignment). On successful login, you have the option of jumping to a graphic view (called login.teq in this case). The same principle applies for the logout button. If an event macro, such as the Autologout macro, is used, it makes sense to run it on a Background-teq, as this won't then have to be inserted in every graphic view in order to ensure consistent monitoring. 4-6
Macros in WebVisit Pro If an Alarming macro is inserted, the window shown above on the right containing cross-references for the individual macro variables appears first. These should not usually be changed by the user. Just click OK. 4-7
Macros in WebVisit Pro To access the macro properties, in the case of the Alarming macro the elements need to be grouped first. The Macro Alarming tab can then be viewed by double-clicking on the display field. Another option is to right-click and select Cross Ref and then double-click on the top entry 0_MacroDefOnlineAlarm Repaint: @MACROALRDEFONAlarmList.100426123458 on the Advanced Select tab. Properties: The name of an alarm list must be entered first. Then the number of alarms is entered next to Alarm List Size. A color can be selected for every status in the Alarms State Colors area. 4-8
Macros in WebVisit Pro Generate a new CSV file via Project > Generate HTML TAGS CSV File This is called Alarme.csv. The entries for the alarm text can be adapted in this CSV file. 4-9
Macros in WebVisit Pro For the CSV file to be integrated as well, it must be selected in the project settings under Project Applet Advanced. The selection box appears when the HTML Parameters in CSV File checkbox is activated. 4-10
Macros in WebVisit Pro The alarms are set in this window. Each alarm is assigned an ID and a conditional variable. An alarm is completed by clicking on Add. If changes need to be made, click on Update. Once alarms have been created they need to be downloaded via Download Alarming Trending To Server and the web server must be restarted. Information on downloading project files to the web server is provided in the Startup section. 4-11
Macros in WebVisit Pro When the project is started up, all alarms are listed for the MacroAlarmingDefOnline macro. If an alarm is active, the relevant row is colored according to the settings and the ACK column contains the text NAK (not acknowledged). The Counter column shows how many times the alarm has occurred. At present the Clear Target Log Files button and the Restart Alarm button do not work and the counter can only be reset to zero by means of a hardware reset and resubmitting the project. When an alarm occurs, the MacroAlarmingHisOnline macro writes this to a new row. This list cannot be reset either. In the case of the MacroAlarmingHisOffline macro, the alarms are recorded but only displayed once the list is loaded in the memory. 4-12
Macros in WebVisit Pro To access the properties of the trend macro, proceed as described for the Alarming macro. At the very least, PPO Name, Y Min, and Y Max must be specified in the properties. Once all the desired trends have been entered, exit the window with OK. The Init PPOs item must then be selected in the Project menu in order to initialize the variables if these have not yet been integrated. 4-13
Macros in WebVisit Pro If the Offline Trend macro has been added, the properties can be called by doubleclicking in the trend window on the Advanced Select tab and then on Macro Offline Trend. This is shown above. Here you can specify the number of curves, their colors, and their minimum and maximum values. 4-14
Macros in WebVisit Pro If the curves are entered in the macro properties, the window shown above can be called via Project > Server Alarming Trending Configurations > Trending Configurations The variables for the curves are defined here and the size of the log files is specified. Just like the Alarming window, once these settings have been made they need to be downloaded separately to the web server (2). Important: the trend settings must be activated following download by restarting the web server. 4-15
Macros in WebVisit Pro When the macro is called, the most recently recorded data is not immediately displayed. This must be loaded first via the Start Load Data button. Once the data has been loaded, it can be stored in the directory of your choice via Save Logs to File. 4-16
Macros in WebVisit Pro The DropDown List macro is practically self-explanatory. A predefined variable list is requested and an index variable is described as per the selection. This may be a container variable or a PPO variable. In PC Worx, the index variable must be of DINT type. When the element is selected, the index variable therefore has the value 0. This means, for example, that when the 5th selection field is selected, the variable has the value 4. Note: If a container value is to be used as the placeholder for a level of a PC Worx field variable, see the description in Section 3. 4-17
Macros in WebVisit Pro Notes: 4-18
Language selection 2012/01-06 5-1
Language selection Notes: 5-2
Language selection Contents Due to increasing globalization, there is a growing tendency for people of different nationalities to work together or for solutions to be marketed globally. Here, the possibility of switching between several languages can really make the difference. WebVisit also supports the creation of multi-language projects. This section explains the necessary steps. Note Information Tip 5-3
Language selection Notes: 5-4
Language selection In order to select languages in WebVisit, all multilingual elements must be set to HTML TAG type. It saves on typing when the name of the elements already corresponds to the first language. In the project settings under Project > Project Configurations, enter as many CSV files (Add button) as there are languages to be used. The corresponding files are then created and filled via Project > Generate HTML TAGS CSV File The menu item must be selected again every time a change is made. 5-5
Language selection In the CSV files that are created, the part after the semicolon is now replaced by the translation of the part before the semicolon. 5-6
Language selection The final step is to select the relevant language file in operation. An internal language selection function is used for this. The name @LANGUAGE (note the capitalization) is entered via a button on the Actions Set Variables tab. The relevant CSV file is entered as the value. The project can then be compiled and written to the web server. 5-7
Language selection Notes: 5-8
Startup and scaling 2012/01-06 6-1
Startup and scaling Notes: 6-2
Startup and scaling Contents This section shows how to write a project to the web server and call it on the PC or web panel. Note Information Tip 6-3
Startup and scaling Notes: 6-4
Startup and scaling Before the project is transmitted to the web server, it must be compiled. On completion of compiling, click on the transmit button. In the window that opens, enter the IP address of the controller where the desired web server is located and click on Connect. If the connection data has been entered correctly, a list will appear containing the files to be transmitted. If not modified in the settings, the file entry.html is listed here. The project will be called later using this file. Clicking on Download Project starts the transmission process. If everything proceeds successfully, the confirmation message can be closed with OK and the download window exited. 6-5
Startup and scaling The created project can be called using any standard web browser by simply entering the IP address. Java Runtime must be installed in order for it to be displayed correctly. If the individual graphic views are not refreshed, the temporary storage of contents must be deactivated in the Java settings. 6-6
Startup and scaling To display the project on a web panel, press the Settings button when the panel is starting up. In the screen that follows, enter the address http://xxx.xxx.xxx.xxx under Start URL. The IP parameters of the web panel must be set correctly in order for the project to be called successfully. This is achieved when the controller with the web server is located in the same subnetwork as the panel, and the last digit of the IP address differs (Class C network). Then press Save followed by Quit. Note: Special internal container variables can be used to implement various other functions. E.g., shutting down the micro browser. For additional information, simply type special containers into the WebVisit help. This also applies to @LANGUAGE for language selection (see above). 6-7
Startup and scaling With WebVisit, a project can be displayed on HMIs of various size. This is made possible by scaling the visualization. To reduce the visualization to half its size, the steps specified above must be followed. To now call the scaled version, first compile and transmit the project in the browser or web panel and call the corresponding file. Here: http://<ip address>/scale50percent.html. Scaling is carried out by the relevant HMI and requires computing capacity. It is recommended that you avoid scaling on less powerful web panels. 6-8