Power of Perspective

Join Kevin and Travis to see the power and versatility of the new Perspective Module for Ignition. Learn about building web apps, mobile-responsive design, extending to phones and tablets using native apps, security features, and more.

Video Transcript:

Travis: Hello everybody and welcome to today's Ignition Community Live. My name is Travis Cox.

Kevin McClusky: And my name is Kevin McClusky.

Travis: And we're happy to be with you guys here today. So, for those who don't know us, we're the co-directors of sales engineering here at Inductive Automation and we're gonna take you through on the topic of Ignition Perspective. We're gonna focus on this new module that we released last year in April. I can't believe it's been a year already, Kevin.

Kevin: Yeah, it's crazy.

Travis: And so with this we're gonna show you the power and the versatility and the flexibility of the Perspective Module and some of the cool things you can do with it. We're gonna show you a demo project so you can see some of the features in action. We're gonna show how to build a project using Perspective from scraTravish, so you can see how easy it is to build web applications and deploy them. We're gonna talk about some of the cool features that are in there. We're gonna look at the exchange here today, and we're also gonna show how you can put Perspective in parallel with existing systems. So we've got a jam-packed day planned here but we're gonna start with just a couple of slides here to first make sure everybody understands what Perspective is and then go through some of the fun features there. Alright, so, Ignition Perspective. It is for me, I'm like a kid in a candy store with this product. It's a lot of fun to work with. It is the native HTML5 and CSS visualization. So we can really put the plant floor in your pocket and utilize mobile devices like phones and tablets so much easier. We can get data to more people because all we need is a modern browser to do that. So we can use any browser that's out there and that could be on a PC, it could be on a panel PC, it could be on a touch screen computer, on a phone or tablet, could be on a Smart TV and heck, it could even be on a refrigerator.

Travis: We actually got a new refrigerator and it has a modern browser in it and I was able to open up my home automation system which is written in Perspective on that which was pretty cool to see. The idea of Perspective is to be able to easily build web applications and the way you design is very similar to how we've done things in Vision, it's very drag-and-drop designer, easy and simple deployment to get that out there so people can look at it. But it's not compromising on how powerful it is and security that's built into Perspective. It's got a lot of powerful components which we'll see a lot of those here today and we're continuing to build on more components as we go along. It's also built to be mobile responsive so that it's optimized for whichever medium you happen to be looking at it on. So if I'm on a desktop, you can get the full kind display of what you are looking at. If you see on the image over here on the right, you can see what an example HMI would look like on a desktop, and then what it would be optimized to look like on a phone. So this is an inherent part of Perspective to be able to build screens this way.

Travis: It also has theming and styling built-in Perspective. We're gonna show some of the styling today and it's really riding off CSS and allows us to define our look and feel and how our application looks in one place and again we'll show some more of that. But it's got a very powerful binding and Python scripting integrated with that which allows you to really build any kind of application because of that. And whether it fits into HMI SCADA or whether it fits into database front ends or just visualization and dashboarding, really any application, the sky's limit with Perspective. Not only that because it's perfect for mobility we also have native apps for iOS and Android which we're gonna show off here today that allow us to harness the phone sensors, GPS, camera, accelerometer and a lot more hopefully in the future as well. I think we just added Bluetooth support as well, so a lot of cool things that we could do and extended our application down to that phone. And then throughout all this is built-in security. It is a native part of Perspective, from the very foundation we built it to be with security in mind there. So Kevin, do you have anything you wanna add to any of that?

Kevin: I think you covered it pretty well. We're about to show a little bit of how this is working and part of what we're excited about with these Ignition community live sessions is that we're able to just kinda go wherever we wanna go. And so we have the ability to do a quick overview, like Travis doing and we have the ability to do a deep dive into these things as well. And we can also let the questions guide us a bit in terms of the things that we show. So we know we're gonna show the style customizer and we know that we're going to show transforms and some of the other cool features that are inside Perspective that make it nice from the development standpoint. And we're also going to show how easy it is to just get up and get started and drag things out and get going. We can often show things that are part of the answers to the questions too. So don't be shy.

Travis: Absolutely. Alright, so that's kind of an overview of Perspective and what we're gonna look at here today and go into some of the features like Kevin said in more detail. But I wanted to talk real quick about security. I mentioned how we have security built-in to Perspective, it's a native, part of it. I want to elaborate a little more on that 'cause I think it's a really important part of using Perspective because people are gonna be able to bring data to the business side, if you will, bridge the gap between OT and IT so that we can have data accessible on both sides. We might be putting that information into the Cloud, I think today we're actually gonna show you an example of that where we could put Perspective in the Cloud. And you have to, if you understand how the security is built in, you'll have a much better feeling about being able to leverage it in those ways. So Perspective from the very beginning supports industry leading encryption protocols because we are, it's a web application, we're riding on tried and true security practices that are out there. We're also compatible with federated identity providers. So these allow us to use your companies identity providers that have single sign on multi-factor authentication so that you can have that extended out to all of your applications.

Travis: So you might already have something like this in place, Okta or Duo or Microsoft ADFS, and there are many others, where I can log into one area like I'm a portal where I can go to any application and I can, just by signing in once, I have all my applications accessible. And having the ability to support two-factor authentication to further identify who that person is through that second form becomes really important for a lot of applications. And our permissions models really lets you secure your apps that you build, in Perspective, very easily. And again, we can show a little bit more of that here today.

