How to Quickly Create Effective Plant-Floor Screens

Speakers

Don Pearson

Chief Strategy Officer

Inductive Automation

Kent Melville

Director of Sales Engineering

Inductive Automation

About this Webinar

In order to solve a problem, you must first see the problem. The more visualization that you have on your plant floor, the greater your team’s ability to identify, analyze, and respond to issues quickly. However, the effort to develop high-quality plant-floor screens in an efficient way presents a challenge of its own.

In this webinar, Kent Melville and Don Pearson from Inductive Automation show you how to use the Ignition Vision Module to rapidly build top-notch screens and easily deploy them to HMIs and other industrial displays on your plant floor.

See How to Easily Build Screens for: 

• Real-time status and control
• Historical trending
• HMIs
• And more

Webinar Transcript

0:00-5:01
(The moderator, Don Pearson, briefly introduces Inductive Automation, Ignition software, and the presenter, Kent Melville.)
 

About the Vision Module
5:01
Kent: All right, thanks Don. So with this, no matter which industry you're in, the plant floor is really the heart of your business and the more visualization that you have there, the greater ability you have to identify, analyze, and respond to issues quickly. You probably have some screens on your plant floor already. So I'm going to focus on showing how you can add more layers of information to those screens in a short amount of time and without making your screens cluttered.

5:29
And with this I will be using the Vision Module. So if you're not familiar with the Vision Module it’s the visualization module for the Ignition platform and as I'll show you, the Vision Module is great for building real time status and control screens and alarming screens, which are the main types of screens that people are looking at on a plant floor.

5:45
It's also great for things like historical trending, templates, pop-up windows and high-performance HMI design and I'll show you how to incorporate those elements into your screens as well. And so a couple of the main features inside the Vision Module that I'll be highlighting today would be the designer, which is included for free. You don't need to pay separately for your design environment with Ignition, completely free and supports concurrent development for multiple developers. Within that designer you'll see that we have vector-based 2D drawing tools and Symbol Factory or complete library of a bunch of vector-based graphics that you can just pull in and use automatically. You can easily add animations and motion to these screenings. We support an object-oriented design so you can define templates and user-defined types so that you build something once and reuse it throughout your project.

6:44
Also with that, we need to get fancy. We have a built-in Python scripting engine so you can do any kind of custom logic you want there. And then once you've got it built, you can launch unlimited clients, and those changes as you do them get pushed out instantly, automatically over the network. So although I won't be demoing it today, it is important to note that Vision clients are secured using SSL protocols and so all of that traffic is encrypted in lockdown. So with that, let's see what this can do. So at this point, I'm going to transition away from this PowerPoint and we are going to get into Ignition itself. And so with this, when you install Ignition, you'll see this gateway webpage and this is where you can see, this is to connect to devices like PLCs and we have built-in drivers for those to connect to a database and with that today we're connected up to a MySQL database, but you could also connect to Microsoft SQL Server, Oracle, Postgres, DB2, whatever you want there.
 

Native Client Launchers
7:56
And from here you can see any projects that have been defined and launch those. And also we have these native client launchers. And so with this, the reason why I wanted to start here is because the version of Ignition that we're using today is 7.9.10. The Beta for this release will be available on our website within the next week or two. (Update: 7.9.10 was released in November 2018 and is available here.) But 7.9.10 is a significant step for Ignition, and specifically for the Vision Module because as many of you know, Ignition is based on Java. And so historically you have had to not just install Java on the server where you're installing Ignition, but also on any computer or workstation or HMI where you've wanted to launch a client, you've had to install the JRE, the Java Runtime Environment, right there on that machine in order to get up and running to be able to launch a client.

9:01
Now with 7.9.10 inside these native client launchers, we have embedded Java. And so when you add the native client launcher to any computer, whether it's your desktop, whether it's a workstation, whether it's an HMI, it can know launch a client regardless of whether or not Java is installed on that machine. And so Java is now embedded inside the native client launchers. So it's a big deal for Vision because people get frustrated with having to maintain all these updates to Java that come out. And so, you no longer have to worry about that in Ignition 7.9 starting with the 7.9.10.
 

