Learning Ignition Fundamentals

Speakers

Kyle Van Eenennaam

Instructor

Inductive Automation

Whether you're new to Ignition or just want a refresher, this session is made for all. The Inductive Automation Training team covers all the basic knowledge and fundamental features you need to get started with Ignition.

Transcript: 

00:04
Kyle Van Eenennaam: Welcome to our "Learning Ignition Fundamentals" presentation. We're gonna be going over some of the basics of Ignition, establishing some key vocabulary, highlighting some of the essential features that make Ignition so popular. My name's Kyle. I'm one of the instructors here at Inductive Automation. I teach our training classes. They're week-long classes where creators, engineers from all around the world will typically tune in virtually or maybe come here to Folsom in person and take classes. So in a way, I'm kind of used to doing these presentations for 30 hours instead of just 30 minutes. What the heck is Ignition? That's my next slide, and here it is, as we can see. We all kind of know what Ignition is at this point. Hopefully, you just attended the Keynote. They did set up some of the established knowledge that we like to talk about.

00:49
Kyle Van Eenennaam: Ignition is, at its core, an industrial application development platform, development platform really being the keywords here. I like to give an example of Microsoft Word. Microsoft Word is a development platform for Word documents. There's no correct way to make a Microsoft Word document. When we're in school, we write essays. When we're graduated, we write resumes. There is no correct way. There is no proper Word, and there is no correct Ignition. Ignition is used for your solutions. Your solutions for HMI and SCADA. HMI being Human Machine Interfaces: the panels and the screens that our operators interact with at our industrial facilities. SCADA being really the umbrella term for our software Supervisory Control And Data Acquisition. This is the idea of connecting together all of our industrial devices, so that we can better aggregate, understand, and interpret the data coming from our facilities, our edge-of-network devices.

01:48
Kyle Van Eenennaam: There are tons of features that make Ignition as popular as it is today. Some of the things I really like to highlight for newer users is the simple licensing model. Our license models are full and complete. You pay for a single license for a server, and that license will scale infinitely for as many tags as you need, as many data points as you want, and as many users as you can imagine designing and connecting at once. Ignition can be installed on, really any operating system you can imagine, Windows, Mac, Linux. In this case, we're using a laptop here, and this is gonna be a Windows operating system. We're gonna end up installing Ignition and working together on it, during this presentation. One of the best features that I like to highlight is the free and full trial mode. We can test everything we need for free at any time by downloading Ignition from our website. You can set it up and trial anything you want, any module, any third-party module. And within this trial mode, we can test what we need, confirm it's gonna work, and then make our purchase. Nowadays, we've grown the Ignition editions to better expand the offerings that our users can build with their Ignition architectures.

03:00
Kyle Van Eenennaam: The standard Ignition edition is what we're gonna be installing here and working with. This is gonna allow us to work with all of our key modules and tap in all of the features we like, such as tag history, tracking data over time, alarming on our data points on our tags. The other additions allow us to expand our Ignition systems. With [Ignition] Edge, we can connect to devices out in the field at the edge of network, connect them back to a central Ignition server, and connect all of the data together. We can use the Ignition Cloud Edition, which was recently released on the Azure and AWS marketplace to connect all of our Ignition servers together in a single cloud server and give our users the ability to see and interpret our data from anywhere. And at this point, you may be saying, what can't Ignition do? Can it water my lawn? And it can. Ignition Maker Edition, your at-home automation. This is your free at-home non-commercial version of Ignition. Many people use it for things like, automating their lights, their garage doors, what have you.

04:00
Kyle Van Eenennaam: Another key aspect of Ignition is the fact that it is modular. Ignition as a platform is built with modules in mind. The features that you need are built into these modules, and you only need to purchase and acquire the modules that you need for your system. And this way we can mix and match the modules we want, depending on the features we need for our use cases to lower the cost of our licenses, so that we're really only paying for what we use. We don't have to pay for everything Ignition offers. You just pay for what you want.

04:29
Kyle Van Eenennaam: At this point, let's just go ahead and get started. The best way to learn with Ignition is to get started right away, install it, tinker with it, and design. We can download Ignition for free on the Inductive Automation website. Just to save us the Internet bandwidth here, I did already download it ahead of time. But as we can see, we have our "Download Ignition" button always available on our inductiveautomation.com website. I did already download the installer, like I said, to save us some time. So I'm gonna go ahead and install Ignition here on my laptop.

