Create Reusable Graphics

Home / FactoryTalk Optix / Optix for HMI

Description

A quick look at how the object-oriented concept for HMI design works within FactoryTalk Optix Studio.

  • FactoryTalk Optix offers object-oriented HMI capabilities allowing the creation of base objects or templates that can be deployed throughout an application.
  • Base objects can be created within folders for organizational purposes, facilitating easy reuse and customization.
  • Instances of base objects are independent copies of each other but share properties from the parent, enabling changes made to the base object to reflect across all instances.
  • Customizations can be made to individual instances without affecting others, maintaining flexibility in design.
  • Changes made to the base object propagate to all instances unless overridden, streamlining updates across the project.
What Are Reusable Graphics?

At its core, reusable graphics refer to design elements—such as buttons, gauges, icons, and entire screen layouts—that can be created once and then reused across multiple screens or projects. Rather than reinventing the wheel every time we build an HMI, we can assemble these pre-designed components like building blocks. Imagine having a library of IP, where each graphic object is a Lego piece waiting to be snapped into place.

Advantages of Reusability
  1. Consistency: When we use the same graphics throughout our application, we ensure a consistent look and feel. Users appreciate familiarity, and consistent visuals enhance usability.
  2. Efficiency: Why start from scratch when we can leverage existing assets? Reusable graphics save development time and effort. Need a custom button? Grab it from your library. Want a gauge? It’s already there.
  3. Modularity: FactoryTalk Optix embraces an object-oriented design approach. We create graphics as objects—containers that can be layered together. These modular components allow us to build complex screens efficiently.
  4. Flexibility: Responsive graphics adapt seamlessly to different screen sizes. Whether it’s a large operator panel or a mobile device, our reusable elements adjust dynamically.
Creating Your Graphic Library
  1. Identify Common Elements: Start by analyzing your typical HMIs. What buttons, indicators, or alarms recur across different screens? These are prime candidates for reusability.
  2. Build Your Library: Create a repository of graphics. Use FactoryTalk Optix’s tools to design buttons, gauges, and other components. Save them for future use.
  3. Document and Organize: Add descriptions and tags to each graphic. Organize them logically. A well-structured library pays dividends down the road.

Transcript
(00:01) so an interesting feature of effective talk Optics is its object oriented HMI capabilities and what that kind of means for us is that we can create kind of one object as kind of the base object or the parent or the template and then we can deploy that object throughout the application and if we make changes to that base object then it would permeate those changes throughout all the instances of the object used throughout the project so let me just show how that works going back to my uh kind of the the project I’ve already kind of created
(00:39) I have you know some basic structure created such as the main window and in some pages but what I could do is I can come up to UI right click say new and create a new folder and I can rename this folder anything I’m just going to call it the base objects and the idea of a folder is simply just a place to help you organize content in the project and then on their base objects this is where I’ll go create that that base object and basically we’re going to create a new container and we’ll call it you know so we’re
(01:17) going to right click new containers and then a panel and we call it’s called panel one now the previous example I was kind of creating a little you know remote pump control over modbus so maybe um we would call this um panel pump info kind of create a widget you know that we could that we could use for multiple pumps so if I double click on pump info it’ll create it’ll open up the um the panel in the in the canvas here that we can edit I could resize this um however one I can come over here the properties and resize it as well
(01:58) uh then I can put some objects on here so for instance I can right click say new base controls and I could put a linear gauge and I’ll have to resize it to fit in here and then I can right click and add some other things such as um if I wanted to put an LED show the pump’s running or something I could also right click and we’ll just add a couple of [Music] um we’ll add a couple of those switches we had earlier too so do that now I’m not going to put any of the properties over here as far as I can connect it to a tag but what I can
(02:48) do is I can at least say that at the very least we want this to be a toggle switch and then I will copy it and paste it so we can have two for a start and stop and then the last thing I’ll do just to just to show is uh we’ll add a label and I’ll call it pump X all right so now we have our kind of our pump info base object created if I come back up here to our pump panel so this is kind of the panel that gets opened up in the main window I can actually now right click on here and when I say new
(03:52) I now have a folder or I have a I have a menu object or a menu called base objects based on that folder I created and I can choose the pump info object I created so there is uh an instance of of that pump info I can right click on this say copy and choose to paste it and I got another instance I could also come back to here to the right click on the panel name say new and go to base objects and pump info so I now have three instances of this on this one panel now any one of these so they’re all copies of each other but they’re
(04:38) completely independent of each other so if I were to go ahead and start the emulator we can see that if I were to change the one in the middle it didn’t change the one on the left or the right so they are you know they’re clones of each other they’re completely independent of each other same thing if I were to turn on few of these starts and stop switches now if I want to go ahead and make some some customizations to one of these I can unlock it and then let’s say I wanted to change the scale on this one to be 50 versus
(05:19) 100 let’s say I wanted to make this led another color like blue and maybe put the switch like that I’m not going to lock it back so I can customize each one now if I go back to my base object my pump info let’s say that I now change this to become a rectangular LED and let’s say that I change this now to be um a maximum scale of 200 versus 100.
(06:06) well if I come back to my pump one screen we can see that in the cases of the left and the the right most widgets um basically it changed it to 200. and it changed it to a rectangle it did not change the scale on the one in the middle because I’ve already customized it it also did change the LED to a square so it did keep that property or did update that property but it kept it blue because I’ve had already told it to be a blue LED so this is pretty uh this is pretty pretty nice and pretty interesting uh we can create you know one object and then
(06:53) deploy it throughout and then customize it individually but then certain properties from the parent will get permeated throughout all all the instances that have been used throughout the Optics project

Tutorial List

Back to tutorials