March 2006, rev 1.3. User manual

Transcription

1 March 2006, rev 1.3 User manual

2 Note concerning the warranty and the rights of ownership The information contained in this document is subject to modification without notice. The vendor and the authors of this manual are not liable for the errors it may contain, nor for their eventual consequences. No liability or warranty, explicit or implicit, is made concerning quality, the accuracy and the correctness of the information contained in this document. In no case the manufacturer's responsibility could be called for direct, indirect, accidental or other damage occurring from any defect of the product or errors coming from this document. The product names are mentioned in this manual for information purposes only. The trade marks and the product names or marks contained in this document are the property of their respective owners. This document contains materials protected by the International Copyright Laws. All reproduction rights are reserved. No part of this handbook can be reproduced, transmitted or copied in any way without written consent from the manufacturer and/or the authors of this handbook

3 Table of contents 1 About this manual Icons used in this manual Presentation viewon development environment The Menu bar The «File» menu The «Edit» menu The «View» menu The «Action» menu The«Animation» menu The «Window» menu The «Help» menu The Toolbar Synoptics management The Project explorer Creation of a new project Creation of a new synoptic Project parametrization Project properties tab: Export Properties tab Widget management The Widgets Explorer Creation of a new widget Widget edition...25

4 6.2.1 Widget sizing Addition of an animation Widget insertion into a synoptic Parametrization of widget animations The Working Area The Synoptics View The Outline View The design functions Common principles The «Image» object The «Line» object The «Polygon» object The «Quart ellipse» object The «Text» object The «ellipse» object The «Rectangle» object The «Half ellipse» object The «Entry field» object The «Button» object The «Polyline» object Animation of the synoptics Definition of animation Applying an animation Applying multiple animations Deleting an animation Allocate a variable to an animation Affect a BASIC script to an animation Basic script: exchange of numbers Basic script: text display Available animations Hyperlink animation Close animation State Colors animation Group State Colors animation...56

5 8.7.5 Level Colors animation Bargraph animation Rotation animation Translation animation Display value animation Show/Hide animation Pilot entry field animation Set variable animation Increment variable animation Reverse bit animation Slider animation Project export Generation and Transfer to the ewon...71

6

7 1 About this manual. 1.1 Icons used in this manual. Important: the icon represented by an exclamation point announces important information relating to the execution and to the use of viewon. Remark: the icon represented by a pin announces additional information, for example other methods making it possible to achieve the required goal. Tip: the icon represented by a light bulb announces tips to work more effectively with the viewon program. 1.2 Presentation viewon is a software making it possible to quickly build human-machine interfaces intended to be used with the ewon. Once charged on the ewon these interfaces can be displayed using a standard Internet browser, are animated in real time and allow the control of the installation. viewon makes it possible to manage simultaneously several projects. A project represents a set of synoptics allocated to a machine. A synoptic is a set of graphical elements with associated animation properties like you can find in other traditional industrial supervision software. 7

8

9 2 viewon development environment The following picture represents the different parts of the viewon development interface. Toolbar Project explorer Menu bar Widget explorer Outline view Design features Synoptics view Widgets display 9

10

11 3 The Menu bar The menu bar contains seven menus: File, Edit, View, Action, Animation, Window, Help (see Figure 3.1). Figure 3.1 The menu bar is context sensitive. If no synoptic is opened only the File, Edit, Window and Help menus are present. 3.1 The «File» menu menu. This menu offers project and synoptic administration functionalities. Figure 3.2 illustrates this Figure 3.2 Explanation of the different items: New project: Creates a new project. New synopsis: Creates a new synoptic. This synoptic will be integrated into the current project. Save: Saves the modifications of the selected synoptic displayed in the editing area. This item is grayed if the selected synoptic has not been modified. Save All: Saves the modifications off all the opened synoptics displayed in the editing area. This item is grayed if no one of the opened synoptic has been modified. Close: Closes the selected synoptic. Close All: Closes all the opened synoptics. Exit: Closes viewon. If there is at least one modified but not saved synoptic in the editing area, a message will be displayed proposing to the user to save the modified synoptics. 11

12 3.2 The «Edit» menu This menu contains commands for editing the synoptics. The commands carry out actions on the selected elements in the editing area. Figure 3.3 illustrates this menu. Figure 3.3 Explanation of the different commands: Undo: Reverses the last command or the last action realized on the selected synoptic. Redo: Reverses the action of the last Undo command realized on the selected synoptic. Copy: Copies the in the editing area selected item to the clipboard. Cut: Removes and copies the in the editing area selected item to the clipboard. Paste: Inserts the contents of the clipboard into the selected synoptic. Delete: Removes the selected item. Select All: Selects the entire content of the selected synoptic. Properties: Displays the properties of the current selected item. The copy, cut, paste, delete commands can be used in the editing area and also in the project explorer window. 12 viewon User manual

13 3.3 The «View» menu This menu contains commands for changing the visual aspect of the editing area. Figure 3.4 illustrates this menu. Figure 3.4 Explanation of the different commands: Zoom In: Zooms in (enlarges) the window editing area to the next preset level. The command is grayed if the maximal zoom level has been reached. Zoom Out: Zooms out (reduces) the window editing area to the next preset level. The command is grayed if the minimal zoom level has been reached. Rulers: Shows or hides the horizontal and vertical rulers. Grid parameters: Opens the grid parameters configuration dialog box. The following parameters can be defined: width and height of the grid size, activation of the snap to grid feature and configuration of the horizontal and vertical snap sensibility. Grid: Shows or hides the grid. 3.4 The «Action» menu The commands present in this menu make it possible to carry out actions concerning the disposition of the graphical elements in the editing area. Figure 3.5 illustrates this menu. Chaptre 3 The Menu bar 13