Phase 1: Drag & Drop
9:44
But with that being said, I have launched the design environment for Ignition and with this to orient you a little bit to this design environment, you have a project browser in the top left and underneath that, you've got your tag browser so you can see all the tags in the system.

10:01
And this is a live environment, meaning I can see those values coming in from the PLCs automatically right there, underneath that is a property editor that we'll talk more about in a minute and on the far right side, we have a component palette that has all different kinds of components that we can just drag in and use on our screens. And so today we are going to be building a plant floor screen from the ground up. And with this we're going to do a multi-phased approach. And so phase one of this, we'll be building a complete plant floor screen using only drag and drop, we're not going to get into properties, we're not going to get into templates, or HMI optimizations. Those are all going to be future phases. But to start off, we're going to see what can you build by just dragging and dropping inside the Vision Module.

10:55
And so with this we're going to go ahead and create a new window and you can see here it's blank. And what we're going to do is we're going to start to represent these tags on screen. And so we'll start off here, Ignition and allows you to take tags, just dragged them on screen and you'll get this dropdown list of how you want to view that information. So this is a tank that I'm pulling out, so I want to view it as a tank. And you can see it automatically shows my fill level. I see a percentage, I see it's animated, it's going up and down. If I wanted to display this tank, one temperature next to it, I can display that as an LED display. And then maybe I want a little label to tell me that that is a temperature. And so I can come over here to my component pallet on the right and I am going to grab a label, just pulled out on the screen.

11:50
And I'm going to call that temp, so with that so far, all drag and drop. Now with this, I'm going to pull out another tank. Do the same thing here. With this, I could even just copy my label and my LED display. Pulled him over here. But see this LED display is still showing tank one. I want it to be tanked two, so I just take my tag, drag it on there. Now it's showing the right temperature. So really easy to get going here. Now with this, we're going to say these tanks come down. Tank two's got a little valve in a way. So if I want a valve, like I said before we have symbol factory, which is a library of a bunch of graphics that you can pull in and use, I'm going to go ahead and grab one of these valves. We'll keep it simple. Just going to grab this one and pull it in, with these, these are vector based graphics so I can come in here and I could move certain elements of this away from others, whatever I want to do there.

12:57
What I just want to do is I want to resize this, make it a little smaller with that, put it in here. And then also I would want to pull in maybe see where are the pipes. I can pull out a pipe here and say, all right, where's my vertical pipe here? There it is. So with this, I can just pull pipes out, make them as thick as I want. And maybe add a little corner piece there on the bottom, you'll see the pipes very quickly can become quite time consuming to draw. And so, we won't do all the pipes for you today, but with this, I just dragged that on here and I could, continue on through this valve. Have another pipe coming down here from my tank one.

13:50
And then we're going to say we're going to be pulling the liquid out of this tank from a pump for us. And so with this, it'll pull out another graphic here. Going to grab a pump, we'll go ahead and grab this guy and with this, once again, these are all vector-based graphics so I can drag these out, these aren't going to get blurry if I make them larger, because they're all done with paths. And so with that, I've got my pump here. I'm going to say that the pipes would continue down into this pump. Now from that pump, we'll go ahead and say we're going to go through another valve. If I didn't want to drag out another valve and resize it, I can do control D, which is to duplicate, put my other valve there. And I will say that those are all coming into a day tank.

14:41
Once again, I just drag out that tag, show it as a tank, and if I wanted to show the temperature of that, once again, I can just pull that out as an LED display. And once again I could grab a label if I wanted here, pull that down. So with that, we're coming in, we've got these flowing into that day tank, and then from there we will just push this liquid out to some remote sites. So we'll say that the pipe continues and we will have another series of pumps here and we'll go ahead and use this vertical pump. And another great thing about the Vision Module, see if I wanted to have these four pumps here, I could start with my arrow keys trying to line these up and make sure that they're all on an even field there. But the Vision Module allows you to automatically align things and also to make sure that they're spaced evenly, I could define padding between all of these as well.