05:00
Kyle Van Eenennaam: As I run my Ignition installer, we're gonna be setting up what's called the Ignition gateway. This is the Ignition server, the brains of the operation. I'm gonna be just installing a default Ignition server with a default file location and just our standard modules. It's gonna set up pretty quickly, the other server, up and running, and we're gonna be able to start tinkering with our gateway. Our gateway, again, is our central command hub. It is where we establish all of our really essential settings, like, security, as well as where we establish all of our connections. Connections being to really more than just devices these days. Most of us, when we think of Ignition and SCADA, we're gonna be connecting to a PLC, a Programmable Logic Controller, an industrial device, but we can expand that connection idea to databases, SQL databases, email servers, SMTP servers to communicate with our end users to send them emails.

05:55
Kyle Van Eenennaam: We can connect to almost anything you can imagine, using the built-in Ignition web server. And so, as we saw, it was a very fast install, faster than I can even keep up with. As we install, it is gonna ask us what edition we want to use. And we're gonna choose that standard edition. It was that middle option. And I do just have to, you know, agree to our licenses and set up an initial user for my Ignition server. By setting up my standard Ignition gateway, I'm gonna be able to start working with all of the wonderful Ignition modules that allow us to tap in all of those features we like, such as alarming, tag history, reporting, what have you.

06:34
Kyle Van Eenennaam: So we can see our gateway is starting now. We've installed it and we've selected the edition that we want for our gateway. What I'm gonna end up doing next once it resumes is actually restore a backup. I created some resources for this presentation, so that we can talk about some of the key features of Ignition and I have them already saved on a file. Ignition supports a single flat file, one file to back up your entire system. All I have to do is go to my gateway webpage here. The gateway webpage is our interface to connect with our server. This is where we can set up connections to our databases, our devices, where we can set up really important settings, like our security. What I'm going to end up doing is restoring a backup. By going to the backup and restore tab, I can end up going to my desktop and restoring my gateway backup file that I set up last week.

07:26
Kyle Van Eenennaam: With just a single click, I can restore my entire system. This is going to account for everything that I've worked on. All of the projects and screens I've designed, all of the device connections and databases that I've set up, all of these are going to come together by restoring this file. As it's resuming, I want to just briefly talk more about the gateway webpage. That gateway webpage is our immediate interface to our server. Like I said, it's where we set up our connections. It's also where we can see performance metrics of our server itself. If our server's running out of memory, running out of CPU, it would warn us here on the gateway webpage. In the status tab to be specific. I could go and log into the status tab, and now that I've restored a backup, I actually have some information here. For example, I can see there are two devices connected. They're enabled, they're connected. And I have a total of 337 tags already in my system.

08:18
Kyle Van Eenennaam: I did set up a few of them myself. There's even a database connected. I can see there's a throughput of some queries going into my database, a SQL database, specifically a SQLite database on this computer. Now, we want to start actually designing, making the projects, the applications that our end users are gonna launch and work with in our facilities. This means we need to download another application. We installed our Ignition server on this laptop. We also need to install our designer. And this is where the web-based nature of Ignition comes into play. Ignition is server-based. We install a single server. But it's also web-based. We connect to that single server, to that gateway in order to support concurrent designing and to connect to users from around the world.

09:10
Kyle Van Eenennaam: And this designer launcher that I'm installing right now is the application that we use to connect to our server and build our projects. We can get it on our gateway webpage at any time. We downloaded it very quickly right now. And all we have to do is target our server. If I go and add a designer, it actually picks up some of the local gateways on the network, and it's not just me. We have lots of people with Ignition gateways set up on our network right now. They are kind of set up for public use, since we're all doing showcases and exhibitor presentations. I'm going to look, specifically, for my ICC 2023 gateway. That's the gateway that I've set up. And if I add that designer target, I can go ahead and launch. As our designer's launching, I'm going to talk about what we're about to see. Our designer interface is where we build our projects. The projects would be things like our HMI screens, or our reports, PDFs that could automatically generate an email to our users. I do have to log in here to get into the designer, and I can launch one of my many projects.

10:10
Kyle Van Eenennaam: Your Ignition system could have many, many different projects. We could have a different project per device. We could have a different project per facility. In my case, I just have one development project that I'm still working on. We're actually gonna develop some resources here together in this presentation, but we do have some already created that we wanna take a look at to start establishing our understanding of how designing works here in Ignition. So I'm now in the designer and this, this is really the home base. This is where I feel safe. I feel comfortable. I know that I can achieve really anything I want, anything I put my mind to here within the designer interface. I already have some resources created, which we're gonna talk about in a moment. But I just wanna briefly talk about what we're looking at here.