14 Figure 3.5 Group: Groups the graphic elements selected in the edition area. This command is only enabled if several elements are selected. Ungroup: Breaks the selected graphic element group. This command is only enabled if the selected item contains an element group. Move backward: Moves back the selected object. Move foreward: Moves foreward the selected object. Move to back: Places the selected object behind all the other objects that are not selected. Move to front: Places the selected object in front of all the other objects that are not selected. Lock: Locks the selected graphic element so that it is not possible any more to move the element in the editing area. Unlock: Unlocks the selected graphic element. Align Left: Aligns to the left the graphic elements selected in the edition area. The last selected element is the alignment source. Align Center: Aligns the centers of the graphic elements selected in the edition area. The last selected element is the alignment source. Align Right: Aligns to the right the graphic elements selected in the edition area. The last selected element is the alignment source. Align Top: Aligns the tops of the graphic elements selected in the edition area. The last selected element is the alignment source. Align Middle: Aligns the middle points of the graphic elements selected in the edition area. The last selected element is the alignment source. Align Bottom: Aligns the bottoms of the graphic elements selected in the edition area. The last selected element is the alignment source. 14 viewon User manual

15 Match Width of Figures: Applies the same width to the selected elements. The elements are resized to the width of the last selected element. This command is only enabled if several objects are selected and that at least one among the objects allows the resizing operation (the objects which do not allow resizing are the objects of type «point»: lines, polygons, polylines...). Match Height of Figures: Applies the same height to the selected elements. The elements are resized to the height of the last selected element. This command is only enabled if several objects are selected and that at least one among the objects allows the resizing operation (the objects which do not allow resizing are the objects of type «point»: lines, polygons, polylines...). 3.5 The«Animation» menu The commands present in this menu make it possible to associate animations to the graphical element selected in the editing area. The menu is context sensitive, so only the commands corresponding to the animation that are possible for the selected element are activated. Figure 3.6 All the possible animations will be described later in this document in chapter Animation of synoptics The «Window» menu The command of this menu allows the reinitialization of the working space layout. All the different parts of the viewon development interface are reopened and displayed with the default settings. Figure 3.7 illustrates this menu. Figure 3.7 Chaptre 3 The Menu bar 15

16 3.7 The «Help» menu Hereunder the detail of the Help menu: About viewon: Shows up a popup window containing information about the viewon version and the installed license type. 16 viewon User manual

17 4 The Toolbar The toolbar is a set of icons that represent commands corresponding to the common commands contained in the menus of the menu bar. The toolbar is located just under the menu bar. For explication on the different commands refer to the chapter concerning the menu bar. File menu View menu Edit menu Action menu ToolTips make it possible to identify the function of each item of the toolbar. A ToolTip represents a small rectangular pop-up window that displays a brief description of a control's purpose when the mouse hovers over the control. 17

18

19 5 Synoptics management The viewon software allows to manage a whole set of synoptics. The synoptics are band together in a project. It is possible to manage several projects at the same time. 5.1 The Project explorer Figure 5.1 All your projects are shown in the Project Explorer. This explorer represents in a hierarchical view all your projects and the linked synoptics to each project. When you create a new project or a new synoptic, it is automatically inserted in the hierarchical view. The viewon software manages the saving of the projects on its own. It means that you don't have to choose the file towards which the data will be recorded. When you open the viewon software, you will find all the projects previously recorded on your PC. 19

20 5.2 Creation of a new project Figure 5.2 To create a new project: 1. Right click on a project in the Project Explorer to open the context menu. In the context menu select the New project command. 2. Enter the project name in the input field and click OK. 3. The just created project will appear in the Project Explorer. 5.3 Creation of a new synoptic To create a new synoptic: 1. In the Project Explorer select the project in which you want to add the synoptic. 2. Right click the project to open the context menu. In the context menu select the New synopsis command. 3. Enter the synoptic name in the input field and click OK. 4. The just created synoptic will appear in the Project Explorer. To open a synoptic you only have to double-click on it. The selected synoptic will then be displayed in the edition area. The name of the synoptic should not contain any spaces. Te project and synoptic creation commands can also be found in the File menu of the menubar. 20 viewon User manual

21 5.4 Project parametrization A project is intended to be deployed on an ewon. For that it is necessary to define the network address of the ewon for the synoptic transfer, and to define some animation parameters. To reach the project properties window : 1. Right click on the project in the Project Explorer to open the context menu. In the context menu select the Properties command. Figure 5.3 The Project Properties popup window (Figure 5.3) contains two different tabs. The first one allows configuration of the animation parameters, the second one allows to specify the ewon network address Project properties tab: This tab (see Figure 5.3) allows parametrization of the synoptics animation of the project. 1. Check the Show animation control panel box if you want to display the animation bar on your synoptic once opened with ewon. The animation bar contains the Read and Animate button. 2. Check the Default animation state box if you want to animate automatically the synoptics when opened. 3. The Animation rate field allows you to specify the refresh frequency of the animation. This rate is expressed in milliseconds. Chaptre 5 Synoptics management 21

22 5.4.2 Export Properties tab Figure 5.4 This tab (Figure 5.4) allows you to define the information of the ewon on which the project will be deployed. 1. In the Address field enter the network IP address or the DNS address of the ewon. 2. In the Authentication frame enter the User and Password for the access to the ewon FTP server. 3. In the Connection timeout filed enter the time to wait for a response of the ewon. This parameter is expressed in seconds. 22 viewon User manual

23 6 Widget management A widget is an entity defined by the user for a re-use. Widgets allows you to build libraries of graphic elements, being able to be re-used in several synoptics. A widget is composed of a set of objects with their associated animations. The animation variables in a widget are placeholders variables which will be replaced by true variables when the widget is putted on the synoptic. 6.1 The Widgets Explorer The explorer reflects a hierarchical view of the widgets and a display of the selected widget. Widgets are files organized in directories and having the.tml extension. Commands are accessible in the context menu of the Widgets Explorer allowing to copy/cut/paste/delete a widget or to create a new directory. To move or copy a widget into another directory, it is also possible to use the mouse drag and drop option. The following figure shows the directories and widgets shipped with the software. 23

