Migrating Existing Vision Projects Into Ignition Perspective

With the release of Ignition 8, there have been some questions about how or whether to move existing Vision Module projects over to the new Ignition Perspective Module since there is no automatic conversion or migration option available.  

In this video, Sales Engineering Manager Kent Melville and Applications Engineer Shay Johnson from Inductive Automation team up to discuss the pros and cons of rebuilding a Vision project in Perspective, offer some time-saving tips for doing this effectively and answer common questions from users, including:

• Can you use Perspective alongside Vision to complement existing projects?

• What are existing elements in Vision that can be carried over into Perspective?

• And what features does Perspective have that Vision doesn’t?

• And other frequently asked questions

Kent provides an example of recreating Vision forms in the Perspective design environment, gives us a walkthrough of different container types on our demo page that can be used to convert old layouts to new responsive layouts, and tells users where they can find resources to learn even more about Vision and Perspective.

Transcription:

Shay: Welcome, everyone. My name is Shay Johnson, and I am an applications engineer with Inductive Automation. I've been with IA for about a year now. And I initially started off in our sales division, and about three months ago, I transitioned over to our applications engineering team. Our department is responsible for helping to provide our customers with solutions, whether that be through public-facing examples in our public demo projects or even building out specific solutions for individual customers.

Kent: And my name's Kent Melville, and I'm the sales engineering manager here at Inductive Automation. And I've been with the company for about three years now, and I've been with sales engineering that whole time. What we do in sales engineering is we work with customers from the very first meeting that they have, working with the sales team to provide technical demonstrations, installing the software, building things from scratch on the fly, all the way through providing architecture discussions, and then being a technical resource for customers going forward.

Kent: And with that, we wanted, as application engineering and sales engineering, to offer some wisdom today, for lack of a better word, on a specific topic. And so, Shay, you want to introduce what that topic is?

Shay: Definitely. So if you're new to Ignition, we just released a new version, Ignition 8, and with the new release came a lot of new exciting features, a lot of new updates. And we're here today to discuss some questions surrounding moving existing Vision projects into our new Perspective Module since you can't directly migrate Vision projects into Perspective.

Kent: Exactly. And we've tried to make it as easy as possible for customers familiar with Vision to migrate by making the user experience as similar as possible. But today, we'd like to offer some guidance answering some of the common questions that people are facing as they look to migrate their existing projects over, and we also want to show some examples of how this can be done effectively.

Shay: Let's start by discussing why you may or may not want to migrate a Vision project to Perspective. So Kent, what are the most important things to think about when considering whether to rebuild in Perspective?

Kent: Yeah, great question. So let's start with the reasons why you may not want to immediately migrate your Vision project to Perspective. There are a few reasons. The first one is you got to check out the new Vision Module. We made some significant improvements with Ignition 8 both to the UI, just different components look new and fancier.

Kent: Also people have had issues with maintaining Java on all their client machines. From an IT perspective, it's difficult to manage installing Java on every client computer. And also there are other applications that may be using a different version of Java, and so do you have to maintain multiple versions of Java on every client machine, let alone the server? And so in Ignition 8, we have embedded java inside the Vision client launcher and inside the server. And so that way, every time you install the latest version of Ignition, it is giving you the new Java updates automatically, and those get pushed out automatically to each client machine through the launcher. And so Vision is just so much better both visually and from a maintenance perspective. You don't have to worry about Java anymore.

Kent: Secondly, Vision is great because we have been developing it for a decade, and so there are lots of components. It's a very mature product. And it's going to have some features that just don't exist yet in Perspective because Perspective is new, and so that might get you to stay on the Vision Module.

Kent: The other reason and the final reason here is that as engineers, if you are familiar with developing SCADA systems, you've been doing it for 25 plus years, and you expect that knowledge transfer to just carry over from one SCADA system to another SCADA system, that more or less has been true up until this point. But with Perspective, we have broken out of traditional SCADA paradigms and gotten into the web world because now you're not just developing just desktop applications. You need something to be mobile responsive, native in the web, run seamlessly on both a desktop and on a mobile device, and the development practices for that are just a little bit different.

Kent: And so another reason you might want to stay on Vision is because, if you're looking at a new project that's got a tight timeline, you're going to have to build in time for you to get up to speed with this new way of designing projects.

Shay: So what are the reasons that you would want to potentially rebuild in Perspective?