10:51
Kyle Van Eenennaam: This designer application allows us to build all of the resources that come from our various modules, such as Vision or Perspective. Those would be our HMI visualization resources, the two options we have for building screens. There's many other things we can build in here. One of the most important things that we have access to here in the designer is the Tag Browser. The Tag Browser gives us access to our tags. Tags are, of course, just being the data points that come from our PLCs, our devices, our Programmable Logic Controllers. Most of the time, these tags are gonna be OPC tags. OPC UA, Open Platform Communication Unified Architecture, is a standard used by most industrial devices these days to allow SCADA and other systems to effectively communicate with those devices at a more universal standard. So, most of these devices, these tags, are gonna be communicating across OPC UA.

11:47
Kyle Van Eenennaam: Ignition connects to an OPC UA device and allows us to read and write those data points live. We can see we have live data points, currently changing. Specifically, I've expanded a few tags related to some sensor devices that I have set up in my simulated dairy. For this session, we are gonna be imagining we're working in a dairy and we have devices associated with the dairy. So these sensors could be perhaps tracking the sensors of the fridges that we keep our milk in. The humidity and temperature of these fridges would matter. We wouldn't want our milk to spoil. Getting live data into our system is one of the best aspects of a SCADA application.

12:30
Kyle Van Eenennaam: Now let's take a look at some of the HMI resources that have already been created here. Within Vision, I've created some windows. I can go into my Project Browser panel above the tags, and I can look at all of the windows that have already been created. Specifically, I'm going to open up a window called "History" right now. It's pretty straightforward what it's doing. It's historizing data. Technically, we can see some sine tags trending over time, right? We have a few sine waves going on. And what I just did in the background there was, I opened our client, our actual project. When you think about it, most people who use Ignition are not actually designing. Our operators or end users are the ones who are typically actually launching an Ignition application, an Ignition project, and working with it. So many, many Ignition users don't know what the designer is. Instead they know what the project is. In this case, for Vision, we call this the Vision client.

13:26
Kyle Van Eenennaam: All of those resources that I have set up such as that trending window are available in the client in our project. If I log in with the correct credentials, I can now see I have an interface, an HMI interface, to interact with all of the screens I've built. I can see my trends in a much larger screen now, here in my Vision client. We could even add more tags that have data points in our database. Our sensors are also trending. Our users could add and remove tags as they see with this window. What else do we have going on here? Alarming. Alarming is a key feature of Ignition that taps into our tags. We're gonna have data points coming from our devices and sometimes we're gonna be concerned about those data points. For example, our fridge, our temperature in our dairy, if it gets too high, if it's too hot in our sensor, that milk is gonna spoil. So we have alarms keeping track of our temperature, warning us when those values get too high or too low.

14:28
Kyle Van Eenennaam: And we could even historize alarms over time, indefinitely. If we look here, I actually have a date range showing two days of alarms. I don't actually have two days of alarms. I just turned on my gateway. I only have a few hours of alarms or a few minutes at this point. So I could adjust the date range that we're looking at. I could narrow it down and move it around, and I could see that in the future, there are no alarms yet. We can imagine if we've been running the system for months, our users can now go in and look at specific days, look at specific devices, and find the alarms and the events that we were concerned about. Now I'm looking at the overview window. The overview window here is more of an interface for visualizing the actual data coming from our tags. We have our three sensors here set up. Sensor one, two, and three. But I wanna note that I only actually made one sensor UI, one sensor interface. I created a Vision template, which is a resource that we can dynamically use to represent many instances of a single device type or data point type.

15:37
Kyle Van Eenennaam: So by using dynamic resources when we design, we can end up building interfaces that are very expandable. We have three sensors right now, and if I click on a sensor, it opens up a pop-up for that sensor. Whatever sensor I click on, it's showing me the trend of that sensor, as well as the live data. And what if we added another sensor? We can absolutely do that. All we need is to identify that sensor, maybe number or sensor name, and then we could load it into this interface. This pop-up can generate any sensor we can imagine. This concept is called passing the parameter. Dynamic parameterized resources are a cornerstone for designing in Ignition. I have a kind of simpler example set up in the bottom right here. I have a little spinner that I can change my number on, and I can click open pop-up, it's gonna pass in that 10, right? If this was sensor 10, it would load. Therefore, we actually have an interface to potentially load a hundred sensors, a thousand sensors.

16:36
Kyle Van Eenennaam: Oh, I didn't actually save that one. 11 sensors, even. By passing in these dynamic resources, we can help save time designing. We like to address pain points here at Inductive Automation. And Ignition helps address our pain points in terms of designing by reducing the amount of time we spend doing it.