24 6.1.1 Creation of a new widget 1. In the Widget Explorer select a directory or a subdirectory. 2. Right click on the directory. The context menu appears. Select the «New widget» command. 3. Enter the widget name in the entry field and push the OK button. 4. The just created widget will appear in the Widget Explorer. The widget name must not contain any spaces or punctuation characters. 24 viewon User manual

25 6.2 Widget edition To open an already existing widget for edition, double click on the widget in the Widget Explorer. The widget will be opened in the editing area. The behavior of the editor is the same as for the edition of synoptics: objects and their animations can be edited, removed Widget sizing 1. Right click on the edition area of the widget to show up the context menu. Select «Properties». The following window will be displayed: 2. Insert the new Widget size in the entry fields and click on OK Addition of an animation The addition of an animation to a widget object is similar with that of a synoptic object. The difference is that the variables of the widget will be placeholders variables. The placeholders will be mapped to true variables after inclusion of the widget into the synoptic. The example below shows the Properties window of the «purge» widget example. The variable 'opened' is a placeholder variable. Chaptre 6 Widget management 25

26 6.3 Widget insertion into a synoptic To insert a widget into the current synoptic: 1. Select the widget in the Widget Explorer. 2. Drag the widget into the editing area, by maintaining the left mouse button pressed. 3. Release the mouse button at the place where you want to insert the widget. The object created in the synoptic is linked to the widget. Later modifications of the widget will thus be reflected to the object in the synoptic. If a widget is modified whereas an opened synoptic is using it, the modifications will only be visible on the synoptic after closing and reopening of the synoptic Parametrization of widget animations If the widget contains an animation, you can establish a link between the placeholder name of the widget variable and a tag of your ewon. 1. Select the widget in the synoptic view. 2. Open the widget properties window. 26 viewon User manual

27 3. Click on the tag selection button and select a tag of the ewon. It is possible to change the animation parameters of the inserted widget. In the example just above, the "level.bargraph.max value" parameter allows to modify the max value parameter of the bar-graph animation to which the placeholder variable 'level' is attached to. Chaptre 6 Widget management 27

28

29 7 The Working Area To open a synoptic double-click on it in the Project Explorer. The Working Area proposes all the essential tools for synoptic creation and edition. 7.1 The Synoptics View This view displays all the opened synoptics in a tab representation. The working area is divided into two different parts: the editing area and the toolbox showing all the available objects and the possible animations (see Figure 7.1). Just as in most of other drawing interfaces, you only have to select a tool, to place it in the edition area and to configure the properties of the object. Each element has its own typical characteristics. To edit these characteristics, select the Properties command in the context menu of the selected element. A popup window will be displayed allowing changes of the characteristics. Figure

30 7.2 The Outline View The outline view, located at the left bottom side (default display) of the development environment, makes it possible to easily visualize the zone represented in the editing area. This view is useful when zooms were carried out on the synoptic. Figure 7.2 shows the functioning of the outline view. The zone delimited by a blue rectangle corresponds to the part of synoptic visible in the editing area. Figure viewon User manual

31 7.3 The design functions Common principles All the graphic elements dispose of a context menu, which grant access to the commands like: Copy/Cut/Paste, Group/Ungroup, Align, Lock/Unlock,... When an object is locked, it is possible using the mouse to select an object located on top of the locked object (superposed). By default, the objects are unlocked. The lock function makes it possible for example to put a picture on the background of the screen and to work then on the objects "above" it, i.e. superposed on the picture. Each graphic element owns specific properties (accessible by the context menu) but certain elements have common properties. We can distinguish two different types of graphic elements: 1. Elements of type «line» (see Figure 7.4) : Line, Polyline, Polygon. 2. Elements of type «shape» (see Figure 7.3) : Image, Quart ellipse, Text, Ellipse, Rectangle, Half ellipse, Entry field, Button. Transformation point (*) Figure 7.4 Figure 7.3 Resize handles (*) : Center of rotation, used by the rotation animation (see chapter 8.7.7). All the elements of type «shape» are enclosed in a frame. The frame is displayed when the element is selected (see Figure 7.3). It is delimited by 8 handles (resize handles) disposed on the frame. Chaptre 7 The Working Area 31

32 Properties for elements of type «shape» Figure 7.5 Figure 7.5 shows the first tab of the properties window for elements of type «shape». This tab makes it possible to display or to modify information concerning the frame in which the selected element is enclosed. The values are expressed in pixel. The origin of the axes is the left upper corner of the editing area. Properties for elements of type «line» The elements of the type "line" are not enclosed in a frame thus only the coordinates of the transformation point are displayed in the first tab of the properties window. Only exception is the Line object which is enclosed in a rectangle of which it is the diagonal. Common properties All the graphic elements have style properties relating to the appearance of the element. These properties concern the size, color and style of the strokes and also the fill colors for the elements of type "shape". Figure 7.6 illustrates the Style tab of the Properties window, allowing modification of these parameters. Figure viewon User manual

33 To modify the style of on object: 1. Select the object. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Go to the Style tab (see Figure 7.6). 4. The drop down list Style allows you to select the type of border stroke to use. 1. solid : 2. dashed: 3. dash-dot : 4. dash-dot-dot : 5. dotted : 6. invisible : 5. Enter the stroke size in pixel into the Size entry field. 6. Click on the Color button. The color palette window will be displayed. 7. Select the color you want. 8. Click on the OK button to validate the color selection. 9. Click on OK button to validate the modification of the object. All the elements are resizable thanks to the 8 handles disposed around the frame. There is a ninth handle surrounded of a circle, which represents the center of rotation of the element. This center can be moved. Chaptre 7 The Working Area 33