15:58
And so we'll go ahead and give it a little more padding. We'll say 25. All right, now we've got all those lined up and spaced evenly. And then the last thing we'll do here is with these, I want them to come up into some flow meters. And so with that, I'll just pull two flow meters out here. We'll go ahead and just use this graphic here, let's make this a little smaller. And then with that, we'd want to be able to view those flows there. I could view those as an LED display once again. I could add a label for the units of this like, gallons per minute, that kind of stuff. And so with this, for the sake of this demo, I'm not going to go ahead and add all the pipes for this and add all of the labels for this, but you see with this we've been able to just drag and drop, create a screen and when you finish this screen, what this could look like would be like this.

17:09
So same idea here. We've got the two tanks, they're coming in through a valve. They go to that pump out through another valve to a day tank. And then with that they go out to these four other pumps that are pushing them out to these to flow meters. Once again, we can see the RPMs of these pumps, we can see the gallons per minute going through these flow meters and we've built a complete process overview, for our plant floor screen. And so everything you see with this, this is all just drag and drop. You don't have to do anything fancy, you can pull in anyone in your operation. They can build screens like this.
 

Phase 2: Component Properties
17:48
Now you say, all right, that's great, but I want to do a little more, like for example, with these pumps, how can I tell if they're on or off? Maybe I want to add some color on top of them that is showing their state. Same thing with the valves. Maybe I want to change the liquid color in these tanks. How can I start doing all of that?

18:13
And so that's going to take us to phase two here, which is to actually get into the properties of these components. And so if I click on any of these components, you'll see this property editor in the bottom left-hand corner gets populated. And that's true of anything I click on the screen, every component, every image has properties. And so if I wanted to change that tank filler, I could scroll down here and I could just, change the color of that liquid and that updates automatically. Now with this, what's most useful is to do something like adding the status as an overlay over one of these pumps here. And so what I'm going to do is to do an overlay. I want it to be the same shape and size as this Pump 1 here. And so what I'm going to do is rather than just modify its properties, I am going to do control D to duplicate it so that I have a duplicate pump right over the top of this one and I don't want this one to have all of the graphics. And so I'm going to use this little union button up at the top.

19:25
And what that does is it takes every little detail about that and it just merges it all together to be one flat shape still right over the top of my pump. Now with this, I want to have the color of this overlay, be semi-transparent, so you can see through it, but also to be based on the status of my pump. And so what I can do here is you can see in my property editor, I have a fill paint property and I'm going to click this little binding icon which will allow me to define what the fill paint should be based on a tag. And so the tag that we're going to use for this one will be Pump 1. And so with that, if the value is zero, then maybe I want to have this be read and I will make it semi-transparent here. But if it's on, then I want it to be green. But once again, maybe semi-transparent here.

20:34
And then lastly, if it's a two, it's in a manual mode. And so we'll go ahead and make it yellow, semi-transparent. But also maybe I want it to flash at me. And so you can choose blink here. I'll make it orange, but we will make it semi-transparent as well. So with that, we are able to use this property editor down below to base the color, the fill paint of this on the tag, Pump 1. And we're able to take its value and do a number to color translation to have it have a semi-transparent fill. So with that I say okay, and you can see right now Pump 1 is on and so it is green, but with this it's going to take some time to make that change to Pump 2 and to Pump 3 and to Pump 4. And then do the same thing for Valve 1, Valve 2, Valve 3.
 

Phase 3: Templates
21:35
And this is just one screen, you may have multiple screens for your project. And so it doesn't make sense to go and add individual property changes like that necessarily on every instance of a pump. And so with this, that actually takes us to our third phase, which is templates. And so with this, what I'm going to do is I'm going to do that same change that we just did on that pump, but instead of doing it on each one individually, I'm going to do it in a template. And then we can just apply that to every instance. So with this I select those, I'm going to copy it and we're going to go ahead into our templates and I'm going to make a new template that I'm going to call pump and for this, I'm just going to paste in that pump graphic that we had.

22:35
Now with this, if I look at that binding that we just created, it is tied specifically to Pump 1, but we don't want the template to be just a Pump 1. We actually want it to be based on any pump and that we could just pass him the pump number and it would automatically know which tag we should be looking at. And so what we're going to do here is we're going to add a custom property and that custom property will be called pump num and it will be an integer. And I just go ahead and say okay. And now with this, instead of binding directly to a tag, we're going to choose this indirect tag and I'm going to go ahead and select Pump 1. But instead of doing the one, I'm actually going to put that one in as a variable. So you see it shows up as a reference here and I'm going to bind to that variable to that pump num custom property that we just added to the template.

