Inductive Automation Blog
Connecting you to ideas, tips, updates and thought-leadership
from Inductive Automation
Lauren and Shay welcome back Sales Engineering Manager Kent Melville to show us the power of launching the Ignition Designer, creating a new project, and showcasing the functionality of a unified design environment live to a customer during a sales presentation. Kent highlights templates, configuring a Perspective screen, the ease and speed of adding and editing tags, adding components, modifying screens, charting, alarming, the mobile-responsiveness, and provides tips for giving a flawless presentation.


Shay: Welcome to the final installment of our series on the Ignition sales presentation. I'm Shay.
00:12
Lauren: And I'm Lauren. Today, we will be showing you the power of installing Ignition live.
00:18
Shay: To do that, with us today, is Kent Millville, Sales Engineering Manager. Thanks for being here today, Kent.
00:23
Kent: Thank you, glad to be here. I'm gonna go ahead and click this launch button there to launch the Designer. And while this is launching, I'll talk about, again, this is a unified development environment. If I wanna configure my tags, I do it here. If I wanna configure alarms, I do it here. If I wanna configure Perspective screens, here. Reports, here. Vision screens, here. It's a powerful message that I don't have to install all these different pieces of software just to work on one system. But once again, I'm going to log in with the same credentials that I picked during my commissioning phase, and you can make a note here about security. I often like to say, if you didn't want the same users to be able to access the Designer, you can certainly go and apply those settings inside the Gateway web page.
01:16
Kent: But when this comes up, you can see that there are no projects installed. So we're gonna go ahead and create a new project. And I am just gonna call my project “Demo.” You can name it whatever you want it. You can give it a specific title, like maybe I say, "This is my demo application." And I'm gonna leave User Sources default, but Database, I'm gonna choose my Postgres database we connected to, gonna leave the same default tag provider. I don't have any parent projects to inherit for this, but I do have some templates I can choose from for this project. And so you can just start from scratch and not select a template and then you'll have no screens or anything configured. But I like for a demo to have it quick and easy to show as much as possible. And so choosing a template gives you a jumpstart.
02:06
Kent: And I personally like choosing this Perspective Menu Nav. And so I'm gonna go ahead and select that and click Create New Project. This is creating that project, it's creating the templates, building out those views and then starting up. And so I like to talk about that during this time of like ... Right now that's what it's doing. It's creating a project on a Gateway. Maybe even mention, you can have as many projects on a Gateway as you want, that's another good selling point of Ignition, and in just highlighting that that template is getting built out.
02:39
Kent: Now, this is the design environment and I like to highlight a couple of things about the Designer before I actually start configuring anything. First thing I do is I point them to this project browser in the top left. And this is another time to emphasize a unified design environment, where if I want to configure Perspective screens, there's a Perspective workspace for that. If I wanna configure Vision screens, there's a workspace and so on. And so, it's all here and that's how you navigate between what type of resource you're developing.
03:15
Kent: Underneath the project browser, we have our tag browser. And right now, the only thing in our tags folder is a empty data types folder. So we're gonna wanna add some tags so that when we create a project live for them, we can actually see the live values changing and actually make it a little more dynamic. So what I'm gonna do is, in the icons and my tag browser here, I have a Browse OPC Servers. And I'm gonna click on that, that's gonna browse Ignition’s internal OPC server, gonna go into the devices folder and I can see that MicroLogix simulator that I configured in a Gateway web page. And I can start coming in and browsing that, seeing all the tags that are involved. I can drag folders of tags, individual tags or even entire devices directly into my tags folder, as you see there. And if I open up these folders, you can see that I have all these values live coming in and I can see them changing. And so I always highlight that. I always tell people, "See, I'm getting live values from a PLC right there. How long did that take me? No time at all."
04:22
Kent: And so once you've got the tags, then it's time to start showing them how you visualize those. And so inside my template that I chose, my menu nav template, under Perspective and my views folder I can see that it added some folders with some pages for me. The first one we're gonna go to is, home. And so, to show you how this is all gonna fit together, I like to go ahead and hit the save button before I actually start modifying the screen and I go back to the web browser, to the Gateway web page and click on the home icon again, and show them that right here on the right there's this Perspective session launcher. I can click View Projects and now see my demo application I just created, and say launch project. And from here, I can see what was built out automatically for me, just by choosing the project template. And so, it's got this home screen with just a little text on it. It's got this chart on it with how much there. It's not any live data, just showing a sample chart. And then also showing that you could view alarms, but once again there's no alarms configured in the system yet, so that's just empty. But that gives us plenty to work with. So I jumped back into the Designer and say, “Well, let's add something.”
05:46
Kent: The first thing you'll wanna know about Ignition, make sure you double-click into this container here. It's called deep selection in Ignition. That way, when we start dragging stuff on, it'll actually put it inside that box. That's an important thing not to miss. But now that I'm deep selected into that, I can take my N70 tag and I can drag that in and say I wanna view that as a tank or drag it in and say, "I want to view that as an LED display." Or drag it in and say, "I wanna view that as a simple gauge." All these different components that you can just pull out and are eye candy, essentially, to just (show) people that, "Oh wow, that's so easy to start creating dynamic screens in Ignition." And then I like to say, "But how do I push that out to my server? Do I have to then take it backup and go launch it on my Gateway, whatever?" An answer is, no. I just hit save, go back to my browser here. And you can see, those changes already done. Sometimes, I'll even make them side-by-side, as far as the windows on the computer so that I can show them clicking save and then have it automatically change, just to show them how fast it is. But it's really up to you guys.
06:57
Kent: And I'd like to highlight what we've shown right now is real-time status. The next thing to show is control. And so I'll grab a tag that I know I can write to and I will come in, and rather than choosing one of these built-out components for status, I will actually go and grab a component from our component palette over on the right. And the one that I like to show for control is I will go and grab the multi-state button. And there's a lot of components that you can pick from. If you're having trouble finding it, sometimes in the heat of the moment, I can't see it, I don't know where it is. There's this little search button as well, so I could just type in “multi-state button,” or whatever and find it that way. But all of these components, I like to point out that they all have properties. And those properties could be as simple as changing the liquid color of my tank here. Maybe, I have some green liquid. Don't read into that too much. Don't know what that is. But other components, like this multi-state button, it's gonna have values that we're gonna want to bind our tags to.
08:13 Kent: So like a control value, an indicator value. So I'm gonna go ahead and grab my N79 tag, drag it directly onto control value, grab my N79 tag, drag it onto indicator value. In some applications those will be separate tags, but for us we're just gonna use a single tag. If I click on this little binding icon, I can see what the effect was of dragging the tag on. And I can see that, "Oh, so it bound to my N79 tag." That's where it's getting its value. And one thing we're gonna wanna do, since this is for control, I actually wanna write back to it. I go ahead and check the bi-directional box. And so I'll go ahead and say, "Okay now." And hit save once again. And I could now go back to the browser and show them that from there, I can click on these buttons and actually have it change my N79 value, but I like to, at this point, highlight that inside the development environment we have this little play button.
09:08
Kent: You can click the play button and that allows you to interact with what you're building as if it was a launch client. And so now I can go ahead and click on hand there. It wrote a 2 to my tag. I can click on auto. I can see it writes a 1. Go to off. So it writes a 0, I can go back into the client and show that I can click on those as well. It works there, as I've said. But if you wanna get fancy with it you can go above and beyond this. You can look at the components that we have inside Symbol Factory, all these graphics that you can just pull in and use. These are all SVGs. And so sometimes I like to grab a pump or a motor. And I'll show you that real quick. I could pull a motor on screen. Get out of preview mode. That's a little gotcha. Sometimes you'll go into preview mode and then you'll try to click on your resources and they won't click. But yeah, you go ahead and just click the get out of preview mode.
10:11
Shay: So we got to see a lot of stuff very quickly, and we've gotten to see what real-time status and control would look like in a demo, but now can you show us some history?
10:19
Kent: Yeah, absolutely. So back in the Designer here, we've got our tags. And I'm gonna go ahead and just select a bunch of these. I clicked on the top one, I held shift on my keyboard and clicked on the bottom one, just to select a bunch at once. I find it saves me time in my demo just to start storing history on a bunch all at once. But you could also do them individually if you wanted. But now I can just right-click and say, "Edit tag." And I will talk about how every tag has a bunch of properties associated with it. For right now we can go ahead and ignore all those other than at the very end we have this history section. And it's as simple as a little drop-down that I changed from false to true. True, I want history enabled. And it can be confusing, because when you select true, you think you're still scrolled down to the very bottom, but it added a bunch of properties and people will often miss that now I can keep scrolling.
11:16
Kent: And so now you keep scrolling down and we've got all these properties to configure history. And so the first one is the storage provider. Where am I writing this? When we say storage provider, we really mean database. And so in my drop-down I select my Postgres database, and then I could set my sample mode which by default it's only gonna log on change and then it's gonna be checking every second to see if the value changed. I could define a deadband, all these kind of things. And I'll mention those, but I tend to just leave it as the defaults and say, "So there we go." We just connected it, pointed to Postgres and we're good to go. And then you say okay, and you'll see over here in the tag browser we have a value column overseeing the tag values, but there's also this traits column.
12:07 Kent: And it can be hard to see on a small screen, but right there I can now see that all these tags I started storing history on, they all have this little circular trait, which means the history is there. So I like to point that out. But now we need a component to show this history on. And rather than adding it to the same screen, you can show that this is a multi-screen application. A multi-view application or page application. And so we're gonna go ahead and navigate away from home and we're gonna go to charts, here inside the project browser. And this is that blank chart that came by default. And I could start configuring that chart, but I actually like to just delete it to show them there's no smoke and mirrors here. I'm gonna delete that and start from scratch, 'cause once again, this is a live install. High stakes, we got this. But I go ahead and click Perspective Components. I'm gonna go ahead and scroll down until I find my ...
13:06
Kent: It's right up here at the top. Don't scroll down. The time series chart and I drag that in. You'll notice before, it scrolled all the way to the bottom. But in this case, I actually want it to ... It's not doing that by default, so I need to come click on it and go to the Position Properties and set this to Grow. That is gonna make it take up the full screen Just gonna grow to fill whatever space it's in. That is by nature of our Flex container. So you can highlight that if you want. Talk about there's different container types in Ignition. I tend to just glaze over that, because that'll lead you on a whole rabbit hole of trying to explain containers to somebody. And if you're doing a short version of your demo, you only have 10 minutes, that's not gonna happen.
13:53
Kent: But this Chart Container, this time series chart, it has its own properties as well. And so we've got this series here and inside my series, I've got data. That's where I'm gonna wanna bind my tags to. So I'm gonna go ahead and click on My Binding and you can talk about how bindings could be to a tag or to a property of something else on screen. It could be an expression, it could be a query to a database, it could be to an REST API. But it could also just be to your tag history. You don't have to write a SQL query to pull back the history, you just do a binding and configure it here and it's quick and easy. So because I'm doing a live demo, I don't have a bunch of stored buffer data. I only have a couple of minutes. And so I like to change my time range here to just the last minute and I set it to pull every second. So every second it's gonna grab its latest values. And then down here for selecting my tags.
14:53
Kent: I go ahead and click the Browse Tags icon, navigate to some of those tags that I stored history on. And I like to select two or three. However many you want though, you can just grab those and you could write in aliases, but I'm just gonna go ahead, leave it everything default. I say, Okay. So now you can see, I'm getting those values. I can see it updating live. If I go ahead and hit save, then I can jump back into the browser and in the navigation on the side, I can click on Charts and I can see that graph. I can see it updating. I can do a little X-trace over that, all that kinda stuff. So History is really easy to demo and in that same vein, if you want to show alarming really quickly, you do it in almost the exact same way.
15:39
Kent: So I'm gonna go ahead and right-click on my tags again. Go to Edit and instead of working in this history section, right above that we have this alarming section. I'm gonna go ahead and click that little pencil icon, that's the edit icon next to alarms. And with that, it brings me into this whole alarm editor. And I like to talk about, here that you can have as many alarms on a single tag as you want. That's another differentiating factor for Ignition. And I go ahead and hit this little plus to add one. And once again, just like I started storing history on a bunch of tags all at once, I'm storing ... I'm creating an alarm on a bunch of tags, all at once. And so later I could go configure them all individually, but this is gonna create some bulk alarms. And I'm gonna call this my high alarm and I'm gonna set my priority to be high and I could set a label that is ... This is from Site A ... Well, let's say my label is “Fault” and my display path will be “Site A.” And then I could choose any notes in there about it. I could choose whether operators are required to add notes, if they're gonna acknowledge the alarm, all that kinda stuff.
16:52
Kent: But what I really care about here is my alarm mode settings. And so right now it's set to be triggered when it goes equal to a given setpoint, but you could also choose above a setpoint, out of range, on condition. Now, there's a lot of options here. The one I like to demo is above a set point. So I could manually type in a set point here. I could choose like 60. Anytime the value goes about 60, that's an alarm. But I like to highlight that you can also have this be dynamic. You could bind this to another tag, maybe your setpoint tag in the PLC or to an expression checking the time of day, time of year, whatever, adding multiple tags together, aggregating, that kinda stuff. But I just navigate here. Maybe show them that I could select tags or add expressions. But then I go ahead and click No Binding again and say, "But for today's demo, we're just gonna go ahead and say if it goes above 50, that's an alarm."
17:43
Kent: And so with that, I usually ignore all the other settings in here just for the sake of time. Go ahead and say commit and okay. And with that, remember we had the traits column over here by our tags and we could see the history icon, well, now there's an additional trait that shows up and that is our little bell icon for alarms. And what's neat is, because our project already had the alarm status component copied out to it, I don't even have to do any development now for the visualization. I can go ahead, just say “save” and then go into my browser again, and this time navigate to the alarm screen and you can see I have a bunch of alarms that have just populated there. And so it's quick and easy to get this going. And at this point, I like to highlight that Ignition is responsive. The Perspective Module runs native apps on the phones, it can be pulled up in any browser. So you can see here that as I resize my screen, my navigation will hide my alarms. I'll still show up if I wanted to navigate to charts, that kinda stuff. Everything just adjusts for me automatically. So it's a nice thing to show people when you're presenting Perspective.
19:01
Lauren: So okay, you've showed us some really cool stuff in Perspective. But what about a client or customer who's more interested in seeing a Vision project?
19:10
Kent: Yeah. That's a great point. And it actually can be really valuable to show both Perspective and Vision. And so let's go ahead and do that. We've shown them that you can do real-time status and control, alarming and history all really quickly with the Perspective Module. But now what if I wanted it for more of a desktop environment? You can just come back into the Designer like this and go ahead and in your project browser, close up the Perspective workspace and instead click on Vision. And Vision, you can highlight there's some difference in terminology, like instead of creating views you create windows. And I'm gonna create a new window now, go in as deep as you want on that, but I like to keep it pretty surface level. And you can go ahead and give that view a name. I'm gonna call mine home. And you can see I accidentally clicked it twice, I get anxious here. But I got my home view and I like to show them as close as possible how it's almost exactly the same experience for developing for both. So I will just come and take a tag and drag it on and I will show a tank. And then I'll come on and show an LED display, and come on and show maybe a progress bar, something like that.
20:36
Kent: So something that's gonna reflect similarly to what you just did inside the Perspective Module. I also like to show, coming and grabbing a tag for control. And in here it's nice, I can just select it from this display. I've got this multi-state button. And I can still show that it's got a control value and an indicator value. And I can see that the control value is bi-directional. And once again, I can still hit that same play button and interact with it. But you can see here, one difference is, by default, in Vision it's gonna block me from writing to tags inadvertently. And so when this pops up, I use that as an opportunity to say, "Hey, and to make your design environment bi-directional, I can just click on this little button here, which makes it so that full read/write Gateway communication is allowed. And then I can come in and click around and see that it's actually writing to my N79 tag again."
21:37
Kent: And so I'll show that much. Sometimes that's enough, but then you can also come in and say, "I also want to show you that I'm tying into the same history." I'm using the same tag, so I don't need to go and figure my tags again, set them up to store history. I can just pull an easy chart on screen and take some of these tags that I'm storing history on, drag them directly onto my chart. And I'll be able to see that historical trend right there. And if you wanna get really fancy with it, something I like to do is with this easy chart, you can even add in a tag browse tree right next to it. And often, you'll do this on a separate screen just to give yourself a little more real estate to work with. But I am going to go ahead and switch my tree mode to historical, so I just see the historical tags. And what's cool about this is I can now browse my database, see all those tags that I'm storing history on, and I could select one of them from inside the client, and just drag this over.
22:51
Kent: And so, I'll go ahead and hit Save there. If they wanted to actually launch this, then what I'll do is go under tools, Launch Project and say, "I just wanna launch that windowed." And the advantage of launching it this way, from inside the Designer, is normally with Vision, you have to go and install a Vision Client Launcher similar to the Designer launcher, but it can piggyback on the Designer launcher. So if you're inside a design environment, you can just launch it here. It's one less thing to mess with, but it still might be worth mentioning that there's a Vision Client Launcher for launching the application, you can install that.
23:31
Kent: And you guys saw that process when Matt did his demo of walking through the online demo project. But so now I can see that there. This is a launch client, and I can show that I can turn things on and off, I could remove pens if I wanted to, I could add these back in. I've created a small sample demo project there for Vision. Same idea, I could add in the alarm status table, it'll automatically detect the alarms, all that kinda stuff. But yeah, when I have somebody who wants to see the Vision Module as well, then that's the kind of thing I would tag on on the end.
24:09
Lauren: Awesome.
24:09
Kent: So with that, that really represents a demo in Ignition. It shows real-time status and control, it shows history, it shows alarming, and it shows Vision versus Perspective. There's a lot of content there. If you needed it to be longer, at this point, you could jump in and show transaction groups, or maybe you wanted to go in and show the Reporting Module, or you could jump in and create a UDT based on your tags. All of those things would be good additions if you need a longer presentation, but this is usually enough to get people excited.
24:46
Lauren: So, Kent, you made it all look very easy, but how did you get to this point? What are your tips for setting up a really flawless presentation?
24:54
Kent: It really comes down to practice. Practice, practice, practice, because Ignition is easy to use. But if you are stumbling over what to click on and things like that, people are gonna imagine complexity that's not really there. And so do yourself a favor, and what I did, to get to the point I'm at now is I actually just created myself a walk-through guide that literally was like dragging N70 onto screen, select this value, and I gave myself a step-by-step guide of one I'd wanna show. And then I just did that over and over and over. And now I don't need to look at that guide anymore, I can just do it. And so, that's my recommendation is Ignition's easy, make it look easy by practicing. And you can deviate from your plans a little bit, but there's some real value in having some structure to your demo.
25:49
Lauren: Thanks so much for sitting down with us today, Kent, it was a real pleasure to have you show us the ropes.
25:55
Kent: Yeah, absolutely. It was my pleasure as well, so thank you so much.
7. The Presentation: Ignition Online Demo
Lauren and Shay are talking to Sales Engineer Matthew Raybourn for Part 2 of giving a sales presentation. This conversation focuses on utilizing the online demo projects to showcase Ignition’s features and functionality live to customers. Matthew walks us through how to quickly demo highlights in Ignition including real-time status, map components, trending, alarming, reporting, tag historians, connecting to web services, design tools, and more. We see industry-specific demo projects, learn how to explain the difference between Vision and Perspective, and see the biggest wow factors including ad hoc trending and mobile responsiveness. Matthew also demonstrates the ease of downloading projects from Ignition Exchange.