17:00
Kyle Van Eenennaam: One final tab we see up here is empty, and it looks like, whoever made this seemed to have kinda forgotten this tab. Or did they? One very simple thing I'd just like to highlight is the fact that you can build interfaces that are responsive, that react to your user's inputs. What starts out as empty could show different things, depending on who the user is, depending on what they've clicked on, depending on how many times they've clicked on a button. We can expand, contract, and change our interface on demand. We have full control over what we're building here. So let's go ahead and build.

17:35
Kyle Van Eenennaam: I wanna work on Perspective. Since we were just looking at Vision resources, I wanna kind of compare them. So I'm gonna go back now to my designer and I'm gonna move up to Perspective. I can get a slightly different interface now, but it's a very similar interface. We're gonna build some visualization resources and add some components onto our screens. Those components can do many different things for us, such as trend data points or tap into our tag values. The benefits of Perspective are primarily that it is gonna be web-based. We can load it in a web browser, and it's therefore, very mobile-friendly. It's built on a different tech stack than Vision that taps into HTML5 and CSS, Cascading Style Sheets. So it gives us a lot more modern, kind of web design frontend features when compared to Vision.

18:22
Kyle Van Eenennaam: So now you're in Perspective, I want to think about what we're gonna build. I wanna actually build some new device interfaces. And so, I actually need to make a new device first. Right now, I only have a sensor and I could make interfaces with my sensor, but we already saw some interfaces, I wanna make a new device. I wanna make a motor. My dairy has eight different motors that are keeping track of our motor's data points. Via my PLC, I can pull out those data points and I can trend them here in Ignition, I can track them here in Ignition and I can alarm against them. So I'm gonna actually create a User Defined Type. A User Defined Type allows me to create a static structure that potentially represents many similar devices. In this case, I'm gonna create a single type that represents all eight of my motors.

19:10
Kyle Van Eenennaam: And this is because all eight of my motors are the same device. We purchased eight identical motors for eight identical lines at our dairy, so they all have the exact same expected data points and structure for information. I can go here into the Tag Browser and I can create a new data type. I'm gonna name it "Motor." I can give it a special type color to make it easier to identify. I like to use orange, you can probably guess why. And we'll go ahead and add a parameter. By parameterizing my User Defined Type, I can make it so that instead of representing a single tag or a single device, it can represent many. Motor number is how I'm gonna parameterize this resource. By swapping the motor number, I'm gonna swap between motor one, two, three, four, and I can represent all of those tags.

20:04
Kyle Van Eenennaam: So now I have a dynamic parameter I can use, all I have to do is add my tags. There are many ways to add tags in Ignition. You can do it fairly manually. But since I'm using OPC UA and we have a wonderful standard that everyone's communicating across, we actually have browsability in many of our OPC devices. We'll be able to look at the tag structure by looking into the Ignition OPC server, where the devices are already connected. So I have my dairy line one connected here, and if I look in my dairy line one overview, I can see there are eight motors, motor one, two, three. I can see there's some repeated AUs, as well.

20:45
Kyle Van Eenennaam: Each of these motors have the exact same tag structure, amps and HOA. So by creating a single resource that represents these repeated structures, we save time. I don't have to create eight different motors. I create one, a single definition. So I'll go ahead and select my motor one tags and these are technically static tags now. So I'm gonna go ahead and make them dynamic. I'm gonna actually insert my parameter into the tag path. Now, instead of targeting motor one, we're targeting the dynamic motor number. By targeting this dynamic motor number, we can create all eight of our motor instances at once. They're all gonna be working, targeting the appropriate tags. And the last thing I'll do before I create my tags is I'll turn on history in my definition here. I can select both of my OPC tags and I can enable history and store it in my local database.

21:35
Kyle Van Eenennaam: The default history settings here will just store any data point change that it identifies, and I'm fine with that. I wanna store my changes. So I've created my definition now representing my motor, and all I have to do now is go and create the tags. I'll go to my tags tab and I'm gonna first create a folder for motors, and then I can right click on it to create many instances. Using the multi-instance wizard, I can select my motor type that I just set up and I can give it one through eight as its values, for its parameter, as well as how it's naming my tags. By providing one through eight and knowing that one through eight are the values that align with my devices, I'm now creating eight tags at once. Technically, even more than that, because each of these motors has more than one tag in it.

