Create a fixed-size graphic for a ViewApp pane size

This topic describes the general procedure to create a fixed size graphic that will fit a pane of a known size even if the pane does not exist when the fixed size graphic is created.

This workflow is typically the case where two different employees work on a ViewApp to update it to reflect changes in a production environment. The first employee is usually a user who creates a fixed size graphic. A second employee will drag and drop the graphic in a pane while editing the ViewApp with the ViewApp Editor.

To create a fixed size graphic that will fit a pane with a known size

1. The first employee creates a new graphic and opens it in the Industrial Graphic Editor.

   The entire canvas area of the Industrial Graphic Editor is enabled to place graphic elements and graphics.

2. Configure the graphic to a known pane size.

   1. Select the Graphic property Size and set it to Fixed.

      The FixedWidth and FixedHeight properties appear after the Size property is set to Fixed.

   2. Update the values of Fixed Width and Fixed Height to the pixel dimensions of a pane with a known size.

      You can also move the grab handles on the fixed size boundary to set the dimensions of the graphic.

3. Place the graphic elements and other graphics within the fixed size area of the graphic.

4. If you want white space around the graphic, adjust the width and height of the graphic to show a white margin around the graphic elements and graphics that compose your graphic.

5. Save and close the graphic.

6. The second employee creates a layout to be used in the ViewApp with a pane that is the same size as the fixed size graphic.

7. Open the ViewApp with the ViewApp Editor.

8. Assign a Screen Profile and the layout containing the pane to the ViewApp.

9. Select a screen that contains the layout with the pane of a known size.

10. Select the fixed size graphic created by the first employee and drag and drop it in the pane.

    The configured graphic appears in the selected pane of the ViewApp when it is edited by the ViewApp Editor. The graphic preview shows:

    • The graphic fits in the targeted pane with the same size as it was designed in the Industrial Graphic Editor.

    • If necessary, the graphic can scale larger or smaller to fit the pane.

    • Any white space placed around the graphic while it was created is maintained when the graphic is placed in a pane.

11. Save the ViewApp and deploy it

12. Open the running ViewApp.

    The running ViewApp shows the fixed size graphic in the target pane at the same size as it was created in the Industrial Graphic Editor and configured in the ViewApp Editor. The rendered fixed size graphic shows:

    • The graphic fits in the pane with the same size as it was designed in the Industrial Graphic Editor

    • Any white space placed around the fixed size graphic is maintained.