Kent: I don't mean to say all these reasons why you might not want to take advantage of it to deter people because we are really excited about this Perspective Module. And you're right, there are lots of reasons that you would want to. And the first one is if you've been using the Mobile Module, which we've had for quite a long time, that when we wanted people to have a solution to run directly in a web browser before, we created this Mobile Module that essentially just took your Vision client, and it put it in an HTML5 wrapper, and it was really running on the server, but it would essentially just cast it into a browser. And that way, people could access your project without you having to do any new development, anything, just ran natively in a browser. But well, I say natively there. It wasn't native. That was the whole problem is it would now run in a browser, but really, it was still a Java-based application on the server.

Kent: So we are not bringing that mobile module forward with us to Ignition 8. If you're still using that mobile module, you'll have to stay on our LTS version, 7.9, but Perspective is now a much more modern approach, a much more native approach to how to bring your old projects into the new mobile world, the web-based world. And so we want you to use Perspective and not continue using mobile.

Kent: Another reason why you'd want to migrate is that we have native apps now that you can download from the iOS App Store or from the Google Play Store for Android. And what's neat about those apps is they allow you to take advantage of your smart phone's native capabilities such as GPS or the camera, scanning barcodes, the accelerometer, and those things haven't really been possible before. And so the native app opens a lot of doors.

Kent: You may just say, "I want to take advantage of Perspective because I have people that don't want to have a desktop icon that I launched. They don't want to have a Vision client launch or that they had to install. They want to run directly in a browser. They want somebody to just hit a URL, there's their dashboards. There's their display," and so Perspective makes that really easy and possible.

Kent: And then lastly, the Perspective Module has some new security options. We've, for a long time, supported managing users and roles inside Ignition directly, or you could sync with active directory and manage your users and roles there. But now in addition to that for Perspective, we support federated identity providers. And so those are Okta or Duo or Auth0. There's a bunch out there. And those are more modern IT ways to manage all of your users, all of your roles. They also support two-factor authentication, and it gives you a much more native SSO experience. And so that would be another reason why you might want to take advantage of the Perspective Module now.

Shay: Awesome. So Perspective is definitely an exciting new tool which you've mentioned, but the Vision Module will not be going away. So can Perspective be used alongside Vision to potentially complement a project that already exists, and if so, how would you suggest doing that?

Kent: Yeah, and I think that that is going to be the best-case scenario for a lot of people because they don't want to learn this whole new paradigm to migrate their entire project. That's going to take a lot of effort, a lot of work. And so rather than dismissing Vision entirely and rebuilding your entire application, you can just identify the pieces that need to utilize those new features, whether those are some dashboards in the browser for higher-level people to come in and just see overall status, or maybe you want somebody to walk along the line scanning barcodes, or maybe it's just for remote maintenance. Somebody drives up, the GPS location on their phone, automatically navigates them to a page of the equipment where they're at

Kent: And so all those things can be a separate project on the same Ignition Gateway, so you just add the Perspective Module. You build those screens, but all of your dedicated HMIs, all of your normal screens for control and operations, those continue to run with the Vision Module. And I think with that, you really got to look at what the ROI is for moving over to Perspective. And I think a lot of people will find that they can get that same ROI, return on investment, by just having a smaller project in Perspective and maintaining a lot in Vision.

Shay: So if a user decides to rebuild a Vision project in Perspective, what are some existing elements that they can reuse and carry over? And then do you have any time-saving tips for doing that quickly?

Kent: One thing to remember is that the Ignition platform is modular. And so when we talk about replacing the Vision Module with Perspective in this case, that doesn't end up touching all your other modules. So if you're using the Tag Historian or the SQL Bridge Module or alarm notification or SFCs, all those pieces still just line up nicely with your project. You don't have to touch those. So the piece that we're really looking to change is just the UI. And so when you're in the designer, you don't have to touch Gateway scripts. You don't have to touch tag event scripts, all that stuff is a project scope. You just need to touch the UI scope.

Kent: And so the steps you're going to want to follow is identifying how you can best take advantage of an object-oriented design approach. So if you had templates inside the Vision Module, you're going to want to recreate those as views inside the Perspective Module so that you can use embedded views throughout your project. And that's going to make it so you just have to design once, and you can reuse it over and over. And so if you weren't taking advantage of templates inside Vision, I would still recommend that you go through your project, and you identify what things should be templatized, if that's even a real word, "templatize", but you know what I mean. And so you go, and you create these embedded views, so you can just reuse them in your project.