22:22
Kyle Van Eenennaam: With the click of a button, we now have all of our devices set up, all of our tags with live values here in our designer, and we can now start to create screens that interact with these live values. I do wanna briefly talk about HOA for a second, because not all of us know what that is. Hand/Off/Auto is what HOA stands for, and it's really just the control type, the control option for our motor. There's three options. It can be in, off, the motor's off. Auto, the motor is running on automatically. And then, hand. A user... A person is manually controlling that motor, probably not actually with their hand, but that's what hand stands for. So this manual concept is potentially a concern.

23:07
Kyle Van Eenennaam: We might wanna be aware of, we might wanna be alerted of, users manually turning on and off our motors, going into that manual state, that hand state. I could actually manually set this tag by changing its value to two here in my designer. I can enable reading and writing to my tags, and now it's storing the value of two. This would correspond to the hand in our motor. And I actually wanna set up an alarm to trigger whenever my motor is in manual. One of the biggest benefits of using User Defined Types is immediate changes. I have eight different motors. I wanna set up an alarm on the HOA tag for all of my motors. I only need to do this once. I go to my HOA in my definition, I add a new alarm and I'll call it, maybe, "Manual Warning." It needs to warn me when the value is equal to two. And just like that, we now have an alarm set up for all of our motors. If I go and I refresh my tags, I can actually see that they have this little alarm bell icon indicating that alarm is now configured.

24:09
Kyle Van Eenennaam: So using dynamic resources, we can save a ton of time when designing. These central definitions help us make tons of resources quickly and effectively. So now we're gonna jump into Perspective. We're gonna create a new view in Perspective to trend our motor data points. Views are a lot like Vision windows, but they're quite different in a way. They're similar because they are the screens that we actually see in our HMI. But because of the different tech stack, they have a lot of different features. Like I said, CSS is one of the big ones. But in terms of actually designing here, it's a fairly similar interface. We add components, we drag them on. And what I've just dragged on is a Power Chart Component. This is a great component, because it lets us get right into the database, right into our trends.

24:58
Kyle Van Eenennaam: I'm gonna change my trend to just be eight minutes of data, since we haven't had that much data logging right now. And I can use in real time this interface to find any tags that are in my database and I could trend them. I'm gonna add both the amps and the HOA tag for motor one. With a single component and our tag resources set up, we can give our users information right away. This is really the only component I need. They can choose any tag they want, they can remove them, they can even change the color of the lines. So this is a great trends interface to start with. One other thing I wanna highlight is that we can add labels, but we can do more than just add a label.

25:41
Kyle Van Eenennaam: I'm gonna change this label text to say "Trends," and then I'm gonna change the style of my label. The CSS styling here in Perspective allows us to really control the frontend look and feel of our projects. We can set up what are called Style Classes, which would be central definitions of a style that we wanna repeat throughout our project. I could look at some of the style features here, some of the style properties, and I can see that I can change, like, the color of my text, the font family. I could change the background color, margin, padding. These are not unique to Ignition, these are CSS properties. There are tons of documentation about these all over the Internet.

26:25
Kyle Van Eenennaam: So we have a trend's view set up, users could launch this in a web page, they could even launch this on their phone. We have Perspective apps available for iOS and Android. Now I wanna create a slightly more interesting view, at least in my opinion. I want to create a dynamic view that can represent any of our eight motors. I'm going to technically make this a flex view, a Flex Container view. And by making this a flex view, it's going to allow us to really scale well across multiple screen sizes. The flexbox design process is more akin to modern web design, so a lot of modern websites are built using flexes, you can take a lot of inspiration from modern websites and build interfaces like that in Perspective. I'm gonna make my view a bit smaller and then I'm gonna add a parameter.

27:11
Kyle Van Eenennaam: Adding parameters is very important. I'm gonna add a parameter to represent a motor number. By adding a parameter to represent my motor number, I can now change this parameter. I could start with one, I could change it to two, I could change it to three, and I could represent any motor with a single interface, a single view. I don't have to create eight motor views, that would be a lot of work. We only have to create one. Now that I have a parameter to identify my motor, I could start to add components, resources to relay information about that motor. So, I can start off by, maybe, setting up a label for a name.

27:47
Kyle Van Eenennaam: I'm gonna combine just the basic string of the word "motor" with my motor parameter, motor number. And what this will do is this will go ahead and create a nice label for me at the top that shows my name. My motor number, my motor name. And I will go ahead and center my text as well up here, using my CSS style property, since it's like a header label. We'll then move on to adding an image. We can use Symbol Factory, which has a lot of really wonderful SVGs that are related to industrial automation. We even have some motors. I'm gonna choose a nice orange motor from my Symbol Factory images to go along with my orange User Defined Type. We could have motors swap, depending on the motor number, if we actually had different motors that look different, we could have different images. We could have them be dynamic images as well.