Travis: But a good diagram to look at, just to give you a sense of, really, how it's constructed behind the scenes, is this one here. This really shows the underpinnings of Perspective. It gets a little bit more technical, but I think it's worth looking at. As you know, if you are using your browser, so whether it's Chrome, Firefox, Safari, you're gonna have the browser and you're gonna navigate to a URL, which is the IP address or the hostname of that server, and you're gonna access the application. And when you do that, of course, your application is running in the browser there. That's where your session is. And so, on the server, though, we are communicating back to that server. And if you look here, all the communication is happening over just these two areas, it's very, very simple, and it's going through a TLS in a secure tunnel so that there's encryption there, nobody can see what's happening between the two.

Travis: And on the server side, when you establish that session, when you log into the application, of course, you might be doing that through federated identity where we know who you are, we know what roles, security levels you have associated with you, and we're gonna be building out. So if I'm looking at a particular view, that view will be represented over here on the server in that session, and we'll have that entire hierarchy available to us. And behind the scenes, there are things that your view wants to look at. You might wanna bind it to tags, or you might wanna get data from databases, or from a gateway network or from the operating system, there might be things you wanna access there from your session. But what's gonna happen is all of that's gonna be behind a protected layer. And so, once we've identified who that person is and what roles and groups they have associated with them, then all we're doing is that entire view is represented here, all the properties, and that is being synchronized. There's properties that are being synchronized between the browser session and the server.

Travis: And so, if I were to change... If the tag changes, that value will get pushed up and synchronize with the browser so we can see that change on the screen. And if I were to write to a tag there by changing, let's say a toggle swiTravish, that's gonna get synced over here to the server. And then, it's not gonna actually be written to the tag, and until it goes through that security level to verify that the person that's on that side who established the session is allowed to do it. So it's very, very safe, but having this synchronization between these properties, the same session lives on both sides and we can guarantee there's no way a command can be written down to say, "Go do this." It's all through these properties. And then of course, further, we have the ability to handle events. So you might want to handle a non-click event or mouse hover or something. When these events occur in the browser, the server wants to be notified so they can act on that, whether it's going to run a script, or if it's gonna do some other kind of action on there. So these are the only two areas of interaction between the browser session and the server, which is those properties and those events.

Travis: And behind the scenes, we have this full secure layer that guarantees that the browser session can't ever do something harmful by sending just some arbitrary command or if there's ever some man-in-the-middle type of attack, it's not gonna happen here. So from the very beginning, Perspective was built this way. And writing on TLS there or HTTPS in your session, you can see it has security, that it's trusted and you know sort of how this works really behind the scenes. Kevin, anything you wanna add to this?

Kevin: Yeah, yeah, so if you're new to Perspective, one thing, and if you're new to Ignition and some of these technologies, overall, one of the nice things about all of this is you don't have to worry about it, you don't have to care about it. We built the security in so that it's automatic behind the scenes, and you're not configuring any of this. This just happens for you. So you open up a session, a client inside the browser, and you take a look at things, and all of these security measures are employed and in place already even before you're doing anything with Perspective, and you didn't really need to set those things up. The one exception would be we do always recommend enabling TLS, SSL doing the encryption. And we do have a security hardening guide that has that type of information inside it that walks you through that. Our user manual has information on all of that, too. But yeah, everything that we have built in for security is built into the platform, and you don't have to specifically set these things up.

Kevin: One thing that I wanted to jump over to, we had one question come in, which is: Is it possible to make notifications from Perspective when the phone is logged? When the phone is locked, I think you meant. That is a very good question. So we're talking about push notifications. So basically, iOS and Android have, those apps have the ability to send something over, it shows up inside the notifications for both of those. With Perspective, we want to get there. We do not have that built-in as of right now. We do have some folks who are doing that with some of their apps, and using Ignition to push to their apps. Twilio has a delivery notification. We have a Twilio module that you can tie in to. But the quick answer is as of right now, no, we don't have something that's native inside Ignition for those push notifications, though that is definitely on our radar.

Kevin: A second question that just came in, actually, is: What are optimal "breakpoints" for typical "better end" phones currently available. No, I think that'll be something that's really interesting to show here in a little bit. So, I think once we have the Designer open, we can talk a little bit about that. We can talk about viewport resolutions and we can talk about which break points work for different phones to give you a way that you can reference some of that information as well. If you're just looking for a quick answer for phones, it's normally around 450 pixels, but there's a lot more to it than that, you can go deeper than that. So, we'll show you where the sources of that information are and which phones have different resolutions that you might use, and what those break points might look like, landscape versus portrait, when you are taking a look at a tablet or a web browser. So, yeah, we'll circle back to that. Alright, Travis, back over to you.

Travis: Perfect. The last thing to mention here before we get into the fun, which is actually seeing the product in action, is the Ignition Exchange. This was something released at our conference last year in September and this is a really important tool for the community, one, where you can actually go on there, establish your account and you can upload any Ignition resource that you've built. So, whether that happens to be a full-on project or just a template, or a scripting function, or a user-defined data type, whatever it might be, you can upload that for your own use, you can upload it privately and we can host those resources for you. You can upload it for your organization. So it can be shared amongst all people in your organization. And most importantly, you can upload it publicly so that people. And you could share it with the community and people can see, use those in their projects and potentially enhance those resources, put them back into the community and we can really have this huge pool, a library of resources that you can start with when building out your projects and it really allows for that cross-pollination. Different industries post some ideas of ways that they have built their projects and others can really benefit from that.