Kent: And the next thing you want to do is, the images, you still have the same image management tool inside the designer. And so you can just pull those same images in. That's not a problem. And then next you're going to want to identify what are the components that you're utilizing heavily inside your Vision project and see what the compatible version is, what is the same version inside the Perspective Module. And so there's going to be form entry fields. There's going to be tanks, all that kind of stuff.

Kent: And so once you've kind of figured out, then you want to look at your python scripts. And so most python scripts, you can just kind of copy and paste over. We're still using python inside the Perspective Module, but referencing different elements is going to be a little different format. And so you're going to want to take a look at that. But for the most part, it should be a pretty clean swap.

Kent: And so to kind of show you that in action, I've built a screen that is a form entry field inside the Vision Module. And just on the fly here, we're going to create that same screen inside the Perspective Module to show you how we're going to use the same types of components on that screen. We can just copy and paste the python scripts and edit them and still reference the same-named queries, things like that, to get that data into the database.

Kent: So let's take a look. So here on screen, you can see we have the Ignition Designer. And if you are familiar with the Ignition 7.9 Designer, you'll see that this is more or less the same, but it has a new color scheme, a little more muted colors, looks a little more modern. And one thing to notice in the top left, we have the project browser. And the project browser is where you can build out resources for all the different modules, whether that is visualization, like the Vision or Perspective, but also named queries, sequential function charts, alarm notification pipelines, all those kind of things.

Kent: And I have inside the Vision section created a window called "form", and as you might expect, it is a very simple form. You just put in a product and a quantity and hit submit, and it will add those to the table on the right. And we are going to, on the fly here, recreate this simple screen inside the Perspective Module. And a couple things to note about how this works is on this submit button, if I right click and go to scripting, it is just simply grabbing the text value from the product field and the int value from the quantity field, and it is passing those into a named query called "add inventory". And the table itself is populated also by a named query. If we come down to the binding on the data property, we can see that it is being populated from a named query called "get inventory".

Kent: And those named queries are viewable inside the project browser. I can come here, see I have two named queries, add inventory and get inventory, and these are resources that exist outside of either the Vision or Perspective Module, so they can be used by both, meaning we're not going to have to rewrite the queries when we create this new screen. They will just be there working for us.

Kent: And so we're going to go ahead now, and we are going to... Inside this Perspective session, we are going to create a new view. And we're going to go ahead and call it "form" matching the name that we had inside the Vision Module. And for layout, we're going to leave it as "coordinate", and we could set a URL if we wanted to for what people type into their browser in order to access this page. It could also be... You can just navigate to it from a home screen or something like that. All those same navigation paradigms apply, but inside the Perspective Module, you can also just have its own unique URL. But I'm just going to go ahead and create this view.

Kent: And this is the Perspective Design environment, and we have a list of components over here on the right just like we have a list of components for the Vision Module that we can start dragging on screen. And so the first thing I will do is I will pull on a table component. And so I can just click it, drag it on screen, and you'll see it comes with some pre-populated data. But I am going to go ahead, go to my data property, and I am going to bind to a query, and we're going to select one of my named queries. We're going to grab get inventory, and I'm going to set this to poll every second so that we get those new values when they're added. And so now, I can see in my table the single instance. We have 10 motors that are in our table currently.

Kent: Now, we want to create both our product and quantity fields and so we will start with pulling out a text field for our product. And we want a label to go along with this. And so I will go ahead and grab a label, put it next to it, and we are going to make this label. Under style here, we're going to go to text, and we are going to do the text align. We want it to go to the end. And we want the text to be "product", and I'll add a little colon there. And we are going to rename this text field to product.

Kent: And then with these, we're going to create the next area which is going to be our quantity, and I'm going to go down and grab a numeric entry field. And it's worth noting that these fields are the same fields essentially that we had inside the Vision Module. So you still have text entry fields. You still have numeric entry fields, all those kind of things. And I'm going to want to label for that as well. So I'm going to duplicate the label I just created, but we're going to change the text for this one to say "quantity". And with this now, we just need the submit button. So we'll go ahead and grab that button here, put that underneath, and of course, with all of these things, you can change the look and feel. You can add styling to any of these as needed.

Kent: But I am going to go ahead now. And we want to have the python logic of this button be pretty much a copy of what we had inside the Vision Module. And so we're going to open that one back up. We're going to open up this submit button. And we are just going to hit control A to select it all and then control C to copy it. And then we will go back to our Perspective view here that we're creating. And on this button, I want to configure an event, and so on click, I want to execute a script, and I paste that in here.