28:42
Kyle Van Eenennaam: Now we need to get into actually displaying our tag information. For the Hand/Off/Auto, we actually have a multistate button, which is preconfigured to work with Hand/Off/Autos. By adding my default multistate button, it's already set up to be Hand/Off/Auto. All I need to do is connect it using a binding to my tags. So I'm gonna go into my binding interface, which allows us to connect to many different features in Ignition, such as other properties or SQL queries from my database. In this case, we're going into a tag binding. I'm setting up a dynamic tag binding to be specific. I need to go into my motors and I need to find one of my HOA tags. We wanna bind this button to target our dynamic HOA value, so that we can change our HOA value for any motor.

29:29
Kyle Van Eenennaam: By setting up this binding and checking my bidirectional checkbox, I now have a binding that can read and write, go both directions to my tag, giving the users the ability to control, the "C" in SCADA. I do need to duplicate this binding onto the indicator value, just to make this button work. And I can see when I set that up, motor one switches over to hand, because it's currently value two, AKA hand. So it is working, it's already connected. I could even go into preview mode, and I could change it back to off, it'll change it back to zero and we can see the button update. Finally, I'm going to add an LED display to represent my amps value.

30:05
Kyle Van Eenennaam: My LED display starts off a little smaller than I want it, so I'm gonna increase its base size, its basis. And then I'm gonna set up its tag binding to target my amps. This LED display will also be dynamic, so it will target any motor number that we're interested in. By creating this single resource, we're gonna be able to target all of our motors, and if we add a new motor, it'll already be set up in our system, we just need to change the number and add the tags. So now we have an interface that allows us to change the HOA value, as well as view the amps value for all of our motors. Didn't take us that long to set up. My last step here in Perspective is I wanna unite both of these together. I can actually combine both of these interfaces into a single interface using a Breakpoint Container. Perspective is all about mobile design, responsive design, and we can actually have interfaces that change, depending on if you're a desktop user with a big screen or a phone user with a small screen.

31:09
Kyle Van Eenennaam: Depending on the dimensions of our screen, we can actually swap what we're looking at. So how about on our small screens, we look at our motors and we can swipe between them and then on our big screen, we see our trend. I can set this up very easily, since I already have these resources created by creating a new breakpoint view. I'm going to name it "Breakpoint," and I'm going to create my view. And I can see that there's technically two sizes of my breakpoint, small and large. Like I said, in my big screen, I want to see my trends, so I'm going to add my trends view to the big size, the large size. When my screen is greater than or equal to 640 pixels, you can see this up here in the top right, we're gonna see the trend screen. When it's smaller than that, when it's our phone screen, I'm gonna add a different component, I'm gonna add a carousel.

32:02
Kyle Van Eenennaam: This is a component that allows us to embed multiple views, such as multiple motors. There's lots of components in Perspective that can do this. I'm choosing a carousel, because we're all typically pretty familiar with how a carousel works. We can swipe between it. If I set up my carousel to target my motor view, and I add my parameter for my motor number, I now have motor one here. But there's kinda some white space down at the bottom. I don't really like that. If I go back to my motor view, I can tap into some of the essential flex properties that we love to design with. If I go and select all of my components within my motor view, I'm gonna set them to grow, grow one. If I set them to grow one and save, they're now going to expand into that white space, rather than leaving that white space at the bottom, they're going to take it up and share it equally, so now we have a responsive interface that will work on any screen size. I'm gonna go ahead and target my carousel and then just add maybe two more motors. I'll just duplicate it and manually change my motor numbers.

33:12
Kyle Van Eenennaam: We could give the users a Spinner Component, a Label Component to manually change the motor number themselves. But at this point, I now just have three motors set up in my interface. The very last thing I need to do is launch my page. If I go to my Perspective home page, I can change the primary view that I'm targeting to target my new breakpoint view, and this is a page URL that I can now right click and launch. We can configure URLs in Perspective. Well, they don't wanna launch. Alright, well, I'll go to the gateway webpage after I save, and I can also launch from here. The home page has access to the view projects interface. And we can launch our Perspective project, which will target that new view I just set up at my home page.