34 7.3.2 The «Image» object Insertion of an image object Figure 7.7 To insert an image into your current synoptic: 1. Click on the Image tool in the toolbox (see Figure 7.7). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the image. Then release the mouse button. Modification of the image properties To modify the properties of the image object: 1. Select the Image object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Properties tab (see Figure 7.8) 4. Click on the image browser button to select the image source. The file selection window shows up. 5. Locate the image file that you want to insert, and then click Open. 6. If you don't want that your image can be resized, check the Keep original size box. 7. If you want to resize your image but keep the original ratio, check the Keep ratio box. 8. Click OK to validate your modifications. Image browser button Figure 7.8 Once the image added to the synoptic it becomes totally integrated into the project. It becomes independent of the source image. The check box Keep original size prevent image resizing, thus this action overrules the action of the check box Keep ratio. 34 viewon User manual

35 7.3.3 The «Line» object Figure 7.9 Insertion of a line object To insert a line into your current synoptic: 1. Click on the Line tool in the toolbox (see Figure 7.9). 2. In the editing area click at the place which will represent the starting point of your line. Release the mouse button. 3. Move the mouse pointer to another place in the editing area and click down the mouse button on the place which will represent the end of your line. Modification of the line properties To modify the properties of the line object: 1. Select the Line object you want to change. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Main Parameters tab (see Figure 7.5) 4. Modify the parameters you want to change. 5. Click OK to validate your modifications. Chaptre 7 The Working Area 35

36 7.3.4 The «Polygon» object Figure 7.10 Insertion of a polygon object To insert a polygon into your current synoptic: 1. Click on the Polygon tool in the toolbox (see Figure 7.10). 2. Click on a place in the editing area in order to «fix» a point of the polygon. Release the mouse button. 3. Move the mouse up to the next point of your polygon and click down the mouse button again to «fix» the point. 4. Repeat step 3 as many times you wish and then double-click the mouse button to fix the last point of the polygon. Modification of the polygon properties To modify the properties of the polygon object: 1. Select the Polygon object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. The polygon is an object of type «line», so only the tabs Main parameters and Style are available (see Figure 7.5 and Figure 7.6). 4. Click OK to validate your modifications. 36 viewon User manual

37 7.3.5 The «Quart ellipse» object Figure 7.11 Insertion of a Quart ellipse object To insert a quart ellipse into your current synoptic: 1. Click on the Quart ellipse tool in the toolbox (see Figure 7.11). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the Quart ellipse. Then release the mouse button. Modification of the Quart ellipse properties To modify the properties of the quart ellipse object: 1. Select the Quart ellipse object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Properties tab (see Figure 7.12) 4. The Orientation drop down list allows you to select the type of quart ellipse you want to insert: bottom left if you want to insert the left bottom part of the ellipse. bottom right if you want to insert the right bottom part of the ellipse. top left if you want to insert the left upper part of the ellipse. top right if you want to insert the right upper part of the ellipse. 5. Check the Closed box, if you want that the border line wraps all the quart ellipse object and not only the elliptic part of the object. 6. Click OK to validate your modifications. Figure 7.12 Chaptre 7 The Working Area 37

38 7.3.6 The «Text» object Figure 7.13 Insertion of a text object To insert a text into your current synoptic: 1. Click on the Text tool in the toolbox (see Figure 7.13). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the text. Then release the mouse button. Modification of the text properties To modify the standard properties of the text object: 1. Select the Text object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Text properties tab (see Figure 7.14). 4. In the Text field enter the text you want to display. 5. The Horizontal alignment drop down list allows you to select the horizontal position of the text in the text zone. Left to align the text on the left of the text zone. Center to center the text on the text zone. Right to align the text on the right of the text zone. 6. The Vertical alignment drop down list allows you to select the vertical position of the text in the text zone. Top to align the text on the top of the text zone. Center to center the text on the text zone. Bottom to align the text on the bottom of the text zone. 7. Click OK to validate your modifications. 38 viewon User manual

39 Figure 7.14 To modify the text font: 1. Select the Text object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Text properties tab (see Figure 7.14). 4. Click the font button.. The Font dialog box shows up (see Figure 7.15). 5. Select the Font, the Style and the size you want. 6. The Text decoration drop down list allows you to select the following options: None: displays the text without decoration. Overline: over line the text. Underline: underline the text. Line-through: strike through the text. 7. Click OK to validate the font modifications. 8. Click OK to validate the modifications. Chaptre 7 The Working Area 39

40 Figure 7.15 To change the text color: 1. Select the Text object you want to modify.. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Text properties tab (see Figure 7.14). 4. Click on the text color button. The color palette window will be displayed. 5. Select the color you want. 6. Click OK to validate your color selection. 7. Click OK to validate the modifications of the text object. 40 viewon User manual

41 7.3.7 The «ellipse» object Figure 7.16 Insertion of an ellipse object To insert an Ellipse into your current synoptic: 1. Click on the Ellipse tool in the toolbox (see Figure 7.16). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the Ellipse. Then release the mouse button. Modification of the ellipse properties To modify the properties of the ellipse object: 1. Select the Ellipse object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Enter your modifications in the Main parameters and Style tab (see Figure 7.5 and Figure 7.6). 4. Click OK to validate your modifications. Chaptre 7 The Working Area 41

42 7.3.8 The «Rectangle» object Figure 7.17 Insertion of a rectangle object To insert a rectangle into your current synoptic: 1. Click on the Rectangle tool in the toolbox (see Figure 7.17). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the Rectangle. Then release the mouse button. Modification of the rectangle properties To modify the corner radius of an rectanle object: 1. Select the Rectangle object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Properties tab (see Figure 7.18). 4. Modify the fields Abscise curvature and Ordonate curvature to change the horizontal and vertical corner radius. 5. Click OK to validate your modifications. Figure viewon User manual