Travis: So, we'll show the Exchange off in more detail. There's almost 100, I think, public templates or resources at this point that you can pull in and it's really exciting. We're seeing that grow every day. Okay, well let's actually get into the fun then. I'm gonna swiTravish gears over here to my browser. So, we're gonna, first, go through our demo project and, for those who don't know, we have an online demo project that you can see all the features of Perspective. So, all I gotta do is open my browser. So, right now, I'm in Chrome. I'mma navigate over to that. So, I'm gonna go to a new tab and the URL for this is demo.ia.io or demo.inductiveautomation.com. I prefer this one, a little bit shorter to type in.

Travis: And so, here, it's gonna go right directly to that Perspective project. Now, one thing to note, we do have the server hosted in the cloud. It's in Amazon EC2 and it is behind a load balancer. But if I look at this demo.ia.io and I go /webhome, this is typically the first screen you see when you go to an Ignition Gateway. And in our particular case, we actually wanted the first thing you go to be the demo project itself. And so, there's actually a new setting within Ignition 8 under the gateway settings area where you can specify what project or what URL you'd want to redirect to on the route. So, if I go to the very beginning of that, where is it gonna go? In our case, it's gonna go to a demo project which is bringing us here to this /data/perspective/client and then the project name, /OnlineDemo.

Travis: So, one thing that's really important to start out and note is that Perspective uses, it's all about URLs and you can control these URLs. And in fact, these URLs are marketable, they're shareable. So, when I navigate around, it can update the URL. And with the screen I'm on, I can copy the URL and give it to somebody else and they can go in and access that same area that I was on very, very easily. And we're gonna talk a lot more about security but of course we can lock down what people are actually allowed to see here.

Travis: And here I'm on the online demo project, the way this is organized, this is a project that we built to show off various features of Perspective and there are a couple of vertical applications, some demo projects that are encompassing, if you will, in that for wastewater, oil and gas. There's an RFID badge application and, of course, we're continuing to build some more of these. And as we build those out, we'll add more demos on the server. But let's start here with some of the features and go through some of these so you can see it in action.

Travis: So, it starts here with real-time status control. Building HMIs is a very important part of Perspective since it's very much rooted in the operations world and with industrial. Here where I can see all my process and I can see the status of it, I can of course go in there and do control. So, here, I would open a pop-up, I can write back to that. So, Perspective is fully bidirectional here, and this is in high-performance view of this HMI. Of course, there's a more traditional (view). We're using graphics, all the graphics capabilities are there. In fact, we have a library of graphics that are built in and we're gonna be continuing to expand that with some more. And you could also import any SVG or image that you want into Perspective and use that. And there's a little dashboard here at the bottom.

Travis: And so, as you can see, there's a URL directly to this particular screen which now features real-time HMI. And if I go somewhere else, I would change the URL again. I can booKevinark that and get right to it... Come back to it later on, which is quite handy. The other big piece of this is the docking framework which you're not, it's a little bit hard to see here with this, but this is my main view, is the one here where I'm seeing this HMI. But I also have a menu over here at the left and this is a view of its own that allows us to do the navigation, and this is using the menu navigation that's in Perspective. We can show some more of that.

Travis: I've got a header view at the top that's gonna be, of course, showing who's logged in. Here, it's showing the alarm. It's gonna be the logo or title of the application. And then there is one more dock over here in the right. Perspective has some very unique ways that we can work with docks. These are just views that we can pin to different sides of the browser. So, whether it's top, left, bottom or right, we can do that and they could either be there all the time. I see the menu is there right now on the left but this one on the right, I can pull out when I want to so I can see more information about that particular view. And so, our idea is linked to our university and documentation within that.

Travis: And or they can automatically show at different breakpoints. Kevin, there was a question that came in about the sizing there and what's the optimal for a phone and it might very well be that only on a phone you don't want the menu to be there, you want it to be kind of hidden and bring it out when you want to. And that's really what Perspective is all about, is doing that mobile responsive design that's there. And so, the easy way to show that is I'm actually in Chrome right now on a desktop but imagine I was on a phone, what would it look like there? So I can actually simulate that by using Chrome's dev tools. And I'm gonna go here and make this smaller. And so when I do that, this, when I go to a smaller display, then what we're gonna do is, based on how you designed it for which container type you were using, we're gonna change it up and show the new way of looking at it.

0:20:41
Travis: And so here I can see instead of seeing the whole process I can see the same data but it's organized in a vertical fashion. I can still do the same control, all that. I can see the same relevant data, it's just now more optimized for my phone. And this particular page is using a combination of different containers that we have to be able to make this all happen. As you can see the menu on the left went away 'cause I don't have enough real estate to keep it open all the time but this little hamburger icon allows me to bring out that menu when I want to navigate around from one screen to another. And so every part of this application that we built has this in mind. We're thinking about when we approach Perspective what is it gonna look like on a phone, what's it gonna look like potentially a tablet, what will it look like on a desktop? And you can actually define those breakpoints and define what this application looks like at those different breakpoints.

