Programming with the programming software 7
7 Programming with the programming software Programming
7.4.11 Graphic block manager
This section describes the graphic block manager in the HMI-Builder. The method of operation and appearance are based on the Windows standard.
In the graphic block manager, graphic blocks are created using static and dynamic graphic elements.
Opening the graphic block manager
To open the [Graphic block manager] menu, double-click on a defined graphic block in the [block manager] or in the [Block list].
Mouse, keys and cursor
The following section explains what you can do with the mouse and keys in the graphic block manager and also explains the different cursor shapes.
Use the mouse to perform the following actions:
• Select objects from the toolbox
• Select objects by clicking on them
• Select several objects (by clicking next to the objects, keeping the left mouse button pressed down and drawing a selection rectangle around the required objects.)
• Move objects (by keeping the left mouse button pressed down while the cursor is positioned over an object and moving the mouse.)
• Resize object
• Open the parameter dialog box (by double-clicking on an object) The figure below shows what a selected object looks like.
0
0
I
Programming with the programming software 7
Programming
Use the keys to perform the following actions:
• Create objects using the [Object] menu
• Use the arrow keys to move the cursor
• Move the cursor pixel-by-pixel (by pressing the key combination <Ctrl> + arrow key).
• Select or deselect an object (by positioning the cursor over the object and pressing the space bar)
• Select several objects (by selecting [Object] / [Pointer] from the menu and drawing a frame around the objects using the space bar and arrow keys)
• Move an object (by positioning the cursor over the object, keeping the space bar pressed down and pressing the arrow keys)
• Resize an object (by positioning the cursor over an object handle, keeping the space bar pressed down and pressing the arrow keys)
• Open the dialog box for a selected object (by pressing the Enter key)
Cursor
The cursor can take four different shapes:
Within an object
The size of the object can be changed
In the graphic work area
When selecting a function from the menu or the toolbox
0
0
I
7 Programming with the programming software Programming
Creating objects Click on the required object in the toolbox and move the cursor to the position in the work area where you want to place the object. Click the mouse to position the object.
Static graphics are displayed by clicking on the work area. For dynamic objects, a dialog box opens for the current object. Click [OK] in the object dialog box to display the object on the screen.
Once the object is displayed it has handles and selection mode is active.
Static graphic
Static graphic objects comprise
• Line
They are used to draw background graphics. You can change static graphic objects into dynamic objects by linking them to the objects on the [Dynamic signals] tab page.
Dynamic objects
Dynamic objects are linked with signals to generate control and monitoring functions, etc. For more information on defining objects, refer to the section "Graphic display and control" on page 135.
Selecting several objects
There are two ways of selecting several objects in the graphic block manager.
• Press the left mouse button and keep it pressed down while drawing a selection rectangle around the required objects. The last object you have created will be displayed with filled handles.
• Select the pointer from the toolbox. Hold the shift key pressed while selecting the required objects. The last object you have selected will be displayed with filled handles.
0
0
I
Programming with the programming software 7
Programming
Positioning objects The [Layout] menu offers several functions for positioning objects with ease:
• Align
• Make same size
• Space evenly
• Tile
You can also access these functions from a separate toolbox.
You can only access these functions when at least two objects have been selected. The functions perform their positioning calculations based on one or two reference objects.
The functions [Align], [Make same size] and [Tile] use the object that was last selected or created as the reference object. See the section "Selecting several objects" on page 100.
The function [Space evenly] takes the object furthest to the bottom/top or left/right as the reference object. The functions do not affect the reference object.
11511AEN
Figure 38: [Layout] menu
0
0
I
7 Programming with the programming software Programming
Align
The [Align] function offers six menu options for aligning objects vertically or horizontally.
Make same size
The [Make same size] option offers three functions to make selected objects the same size.
Space evenly
The [Space evenly] option offers two functions to change the distance between two selected objects.
Tile
The [Tile] option offers two functions that enable you to position two objects next to each other
Left Aligns the selected objects flush left with the reference object.
Right Aligns the selected objects flush right with the reference object.
Top Aligns the selected objects flush with the top of the reference object.
Bottom Aligns the selected objects flush with the bottom of the reference object.
Vertical center Centers the selected objects vertically based on the reference object.
Horizontal center Centers the selected objects horizontally based on the reference object.
Width Matches the width of the selected objects to that of the reference object.
Height Matches the height of the selected objects to that of the reference object.
Both Matches the size of the selected objects to that of the reference object.
Vertical Changes the position of the selected objects to an identical vertical distance. The objects closest to the top and bottom are not moved. At least three objects must have been selected.
Horizontal Changes the position of the selected objects to an identical horizontal distance. The objects closest to the left and right side are not moved. At least three objects must have been selected.
Vertical Changes the vertical position of the marked objects so that they are aligned with the reference object.
Horizontal Changes the horizontal position of the marked objects so that they are aligned with the reference object.
0
0
I
Programming with the programming software 7
Programming
Grouping objects The [Layout] menu offers functions for grouping several objects. Select the required objects and choose [Layout] / [Group] from the menu. The group of objects will now be treated like a single object and you can resize the objects all at once. You can still define the color and font individually for each object in the group. Clicking an object in the group opens the edit dialog box for the corresponding object.
The [Layout] / [Group] function allows you to separate a group into individual objects.
Saving and loading grouped objects
You can save or load grouped objects by clicking the [Library] button in the toolbox in the graphic block manager.
11512AEN
Figure 39: Grouping objects
0
0
I
7 Programming with the programming software Programming
Creating tables Object tables in a graphic block can be created as follows:
1. First, create two rows or columns with the same object.
2. Select the objects and choose [Object] / [Create series of] from the menu.
This opens a dialog box.
3. If you want to create a table, define the number of rows and columns and the direction into which you want to expand the table.
If you click [OK], the programming software creates a table with the defined number of rows or columns.
10416AEN
Figure 40: Object tables
10417AEN
NOTE
The object alarm banner cannot be included in a table.
0
0
I
Programming with the programming software 7
Programming
Symbols Symbols can be imported into the project. The bitmap library, which contains numerous buttons, pump symbols, etc., or graphic files on the PC can be used as the source.
Image files can be imported from other Windows applications (e.g. Paint) to the symbol library in the following formats:
• bmp
• jpg
• gif
• wmf
Symbol names can comprise a maximum of 30 characters. Umlauts are permitted.
Adding a static symbol to a block
Click [Symbol] in the toolbox and move the cursor over the block in the work area where you want to place the symbol. Next, make a mouse click. Clicking on the work area opens the [Static symbol] dialog box.
Enter the name of the symbol you want to add or click on [Select] to open the [Select symbol] dialog box.
11473AEN
0
0
I
7 Programming with the programming software Programming
Click on [Library] to import a static symbol from the bitmap library. Alternatively, click on [Browse] to upload a graphic file from the PC.
The chosen symbol is displayed in the [Preview] window. BMP symbols are displayed as thumbnails in the preview window.
Click on [Open] and then [OK] to select a symbol. The symbol is now displayed in the [Static symbol] dialog box.
11474AEN
0
0
I
Programming with the programming software 7
Programming
[General] tab page
[Dynamics] tab page
The functions on the [Dynamics] tab page are described in the section "General parameters" on page 135 .
Copying a graphic from an application Proceed as follows:
1. Copy an object in another application, e.g. Paint to the clipboard.
2. Open the graphic block manager in the programming software and select the [Paste]
command.
3. Enter a name for the symbol. The name must not exceed 30 characters.
4. The symbol will then be saved in the symbol library under the specified name.
Graphics and symbols can be copied from one block to another and from one project to another in the HMI-Builder using the [Copy] and [Paste] functions.
Parameters Description
Symbol Symbol of the name of the selected symbol.
Select Button to select library symbols or external image files.
Transparent Makes the symbol background transparent. The color of the upper left pixel is defined as the transparency color.
Stretch When this option is enabled, you can change the x or y size of the object.