43 La Figure 7.19 illustrates the corner radius action on the rectangle object. Figure 7.19 Abscise curvature = 0 Ordonate curvature = 0 Abscise curvature = 15 Ordonate curvature = 80 Abscise curvature = 50 Ordonate curvature = 50 To modify the rectangle style: 1. Select the Rectangle object you want to modify. 6. Right-click on the object to show up the context menu. Select the Properties command. 2. Select the Advanced style tab (see Figure 7.20). 3. The Style drop down list allows you to select the following styles: No style: doesn't apply any style to the rectangle. Shadow: gives a shadow effect to the rectangle. Button: gives a button effect to the rectangle. 4. Enter the button border or the shadow border size into the Stroke size field. 5. The Top left stroke color button allows you to select the color of the left upper border of the rectangle. This button in only enabled when the selected style is of type Button. 6. The Bottom right stroke color button allows you to select the color of the right bottom border of the rectangle. This button is not enabled when the selected style is No style. Figure 7.20 Chaptre 7 The Working Area 43

44 7.3.9 The «Half ellipse» object Figure 7.21 Insertion of a Half ellipse object To insert a half ellipse into your current synoptic: 1. Click on the Half ellipse tool of the toolbox (see Figure 7.21). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the Half ellipse. Then release the mouse button. Modification of the Half ellipse properties To modify the properties of the half ellipse object: 1. Select the Half ellipse object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. Select the Properties tab (see Figure 7.22) 8. The Orientation drop down list allows you to select the type of half ellipse you want to insert: left if you want to insert the left part of the ellipse. right if you want to insert the right part of the ellipse. top if you want to insert the upper part of the ellipse. bottom if you want to insert the bottom part of the ellipse. 4. Check the Closed box, if you want that the border line wraps all the half ellipse object and not only the elliptic part of the object. 5. Click OK to validate your modifications. Figure viewon User manual

45 The «Entry field» object Figure 7.23 Insertion of an Entry Field object To insert an entry field into your current synoptic: 1. Click on the Entry Field tool in the toolbox (see Figure 7.23). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the Entry Field. Then release the mouse button. Modification of the Entry Field properties The Entry Field owns the same functionalities as the Text object, so refer to the Text object description for more details The «Button» object Figure 7.24 Insertion of a Button object To insert a button into your current synoptic: 1. Click on the Button tool of the toolbox (see Figure 7.24). 2. In the editing area click and hold down the left mouse button and draw a rectangle where you want to place the Button. Then release the mouse button. Modification of the Button properties 1. Select the Button object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. The Properties tab (see Figure 7.25) shows the modifiable parameters. The Button object cumulates the properties of the Text object and the Rectangle object. You can find the explanation of these properties in the chapters et Click OK to validate the modifications. Chaptre 7 The Working Area 45

46 Figure The «Polyline» object Figure 7.26 Insertion of a Polyline object To insert a Polyline into your current synoptic: 1. Click on the Polyline tool of the toolbox (see Figure 7.26). 2. Click on a place in the editing area in order to «fix» a point of the polyline. Release the mouse button. 3. Move the mouse up to the next point of your polyline and click down the mouse button again to «fix» the next point. 4. Repeat step 3 as many times you wish and then double-click the mouse button to fix the last point of the Polyline. Modification of the Polyline properties To modify the properties of the Polyline object: 1. Select the Polyline object you want to modify. 2. Right-click on the object to show up the context menu. Select the Properties command. 3. The polygon is an object of type «line», so only the tabs Main parameters and Style are available (see Figure 7.5 and Figure 7.6). 4. Click OK to validate your modifications. 46 viewon User manual

47 8 Animation of the synoptics 8.1 Definition of animation Animation is the process which add to the graphic element the capability to interact with the user either visually or through the mouse or keyboard. There exist two different types of animation: The properties animations: They make it possible to modify the properties of the graphic elements according to the value changes of the linked data. The drawing will change in realtime according to the data source. The entry fields animations: They create a zone in the window allowing the user to interact with the application using the keyboard and the mouse. These zones make it possible to modify the value of the variables, to open and to close windows. 8.2 Applying an animation The following steps explain how to apply an animation to a graphic element. This is valid for all the viewon animations. 1. Open the synoptic in which the animation must be applied. 2. Click on the select tool in the toolbox. 3. Select the graphic element you wont to animate. 4. In the toolbox click on the animation you want to apply. The animation will then be added to the graphic element and the properties dialog box of the graphic element will show up. 5. A new tab has been created in the properties dialog box. This tab contains the properties of the animation you just added. It's allows you to modify the animation properties. You can also apply an animation to the graphic element using the context menu of the element. Right-click the element, select Animations and then the desired animation. 47

48 8.3 Applying multiple animations Sometimes it is necessary to apply multiple animations to a graphic element. There is no restriction to do this, but the following points must be taken into account. It is not possible to assign a priority to an animation. For example, if you apply two different color animations on the same element, the animation with the most recent value change will determine the color. The animations are only refreshed when the values of the linked data source change. By using unusual combinations, such as a polygon with rotation and bar-graph filling animation, this can result in an unforeseeable behavior. When several animations are applied, each animation has its own tab in the properties dialog box of the graphic element. 8.4 Deleting an animation To delete an animation without deleting the graphic element: 1. Open the properties dialog box of the concerned graphic element. 2. Select the tab of the animation to delete. 3. Click on the Delete animation button. 4. Click OK to confirm the modification. 48 viewon User manual