Kent: And the big thing is rather than pointing in the format of the Vision Module, we can point in the new Perspective Module. But if you're not familiar with that then that's okay because you can just search for it here. And so with that, we want to go into the properties here and grab the text from our product field, and under quantity, we want to grab the numeric entry fields value. Say, "Okay." And then we are going to just pass those into the named query. So I don't need to change that script at all.

Kent: And so I go ahead and say, "Okay," and we have created a screen here, and I can change the look and feel. I can move things around. But if I go ahead and go into preview mode now, I can come into product, and we'll say we are adding some PLCs, and we will add some quantity here. We'll say we have five of them. I hit this button. So there you can see when I hit the button, we got PLCs with a quantity five added to the table. And if I came in, added another product like... I don't know. What's a product?

Shay: Valves.

Kent: Valves, valves is a great one. So we add three valves, our button, and you can see it's added to the table. And so we have successfully recreated our Vision form in the Perspective Module.

Shay: Thank you. That was a great demo and introduction to this Perspective Design environment. Can you speak to the features that the Perspective Module has that the Vision Module doesn't?

Kent: Yeah, so we saw that perspective component palette on the right, and there are lots of components in there, some of which do not exist in the Vision world. And so one of those would be a map component. You've always been able to integrate Google Maps and try to integrate with other GIS systems. But we now have a nice new map component that you can just pull on screen, can connect out to third party tile map servers. And it also allows you to add your own layers. So it's a pretty powerful addition to the Ignition suite.

Kent: In addition, we also have other components. The table has some nice new features that weren't possible before. The charting is new and improved. And so there are more options of what you can do with a chart, so you could check that out. But yeah, another exciting piece is that we are now able to leverage a lot of other web libraries that already exist. And so you're going to see a lot more components rolling out for the Perspective Module doing things that were never possible in Vision.

Shay: One thing that we get asked very frequently by our users is, is there a way to convert old layouts to new responsive layouts? And if so, how can they do that?

Kent: Yeah, and that's a tough question because if the question was, can we automatically convert our old static layouts into this new dynamic format, the answer is no because we don't know how you're going to want that content displayed. Ignition gives you the ability to create everything in whatever format you want. You just drag and drop. And so there's no automatic conversion tool. With that being said, inside the Perspective Module, we have a concept of container types. And when you are building out your views, which is the Perspective equivalent of a window, you can build it out of these different container types to make it responsive.

Kent: The simplest container type is the coordinate container. And the coordinate container is most similar to Vision windows. Everything has an x and a y and a width and a height. You just drag and drop, and you've created essentially a replica, and that's essentially what we did here in our demo that we just showed. We actually just use the coordinate container. We can still drag and drop things, but while that can scale proportionally, it's not going to automatically realign things and reshape them when instead of a landscape device like a laptop, you're now looking on a portrait device like a phone or a tablet.

Kent: And so there are other container types that you'd want to look at. The first and easiest one is the breakpoint container, which allows you to just essentially say, "On a large screen, I want to show this view or this group of components. And on a small screen, I want to show this completely different view or these different components." And so essentially, you just recreate the same content in two different layouts, and it will automatically swap between them.

Kent: And if you wanted to have multiple breakpoints, so you're not just saying, "At 600 pixels, I want to have it show this, and below 600, I want it to show this," you can have breakpoint containers inside other breakpoint containers and have as many different conversion types. You have one that's for mobile, one for a tablet, one for a laptop, and one for a large overhead display. So you can get as granular as you want there. But those are once again developing completely different components, completely different layout for each size.

Kent: The next one you could look at would be a column container, which is similar to Bootstrap, for those familiar with a web development paradigm there. But you essentially break up your screen into 12 columns, and you say how many columns wide each component is on screen, and it can reorder those, restructure those, dynamically based on the screen width. And so you essentially design for small, medium, and large, but rather than having separate components for each different size, it's the same components. They're just reordered.

Kent: And the final container type is we have a flex container. And that's essentially making all of the components grow and shrink, and you can get really detailed in how you want each one to respond. Maybe you have a sidebar that stays the same, but other elements grow and shrink and all these things. And so it's the most flexible of all the container types, but it also is the one that takes the most getting used to for people who aren't used to developing for a web world. But taking advantage of these different container types allows you to take your existing concepts of how you've laid out your screens to convert them into a responsive mobile-friendly design.