Kevin: Yeah. And if you don't mind if I take control for a second. So you can see inside these Chrome dev tools it has a whole variety of popular phones that are in here. You can see these view port sizes right here. And you'll notice that these view point sizes aren't the resolution of the phone. That's an important thing with the retina displays and with the rest of that, the phone resolutions are a lot higher than what you see here. Basically the phones will map pixels into their own pixels. And so the view port sizes, this is the number of pixels that it's rendering from the web browser that it's in and then this maps it to its own pixels inside by the phone. And so the biggest view port sizes that you see in terms of width are under about 450. So that's why I mentioned 450 before.

Kevin: It's normally a nice place that'll caTravish just about every device that you might be targeting. And if you have a specific target you can do a phone view port sizes, you can just Google this and it's something that web developers use all the time, right. And so, so you get a lot of good information on this. And if we just run down this page specifically has a whole variety of devices. You can see the native resolutions right next to this view port size. So if you are targeting one of the phablets right, one of the phone tablets, one of the really big ones that might be 480 wide but in most cases you're targeting one of these regular phones and those end up being 412 360, these are Android and then the i-devices, you can see what they are right here, too. So yeah, there's view port size, that's the size that Ignition Perspective is going to be detecting and using for those breakpoints and that's the detected resolution as far as Perspective is concerned.

Travis: Awesome. So let's go out and close the dev tools and go back to sort of the desktop view. Again, you're gonna see that come back to the way we first looked at it. But this is just some examples. So there's some HMI screen. Of course, we have the charting components where we can actually go in there and see history of information and we can interact with those. Another important point to mention here with Perspective is that it is touch ready. And that if I'm on a phone I can pinch to zoom and all of that, I can pan over data just by swiping and all of the components are built for that purpose, already there for us. So there's a good example of a trend. Of course we can look at data in tabular view, we can export data out, bring it to any format. Here you can see it's coming to a CSV file with that and we can upload files to this as well. So you can kinda go back and forth if you need to with that. There's, looking at some alarming, there's some alarm status, where I can see alarms, the current state of alarms, there's is a nice alarm status table, it has a lot built into it so we can see the details of alarms and go in there of course and acknowledge them or shelve them, go further with that.

Travis: And then, same thing for journals. So I can see history where we can look at some KPI's and these are just using standard bar graphs and pie charts to query data and look at it in those ways. And of course there's an alarm journal able to go into history in a little more detail as well. So some of the fun things that are in this demo project along with being able to view those PDF reports from the Reporting Module, they're on screen, export those, download those and you can view any type of report you want. We can build applications, forms where we can enter data in, that's a very common thing to do with Perspective, to input data. Whether that's being sent to the PLC or whether it's put into a database, we can work with that and have validation on it. So from here you can see I need to fill in those fields. But if I did I can add that information in, I can interact with it.

Travis: So very much just like a database, inventory example interfacing with the database. We can also of course view, bring in web services, bring those views, this is kind of an idea of a billboard where we can see news and weather here. And again all the SB mobile-responsive so if I'm on a phone I can see that in an optimized way there. There's a lot of cool fun things that are in this project and we encourage you all to take a look at it some more. And it's also available to download. So I mentioned the Ignition Exchange if I go over here. This is ignitionexchange.com, and with that you can actually go and search for the demo project and we actually have a VMware image if you wanna use that or just the regular projects that you can import into your system and see how those screens were built for that demo project.

Kevin: Your warehouse plant floor, if you're somewhere that is covered by Wi-Fi so that you have a connection to Ignition but you wanna scan things you wanna access the GPS, you want to geo-tag different entries that are happening, there are barcodes on different things, we support all sorts of different barcodes. So 2D barcodes, 3D barcodes. It's not just QR codes and code 39. It's about, I don't know, 15 or 20 different barcode formats. So chances are whatever you're using, if you already have barcodes Ignition should just be able to scan those barcodes and then in theory you can do a database look up or a restful web service call behind the scenes and pull up information on the product or the part that was just scanned or the different item in the field that you've just gone out to so.

Travis: And the other thing to mention that I didn't show but it's in demo apps, specifically one that shows a water/wastewater example in a little more detail, all self-contained for that example. So we can go and look at that and go into that, again mobile responsive design there as well. There's also an oil and gas one that shows the use of the map component, putting our data on top of that and also using that for navigation as well. To navigate from one area to another. As you can see up here, again using those URLs to our advantage. So I can go from Site A to Site B just by typing that in and I'll get to that other area. And there's a cool one for the RFID badges as well using the same map but for scanning badges we can see a history of all those and look at what employees have scanned on this particular example. So, some fun demos that are there that are available to play around with. But really showcase some of those features of Perspective.

Kevin: One of the nice things about the demo project is that if you have anything that you were thinking about doing inside Perspective and you want a starting point or you wanna see how it was created or you want a mental library of a few types of things that you can do if you're pretty familiar with this demo project, you should be able to mentally go to, oh yeah, I saw this there, we could do this, we could pull this in from the demo project. You've got the project resources available, downloadable on our website and on the exchange. And so all of these screens that you're seeing right here, you can dig in, you can see exactly how they were built and the different pieces and when we built them we tried to keep them as straightforward and as simple as possible. So you're not gonna see any heavy scripting behind these things, 90% of the screens are essentially drag and drop and bindings and connections and very little scripting. So we tried to make it as accessible and easy to just import these and use them inside your own project as possible.