23:42
And so now based on whatever we pass into this template, it'll populate the number for our tag path. And once again, when we get that value, then we want it to be a specific color based on what the value is. And so I add this number to color translation again and that will be ... Sorry, see, this is why I need you guys watching me because now I'm changing the colors. So with that, we now have red is for zero, one is green and two will alternate between yellow and orange. All right. So with that, that's now complete. I've done a complete template here. I could add other things like an LED display or other elements to this template. But we're just going to keep it simple. I'm going to go back to my screen here and rather than having to go and add these properties to each of these pumps, I can just delete the pumps that are there. And instead, what I'm going to do is pull out my pump template and you'll see it has a template property, that custom property that we added and we know it's custom because it's blue.

25:18
I'm just going to say this is Pump 2, and then duplicate that. This will be Pump 3 and duplicate that. This will be Pump 4 and so you can see there now we've got all of our pumps, they're all getting their colors, based on their appropriate tags. And if I have additional pumps on other screens or additional ones for this screen, all I have to do is add an instance of that template and then give it it's custom property of pump num. Now with this, the other things you can do with templates would be if I wanted to make it change. And so I want my colors to be different than this spectrum of green red and then flashing between yellow and orange.

26:13
What we can do is rather than going into each instance of this template, I could just go to the template definition. I can make the change there once, it'll automatically be added to every instance of that template. So with this, we've now done phase one which was all drag and drop, we did phase two, which was introducing you to component properties and how you could modify those and then phase three, which was rather than doing each of the properties individually on each instance of a component, instead you could create a template and through indirection, you could apply that over and over throughout your project.
 

Phase 4: HMI Optimization
26:51
So with that we get to phase four, and phase four is to take this style and maybe experiment with HMI optimization. And so HMI optimization means a different thing to different people.

27:11
So everybody has their own approach to what those graphics should look like. There's multiple standards that exist out there and Ignition gives you the flexibility to match any of those standards. So with that being said, if I wanted to change these pumps to be more of an HMI-optimized format then I could just go and change the color schemes of that and show you, I've already built a template for what that could look like, but it's the same graphic here except for my overlay, I've done it where now if it's off, instead of being red, it's a dark gray. If it's on, it's white and then, if it's in a manual mode then it's blue. But with that being said, you could have any color scheme you want. These could even be bound to tags so that your user could go in and they could choose what colors make the most sense to them on a configuration page, or if you change your mind down the road, you can always modify them here.

28:19
So this is showing you the same template, but with just a different color scheme. And if I wanted to go back to my screen here, I could switch this out, put in a new pump, HMI optimization. Oh, oops. Let me get rid of first part. So with this, add my template and for my pump num, this is Pump 1 and so I could do the same thing with Pump 2, Pump 3, Pump 4 and I will show you on Pump 4 forward just to show you has a different color. So with this Pump 4, you can see it's black now instead of red, other things you can do here, a lot of times, people like all these 3D graphics, these animations, but for a lot of HMI optimization it can just be distracting. And so this union button can become your best friend that I can just come in here, eliminate all the detail, just make it a shape. And then with that, maybe I want to design a grayscale fill color. And so you can certainly do that as well. Come in here defining a grayscale color.

29:41
But also with this, HMI optimization is more than just taking out the color and taking out the detail. HMI optimization is really about adding more information onto your screen so that at a glance an operator can get more information from their screen. And so with that, what we’re going to do here is we're going to build a template for these tanks that is going to not just get rid of the color, but instead is going to give us information in a different way. And so with that, let's go ahead and create that new template and we'll call this template tank. And we want to get a graphic to start with here. I'm going to pull out a simple graphic. Let's go with ... See, what's a good one here. We'll just go with this.
 

30:43
So with this tank here, we're going to make it a little bigger and also I want to make the color or the ... You see there are little lines here, but they're really thin. So once again, because Ignition allows you to change properties of anything inside these SPG images. I can come down here to my stroke style and I'm going to make these a little thicker stroke and we'll do the stroke on the whole image as well around the outside. All right. So with this, we've got our tank here and what we're going to do now is we want to show the value of this tank, but before we are showing that by actually showing the liquid in here and showing it to go up and down, rather than doing it that way. What we're going to do is we're going to add a sparkline chart inside this tank so we can see the current value, but you can also see where that value has been over the last 10 minutes.

