Customizing of WinCC Controls. TIA Portal WinCC Runtime Professional. Application Description July Applications & Tools. Answers for industry.

Size: px

Start display at page:

Download "Customizing of WinCC Controls. TIA Portal WinCC Runtime Professional. Application Description July Applications & Tools. Answers for industry."

Gyles Mathews
6 years ago
Views:

1 Customizing of WinCC Controls TIA Portal WinCC Runtime Professional Application Description July 2015 Applications & Tools Answers for industry.

2 Siemens Industry Online Support This document is an article from the Siemens Industry Online Support. The following link takes you directly to the download page of this document: Caution: The functions and solutions described in this entry are mainly limited to the realization of the automation task. Please furthermore take into account that corresponding protective measures have to be taken in the context of industrial security when connecting your equipment to other parts of the plant, the enterprise network or the Internet. Further information can be found under the Entry ID Version 1.0, Entry ID:

3 s Automation Task 1 Solution 2 Configuration and Settings 3 SIMATIC RT Professional Customized Controls Customizing of WinCC Controls Appendix 4 References 5 History 6 Version 1.0, Entry ID:

4 Warranty and Liability Warranty and Liability Note The Application Examples are not binding and do not claim to be complete regarding the circuits shown, equipping and any eventuality. The application examples do not represent customer-specific solutions. You are responsible for ensuring that the described products are used correctly. These Application Examples do not relieve you of your responsibility to use safe practices in application, installation, operation and maintenance. When using these application examples, you recognize that we cannot be made liable for any damage/claims beyond the liability clause described. We reserve the right to make changes to these Application Examples at any time and without prior notice. If there are any deviations between the recommendations provided in this application example and other Siemens publications e.g. catalogs the contents of the other documents have priority. We do not accept any liability for the information contained in this document. Any claims against us based on whatever legal reason resulting from the use of the examples, information, programs, engineering and performance data etc., described in this application example will be excluded. Such an exclusion will not apply in the case of mandatory liability, e.g. under the German Product Liability Act ( Produkthaftungsgesetz ), in case of intent, gross negligence, or injury of life, body or health, guarantee for the quality of a product, fraudulent concealment of a deficiency or breach of a condition which goes to the root of the contract ( wesentliche Vertragspflichten ). The damages for a breach of a substantial contractual obligation are, however, limited to the foreseeable damage, typical for the type of contract, except in the event of intent or gross negligence or injury to life, body or health. The above provisions do not imply a change of the burden of proof to your detriment. Any form of duplication or distribution of these application examples or excerpts hereof is prohibited without the expressed consent of Siemens Industry Sector. 4 Version 1.0, Entry ID:

5 Table of Contents Table of Contents Caution:... 2 Warranty and Liability... 4 Table of Contents Automation Task Solution Overview of customizing options Hardware and software components used Configuration and Settings Customizing the Toolbar Customizing the size of the buttons Customizing the icons on the buttons Changing user-defined buttons Customizing the divider / dividing space Customizing grids Customizing the scrollbar Appendix Layout structure of AlarmControl Layout structure of OnlineTableControl Layout structure of OnlineTrendControl Layout structure of RulerControl References History Version 1.0, Entry ID:

6 1 Automation Task 1 Automation Task Customizing WinCC controls according to individual requirements is frequently required. Touch screen operation can be taken as an example, where the standard buttons of the controls are too small. Sometimes it is desirable to adapt the appearance of the controls to the individual project layout. Figure 1-1 illustrates the fact that standard buttons are too small for touch-screen entry. Figure Version 1.0, Entry ID:

Customize buttons (size and layout) Grids, e.g.

(style) The buttons Figure 2-1 have been adjusted.

7 2 Solution 2 Solution 2.1 Overview of customizing options This entry facilitates the customizing of WinCC controls. You have the following options of customizing the control properties: Customize buttons (size and layout) Grids, e.g. in AlarmControl (individual icons, also depending on values) Scrollbar (style) The buttons Figure 2-1 have been adjusted. The larger display has made their operation easier. Figure 2-1 Delimitation This application does not include a description for the operation and use of TIA portal WinCC Runtime Professional Version 1.0, Entry ID:

8 2 Solution 2.2 Hardware and software components used The application was set up with the following components: Standard software components Table 2-1 Component No. Order number Note TIA Portal WinCC Engineering V13 SP1 TIA Portal WinCC Runtime Professional V13 SP1 1 6AV AV Sample files and projects The following list includes all files and projects that are used in this example. Table 2-2 Component _WinCC_Rt_Prof_Custom_Controls_en.pdf _OriginalIcons.zip _Customizing.zip _ProjectCustomizedControls_V13.zip _ProjectCustomizedControls_V12.zip This document. Note Standard TIA Portal WinCC icons. Created example icons. WinCC V13 example project WinCC V12 example project 8 Version 1.0, Entry ID:

9 3 Configuration and Settings 3 Configuration and Settings 3.1 Customizing the Toolbar General information Standard configuration Operation and customization of the toolbar is the same for all WinCC controls. In standard configuration, different buttons can be selected and their order can be re-arranged. Hotkeys can also be assigned that are used to call the functions connected with the buttons. The user can create user-defined buttons that trigger certain events when clicked on. Version 1.0, Entry ID:

10 3 Configuration and Settings Figure 3-1 In standard configuration, the graphics of the toolbar cannot be modified. The userdefined buttons only have numbers and therefore have no significance to the user. The size of the buttons is much too small for use on displays operated manually through touch screen. In standard configuration, this size cannot be modified. Creating a subfolder for individual layouts The default installation of WinCC will create the folder CCAxControlSkins in directory C:\Programme(x86)\Common Files\Siemens\bin\. 10 Version 1.0, Entry ID:

11 3 Configuration and Settings Within this folder, another folder with the control name must be created for each control for whose toolbar button you want to change. For the AlarmControl the folder s name is AlarmControl. Create a new subfolder ( NewButton ) using the above path, in which the individual layouts for the toolbar can be stored. Note Generally, please note that the folder CCAxControlSkins is PC-based and is therefore not necessarily available on the WinCC client. This must be taken into account especially when using multiple workplace systems or the WebNavigator option. Note The file and folder names listed in the following must be precisely adhered to so that the images are correspondingly displayed by the controls. The png data format is used as an example in the description. The gif and jpg formats are also permissible. Note Basically, not all graphics files mentioned must be created when setting up a new layout. The standard control settings will be used for all files not available. Overview of the subfolders for the various controls Table 3-1 No. 1 AlarmControl 2 Online TrendControl 3 Online Function TrendControl 4 Online TableControl Control Version 1.0, Entry ID:

3 Configuration and Settings Selection of modifications In order to visualize the effects of the changes made, the selection of the layout needs to be changed via the configuration dialog of the

12 3 Configuration and Settings Selection of modifications In order to visualize the effects of the changes made, the selection of the layout needs to be changed via the configuration dialog of the control (in this case AlarmControl). Once the NewButton folder is created in the above directory, its name will appear in the list of layouts. Figure 3-2 Note This configuration option of the controls is only possible at runtime. 12 Version 1.0, Entry ID:

13 3 Configuration and Settings Customizing the size of the buttons The "IconsBackground.png file defines the size of the buttons. Since the toolbar buttons are square, the maximum of the side lengths is read out of "IconsBackground.png and set as the height and length of the buttons. The thus defined size is fixed and cannot be changed through other graphics. With this customization you can set the size of the buttons according to your needs. Figure 3-3 Version 1.0, Entry ID:

3 Configuration and Settings 3.1.2 Customizing the icons on the buttons Basic procedure The IconsNormal.png file must be created in the Toolbar folder in order to customize icons.

14 3 Configuration and Settings Customizing the icons on the buttons Basic procedure The IconsNormal.png file must be created in the Toolbar folder in order to customize icons. In this file, the individual graphics of the buttons must be inserted successively. See the following diagram. (The file for disabled buttons is IconsDisabled.png.) Figure 3-4 The IconsNormal.png file can be customized as desired and replaced by new graphics for the buttons. If you want to use new graphics the files IconsNormal.png and IconsDisabled.png must be customized. You can customize the graphics with any graphics program. The control reads the file, cuts it into individual graphics and displays the cut parts on the respective buttons. Example for customized graphics on buttons If you want to display larger buttons, the IconsNormal.png and IconsDisabled.png images must be enlarged. Figure Version 1.0, Entry ID:

15 3 Configuration and Settings Changing user-defined buttons The user-defined buttons only have graphics with numbers from one through nine. The numbers have no significance for the user. Only nine user-defined buttons can be created, after that, only hatched boxes will be displayed. Figure 3-6 Customized graphics of the user-defined buttons are created in the same manner as the standard buttons described above. After creating and renaming the files, store them in the Toolbar folder. With the help of user-defined buttons you can, for example, switch individual trends on and off. Figure 3-7 You can also operate areas in control with the external buttons. Version 1.0, Entry ID:

16 3 Configuration and Settings Figure Customizing the divider / dividing space The divider and the left space before the button starts can also be customized. Create the Space.png file and store it in the Toolbar folder in order to change the space around the divider. The width of this graphics is used as the width of the dividing space. To change the left margin you can create the Left.png file. A margin as wide as "Left.png" will be created on the left at the start of the button. Figure Version 1.0, Entry ID:

17 3 Configuration and Settings 3.2 Customizing grids The grid (table element) can be customized for the AlarmControl. In standard layout, text and, in certain columns, also icons are displayed in the table cells. Basically, for each control with a table, you can determine whether the content is to be displayed as a text or as an icon in the configuration dialog. The selection for AlarmControl is shown below. In this case the status is shown as a text and as icon. Version 1.0, Entry ID:

18 3 Configuration and Settings Figure Version 1.0, Entry ID:

19 3 Configuration and Settings The status content is shown both as text and icon, in case there are any comments, an icon will be displayed as well. Modification of standard icons Customizing makes it possible to show different icons depending on the values in the cells. To implement this, analogous to the modification of the toolbar appearance, a folder with the name of the new layout must be created in CCAxControlSkins. In this example the TableIcons folder is created. In this folder, a subfolder for the control (here: "AlarmControl") and there the "GridIcons" folder must be created. A folder will be created in GridIcons for each column of the table in which icons shall be displayed. The name of the folder is also the name of the object name 1 of the control. The TableIcons layout is selected from the configuration dialog to enable the new icons. In this example, the icons included in the default design are replaced in the status column. For this purpose, the State folder is created. This folder has to include the graphics with the respective status names 2 (in English). For status, that has a respective graphic there, the new icon is displayed in the table cell when the status occurs. Figure 3-11 No icons can be displayed in the date and time columns. In order to assign icons to message numbers, a numerical value can be assigned to each graphics. For instance, the respective number will be highlighted in a certain color. Then the graphics names (in the Number folder) will be, for example, five 5.png. If an icon is defined for a certain interval rather than a single value, the graphics name for an interval, for example 50 to 100, will be 50_100.png, the limits being included in the interval. Due to the high degree of flexibility of the graphics icons it may be reasonable to only show the icons without text in order to visualize, for example, a filling level. For cells including text, such as, for example, the point of failure, a graphic file needs to be defined for each text that can be displayed, particularly the point of failure. This offers a good option to visually show the operator at what point of the plant an alarm occurred. 1 An overview of all the message blocks and their object names can be found in the Appendix. 2 An overview of all values that can on status and other columns are located in Appendix. Version 1.0, Entry ID:

20 3 Configuration and Settings If a failure occurred, for example, in the tank, a tank icon can be shown, or if there is an error at the valve, the icon of a value is shown. Figure Customizing the scrollbar You can customize the scrollbar of the WinCC controls. To do this, replace the graphic files that the scrollbar is composed of. Below, the default scrollbar is shown that is displayed when no changes are made. Figure 3-13 As in the toolbar customizing process, a "Scrollbar folder is created in the "C:\Programs\Common Files\Siemens\BIN\CCAxControlSkins\New button directory. Horizontal and vertical folders are created there. Within these folders, numerous individual files must be created or customized, of which the scrollbar is composed during runtime. The following diagram shows one example of a customized scrollbar. Figure Version 1.0, Entry ID:

21 4 Appendix 4 Appendix 4.1 Layout structure of AlarmControl Toolbar graphics Table 4-1 Values (graphics name) IconsBackground.png IconsDisabled.png IconsDisabledEx.png IconsNormal.png IconsNormalEx.png Left.png Space.png Description Size of toolbar icons Disabled icons Disabled user-defined icons Icons User-defined icons Left margin in toolbar Space between the icons Assignment of toolbar buttons Table 4-2 Function Object ID (sequence in IconsNormal.png) Help 1 Configuration dialog 2 Message list 3 Short-term archive list 4 Long-term archive list 5 Blocked items list 6 Hit list 7 List of messages to be hidden 8 Acknowledge central signaling device 9 Single acknowledgement 10 Group acknowledgement 11 AutoScroll 12 Selection dialog 13 Display option dialog 14 Blocked items dialog 15 Print 17 Emergency acknowledgement 18 First alarm 19 Previous alarm 20 Next alarm 21 Last alarm 22 Infotext dialog 23 Comment dialog 24 Loop In Alarm 25 Block alarm 26 Version 1.0, Entry ID:

22 4 Appendix Function Object ID (sequence in IconsNormal.png) Release alarm 27 Hide alarm 28 Show alarm 29 Sorting dialog 30 Time base dialog 31 Copy lines 32 Connect backup 33 Disconnect backup 34 Export data 35 First page 36 Previous page 37 Next page 38 Last page 39 Assignment of user-defined toolbar buttons Table 4-3 Function User-defined User-defined User-defined X Table 4-4 Folder (object name in message block) Date Time Duration SumWin Object ID (sequence in IconsNormalEx.png) 100X Values (graphics name) No icons possible No icons possible No icons possible No icons possible State Come received ComeQuit Go Information Lock Description Received and acknowledged present Information Blocked Quitstate Quit Acknowledgement Number QuitEmergency QuitHorn QuitSystem Emergency acknowledgement Horn acknowledgement System acknowledgement Numerical value as name of graphics (e.g. "1.png", "5.png") 22 Version 1.0, Entry ID:

23 4 Appendix Folder (object name in message block) Values (graphics name) Description Class Error Error Unknown System Unknown System Type Error Error Warning Alarm Warning Alarm AGCPU No icons possible Name of displayed variable as name of the graphics Day Reporting Yes Logging available No No logging available Comment: Yes Comment available No No comment available info text Yes Infotext available No No info text available LoopInAlarm Yes Loop In Alarm available Computer Name Username Priority Text1 to text 10 Value1 to value10 No No Loop In Alarm available Displayed computer name as name of the graphics Displayed user name as name of the graphics Numerical value as name of graphics (e.g. "1.png", "5.png") Displayed text as name of the graphics Numerical value as name of graphics (e.g. "1.png", "5.png") 4.2 Layout structure of OnlineTableControl Toolbar graphics Table 4-5 Values (graphics name) IconsBackground.png IconsDisabled.png IconsDisabledEx.png IconsNormal.png IconsNormalEx.png Left.png Space.png Description Size of toolbar icons Disabled icons Disabled user-defined icons Icons User-defined icons Left margin in toolbar Space between the icons Version 1.0, Entry ID:

24 4 Appendix Assignment of toolbar buttons Table 4-6 Function Object ID (sequence in IconsNormal.png) Help 1 Configuration dialog 2 First data set 3 Previous data set 4 Next data set 5 Last data set 6 Edit 7 Copy lines 8 Select data connection 9 Select columns 10 Select time range 11 Previous column 12 Next column 13 Start / Stop 14 Print 15 Define statistics range 16 Calculate statistics 17 Connect backup 18 Disconnect backup 19 Export data 20 Assignment of user-defined toolbar buttons Table 4-7 Function Object ID (sequence in IconsNormalEx.png) User-defined User-defined User-defined X 100X Grid Icons cannot be displayed. 4.3 Layout structure of OnlineTrendControl Toolbar graphics Table 4-8 Values (graphics name) IconsBackground.png IconsDisabled.png Size of toolbar icons Disabled icons Description 24 Version 1.0, Entry ID:

25 4 Appendix Values (graphics name) IconsDisabledEx.png IconsNormal.png IconsNormalEx.png Left.png Space.png Description Disabled user-defined icons Icons User-defined icons Left margin in toolbar Space between the icons Assignment of toolbar buttons Table 4-9 Function Object ID (sequence in IconsNormal.png) Help 1 Configuration dialog 2 First data set 3 Previous data set 4 Next data set 5 Last data set 6 Ruler 7 Zoom section 8 Zoom +/- 9 Zoom time axes 10 Zoom value axis 11 Shift trend range 12 Shift axis range 13 Original view 14 Select data connection 15 Select trends 16 Select time range 17 Previous trend 18 Next trend 19 Start / Stop 20 Print 21 Define statistics range 22 Calculate statistics 23 Connect backup 24 Disconnect backup 25 Export data 26 Relative axis 27 Version 1.0, Entry ID:

26 4 Appendix Assignment of user-defined toolbar buttons Table 4-10 Function Object ID (sequence in IconsNormalEx.png) User-defined User-defined User-defined X 100X Grid Icons cannot be displayed. 4.4 Layout structure of RulerControl Toolbar graphics Table 4-11 Values (graphics name) IconsBackground.png IconsDisabled.png IconsDisabledEx.png IconsNormal.png IconsNormalEx.png Left.png Space.png Assignment of toolbar buttons Table 4-12 Function Help 1 Configuration dialog 2 Ruler window 3 Statistics range 4 Statistics 5 Print 6 Export printing 7 Description Size of toolbar icons Disabled icons Disabled user-defined icons Icons User-defined icons Left margin in toolbar Space between the icons Object ID (sequence in IconsNormal.png) Assignment of user-defined toolbar buttons Table 4-13 Function Object ID (sequence in IconsNormalEx.png) User-defined User-defined User-defined X 100X Grid Icons cannot be displayed. 26 Version 1.0, Entry ID:

27 5 References 5 References Internet links The following list is by no means complete and only presents a selection of related sources. Table 5-1 Topic \1\ Link to this document \2\ Siemens Industry Online Support Title History Table 6-1 Version Date Modifications V First version V Adaptation to WinCC Professional V13 Version 1.0, Entry ID:

Customizing of WinCC Controls. SIMATIC WinCC. Configuration Example February Applications & Tools. Answers for industry.

Customizing of WinCC Controls. SIMATIC WinCC. Configuration Example February Applications & Tools. Answers for industry. Customizing of WinCC Controls SIMATIC WinCC Configuration Example February 2011 Applications & Tools Answers for industry. Industry Automation und Drives Technologies Service & Support Portal This document