Travis: Absolutely. Alright, so I think to showcase it really, I'm gonna kinda blow through this quickly here Kevin so we can get to your demo as well. We have two things we wanna show you in terms of building. What I'll do on my side is just show from getting you up and running really quickly with the Perspective project, how you can build that, show a couple of the cool features that are there and then Kevin's gonna show an example of really how we can put Perspective in parallel with our existing system. So we could take the advantage of Perspective to be able to utilize it, get ROI, get value out of it right away. So I'll start here with mine. I already have Ignition already up and running and I had a — only to be ahead of time, we set up a database connection, I set up some device connection with some tags and I've got those tags configured and I've got some information logging. I don't have any projects yet. So what we're gonna do is launch the Designer and I'm gonna connect to my local system. So I'm gonna go in there and build a new project. So we can see how we can start and how we can add on to that and deploy our project out.

Travis: So I happen to be on my local machine here on my desktop 'cause once I get that deployed anybody in my network and access this application. I'm gonna create a new project, I'm gonna call this demo and I'll use one of our project templates. So we have a few for Perspective in particular. These are also on the Exchange. There is the menu navigation and web navigation. This is, the menu is the same as the demo project but the menu's on the left-hand side. Uses that kind of vertical menu idea. We also have a horizontal menu which is what the web one is, where a lot of web pages have the menu at the top and that kind of come down. You can use that style as well. The more sorry, yeah, the more horizontal. So we've got this, I've got a project up and running.

Travis: So I can see under Perspective this is where we design, there are some views already configured in here. And it's 'cause I started that skeleton project. So what I wanna do is rather than starting to design, let's go back to the web interface, go to the home section. Because if I was a user and I wanna see the application I would navigate to that project. So again, it's just a URL to get to that project, which we can booKevinark. And so here I'm in. Now it's important to note that all projects Perspective will start out in public mode meaning that there's no authentication needed, you'll get right into the application and here I can see the information. We can certainly go in there and make it so that you have to sign in in order to access the application. And so that is where the federated identity providers come into play and how this works.

Travis: What I'm gonna do is just go down here for Perspective and it's already set to use my default identity provider, which is wrapping our internal provider for that. But what I'm gonna do is make it not public, I'll make it authenticated. So if I do this and save it, come back here, you'll notice that the first thing I have to do is actually go and continue to sign in. It's not public anymore. So you can have a combination of some things that are public and some things that aren't or you can make it all where you have to be authenticated where we can then go in there and log in before I can see the application. So I kinda wanted to mention that piece. And we'll show an example of Okta in a bit here with that. So now I've got that up and running, let's go here to our home screen. This is that where it has the title and Welcome to Perspective. What we're gonna do is we're gonna build some things out.

Travis: So we're going to attach some tags. So I'm gonna take some tags and we can drag and drop them in here. And very much how we would be building in Vision, we can do the same process here in Perspective and we have a lot of powerful components in Perspective that we can use. From these kinds of displays I'm looking at here for display and for control. I can take toggle swiTravish on here, I can do many others. And the components are all over here on the right and we can use any of these components onto a screen. So for example, if I wanna go down here to a multi-state button then I click on that, and every component has properties for how they work and how they behave, how they are displayed. And so for example the multi-state has three states, HOA, hand-off-auto, we can change those, we can add more states and then we can link the control indicator properties to tags, so I can link the control; and the indicator, I can just drag and drop that over, and I can make this bidirectional in that binding so now, I can write back to it. Very, very easy to do so.

Travis: Now, the other thing we also have is, in our bonding system is some really powerful things that are possible. So if I, for example, take a graphic like this conveyor here or any SVG for that matter. What I'm gonna do is I'm actually going to flatten it, and that is gonna give me one element on top where I can change the fill paint. I'm gonna bind in the fill paint to a tag, and I'll select the writeable integer one tag, but we'll add a transform. These transforms allow us to manipulate that data very easily. So we can bind our properties to anything we want, and we can manipulate them by mapping one thing to another, applying expressions or calculations, we can format it. We can also do Python scripting.

Travis: So I'm gonna do a mapping from a number to a color, really show off this in an easy way. So if the value of the tag is zero, it's gonna be red. If it's one, it'll be green and if it's two, it'll be, let's say yellow. And so now, I've got that set up, and right now, the value of the tag is zero, so it's red, we're good to go. And now, let's save our changes and deploy it. So when I save, we're gonna save that to the server, we can have hundreds of clients out there looking at data and we can push that change out there. There's no polling in Perspective whatsoever, it's all pushed from the server to the browser. And so now, of course, I can interact with it, I can turn things on or off and really work with it.

Travis: The other thing that I wanted to point out here, there's a lot that we can be going into, but is that styling. Along with all the components, there is the ability to apply styles. And so, I'm gonna do that by putting a label on here and I'll put the label saying, "Hello, world!" And what we'll do is I can actually go over here and I can change the background color of this, let's say I wanna make it red, change the foreground, all these cool things. That's in-line styling. But what I can actually do is go over here to Perspective styles, I can define my own style. So let's call this just "Style". And in there, I can do whatever I want. So let's make the background here light orange, let's make the text 24 pixels, let's make that a blue color and let's make it bold. And maybe I want to align it center, all these different things that we can apply to that. And we can press "Okay". And now, over here on my label, I can simply just go in and use click on "Style" and associate that with a label. And you can see, it automatically got that style.

