About HMI Graphics

HMI graphics are accessible only in the latest version of Operations Hub layout.

Use the HMI graphic plug-ins to design a pictorial setup of your industrial system. The plug-ins can be animated based on their configured tag data values. Operators can experience a real world layout while monitoring the changing status of the system. The HMI graphics are scalable, and can be resized to fit into your application design.

The following table provides an overview on how to get started with HMI graphics.

#	Task	Description
1	Create categories to efficiently organize your HMI graphics.	Refer to these topics: Create Category Rename Category Delete Category
2	With the Operations Hub installation, you get a list of out-of-the-box HMI Graphics (not available in Operations Hub Classic). You can use the system HMI graphics to get started, and create custom graphics for varied applications.	Refer to these topics: Create New Graphic Duplicate Graphic Edit Graphic Rename Graphic Delete Graphic
3	Distribute HMI graphics across different Operations Hub systems using the export/import feature.	Refer to these topics: Export Graphic Import Graphic
4	Use the editor to design and manipulate Scalable Vector Graphics (SVG) elements. In the Graphics Editor, you can draw, modify, and arrange the SVG objects to create visual elements for your applications.	Refer to SVG Editor Tools
5	Create data items and integrate them into the graphics, such as text or images, and apply animations to create dynamic visual effects.	Refer to these topics: Create Data Item Add Datalink Animation Add Color Animation Add Fill Animation Add Visibility Animation Delete Animation

Add/Update Graphics to a Page

When designing application pages in Operations Hub, you can drag-and-drop graphics to the page designer area.

In case you modified animation for a graphic that is already used in an application, then you need to update those graphic instances to render the data accurately. For example, to update an instance of a graphic called speedometer, do the following:

Open the application page where the speedometer is used.
Delete the speedometer. You have deleted the old instance of the speedometer.
On the Visuals tab under custom graphics, drag-and-drop or double-click the speedometer to add it back to the page. You have added the updated instance of the speedometer.
On the toolbar, select Save.

You don't need to update graphic instances if you modified color, size, position, or shape of a graphic.