32:02
So that's the whole idea of adding more information onto the same amount of real estate. So with this, our sparkline chart exists over here on our component palette. I go down into charts, pull out a sparkline chart and we will have that take up the full size of the main part body of the tank. And so with this, what's interesting about the sparkline chart is it allows you to find a range and so we'll say high is 100, range low is zero, but heart desired range is actually just between 75 and 25. So you can define your desired range there and you'll see when you give it a desired range, it actually adds a color overlay showing you the space that you should always be operating in. And so with that, I could change what that color was here, but that shows you that I've been mostly operating within my desired range, although, just a minute or two ago, we actually dipped a little low, and so if I was just showing that liquid going up and down, I wouldn't be able to tell that just by looking at my tank.

33:21
So with this, the other thing I'm going to do this template is once again add a custom parameter here. So this is going to be tank num, say, okay. And then also with this, I want to bind the values of that sparkline chart to actually show whatever tank I'm using. And so with that I come down to my properties, I have my data, I'm going to bind, but rather than just binding to a tag, we actually are going to bind to tag history now. And so I'm going to grab my tank one here and say that is my selected tag. But with this, I don't always want to be looking at tank one, just like I didn't always want to be looking at Pump 1. You want to use some indirection here. And so I can do the same thing or I add a variable using these curly braces and then I can find that to my tank num property.

34:36
And so now this is all indirection here. And with that we're going to have our time range, just be the last 10 minutes worth of data. And I could set a poll rate, I just want this to grab the latest data every five seconds, 30 seconds, whatever makes sense. With this, I'm going to go ahead and say okay, and you see it's not there yet because I haven't given a tank num property but if I give it a one, for example, I can see the values coming in from tank one. So with that, our tank template is now complete. And so with that, let's go ahead and go back to our screen here and we can replace some of these tanks that we have here with our new tanks. And so you've got tank one and duplicate that, get tank two.

35:53
Oops, that's a three. And I could add the same thing down here, but with this, we're starting to build out our screen. I can go in and start muting other colors, adding the same kind of statuses to our valves, all these things. And once I build that all out, once again, magically I have pre-made that screen and so you can see what that screen could look like. Something that I didn't mention here was also these moving analog indicators. So with these, you saw before when we had our tanks coming here, we also have temperature and just like the fill level, I can see the fill level of the tanks before, but when I add something a little more interesting, I can get more value. Same idea with the temperature rather than doing an LED display, I could show a moving analog indicator and I can resize that to whatever I want and then I just bind my temp, tank one temperature to that

37:02
And it's actually showing me not just where the value of the temperature is, but it's showing me where that value is with regard to my expected value. And so I can come in here and set different set points where I should be in an alarm state where my desired high and low are. And then that arrow will always show related to where my value should be. But with this, I could pull this over here. Of course with these properties you can change values, but you can also change how they render. And so you'll notice my little indicator arrow here is on the left hand side, if I want it to be on the right hand side for this tank two, there's a property for that as well to reverse indicator. So, once again, when you've done all this, muted all your graphics, use these new techniques. You could have a screen that looks more like this.

38:04
Now with this, we've done HMI optimization and once again, you can follow your own, version of high-performance graphics. Ignition is very flexible, lets you follow any standard that's out there.
 

Phase 5: Alarms, Scripting & Popups
38:20
But the other thing I wanted to show you, phase five would be to take this and what could we do if we want to bring in alarms or do some scripting. And so with this, alarms in Ignition are really easy, the easiest way to show alarms on your screen would be to just grab this alarm status table and I could just display it here. And I now see all my alarms in my system right on my screen. Same idea you could do it in a pop-up from the bottom where it slides out, shows you your alarms there. Maybe you only want to see some of your alarms. So what you can do is if I right click on this alarm status component, or if I right click on any component, I can click on scripting and with that, you'll see that there's extension functions in here and these extension functions are customized to the specific component that they're on.