Travis: I can have multiple things to get that same style. So if I wanna put a text field on here, and the text field's a completely different component, but I can go over here and use that same style. And now, they both have it. If I go in and change the style, it'll affect both of those automatically. In fact, what I'm gonna do is gonna go in here and not only change it, I'm gonna add animation to it. So let's add animation. Let's just do something simple and change our background from a light red here with the text being 20 pixels, going down to the text being 12 pixels and the background being a different color. Let's go to a light green. So nothing too exciting here, but with styling, we can actually have that where we can do more than just affect the background and the foreground, we can have that animation going on. We can also add styles for when we hover over it or when it's selected. There are various things that allow us to, and then we can define all that in one place and apply that to multiple components. It really gives us that flexibility of working with styling. Again, we can save that, deploy that out very rapidly.

Travis: And whether we're doing real-time status, whether we're going in there adding a time series chart, which is what this one has, I can then, again, through binding, I can get data. So I can bind this to tag history, go back the last five minutes, let's pull it every second here, and let's go and get a tag realistic zero, let's say, just get one of those for now. Save that, go here to my application, go to my charts. Now, I've got that real-time trend coming through. And of course, we can customize that further. We also have the alarms on here, have an alarm configured. All of that is very easy to start deploying. I've got a full application ready to go at this point. So I think it's just something ...

Kevin: Hey, Travis.

Travis: Yes, go ahead.

Kevin: Yeah, since we're just talking about styles, we had a question that came in a while ago that specifically pertained to styles and CSS3, and specifically, CSS3 files. Here's the question: As I understand it, each component or object in Perspective has a CSS3 file that contains all user settings in it, in which create by style or project position or position property of that component. Where can I find this file? If I have access to this file, I can write my own CSS3 animation commands that need multiple lines to work correctly. I know I could write my own CSS3 code in the styles section, but for animations code that needs multiple lines, it is not possible. So the question, basically, for those of you who aren't familiar with CSS3 is basically the styles that we're showing; is there a file on the hard drive, is there a file somewhere that can be opened to change those styles when you're applying styles to specific locations? Can you change those specific styles by editing the CSS3 directly? And over to you on all of that, Travis.

Travis: Okay, so that's a big question. I talked about styling, and I mentioned earlier, we have theming and styling. Theming is an important part of this where you can define themes. And you can actually go to the server where Ignition is installed, go to "Data", and go to "Modules", "Perspective", and in there, you'll see the material icons, fonts and the themes as well. There's two in there, light and dark. We haven't fully got all of our components to adhere to the theming. We are in the process of that, I think in 8.0.12 or .13, we'll have full theming ability. But these are CSS, so whenever what theme you have loaded will be that CSS that is loaded, and this light CSS, we can go on there and we can modify this. Of course, add more if we'd like to for that. But that's where these... Or you can define your own theme if you like as well, going forward. So this is where you can actually, people who know CSS, can actually go in there and do that 'cause you're not actually defining any CSS in the Designer. So that's a good question. Last thing I wanna show, Kevin then I'm gonna get over to you, is the Exchange here. And I've got, I wanna bring in this ad hoc trend that we've got.

Travis: So take any of these, in fact, there's a cool new Covid-19 tracking that somebody built in Perspective which is pretty neat. But then there's this ad hoc trends (chart). I've got this, I'm gonna download this and bring it into my downloads area. Okay. I already had it there so let's replace it. And basically I can come back to my local system, go into the configuration area, go to the exchange, I can import this package. There, ad hoc trends. Come down here and next. And I'll bring it into that same demo project I'm gonna go ahead and import. So now in my Designer, if I go in and I click on this update project in a moment we're actually gonna see the ad hoc trends come in. There it is. It's now available and so I'm gonna go over here to my menu. And we're gonna add a menu item.

Travis: I'm gonna duplicate this one. It's gonna go forward slash ad hoc and the label will be ad hoc trends, there. And I don't care about the icon at this point. So I got that new one in there and then I'm gonna go to actually add that URL, forward slash ad hoc and we're gonna go and use the ad hoc trends screen. So now I've really added the whole new menu item to this project. So let's go over here to our demo. Click on ad hoc trends and now I've got the ad hoc trends, that new template from the exchange in here and I can start working with it. So I can add multiple tags in there and I could start playing around a lot more, exporting data, changing ends and axis and so on, using that to my advantage. So the Exchange is a great resource that we all can use with that.

Kevin: Yeah thanks for showing that off Travis. I actually had a couple of additional questions before you pass it over to me. Is it possible to convert Vision into Perspective screens?

Travis: So I wish the answer to that was yes but unfortunately there is no conversion utility for going from Vision to Perspective. They are two different paradigms and we didn't want to... We want Perspective to be built from the ground up using the latest technology. And so while it might be technically possible to do some of that not 100% conversion. There just isn't the utility at this point. You're just better off looking and figuring out how you want to build that in Perspective from the ground up especially 'cause there's mobile responsive design. It really changes the game and how people think about it.

Kevin: Yeah. And all your tags and all your history and all of your alarms and everything else inside Ignition is just there which is worth noting. So you have different screen design provision in Perspective but all the rest of the pieces, the reports, the queries, all of that is system wide and that's not tied to Vision or Perspective specifically. And even all of your scripts, any that don't interact with Vision specifically you should be able to use those in Perspective and Vision just as easily. Anything in your script library you can call it from both places. So you're not starting completely from scraTravish but it definitely does take some work to do the visuals inside Perspective to get them to maTravish or get them close to what you have inside Vision or to go through and do some improvements at the same time.

