Designing a Background, Using a Device Image
There are two use cases for configuring the background of a visualization:
The visualization should be provided with a background color or a background image. To do this, use the command and configure a color or an image file. The background which is designed in this way is displayed when the visualization is used (also in a TargetVisu or WebVisu).
When creating visualizations for a specific device, use an image in the background to help position the visualization elements correctly. The visualizations created in this way are later used in a main visualization which, for example, represents the control panel for a device. You provide labels, controls, and so on which have to fit correctly in the panel frame.
To configure this kind of "device image", specify the desired image file in the Visualization Manager dialog. In addition, you can define an area within the device image to which you want to restrict the visualization. You can configure the settings so that visualization elements cannot be placed outside the area at all or that a compile message is issued in this case.
As an alternative to configuration using the Visualization Manager, a device image can also be provided by means of the device description.
Configuring a "background image"
Requirement: A project with a visualization is open.
Open the visualization and click .
Select the Use image option and open the Input Assistant.
In the Input Assistant dialog, select an image.
The image is used as the background image of the visualization. Do not confuse this with the "device image", which can also be used for help when creating a visualization.
Tip
In the Properties dialog of a visualization object, you can use the Include background image property also to configure whether the background image is always displayed completely or truncated.
Configuring a color background
Requirement: A project with a visualization is open.
Open the visualization and click .
Select the Use color option.
In the list box, select a style color (example: Elementbackgroundcolor).
The background of the visualization is in color.
Configuring a "device image"
A device image in the background is used as help when creating visualizations for a specific device. In the instructions below, you can see how to use a device image to represent a control panel. If you use this as a background, then you can use it as a guide when creating visualizations and correctly place elements accordingly.
In the Devices view, double-click the Visualization Manager. In the opening dialog, switch to Advanced Settings.
In Background Configuration, specify the Image ID of the desired background image. For this purpose, you have an image file of the control panel in the file system, or in an image pool in the project or in a library.
Define the desired area within the control panel image where the visualization should be displayed later (for example, the area of the monitor space in the image). To do this, specify the positions of the upper left and lower right corners of this area in pixels. Example: 10 / 70 for the top left and 700 / 600 for the bottom.
Enable the Limit element position within content area option to be able to place the elements only in this area when creating the visualization. In this case, you could also use the Compile warning if element exceeds content area option.
Save the settings as default for the current device. Each additional visualization below an application for this device (even in other projects) will now also get the defined background.
Now place elements in the visualization as you like. You will notice that this is only possible within the defined "content area".
Tip
In the Visualization options (device image), you can set in which operating modes (online, offline) the device image should be displayed.