Shay: So for those users who are maybe interested in learning a little bit more about using those container types, where can they go to learn more and maybe practice a little bit?

Kent: As always, we have Inductive University which is our free online training that you can go to any time and check out and learn about the Ignition platform. We have videos there for all these different container types. You can learn about responsive design, and so you can go and watch videos on the coordinate container, on the breakpoint container, the flex container, column container, and they will show you how these things are used and and developed for.

Kent: Another resource is we have our online demo project, and this is a great way to see all of those different container types in action. And so we heavily use the flex container there. We also heavily use the column container there, and there is some use of the breakpoint container as well. And so let's go ahead now and take a look at that demo project and point out a couple of the screens that are using these containers.

Kent: So this is our online demo project. It's publicly available at demo.inductiveautomation.com, and this is a great resource to learn about the Perspective Module, and it's worth noting that this is available on our website. And so you can go and download this and play around with it and see how we built these things. And if you like something, you can steal it. Go ahead and copy and paste it into your projects as well.

Kent: But even just on this home screen, you can start to see the responsive nature. As I shrink down the size of my screen, you can see that my columns here are resizing. This is an example of the column container. And eventually, it hides the navigation. As I continue going smaller and smaller, eventually I just end up with everything in one column and so very mobile friendly there.

Kent: I do want to show another screen. We're going to come here onto our real-time status and go to HMIs. And HMIs historically have not scaled well because you build out this process overview, and it's in a landscape format, and it's hard to automatically convert that. And so we've tackled those kind of ideas by, if I shrink this down here, then it's going to take a second, and then it converts it. And you can see, I just take those elements, and I put them in a portrait format by just aligning them up one by one. So you can do those kinds of things for responsive design. That's an example of our breakpoint container where you've got one layout for a large screen, completely separate layout for a small screen. And then if I make this big again...

Kent: Another screen I wanted to show you is if you come down to our web services, this is the column container in action again where you can see right now I'm seeing some weather there. And if I shrink down my screen, then they start taking up a single column or hide the navigation and show a single column again. And so it's going to scale nicely with whatever size screen you bring that up on.

Kent: And if you kind of want to see these all side by side of what we're talking about, a good screen is if you come down here under rapid design tools, you can go to our mobile responsive screen. And it has a video specifically about mobile responsive design that talks about these containers. But you can see we've set up this area so you can see column containers, breakpoint containers, and flex containers all together at once.

Kent: And so as you see right now, since we're on a large screen, I'm seeing a large view inside this breakpoint container, and my columns are all laid out in a certain way. As I shrink my screen here, then you can see it just restructured my columns but still showing the large view and my flex containers view one and view three are staying in the same width, but view two has been shrinking. And you see it's still shrinking. Eventually, I hit my breakpoint size right there, and you can see that it just switched out my large view for my small view on the breakpoint container. And view two's getting real small now, but view one and view three are maintaining their width. That's all part of the flex container. And you can come all the way down to eventually that column container goes to a single column, the breakpoint's showing the small view, and my flex container is adjusted appropriately as well.

Kent: So different options for how you want to structure your data. You can kind of see them all at once there. But this entire project is responsive, so all the screens will grow and shrink proportionally. And so you can go play around with this on any of the screens in the demo project. You can also access this demo project by going onto the App Store for iOS or Android, and you can download the Ignition Perspective app. It has this demo project pre-configured on it, so you can launch that and see what it looks like on mobile as well.

Kent: So in conclusion, as you know, we just released this Perspective Module, and so you can expect more and more features to be released on a daily basis. And so because of that, we've added nightly builds onto our website. You can go to the downloads page, go to other versions, and you'll see those nightly builds. You can download, get them hot off the press, get all the latest features. But also we've accelerated our standard release cycle. We're calling it our release train. And so every four weeks, there will be a new version of Ignition released, and you can go and download those directly off our website as well.

Kent: If you want to learn more, certainly you can be following our blog. It'll help keep you up to date on these new features. You can also be watching Inductive University for new videos. We're releasing new videos for Ignition all the time. And if you have specific questions, reach out to our sales department at sales.ia.io, and they'd be happy to help you out. And they can also get you in touch with our sales engineering and application engineering teams for conversations with Shay and I.

Kent: But overall, we just want to say thanks for watching.