Travis: Absolutely.

Kevin: Next question here is, there's one question that I'm about to address actually, which is one of the questions: What are the settings I have to do if I want to access the application from outside the Gateway Network or outside the network that Ignition is sitting on. And that is a great question and in a few minutes I'm going to say hold my beer. The next question here, is there any recommendations for software that can save graphics into SVG format that you found would work well with Perspective? Perspective has a slightly more limited set of path support when you're pulling in those SVGs than Vision. Inkscape seems to do a decent job although there are a few things that are missing from it. You can always use SVGs if you upload them through the image management component though. So if you just upload them to the images and you display them on the screen that should work for every single SVG that you have. The only thing that you don't get if you do it that way is the access to the individual paths, that if you wanna drill down and do separate coloring or separate animation for a subset of inside that image then that's where you need the drag and drop support there. And so we are working to improve that over time as well. That's something that we want to continue adding to the subset of the spec that we support inside Ignition.

Kevin: But yeah, Inkscape I found the most success with but it's not 100%. Can you add styles to the hand-off auto button? Yes, absolutely. So the styles is configurable from the right hand side there. You can set up styles for every single component and hand-off auto is no different and you have a whole variety of options there. And the last question that's come in right now is why using Perspective over Ignition viewer. I think the question there is, why would someone use Perspective instead of Vision? And that's a good question. I'll start by answering it and then I'll turn it over to you Travis and show some things on my screen at the same time as you expand on the answer. It depends on what you're doing.

Kevin: Sometimes Vision's a great option, sometimes Perspective's a great option and sometimes you wanna use both. The way that I'm seeing it, Vision isn't really going anywhere. We're maintaining Vision and we're supporting that we're supporting Perspective. They both have really powerful sets of features. Perspective is going to give you access to the mobile device side of things which you don't get with Vision. So Perspective doesn't open up that whole world of devices. It does provide the access for the hardware like we were talking about earlier and it does give you the newer device design paradigms. It also allows you to do a zero install client so basically anyone who wants to take a look at the system they just go to the URL in their existing web browser or their existing phone works for it which makes deployment of clients much, much simpler as long as folks are using modern browsers and modern systems. Travis over to you to expand on all of that and then I'll show my screen and kind of fly through something at the same time here.

Travis: Yeah, sure, it's a great question to determine when Perspective, when Vision and let's just say that Perspective really from the mobility side of getting data to the business is really, I think there's no question that it's really the best option for that and you can use that in parallel with existing Vision you have to built to add that value. And I think it's about looking at these two visualization platforms and understanding how you're gonna get value out of them, what kind of applications you wanna build and who's your audience that's gonna receive that data. And once you figure that out then you can figure out where the effort is gonna be in terms of development. So that's how I think of it there. A lot of new applications are gonna be going the Perspective route and for us we're gonna be coming out with a Perspective workstation edition which basically is a desktop wrapper around the browser. It will add in some features that Vision provided us as an application that Perspective didn't have because we're relying on a browser. So if we have the wrapper where the browser is embedded we can then add some of those features back in much like the native app is adding features to get access to our phone. So there's more to come with that as we go forward helping make your decision, help make that decision a little easier.

Kevin: Thanks Travis, alright, so what I am showing off here is the basic way that you can connect up to Ignition from the outside world. So you have a plant network, you might have a corporate network and your network topology is likely more complex than just a simple line here but I wanted to show you a couple of options and then show this off as I only have about five minutes, I'm going to really fly through this but this is one option that folks use sometimes. So they go VPN into the existing plant network and connect up to Ignition. Now let's say this is Vision, this can be Ignition 7.9, this could be Ignition 8 and you have a lot of Vision things on here. One option if you want to add mobility to this is to spin up a separate server right alongside it and have that connected either over MQTT or over the Gateway Network and then have folks talk to that. This would be Perspective. In terms of licensing this is simply a Perspective license. So you don't licence everything it's not a 10- or 20- or 30,000-dollar software package that you're looking at right here it's less than that, and basically we're just adding this right next to Vision, right next to your existing set, right next to your existing tags, right next to our existing database tables, whatever it is and then giving access to the outside.

Kevin: If you don't have this set up with mobile devices going over VPN a lot of folks don't, a lot of folks have computers going over VPN but not mobile devices. There is one other option for doing this in a secure way which is to take this server and to put it out here on the Cloud so you can have your connection out to the Cloud, have this be a secure connection back and forth right here and this could be a Gateway Network or MQTT but this can be a read-only connection right here and from Perspective you can make this a public server that has access from remote systems. So this is set up where Perspective is just sitting online, you have your existing system right here and this is really relevant for a lot of folks who are doing things today. So whether you're an integrator or an end user, someone who works at a factory or produces things or whatever the case might be this can apply for anyone who has a network and has an Ignition server that already exists that you want to give access to other folks but you might not wanna give them read write access you might not wanna give them access to the server itself, you might not wanna set up VPN and you might be concerned about security and you might wanna make sure that there's no possible way that somebody could do a write back to anything here or get access to that server or get access to pingless IP or any of that.

Kevin: So what I'm gonna show here and I'm pretty much right near the end of our time but it's very easy for me to show it. This is my system in the office. On this system I have an Ignition Gateway. This Ignition Gateway has a whole set of tags. So this is connected to a real MicroLogix processor and also a simulator and what I'm going to do is go to my Gateway Network. I'm going to set up an outgoing connection, I'm going to point this at an online spot, this is a server that we just set up at secure.ia.io and I'm pointing it there over the Gateway network. As soon as I point it there it's going to set up as running and then when I go to secure.ia.io you're going to see that we get an incoming connection here.