34:00
Kyle Van Eenennaam: Here in the big screen, we can see our trends right away, and I notice that, kinda once again, white space. Hmm. Perhaps there's something we can do to that. What we're dealing with here is a coordinate view. So we actually have two modes for a coordinate view, either fixed or dynamic, scaling, known as percent. I can easily change this with a single property, a single button change, so that now my trends will scale out and take up my whole screen. All I have to do is head back to my trends view, take a look at the mode of my trends view, specifically the container, and I can change it to a relative percent scaling mode. And now if we go back and look, we get these immediate changes when we save our project, it's pushed immediately to the project. We can have many users connected at once to our project, designing on our project. And if we decrease the size of our interface, a little bit further, just a bit further, we're now in the breakpoint of small, the phone screen. We can swipe between our motors, I could change their values, I could have them each be a different value, auto, handoff, we could have a hundred motors, a thousand motors. Excellent.

35:11
Kyle Van Eenennaam: At this point, we're about to open it up for questions, but the last thing I wanna kind of end on, now that we've been introduced to really how you design, starting with installing the gateway, working into the designer, launching our projects, where can you learn more? Here on the gateway webpage, which again, you can install for free at any time from our website, the homepage, specifically at the bottom, we have links to more resources. These resources are essential to succeeding with Ignition. We have our product documentation, everything we've talked about is documented in our user manual for free online in the product documentation. Inductive University is mentioned in the keynote, it's our wonderful tutorial library. New users can learn at their own pace, watching these short videos that cover absolutely everything I just talked about and more. And then the more advanced resources are also here, the Forums, where our community members come together to share information, ask questions. And finally, the [Ignition] Exchange, where we can share some of our big resources that we've made, where we can build and share assets that are related to Ignition, maybe that we just find interesting.

36:14
Kyle Van Eenennaam: People have uploaded games to the Exchange. People have uploaded simple components, people have uploaded big projects. At this point, I think we have now elevated our understanding of the fundamentals of Ignition, and I do wanna use the rest of the time here at this presentation to take questions from the audience. I want to say thank you to everyone who is tuning in online virtually, we are gonna be taking questions for those of you that came here to the Harris Center. So without further ado, if you have any questions at all related to Ignition, SCADA, or Inductive Automation, please ask away, we have Rob up here with a mic, we can run it to you. I could also repeat your question, if you just want to ask it out loud. I have access to everything here in my project, I can open it back up, but I am going to go open up just this "Any Questions" slide.

37:01
Audience Member 1: For the breakpoint sizes, can you create additional sizes and configurations beyond just small, large? Is that limited or...

37:08
Kyle Van Eenennaam: Yeah. And that's a very interesting question because when I first started, that kinda confused me too. I was like, why are there only two? You can just chain multiple breakpoints together. You can put a breakpoint in a breakpoint to make smaller and smaller intervals. You can therefore have really an extendable breakpoint that could cover five sizes, four sizes, three sizes. By combining our containers together, it is very easy to get screens that do just completely scale and change. So yeah, I've done three-size breakpoints before, and there's also the Column Container, which I didn't highlight, but it is somewhat similar to the breakpoint and actually does just have three sizes by default, the small, medium, and large. The difference with the Column Container, is it doesn't change your interface.

37:46
Kyle Van Eenennaam: It just changes how your components are arranged. So it's quite literally just a different visual layout. So some people might benefit from the Column Container when they just wanna kind of resize components. But for those that do want completely different interfaces on many scaling sizes, we can chain together many breakpoints. Great question, thank you.

38:06
Audience Member 2: I've got a little more frontend experience with JavaScript, HTML, CSS, and that stuff. Is there any way to dig deeper into the HTML or bring in a custom SVG and animate that?

38:21
Kyle Van Eenennaam: Yeah. Custom SVG is absolutely... CSS... If you're a master at CSS, you can really do whatever you please with CSS, you can create your own custom styles, you can even overwrite some of ours as well. In terms of SVGs, you can absolutely bring those in and animate... In terms of animation, it depends on how advanced you're trying to go. Most of our animation is really more of kind of appear and disappear animation, where you're kind of hot-swapping similar-looking SVGs, so that it appears to be animated, and we can definitely do stuff like that. With CSS specifically, we can also get real animation going, where we're actually moving around components. But depending on what you're looking for, sometimes the hot-swapping of different images is more akin to what we want when we want to represent a motor that's on, a motor that's off, a motor that's in between. So yeah, I would say, we absolutely can get more advanced with all of those features.

39:13
Audience Member 3: So the example project that you showed, the power of templates is great for extensible systems. The real-world experiences, there are multiple motors, and they're almost identical. Can you talk about, how we would do that?