49 8.5 Allocate a variable to an animation Before affecting a variable it is necessary to check that the project is correctly connected to an ewon. In fact the variables which could be linked to the synoptic through the animations are the variables defined on this ewon. The configuration of the ewon connection parameters is described at chapter Once the ewon connection parameters set, follow the steps below to associate a variable to an animation: 1. Apply the desired animation on the graphic element (see chapter 8.2). 2. Open the properties dialog box of the graphic element. 3. Select the tab of the animation for which you want to affect a variable. 4. Click on the variables selection button located in the Condition frame. (see Figure8.1). 5. The Variables browser window shows up. (see Figure 8.2). 6. Select the Variables tab. 7. If no variable appears in the table of variables, click on the Refresh button. The variables defined in the ewon are then retrieved and posted into the table. 8. The drop-down list Attributes allows to modify the attribute of the variable to retrieve. By default the value of the variable will be retrieved. 9. Select the desired variable and click OK. 10. The name of the selected variable appears in the Condition frame. 11. Click OK to validate the animation modifications. Figure8.1 Variables selection button Retrieve the variables from ewon Figure 8.2 Chaptre 8 Animation of the synoptics 49

50 8.6 Affect a BASIC script to an animation Before affecting a script it is necessary to check that the project is correctly connected to an ewon. The configuration of the ewon connection parameters is described at chapter The BASIC script is executed each time the animation is animated. That means: - at each activation (by mouse click) of the following animations: Set variable, Increment variable, Reverse bit and Slider. - at each refresh of the following animations: State Colors, Group States Colors, Bargraph, Rotation, Translation and Show/Hide. Exchanges between the viewon synoptic and the ewon are realized by the BASIC variable «viewon!». The viewon! variable is of type string! As ewon use mainly numeric data types, viewon will always convert this string to a number (see 8.6.1)!. If the conversion fails, the text (string type) will be used. Once the ewon connection parameters set, follow the steps below to associate a script to an animation: 1. Apply the desired animation on the graphic element (see chapter 8.2). 2. Open the properties dialog box of the graphic element. 3. Select the tab of the animation for which you want to affect a variable. 4. Click on the variables selection button located in the Condition frame. (see Figure8.1). 5. The Variables browser window shows up. (see Figure 8.2). 6. Select the Script tab. 7. Enter the Basic script you want to execute on every animation (see Figure 8.3). 8. Validate using the OK button. 9. The text «$script$» appears in the Condition frame (see Figure 8.4). 10. Click OK to validate the animation modifications. Figure 8.3 Figure viewon User manual

51 8.6.1 Basic script: exchange of numbers viewon uses the variable viewon! for the data exchange (read and write) with the ewon Basic script. As viewon uses numerical data, there is an implicit string numeric conversion at the execution of the animation. If the animation has to read a value coming from the ewon, the BASIC script could be similar to the following examples: viewon! = "12.6" viewon! = A$ viewon! = STR$(25.4) viewon! = STR$( a% ) viewon! = STR$( myvariable ) the contents of string "12.6" will be used to extract a numerical value which will be used in the animation. the contents of the ewon string A$ will be used to extract a numerical value which will be used in the animation. Conversion of the numeric constant 25.4 into a string before the assignment to the variable viewon!. Conversion of the integer variable a% into a string before the assignment to the variable viewon!. Conversion of the real Tagname myvariable into a string before the assignment to the variable viewon!. If the animation has to write a value into the ewon, the BASIC script could be similar to the following examples: A$ = viewon! The numerical value contained in the string viewon! is assigned to the string A$. A% = VAL(viewon!) The numerical value contained in the string viewon! is extracted to be assigned to the integer variable A%. myvariable = VAL(viewon!) The numerical value contained in the string viewon! is extracted to be assigned to the real Tagname myvariable. The viewon BASIC scripts will be placed into the «Basic action» stack of the ewon. Develop the viewon Scripts according to this(see document HT03 «Programming ewon : Learning by examples» available on >>Documentation>>HowTo) Basic script: text display The Text and Entry Field objects can be combined with the Display value animation to display a text coming from the BASIC script of the ewon. Indeed, when viewon tries to convert the string into a numerical value, viewon raises an error by displaying the string just as it is. viewon! = time$ viewon! = "Hello" viewon! = A$ Figure 8.5 Chaptre 8 Animation of the synoptics 51

52 8.7 Available animations This paragraph presents all the realizable animations Hyperlink animation This animation allows you to navigate in your viewon project when the graphic element is clicked on. This will allow to: 1. display an other synoptic 2. display a HTML page contained in the ewon (/USR folder) 3. display whichever Web page you want (not included in the ewon) Concerned graphic elements All. Configuration of the animation Figure 8.6 shows the configuration tab for this animation. List of the synoptics of the project any URL Figure 8.6 To configure the Hyperlink animation: 1. Select the Hyperlink tab of the graphic element properties dialog box. 2. Select one of the two possible choices for the Link (Synopsis or URL). 3. Fill in the Synopsis field: Select using the drop down list the synopsis to open. 4. Fill in the URL field with: ewon page: Enter the link relating to the ewon (i.e.: /usr/mapage.html ) 52 viewon User manual

53 Web page: Enter the full link including (i.e.: ) 5. Check the New window box if you want to open the synoptic in a new browser window. By default it will be opened in the current window. 6. Click OK to validate your modifications. Chaptre 8 Animation of the synoptics 53

54 8.7.2 Close animation on. This animation allows you to close the current synoptic when the graphic element is clicked Concerned graphic elements All. Configuration of the animation Figure 8.7 shows the configuration tab for this animation. Figure 8.7 This animation doesn't own any parameter. Once added to the graphic element it is active and does not require any configuration State Colors animation This animation allows color changing of a graphic element when the value of a boolean variable changes. Concerned graphic elements Line, Rectangle, Ellipse, Quart ellipse, Half ellipse, Polyline, Polygon. Configuration of the animation Figure 8.8 shows the configuration tab for this animation. 54 viewon User manual