Kevin: This incoming connection open Gateway Network is going to be coming from my local system, this would be the plant system right here. And you can go through, you can set this up you can either approve it or deny it. You can set up security for these different things. But I have this incoming connection, I have approved it here. And now, this connection is in place from the secure.ia.io I'll come down to my tags and just set up a remote tag provider. I'll call this remote tag provider my plant. So it's going to let me browse my different tags that are down there. So I'm gonna browse that, I'm gonna set this up as a plant, come down here, create that tag provider and it's now set up, and I happen to have a Designer open already, from the secure.ia.io.

Travis: And it's important to note while you're doing that. That there was no ports that were open on your firewall on site. It's just simply an outbound connection.

Kevin: Yeah, yeah, exactly. So nothing special to set up with the firewall. As long as you can ping that cloud server you should be able to get to it. We have security set up on everything with this and... Okay, so I just created a new project, but I actually... So I'll create one that I call demo and I actually wanna give it a project template here and so we'll just do the menu nav right there. I could do a database, I don't even necessarily need one. And inside this project now you'll notice that because I'm using some of these screens I've got some similar pages to what Travis was showing earlier. This is one of our nicest templates, I really like it. So if I come over under my tags, here are my plant tags, I've got access to them, they're streaming through and if I wanna show them on the screen, I can do that very simply. So I can come in here, accumulator level, maybe that's inside a tank, I'll drag that in. There you go. And my humidity might be something that I care about. I could pull that in. Show that right alongside this. And do an LED display there, and it subscribes and then I've got my humidity. I'm just gonna save this project off and you can see if I launch this, this is my Perspective session right there.

Kevin: And also, if you at home, want to launch this, you can go right here. So this is at this URL, I'm going to, so if you go to secure.ia.io from your mobile device, you should be able to see what we have right here. I'm actually going to go to secure.ia.io and use that re-target that Travis was talking about. So inside the web server, the Gateway settings actually, we have that homepage redirect. So I'm going to ‘data perspective plant demo’. So this is the page that I just have set up there. Now when I go to secure.ia.io it automatically launches this. And if you scan that QR code. Or if you've typed this in then you're going to see that as well. This is information that is streaming from the plant, which happens to be my server that's sitting inside an office that's completely separate from the cloud server there. All services are defaulted to read only. We have that security set up by default. So if you want to change that or you need to change it potentially you could but by default that is going to be read-only, access. You're not going to have read-write access to it. If you do need to change it, you can go down to your security levels. Well, sorry, the server security, and then inside the server security, this is where it's set up for what you might wanna do. So this is read only for all of these tags, and you can change that right there. Hopefully back up that thing so you can scan that, if you did want to.

Kevin: And we did have another question come in which is "Can Ignition 8 Gateway be used as a remote tag provider to an Ignition 7.9 Gateway?" Absolutely, yes. So that's a feature that we made sure works, and works well. So you can do exactly this. This architecture is a recommended architecture for if you want to spin these up and very easily get access to that system without needing to have something that is set up that's going to be a VPN set up without having to have a separate phones set up. And of course, you can set up username and password authentication on all this. We recommend doing that. We also have a security hardening guidelines, a document that we recommend following any time you're throwing something on the cloud. So, I'd say, just go through that spin up a server and you should be able to give folks access right away. I'm going to very quickly answer these last questions. When will there be a solution with a correctly working carousel component? We are improving the carousel component, it works under certain circumstances. And we know that there are some issues in other circumstances. That is under active development right now, and that might be 8.0.11. I'm not sure if you know for certain Travis, but I've had conversations with the developer who's working on that and they've made great progress, and I think that it's right around the corner.

Travis: Yeah, that's where I think is, that's what I think as well.

Kevin: Okay, great. Please reach out to us, let us know if you want to see anything else or if you need to understand any of this, if you want any help with architectures, we are happy to provide and accommodate and we're really happy with the power and the ease that Perspective brings to doing things like this. If I had two more seconds, I'd probably set this up inside the chart as well. Because all the history comes over the Gateway Network connection as well. There's nothing else special to set up or to connect there. I did have one more question come in which is, "Do you have an ETA for basic drawing tools?" We don't have an official ETA but we have a very good design that we are pretty happy about in terms of the approach that we're looking at taking. We've had several design meetings that are around this and it's on the high priority list. So we don't have a specific time around it, but it's definitely something that is really shortly on the development queue, going forward.

Travis: Thanks everybody for attending here today, hopefully you got a lot out of today's session, please as Kevin said, reach out to us if you have any questions.

Kevin: Next week actually is going to be one with Grantek that we'll be talking a little bit about modernizing the plants and implementation. And Grantek has a lot of really good experience when it comes to that. It should be a really interesting session, they've agreed to share some of their insight into all sorts of things that they're doing right now. And we should have a pretty good chat and then, yeah, we're going to have a variety of other customers and end users and integrators who are on, and we're excited to see this continue.

Travis: Absolutely, and all the recordings will be on the website afterwards and we thank you all again for attending here today. I look forward to seeing you next time. Have a great rest of your day and stay safe out there. Bye bye.

Kevin: Thanks, everyone.