39:18
And so for example, on this alarm status table, we see things like filter alarm and so I could come in here and write any Python I script. Any Python script I want to filter those alarms to limit them to just what's on the screen or just in that area or just at that site or maybe you just want to have permissions to see. And so this is one place that scripting a can become involved, but that's not the only place scripting can get involved. And so maybe for these valves I want to, when I click on them, have a pop-up that allows me to open or close them. With that, I've already defined a pop-up here that I will show you and that pop-up is just, gives me the ability to see the status of a valve and open or close it or put into a manual mode. But with this, if I wanted to open that, how do I actually do that when I click on this? Well, that's done via scripting and people say, "Wait, wait, I have to do scripting, to do a pop-up, that's intimidating. I don't want to have to write any script."

40:34
Well, just when we say you're using scripting, that doesn't necessarily mean that you need to be a programmer. For example, with this, if I click on that valve, then I can, rather than immediately starting to write some scripting here, you'll see we have some other tabs that will generate a script for you using a graphical user interface, a GUI. And so with this on mouse click, I want to open up my pop-up and I want that pop-up to specifically know that I care about Valve 1. So I say, okay, and now if I go into preview mode here, I can click on that, I see the pop-up and I can hope that you see the value changes and then if I go back over here, you can see ... Oops, if I go back over here, you can see that the value updated. And so it's a little hard to show that in the designer, but we'll show you that in a client in just a minute.

41:40
But with that, with that scripting, that's not scripting, I didn't see you do any scripting. And all you did was click some check boxes. Well, if you go to the script editor now you can see that it actually turned those clicks that we did with a mouse into an actual script. And so you can see the Python scripting there, if you wanted to do something more fancy, once again, you could modify the script, I could type in system dot and you control space and you can see we have all kinds of scripting functions that you could pull in and use here. But oftentimes you don't have to get to that level of detail, Ignition will give you the interface to build those scripts automatically and then maybe you'll just customize them as needed, but just to show that this script really is the same as doing those button clicks.

42:31
And I'm just going to copy the script, say, okay, and then I am going to come to my other one, not going to choose all of these clicks in the UI. But instead I'm going to come over here, just copy and paste this in and instead of a one and I'm going to pass in a two. And you'll see now if I go into a preview mode, that one works as well, how we're scripting. So with all this being said, there are other scripting functions you could take advantage of as well. And we do have a online tool, our user manual that is found at docs.inductiveautomation.com. It shows you a lot of these scripting functionalities right here in the appendix. You click on scripting functions and you'll see it'll have things like, oh, I have a table and I want to take the data set of that table and I want to export to Excel.

43:29
Great. All I have to do is come down here, copy and paste this code snippet, put it into that little scripting editor and maybe change the name of my component if I renamed it, and then it's done. It will just work. And the same idea is true of all of these. And so we try to give you as much functionality as possible so you don't have to be a Python expert. But for those of you who are Python experts, certainly you can go and customize all those scripts and build whatever you want. And so Ignition, what we're trying to show you is, it's like an onion. It has layers but with this, if I save all this now, I go in, and I'll show you the native client launcher, come in here I launch a client. With this you'll see that we have some navigation here to show us these completed screens in phase one, phase two, phase three, phase four and phase five.

44:37
And so with this, we started with just drag and drop, created a screen like this, but by getting into the properties, we were able to change the colors and to modify what all these would look like and then so that we don't have to do it on each one individually. We created this screen which looks exactly the same except it has templates behind the scenes, rather than just individual properties. And then we took that, we converted it to HMI optimization, switch out some of the components, switch out some of the templates and once again you can customize that any look and feel you want. And then you can add the ability to have pop-ups to open and close these things. Add some alarms. You could also add alarms directly on screen to show status, all of that.

45:24
And so that shows you that you can have screens very quickly with drag and drop, or you can start to make them more advanced, very easily using Ignition’s advanced tools. All of this comes to you via the Vision Module of Ignition.
 

45:39-1:00:15
(Kent and Don discuss Vision Module updates in Ignition 8; please note that details about upcoming features are subject to change. They conclude by answering listeners’ questions; please go to the webinar recording to hear the Q&A.)

- End -