55 Figure 8.8 To configure the State Colors animation: 1. Select the State Colors tab of the graphical element properties dialog box. 1. Select the concerned boolean variable for this animation.(refer to chapter 8.5). 2. Configure the Pattern color(fill color) and the Strike color(line color). 3. Click OK to validate your modifications. Configuration of the Pattern colors To configure the fill colors you have to: 1. Select the variable states for which you wish that the fill color is modified. To do this check the boxes corresponding to your choices. 2. Select the color you want for every checked variable state by using the color selection button situated on the same line as the selected state. 4. Click OK to validate your modifications. The possible states are: State 1: Variable equals 1 State 0: Variable equals 0 Invalid state: The quality of the variable isn't good enough. Configuration of the Strike colors To configure the line colors you have to: 1. Select the variable states for which you wish that the line color is modified. To do this check the boxes corresponding to your choices. Chaptre 8 Animation of the synoptics 55

56 2. Select the color you want for every checked variable state by using the color selection button situated on the same line as the selected state. The possible states are: State 1: Variable equals 1 State 0: Variable equals 0 Invalid state: The quality of the variable isn't good enough. Only boolean variables can be used for this animation Group State Colors animation This animation allows you to regroup four boolean variables and to define the fill and the line color for the 16 possible states of this group. Concerned graphic elements Line, Rectangle, Ellipse, Quart ellipse, Half ellipse, Polyline, Polygon. Configuration of the animation Figure 8.9 shows the configuration tab for this animation. Figure viewon User manual

57 To configure the Group State Colors animation: 1. Select the Group State Colors tab of the graphical element properties dialog box. 2. Select the four concerned boolean variables for this animation (refer to chapter 8.5). The variable n 1 represents the least significant bit and the variable n 4 represents the most significant bit. 3. Select the states for which you wish a color change. To do this check the boxes corresponding to your choices. 4. Select the color you want for every checked state of the group by using the color selection button situated on the same line as the selected state. 5. For the line color selection, select the Strike tab and reapply steps 3 and Click OK to validate your modifications. You must introduce all four variables so that this animation will work correctly Level Colors animation This animation allows color changing of a graphic element when the value of the associated variable reaches different levels. Concerned graphic elements Line, Rectangle, Ellipse, Quart ellipse, Half ellipse, Polyline, Polygon. Configuration of the animation Figure 8.10 shows the configuration tab for this animation. Chaptre 8 Animation of the synoptics 57

58 Figure 8.10 To configure the Level Colors animation: 1. Select the Level Colors tab of the graphical element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. Enter the values defining the levels for which you wish a color change. For example, by calling val1, val2, val3 and val4 the values entered in the fields, the defined levels are as follows: level 1 : value of the variable <= val1 level 2 : val1 < value of the variable <= val2 level 3 : val2 < value of the variable <= val3 level 4 : val3 < value of the variable <= val4 4. Check for every level the check-box of the Fill color (or Stroke color) if you want that the fill color (or line color) of the element will change. 5. Select the color you want by using the color selection button. 6. The last two options Out of levels values and Invalid value allow to configure the colors when the value of the variable is respectively outside the levels or invalid. 7. Click OK to validate your modifications Bargraph animation This animation makes it possible to fill a graphic element of type "shape" according to the value of the associated variable. The filling is calculated by using the value of the variable compared to its scale and to the height (or width) of the graphic element. In case of a polygon, the filling does not take into account the occupied surface. 58 viewon User manual

59 Concerned graphic elements The rectangle. Configuration of the animation Figure 8.11 shows the configuration tab for this animation. Figure 8.11 To configure the Bargraph animation: 1. Select the Bargraph tab of the graphical element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. The Direction drop down list allows to define the fill direction: up: The filling is made bottom upwards. down: The filling is made top downwards. left: The filing is made from right towards left. right: The filing is made from left towards right. horizontal: The filling is made from the vertical median towards the 2 vertical ends. vertical: The filling is made from the horizontal median towards the 2 horizontal ends. half-horizontal:the filling is made from the vertical median towards right, when the value is higher than the medium value of the variable limits. And from the vertical median towards left when the value is lower than the medium value of the variable limits. half-vertical: The filling is made from the horizontal median towards the top, when the value is higher than the medium value of the variable limits. And from the horizontal median towards the bottom when the value is lower than the medium value of the variable limits. 4. Enter the values for the limits: Min value: Value of the variable for which the bar-graph is empty. Max value: Value of the variable for which the bar-graph is full. Chaptre 8 Animation of the synoptics 59

60 Min bound value: Minimum threshold which involves the color change of the element. The Out of bounds color becomes the fill color. Max bound value: Maximum threshold which involves the color change of the element. The Out of bounds color becomes the fill color. 5. Select the Out of bounds color using the color selection button. The Out of bounds color is the color used when the value of the variable is higher than the max bound value or lower than the min bound value. 6. Select the Invalid state color using the color selection button. The Invalid state color is used when the quality of the variable is insufficient. 7. Click OK to validate your modifications Rotation animation This animation allows to represent the value of the associated variable by an angular movement. For example to rotate a pointer to simulate the change of the tank temperature. Concerned graphic elements All. Configuration of the animation Figure 8.12 shows the configuration tab for this animation. Figure 8.12 To configure the Rotation animation: 1. Select the Rotation tab of the graphic element properties dialog box. 60 viewon User manual

61 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. Enter the angles: Angle min: Angle between the vertical and the position of the object, when the value of the variable is lower or equal to the min value. Angle max: Angle between the vertical and the position of the object, when the value of the variable is higher or equal to the max value. 4. Enter the limit values: Min value: Value of the variable corresponding to the min angle of the rotation. Max value: Value of the variable corresponding to the max angle of the rotation. 5. Click OK to validate your modifications. For example the following parameters: Variable : RotationSpeed Angle min = 0 Min value = 0 Angle max = 360 Max value = 360 tr/min will involve a rotation of 1 of the element when the RotationSpeed increases by 1 rpm. When the speed raises above 360 tr/min, the element will no longer be animated. The graphic element will turn around the transformation point. Rotation is done clockwise when the value of the variable increases and in the anti-clockwise direction when it decrease Translation animation This animation allows to represent the value of the associated variable by a translation movement. Concerned graphic elements All. Configuration of the animation Figure 8.13 shows the configuration tab for this animation. Chaptre 8 Animation of the synoptics 61