39:30
Kyle Van Eenennaam: Yes. Managing devices that are almost identical, but slightly different. It is an interesting concept, most definitely. It is usually one of those, "it depends" situations, where we would want to actually look into, like, what is different about them? Because depending on what's different, we might be able to kind of, what I describe it as is built a UDT that represents all of them, that has these kind of extra miscellaneous tags that technically only work on certain devices. In this way, we're kind of making a broader definition that we'll end up with some kind of unused tags for certain motors, because they just aren't used on those motors. We can make this dynamically set up by changing those item paths with different parameters. So we can essentially have special tags that only motor one has tag B, and so we can set up a special parameter that identifies, tag B will only load if motor one is the motor it's on.

40:30
Kyle Van Eenennaam: If tag B is on motor two, it's not gonna load, because of the special syntax we set up, we can basically turn on and off tags within our definitions. It is a bit of a more complex strategy to designing a structure like that, because we do have to really look at all of the devices we expect, identify what is the repeated information to get our base structure, and then identify what are the extraneous tags. How many are there? Is it realistic and feasible to add all of those, and kind of have them in a special subfolder so that only when you know that tag is usable on this motor, you expand it and look at it? And we could, of course, just make multiple definitions to represent all of our instances. If you have devices where you have no repeated devices, then just make a folder with your tags. You don't have to use the User Defined Type system. If you don't have repeated devices, you won't necessarily get as much leverage out of it. That being said, it does tap into a lot of different features in Ignition, so making UDTs is always very helpful for scaling. For a situation like that though, I will say, it depends.

41:41
Audience Member 4: Is there an easy way to import layout files, like, mechanical layouts, electrical device layouts?

41:50
Kyle Van Eenennaam: Yeah. So, by layout, you mean kind of like an image in the background, right? Like, an actual SVG?

41:54
Audience Member 4: Yeah, but then you can interact with it, and then you can tie tags to it, just like how you put tags to the...

42:00
Kyle Van Eenennaam: Yes. Yeah. So, Vision or Perspective, would be my first question?

42:02
Audience Member 4: Perspective.

42:03
Kyle Van Eenennaam: Perspective. So in Perspective, when it comes to what you're describing, is really you want an interface of components, Ignition components, layered on top of your diagram, your plant floor, your device diagrams. And typically those come in raster images. I see a lot of people will get just a big raster image of those. And the thing with raster images is, those won't scale necessarily. That isn't the end of the world. With breakpoints, what I often recommend, especially, if people want this plant-floor system to work on multiple screen sizes, is make multiple breakpoints for your most common screen sizes and get raster images of those different dimensions. What you really want to be doing when you're setting up a view like that is, you want your background, your diagram, to be in a fixed Coordinate Container. And therefore, since it's fixed, it's not really going to scale up and down, so you want it to be the precise size you expect. And so, then you're going to say, "Well I have many different screen sizes."

42:56
Kyle Van Eenennaam: Breakpoints come into play here. We can build different, identical interfaces using slightly different raster images. And this is kind of just working around the fact that rasters don't scale. SVGs scale a bit better, so you could potentially work with those, but I do find it's usually raster, so my usual recommendation is to set up the screen sizes you expect with various images and by using a fixed coordinate, your components will always be perfectly overlaid where you set them up. So users will be able to click on that icon, that node, that facility, and see the interfaces you want. But a fixed coordinate is really like your starting point for those types of interfaces in Perspective. That's a great question, thank you. We probably have time for one more question at this point. If not, I'll highlight one cool thing I like to point out, we'll see if the Internet lets me get to it.

43:46
Kyle Van Eenennaam: The Perspective 8 Ignition demo is a free online demo. Well, it's just a Perspective project, it's kind of inherently free, you can load it. This project has a ton of really nice interfaces that highlight what you can build with Perspective. I think one of the cool ones to look at is the automotive one, just because we see cars moving or... It's paused right now, I'll go ahead and start running it again. This project and all of the resources in it are in the Ignition Exchange. One of the best ways to learn Ignition is reverse-engineering more complex systems, take some of our systems. We've uploaded tons of demos from Inductive Automation, such as our Building Management System demo, as well as the Ignition 8 Perspective demo. With all of these different projects, we have the automotive project, we have food projects, oil & gas projects. Take a look at these on the online demo. If you wanna learn more, go to the Exchange. Using these extra resources, we can expand our understanding of Ignition, we can elevate it, and we can build whatever we can dream. That's the end of our session, everyone. Thank you so much for coming. I hope you have a great rest of your ICC 2023.