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.

Feature	Demonstration Video
Create categories to efficiently organize and manage your HMI graphics. For additional information, refer to these topics: Create Category Rename Category Delete Category
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. For additional information, refer to these topics: Create New Graphic Duplicate Graphic Edit Graphic Rename Graphic Delete Graphic
Distribute HMI graphics across different Operations Hub systems using the export/import feature. For additional information, refer to these topics: Export Graphic Import Graphic
Easily import SVGs created using third-party tools into Operations Hub. The option to import an SVG file is located on the graphic editor's top toolbar. For additional information, refer to these topics: Import Third-Party SVGs Troubleshooting SVGs Created with Third-Party Editors
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. The Operations Hub Graphics Editor provides all the essential tools to build graphics from scratch. You can add SVG objects such as lines, shapes, and text via the side toolbar. Styling options, including color, borders, text formatting, size, position, rotation, and grouping, are available through the top and bottom toolbars. For additional information, refer to SVG Editor Tools.
Link data items to graphical elements for real-time insights. For example, a gauge that shows the temperature of a machine might update its needle position according to the data item representing the temperature sensor reading. For additional information, refer to Create Data Item.
Add animations to highlight important information dynamically. By animating key elements or data points in SVGs, you can draw attention to critical information and elevate the user experience of your application. For additional information, refer to these topics: Add Datalink Animation Add Color Animation Add Fill Animation Add Visibility Animation Add Click Zone Animation Add Rotation Animation Delete Animation
In Operations Hub, you can easily add HMI graphics to your applications by simply dragging and dropping them onto the page. Binding data to the HMI graphics is same as with other widgets/plug-ins within Operations Hub. Associating data with the graphical elements help to display relevant information, monitor systems, or provide real-time updates. For additional information, refer to Bind Your Data to Plug-ins.
To ensure consistent adaptation of HMI applications across different devices and screen sizes, make sure to enable the preservation of aspect ratio at the card level for responsive pages. For additional information, refer to Coordinate Card.