62 Figure 8.13 To configure the Translation animation: 1. Select the Translation tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. Enter the amplitude of the translation: X axis amplitude: Length of the maximum horizontal movement (in pixel) Y axis amplitude: Length of the maximum vertical movement (in pixel) 4. Enter the values for the limits Min value: Value of the variable for which the translation compared to the start position of the element is null. Max value: Value of the variable for which the translation compared to the start position of the element is maximal. 5. Click OK to validate your modifications. When the value of the variable is out of the limits, the element is not animated Display value animation This animation allows to display in the graphic element the value of the associated variable. Concerned graphic elements Text, Entry field. Configuration of the animation Figure 8.14 shows the configuration tab for this animation. 62 viewon User manual

63 Figure 8.14 To configure the Display value animation: 1. Select the Display value tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. The Number of decimal digits drop down list allows you to define the number of decimal places to display. The available numbers are from 0 to Click OK to validate your modifications Show/Hide animation This animation allows to display or to hide the graphic element depending on the value of the associated variable. Concerned graphic elements All. Configuration of the animation Figure 8.15 shows the configuration tab for this animation. Chaptre 8 Animation of the synoptics 63

64 Figure 8.15 To configure the Show/Hide animation: 1. Select the Show/Hide tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. Select the condition when to show the element: less: The element appears when the value is lower than Threshold 1 and disappears if not. less or equal: The element appears when the value is lower or equal to Threshold 1 and disappears if not. greater: The element appears when the value is greater than Threshold 1 and disappears if not. greater or equal: The element appears when the value is greater or equal to Threshold 1 and disappears if not. between: The element appears when the value is between Threshold 1 and Threshold 2 and disappears if not 4. Enter the values for the thresholds. 7. Click OK to validate your modifications Pilot entry field animation This animation allows affecting the value entered in the Entry Field to the associated variable. Concerned graphic elements Entry Field. 64 viewon User manual

65 Configuration of the animation Figure 8.16 shows the configuration tab for this animation. Figure 8.16 To configure the Pilot entry field animation: 1. Select the Pilot entry field tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. Enter the Min value: the minimum value allowed by the entry field 4. Enter the Max value: the maximum value allowed by the entry field In order to display the value of the associated variable if this one is modified outside the Entry Field, it is necessary to add the Display value animation to the Entry Field and to configure it with the same parameters (see chapter 8.7.9) Set variable animation This animation allows to affect a value to the associated variable by a mouse-click on the graphic element. Concerned graphic elements All. Configuration of the animation Figure 8.17 shows the configuration tab for this animation. To configure the Set variable animation: 1. Select the Set variable tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). Chaptre 8 Animation of the synoptics 65

66 3. Check the Mouse down related value box and enter the value to write to the associated variable, if you want to modify the variable when the mouse button is pushed down. 4. Check the Mouse up related value box and enter the value to write to the associated variable, if you want to modify the variable when the mouse button is released. Figure Increment variable animation This animation allows to increment the value of the associated variable by a mouse-click on the graphic element. Concerned graphic elements All. Configuration of the animation Figure 8.18 shows the configuration tab for this animation. To configure the Increment variable animation: 1. Select the Increment variable tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. Check the Step value on mouse down box and enter the increment step into the field, if you want to modify the variable when the mouse button is pushed down. 4. Check the Step value on mouse up box and enter the increment step into the field, if you want to modify the variable when the mouse button is released. 66 viewon User manual

67 Figure Reverse bit animation This animation allows to toggle the value of the associated variable by a mouse-click on the graphic element. Concerned graphic elements All. Configuration of the animation Figure 8.19 shows the configuration tab for this animation. Figure 8.19 Chaptre 8 Animation of the synoptics 67

68 To configure the Reverse bit animation: 1. Select the Reverse bit tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 3. Check the Consider mouse down event box if you want to toggle the value of the variable when the mouse button is pushed down. 4. Check the Consider mouse up event box if you want to toggle the value of the variable when the mouse button is released Slider animation This animation allows to affect a value to the associated variable by moving the graphic element. Concerned graphic elements All. Configuration of the animation Figure 8.20 shows the configuration tab for this animation Figure viewon User manual

69 To configure the Slider animation: 1. Select the Slider tab of the graphic element properties dialog box. 2. Select the concerned variable for this animation (refer to chapter 8.5). 5. Enter the span of the translation X axis movement: Length of maximum horizontal movement (in pixel) Y axis movement : Length of maximum vertical movement (en pixel) 6. Enter the values of the limits Min value: Value of the variable to write when the element reaches its start position. Max value: Value of the variable to write when the element reaches the end position. 5. Click OK to validate your modifications. In order to move the graphic element if the associated variable is modified outside the Slider animation, it is necessary to add the Translation animation to the graphical element (see chapter 8.7.8). Chaptre 8 Animation of the synoptics 69

70

71 9 Project export Once project finished the last operation consists to export it on the ewon. This is done in two steps. The first step allows the generation of the project, the second step allows the transfer on the ewon. 9.1 Generation and Transfer to the ewon To generate the project: 1. Check that the information concerning the ewon is correctly entered (see 5.4.2). 2. In the Project Explorer select the project you want to export. 3. Right click on the project to open the context menu. In the context menu select the Export command. 4. The Project download dialog box shows up (see Figure 9.1) 5. Click the Generation button. 6. Add the end of the project generation the transfer window shows up (see Figure 9.2) 7. Click the Transfer button. 8. Once the transfer finished, you can close the Project download box. Figure 9.1 Figure