Design Like a Pro: How to Best Plan Your Perspective Project

Speakers

Travis Cox

Co-Director of Sales Engineering

Inductive Automation

The Ignition Perspective Module introduces new powerful features that improve mobile-responsive design, strengthen security, and leverage more data sources. Keeping that in mind, having a solid plan to take advantage of these new features can vastly improve your success with the Ignition Perspective Module.

Join Travis Cox, Co-Director of Sales Engineering at Inductive Automation, for a discussion of considerations, tips, and best practices for planning your Perspective project. Whether you are a seasoned Ignition veteran or a brand-new user, understanding how to best approach your Perspective project will greatly accelerate your workflow and allow you to complete your projects in no time. 

Learn more about:

• Perspective’s powerful features
• Setting goals for your design and layout
• What to consider when implementing security in Perspective
• Leveraging your mobile-device sensor data

Downloads:

• Perspective Planning Checklist

Episode Transcript:
 

0:00:00
Travis: Hello everybody and welcome to today's webinar, “Design Like a Pro: How to Best Plan Your Perspective Project — Achieving Faster Development with the Perspective Module.” I'm Travis Cox, one of the co-directors of sales engineering here at Inductive Automation and I'll be presenting today's webinar. I'm really excited about today's webinar. But before we dive in, I'd like to quickly go over our agenda for today. First, I'll briefly introduce you to our Ignition software and then go over the key features of the Ignition Perspective Module. After that, I will then talk about how to best plan for your Perspective projects. Project planning will help accelerate your project development time and reduce the amount of frustration. In this webinar, we'll take a look at three main areas: design and layout, security, and data sources including mobile devices. And throughout this session, I will demo features and concepts to help provide a better understanding. Also, we will be mentioning some great resources throughout the webinar and we will share those links at the end. So let's first talk about the Ignition platform.

0:01:00
Our software platform, Ignition, turned 10 this year and it's used by 54% of Fortune 100 companies. Many companies are choosing Ignition because it provides a universal industrial application platform to build applications like HMI, SCADA, MES, IoT, and a lot more. It's got an unlimited licensing model. It allows you to have unlimited tags, screens, clients, device connections and more. It is fully cross-platform, running on any flavor of Windows, Linux or macOS. It's built on IT standard technologies and is fundamentally built on open standards. It is a scalable server client architecture so install Ignition on a central server and then it's fully web­ managed and web-­based. We can launch applications anywhere in our network by simply pointing it to that server. Ignition is fully modular and that allows you to pick and choose the functions that you want, as well it's a unified platform that can allow all these modules to work together. So it's a platform that really allows you to be future-­proof to kind of sets, it gives you the ability to scale and to add more functionality as you go forward. And not to mention, it has a rapid development and deployment set of tools to make it really easy to build your applications to get those applications to people. You can learn more about Ignition at our website at inductiveautomation.com.

0:02:21
So today's webinar is primarily focused on how to best plan your Perspective project. We released the Perspective Module last year. Prior to that, the Vision Module was the only visualization module for Ignition and many Ignition users have become accustomed to using it. Vision is still around and it's great for building traditional platform and desktop screens. Because Vision and Perspective has some different capabilities, there are some key differences between working on Vision projects and Perspective projects. The Perspective Module introduces true mobile responsive design as well as an array of new features that help you take advantage of mobile devices. While creating applications with Perspective is easy, there are some things that we need to do to help accelerate the development time. When you start working with Perspective, you need to consider multiple screen sizes, greater customization for each of your screens, and the ability to leverage mobile device data. So having a solid plan will help you achieve greater success. At the end of this webinar, we will provide you a handout on the Perspective project planning checklist and resource links that will aid your planning efforts with Perspective. So I'll point that out here at the end.

0:03:31
So before we jump into the planning phase, I want to explore some key features of Perspective so that we can get a better understanding of what is possible. Having this understanding will help the planning process make much more sense and we will discuss that now again later. Let's take a look at these six main features. Containers, themes and styles, embedded views, binding and transforms, event handling, and mobile devices. And really, it's important to understand the capabilities in each of these features. You have to know what's possible with these because once you know what's possible, when you're planning a project, you're gonna have a much better sense of what you're gonna need to do or what questions you need to ask your users for how they will interact with the system. So let's start with container types in Perspective. To accommodate the many different screen sizes for mobile devices all the way up to large screens, Perspective employs five container types to help lay out your design. The first is Coordinate, there's Column, Breakpoint, Flex and Tab containers. And I wanna go through each of these container types and show you an example of how we would use those container types. And really a container, just to set the tone here, is each container is a different layout manager essentially for how we work with components.

0:04:53
We put components inside of containers and each container interacts or does something different with those components for, especially for, mobile responsive design. So let's start with the Coordinate container. And this is similar to the relative layout in the Vision Module and it's the simplest container, allowing you to add components using basic X, Y, width and height properties. The Coordinate container is perfect for dragging components to where you want to place them exactly and the components can be fixed in size or you can make the components change in size proportionally when the view is stretched. So this is a pretty classic layout manager that we have and one that was pretty much the only one that Vision had. And so let's take a look at an example of this container. So here I've got a Perspective project and it's running here in Chrome. And I'm using the developer tool so that I can actually simulate going between different screen sizes. If I look here, the Coordinate, there's the two modes for it. Our first mode is... That we are on right now, is fixed, which means the components are gonna stay fixed in their position and they're gonna stay fixed in their size. So if I make the screen bigger or smaller, it's not going to change those components. And in this particular case, I now have a scroll bar at the bottom here to go left or right because they're off the screen. Or likewise, I have a scroll bar to go up and down here if they go off the screen.

0:06:22
So we have that because you need to have scroll bars because if they're fixed, I need to be able to see the whole thing. So it's a good layout manager. Typically we use these for process screens or we can have HMI­-type screens there. And often, we'll use the mode that is percentage. So if I switch this to percent, essentially what this will do is now scale those components. So if I make the view bigger or the window bigger, then those components will also scale along with that. So if you can see here, you can see that my components are stretching along with that. And they're just doing that proportionately. So, based on the size we save in the (Ignition) designer to the size that the runtime is, it'll proportionately scale those components. So it is a great layout manager, very useful for a lot of situations, but it allows us to have, to really think about components from a X, Y, width-and-height way of looking at it. The second one is a Column layout and this is a simple approach to what can be termed responsive design. The process of developing the same view or similar ones in different ways to seamlessly accommodate everything from phone screens to 4K televisions in a single project and a single set of pages. In a Column layout, the view or container is divided into consistently sized and spaced columns.

0:07:43
By default, there are 12 columns. Each component's width is described only by how many of these columns it spans. Since these columns will grow wider or narrower to accommodate changes in the width of the browser, elements in a column layout can stretch horizontally. And based on the different breakpoints that we define, we can have these components or views positioned in different locations on that grid and of course, spanning a certain number of columns. So it's a really great layout manager, very easy to work with, and it's really the fastest to get a more responsive design. So we take an example of this one. Here, I've got a tab here for column and so I've got a number of views. So you can have ... what's great about all of these containers, you can contain a component or you can contain an embedded view, which can be another view, which can be a whole new set of things. So it's really powerful in how you can combine these. We'll talk more about that later. But here I've got some views and they're really simple, they just have a label inside of them. And I've got seven on this screen, and I have them positioned right now, in this way, based on the size.

0:08:55
Well, I've actually three breakpoints here with this column. So I have a large desktop, a tablet type, which is a medium size and then a phone size. And as you'll see, if I make this a little bit smaller when I actually cross that threshold, now you can see these components are now oriented differently for my middle display. So I see all the same views, but they're just now oriented here and were optimized for that view. If I go down to a phone, you'll see that now they're all simply just in one column as separate rows. So you can actually define those positions and those breakpoints very easily and you can have any number of breakpoints that you want and you can position these components any way that you want there. And as you can see, those components will stretch. They'll fill in those spaces if you span that, will stretch as the browser gets bigger. So it's a really great one. And we use this layout quite a bit in our demo project.

0:09:48
Okay, the next one is the Breakpoint layout and this is the most comprehensive choice when you want to develop a project that works for sessions of many shapes and sizes. Unlike Column and Flex layouts, which offer ways of controlling how a fixed set of components respond to changes in screen size, a Breakpoint layout expects two entirely distinct sub­views. This makes a Breakpoint layout a powerful but more involved choice of layout. The Breakpoint container layout is a fundamentally simple layout consisting of a single breakpoint. So there's one size and you can have two child views. As you can see on the screen here, I've got that small view on the left and the large view on the right. In other words, the breakpoint layout offers the opportunity to create two different views that are shown at two distinct ranges of layout widths. So again, depending on that size, it will automatically switch it to use either the small or the large view. So it's a really great layout. And if I look here, this is often used where we, on a large display, we might show the full process. Maybe the view we're showing is a coordinate, and it's the full HMI screen. If I'm on a phone though, I don't wanna scrunch that. So on our phone size, I can show a more optimized view, a smaller view of that process.

0:10:56
In this example I'm showing here, I'm showing a table on a large display because often you have... You can show all the columns, you have more real estate to do that. But if I'm on a phone, then I would want to show a different way of looking at that data. In this case, I'm losing a card layout. So I can see the same data but now as cards instead of table. And so, we're going between these two separate views here. The data's fundamentally the same, but there are two different ways of looking at it. So again, going back higher, I now look at the table. So a great one to use when you need to. Alright, the next one is the Flex layout, and this is a powerful layout manager. It has many configuration options and it's based on CSS Flexbox. So those of you who are, do a lot of web programming, have done a lot of work with CSS, you might be familiar with this layout manager.

0:11:49
We're basically making it easy to use inside of Ignition. And it consists of a single series of adjacent components or containers, configured as either a column or a row. And it has a lot of different options. As you can see with these pictures here, we can have... If I have a single row for our components, if I had a single row here, I can have them simply just stretched in that space. I can have them fixed if I want to. I can make one of them grow while the other stay fixed. I can align them in a grid. All these different options that are there. You can have a stack, you can have things wrap, it just gives you a lot of flexibility. And it's really kind of simple because it only has a couple of properties that you configure in a component which is this thing called basis, grow and shrink. Basically, if you want it to grow or if you want it to be allowed to shrink and if you want the actual size to be. So it is ideal for mobile responsive design, especially for things that are typically led out as a grid or in these kind of ways, it gives you that flexibility.

0:12:52
So looking at the example here, I've got one. And I'm showing this one now as a row. So again it can only be either a row or a column. And the great thing is you can combine these together by... You can have a row, and inside of that, one of the embedded views could be of a flex that is a column. So I can actually combine both of these things together. And that's the power of Perspective. It gives you the ability to combine all of these layouts together in different ways. And so here, this one is set to, as you can see, view one and view three have specific sizes and they're not changing. The middle view is getting bigger. But if I get smaller, I basically say the middle view once it gets to a point where I don't want it to go away, then it's gonna stay that size. Now you'll see that view one and view three are actually getting smaller. And you can choose if you want that or not. You may want to have scroll bars and never do that. Again, lot of options. And the same thing here is a column. Same kind of idea as a column there. Again, you can go either way.

0:13:50
Okay, so the Tab container is a really simple layout and it allows you to define tabs that you can run the top of the layout as you can see here, example region and events. So it's a true Tab layout that in each of those tabs you can have a component or an embedded view that can be whatever. Again, whatever layout you want within that. And what's important about this one is that the Tab container, the reason that we have it as a container is that it only activates the contents when you're on that tab. Whereas in Vision, if you had, you wanna do tabs in Vision, you could have a tab component. You might have containers that you would make visible or invisible based on the tab that's selected. But those containers were actually on the screen and always running. In this particular case, only the tab that is open is the one that's running. And you can, again, contain whatever you want inside of it and again, there's a lot of options for how this works. And we're actually making extensive use of the Tab container within this example here. This top part is each of these Coordinate, Column, Breakpoint, Flex, and Tab, each of those inside are separate embedded views. So this is the tab layout here. On the Flex and on the Tab, I have another set of tabs below that where I'm going between two different sets of views there as well. So this one I got tab one, tab two, and those are looking at two different views down here at the bottom.

0:15:14
So it's a really powerful one. Again, one that you can use. The real power of all this is the ability to combine the different layouts together. And we can nest these as much as we want, as far as deep as you want it to go. You can start with Flex. You can then have a Coordinate inside that or a Column inside that, or you can have a Breakpoint. Inside that can be Coordinate and Column or Flex. I mean, you can really go at it. If you understand these fundamentally, when you wireframe, which we'll talk more about later, you'll know what to start with and what to then use inside of it. Okay. So the Perspective Module now moving from the containers to themes and styles, the module uses HTML5 and CSS. So you can build screens that are ideal for web browsers and mobile devices. You can set initial styling to all your components using a theme. So we have the ability to do theming inside of Perspective. And you can initially set the theme to either a light or a dark theme for your components that will be there throughout the entire session. And as of 8.0.13, which I'm gonna show you, it's about ready to go out, that's the version I'm using here in the demo, we have full support for theming across all of our components and I will show an example here.

0:16:22
But with theming, that gives you the ability to create your own themes and you can stylize everything based on this theme. You can then, inside of the designer, you can specify styles that you can use within different components, that can basically define colors and fonts in one place that many places could take advantage of and use. You can even then, of course, put styling on an object itself. We call that inline styling. So a lot of ways to use this. So let's take a look at the demo here first where we can look at themes. And, so here I've right now have the light theme that's selected. And if I go here and set this to, let's say a light cool, there's many different themes now that 8.0.13 has. There's a cool, there's a warm, there's a dark theme, as you can see, all the components will automatically change their look and their feel based on that theme that's there. We can, of course then, go in and define our own themes as well within the designer or within the system. And if I look at, let me go here to this one as an example. If I look at these guys, these labels, these are actually styled with actual style classes. Over here you can see there's classes and I have this animated label and this value label. And these are two styles that we've set up. So I look at the animated label, it's a style that has two different stops. So zero and a 100 here and it's animating between those.

0:17:48
And you could see it's going from the foreground color being black, yellow background to the foreground color being white with the red background. You can see that animation going back and forth between the two. So we have the ability to use these styles which we can associate with objects and associate with many objects and we have the ability to do theming. Theming first, styles override theming and then custom styling inside of an object will then override the style. So you can kind of chain that together and figure out how you want that to look. Very, again, very much how CSS really works there. So next is looking at embedded views and parameters. And the embedded view component allows you to include an entire view inside of another. You can use this component to select the view display, you can pass parameters into the view, and because of this, you can make views actually act as templates for information. So for example, you can create a tank view and embed several into another larger view that shows an overview of the facility.

0:18:45
The embedded view is different than the container because you cannot alter the contents of the embedded view, but it allows you to really create these templates that you can reuse multiple times. A container itself allows you to contain a bunch of different components, or potentially just one component, so there... Subtle difference between the two, but it's important to understand that. And if we look at, going back here to the demo, let me set this back to my light theme here, and if I go over to my embedded views, I've got a bunch of embedded views on here. This motor one is a template that I built and I can have on the screen multiple times, as you're seeing here. I've actually embedded that full container, that view that we're looking at over here. For the containers, I embedded it into this one.

0:19:35
So we can embed views anywhere, we can, it's really powerful in Perspective. We can take views, embed them everywhere, and even components, either some more advanced components like tables allow you to embed views inside cells, and you could really go further, so this concept of embedding is really quite important. If I look at the designer here for a moment, let me go over to the actual embedded views area. And so, what I have on this one ... So here, for example, is that motor, this is an embedded view. How I created that was by simply, in this particular case, because you can make views, you can have drag and drop targets for tags, I can drag a tag right into this screen, so let's drag it in here. And it knows there is a view with that drop target for that motor, and I can create it, and then I have got that there. I can use this many times. If I go back, let me change one of these so you can see the value, of course, is different in there.

0:20:33
If I go back to that embedded view, so let me go here to the motor. Let's say I wanted to change something with this, maybe I want this text here to be bold, maybe have a background color on it. Whoops. Let's go here, have a background color, we'll do like a light gray here, and ... Let's make it a little bit lighter. And then, maybe I want the text to be bold. Okay, so I made a small little change, and we're gonna save that, and now you can see that all of my templates have updated. And if I save that further, going back to the example, now all of those have updated there. So, again, really powerful to be able to do this, having embedded views there. And again, you can really embed them anywhere you want, all the containers we talked about before, and you can embed views inside of other views. You can go as far as you want with that.

0:21:29
The next is bindings. Similar to Vision Module, Perspective Module uses bindings and this allows you to basically bind properties of components to different sources of data, and that can be tags, it can be calculations, it can be queries, it can be REST bindings. There's a lot of different binding types that Perspective brings to the table. By default, these bindings are unidirectional, but certain bindings allow you to be bidirectional, for example, the tag and property, you can be a bidirectional, where you can write back to that source target, so it could be back to that tag or back to that property.

0:22:02
So bindings are fundamentally one of the most important concepts inside of Vision or Perspective, especially with Perspective, and offers a lot that you... And how you can make these components come to life. So if we look at an example here, I've got one with different kinds of binding set up. It's really best to show these things in the designer, so let me go over here to the binding screen. And I got this gauge up here, has a property of the value, and any property can be linked. I have this one, though, bound to a tag directly. Perfect, that allows me to see that value and it changes updates to that property. If I made it bidirectional for a control, I can write back, if it was a button or something like that.

0:22:41
The one over here, this is actually using indirect tag binding, where we're indirectly pointing to a tag based on the drop down that's right above it, so whatever motor that's selected is the motor I'm gonna look at. So if I play around, if I go to motor two, I'm now seeing motor two, if I go to three, I'm now seeing three, and so I can actually change which tag I'm looking at by the indirect binding. This one over here is actually linked to a property, so I'm binding the actual tank value to the slider that's on here, so if I'm in the run mode, I can actually move my slider, and you can see that tank go up. So property bindings are important, and this was kind of a silly example, but it shows how that works.

0:23:19 
The last one has... Or the next one over here, this middle one, is actually going to an expression. This is where we can do a lot of really cool things with the expressions. We'll talk more about this in particular, but we can use various functions and operators to go further with this. So here, I'm basically just gonna be taking that tank, I'm doing number format, I'm multiplying by 100, formatting that number with two decimal places, adding text around it, level, and then the feet, and then I've got that full label right here that has the information.

0:23:51
The last one here is a time series chart, and that's bound to tag history, so I can bring back history from the historian and see that data on the chart, but essentially, we're all the same thing. So we can take any properties we have and we can bind those to some source of data, and it gives a lot of flexibility. Now, going on from that concept, we have the notion of transforms, and these are incredibly powerful, and this is unique to Perspective, and they give you the ability to alter a value from that binding. If you, in Vision, if you wanted to alter those values, you often had to bring back them into custom properties, add additional custom properties, or use scripting. Here, we can do it all right within the binding itself.

0:24:28
So as an example, we can take a value that comes back from a tag binding, and we can alter it and transform that to, say, a color, or we can format that, or we can apply any kind of transform we want to that data, and we can have lots of these transforms that we'll execute from top to bottom. There are four different types that we have, map, format, script and expression, let's go through each one of those. Map transform allows you to map an input value to an output value, so typically, from a number to a color is a good example, but we can go from anything to anything, there's a lot of options that this particular transform has. As you can see, you specify the input type and the output type, and you could just, and configure it. So it's a really great one that you can work with, and that is often one that we use with HMIs, where you color those components.

0:25:17
Formatting transforms allow you to format a value that's returned from the binding. So, I can format a number, for example, with two decimal places, I can format a date in a particular style. It allows me to do that format. Script transforms are really awesome, where you can run Python scripting right within the binding itself, so I can transform that using scripting, maybe using a calculation or using some algorithm that we want to work with. And then lastly is expression transform, which allows me to... There's an expression binding, but there's also the expression transform, where I can take the value that we're originally linking to and then apply a calculation to that.

0:25:53
Within those functions and we can have as many... We can use all of these transforms in one binding or just one of them, it's totally up to you and they run that sequential order as you can see, they would go from the value ... The original binding to, then, the transform, if you had multiple transforms you'd see each of those steps to get the ultimate result that then comes back on the component. So quite powerful there to be able to use those. So if you take a quick demonstration of this, we have another screen here that looks at transforms and there's a couple of different transforms we have. So again, the best way to look at this is in the designer so I'm gonna go over here to transforms. So here I've got one that is a number to a color, so I look at this paint I'm going from a tag and then from a number here to a color. Real simple for that. This next one here, is where I'm taking a tag, and then I'm actually formatting it with two decimal places. So now I have nice two decimal places to format. This next one is a date, so I'm actually taking a date and I'm applying a format pattern so I can see it more as a human readable string there that I want that to be.

0:27:00
This one here is actually doing ... taking ... Bind to a tag but then doing a conversion. So maybe I'm doing Celsius to Fahrenheit, right here, I can do that with an expression binding or expression transform. And then lastly, is the good example of the script transform here. I've got this data, this table, the data property is bound to a query or REST binding or data somewhere else and then I can manipulate that. In this particular case, what I'm doing is I am looking to see if the population value if that's greater than a million, if so, I'm then gonna add a style to it to basically apply a background color. So as you can see all the ones now of the cities that are orange, have a population that's greater than a million so great ways field may play that, because that gets us ... It allows us to get the data to a shape that we want on the property that's there. Again, any property, we can link to any of these bindings and use any of these transforms. Okay, so next thing is in Perspective we have events and actions, it's some of the fundamental building blocks for project functionality, so there are a wide range of events that you can define within your project, I'm gonna highlight some of the common ones you use.

0:28:09
I recommend using our user manual to get more details on all these different events, but they can be configured on any components and some of the components have special events such as tables, file upload component, view canvas signature pad, and basically, these events allow us to respond to things that happen on a component. So maybe it could be a mouse click, it could be a keyboard event like pressing a key or releasing a key, it could be touch events or wheel events. For example, the file upload component has uploaded file event that is special and so the events allow us to respond to that and we can respond to that with an action. An action is so what you do with that event. So as an example, I might have an on­-click event that I open a pop­up or I may have an on­-click event that's gonna scan a barcode and I can certainly work with those. And so I've got a good demo of this as well, this way I can stay in the runtime I've got here on the button, I've got an on-­action-performed event that said the button ones pressed. I've got one that a button will open a pop up, so I may have got a pop up there, I've got one if I put a mouse over it, it would actually have a mouse enter a mouse exit and I'm in a mode where the mouse events are not there. Only touch events are there.

0:29:19
So let let me go out of this just for a quick moment and so I'm in here, so if like see a mouseenter mouseleave for those so let me back into again the Dev and then I've got the ability to upload a file, so let's say I take a file here, any file, let's just get this one here. That was a little bit bigger. We find a different smaller file, got lots of different things. So let's say that one I've uploaded that file file was received, it's a special event that's there. Okay, alright, so lastly, last thing to cover here, is the Perspective Module is not, it doesn't just give us the functionality in a web browser that we can work with. We also have the ability to take advantage of our native apps. And with that, these native apps or iOS and Android, it gets access to the phone sensors, it's a wrap around the browser, but we can work with the phone’s GPS, accelerometer, barcode scanning, NFC and Bluetooth, all of these things we have support for right now, which is quite powerful. So what I'm gonna do here, I guess I'm actually gonna show you this, I'm going to bring in my phone and wanna bring this on to the screen, so hopefully you can see this.

0:30:36
I'm hearing my phone now, and this allows me to show off these particular features. So I'm gonna go into that same project that we're looking at here and I'm gonna go over to our native app area, and this one is where I have the ability to... The first one's a little icon, if I click on that it opens the scanner barcode, so if I scan a barcode here, then you can see that barcode now was scanned. If I enable GPS, I'm gonna get my GPS coordinates. If I look at the accelerometer, I can now move the accelerometer around you can see that happening. And there's a lot of different ones that we have even some of the components like the file upload component will allow you to then take a picture of this and upload a picture or you could take a file from your computer and work with it. So a lot of ways to be able to harness the native apps and work with that in our system. Okay, so that now brings us ... We've covered all the core features of the Perspective, and I wanted to really give you that kind of in-depth tour so you understand what those features are, because if you understand those features, especially the containers when it comes to design and lay out, it's really important to know what's possible especially, all through work with these native apps we gotta know that these things are... How or to work with those as well.

0:31:49
So, it just gave me a glimpse here of all the features, but I do highly recommend looking at our user manual and also Vision I got to university to find out more about those features I was talking about. So now we know what's capable of, let's start looking at how to approach planning for your project. So, as we've seen, Perspective introduces a new approach to visualization for the Ignition platform which really takes advantage of mobile devices and the many screen sizes from phones all the way up to TV monitors. To develop screens for a multitude of devices, one would have to build a screen for each screen size which can be really time consuming, you don't really want to do that. So, Perspective leverages web technologies like HTML5 and CSS with all the layout managers there to give and allow you to create mobile responses screens that can adapt with having a single project, and a single set of things that you wanna define and that's really important here, but it makes you have to think about it in a completely new way and how you're gonna approach the design of the project.

0:32:48
So with that said we wanna focus on three areas here, design and layout, security, and data from mobile devices and in terms of, if we're gonna plan for a project, we gotta look at these three things. So, let's start with the topic of design and layout. Design and layout represents a fair chunk of your planning process since you're building visualization interface, it's important to spend some time on how to develop applications that are the most efficient and effective as possible for your users. Let us now look at some considerations to help accelerate your design and layout development. Since Perspective allows you to build views from multiple screen sizes, we want to first start by defining the screen sizes, the screens and their sizes that will interface with your project and this is one that I can't stress enough. Knowing the type of devices or terminals that you'll be interfacing with will help you understand exactly how you want to approach the application.

0:33:45
So, as you can see here on the screen, I've got two different ones that I have targeted, a phone and tablets or larger displays which are basically something that's less than or equal to 400 pixels. That is gonna be one size that I want to work with and then, something that's greater than 400 pixels, I wanna work with that. So, knowing these two things and really auditing who's gonna be working with it, that will give you an idea of what you're gonna need to do for each of these different sizes and potentially, which layout manager we were talking about earlier that we want to use. When it comes to user interactions, we need to understand how users will interact with our screens. Understand ... Understanding users will ... So understand that users will interact with screens depending on if the input is a mouse or a keyboard or a touch interface. We need to know these details 'cause that will help you understand which container type to best use.

0:34:37
Consider what interactions your users will have with each of the screens, establish the overall purpose of each views that you and your users can clearly understand what data is being presented and what specific actions can be accomplished. Defining these interactions can help you best map out the types of events to configure for your views and their associated actions and this will also be helpful to map out the parameters that we pass into views and what transforms you might use to present the most relevant data to your user.

0:35:05
So this again, I can't really stress enough. If I'm targeting two different sizes, a phone and a tablet, we need to look at our screens and determine what's the best use of that information or that data for a phone and for, say, a PC or tablet. And, will that be different, will it be the same? So, really got to have to think about that, and if I'm on a phone, remember, it's smaller, think about the apps you use on your phone outside of the industrial world, you want that to be optimized, you want that to be efficient for the user. The next part of the Design Planning Process is to define your users' navigation. This will help you plan out how users can best navigate your application. You can use the information you gather from users’ interactions to help formulate your navigation strategy. I would recommend using a flow chart to help map out how a user will navigate through different views and pages. Having a map of your user's journey will help you understand how to best approach navigation for each of the screen sizes to define your project. And again, this comes back to understanding how Perspective works.

0:36:11
With Perspective, I'm gonna kinda go to (the Ignition) designer just for one moment here because what you're doing is when you first get into the application, you are defining all of the first view that their users are gonna see. You're gonna find what view that's going to be. And then, you can define docs, north, south, east and west docs, which in my case, I have the header and the menu. The menu is gonna be on demand, in my case, where I'm bringing out when I want it there and that's where my navigation is, is in that menu that I bring out. But it might very well be that your navigation is inside of a window, maybe tabs for your navigation or maybe, you just have one screen. You have, you click on that to drill into more parts of the application, so we need to understand how the navigation is gonna work. Plus we have the ability to specify URLs for Perspective. And so here, for example, I've got /bindings, /events, /native, all these things that when I look at my application, that's up here in URL. We can use URLs and pass scramblers into them and that allows us to have a bookmark where shareable things that we can provide to other folks. And so, as an example, I can now go over something else. So, let's say I wanna go over to the embedded.

0:37:22
Once I click on that. Now, I'm gonna go straight into that embedded view. I can get to that there. I can also, of course, get to it by the navigation that I have. So, there's a couple of different ways you can kind of approach that and then understanding that's gonna help you understand how to best go at it. Once you've collected the information and you define the essential pieces related to design your project, you can now start to wireframe your design. The process of wireframing helps you clearly define how your views will look especially for the different target screen sizes. You will go through multiple iterations of wireframes. Trust me, you will, wheeling down the layout and design to highlight the most important functions. This will help you save time and frustration during that build process instead of trying a trial and error while you're building. Again, I can't stress this enough. I always tell people, please just draw it out first, how you want this to approach especially potentially how you want to help you to determine which layout to use first and how things inside of that will work.

0:38:15
So, wireframing can help you identify which views are common, they can help you in building templates, they can really help you save a lot of time. And you can also bring your stakeholders in who can look at the examples so they could provide feedback. So, here is an example of a wireframe that our UI, UX folks did for our Vision client launcher that we have. So, we launched a Vision client or we launched a designer, the similar process there, and there are many options and tools to choose from for wireframing but really, you don't need fancy tools. You can just simply sketch it out like we did here with pencil and paper. Once you have the wireframe you're comfortable with, then you can share that with the stakeholders, get that feedback. Throughout that process, you're gonna fine tune it until you arrive at the final design so you can see our iteration to our final screen design.

0:39:07
And this is something that really anybody can wireframe and you could actually take the wireframes also to a UI, UX expert who can then turn that into actual color and branding which is really the next part which is defining your theme, your branding, your color schemes for your application. Your brand will help you establish the colors that you will be using in your project. Establishing a color scheme will ensure consistency across your project and will help other project developers to know which colors have a purpose. Also, to help your development move along faster gather all the assets you need for your design. So collect all the images, symbols, SVGs, graphics that will be grabbing it all together, creating the colors in a spreadsheet, knowing what you have will certainly help and accelerate your development. Another point I'd like to add is that if you do not have a graphic design resource again, you can reach out to a UI/UX designer expert.

0:40:00
There are online resources like guru.com and others you can use as well. These graphic designers can create designs based on your needs and can drop them right into your project. As you can see, planning and preparing your design layout can greatly speed up the process. Now that you've gathered your requirements, collected all of your assets and arrived at your final design, you're all set to start the development process in Perspective. So I'd like to take this moment to highlight some of the great resources that we have that can help you with your design and layout efforts. First I'd like to talk about touch screens. Since some devices range in size, it's important to consider touch ergonomics. I highly recommend that you visit our online user manual and find the section, Perspective Design Principles. In that section you'll find a sub­section on touch and ergonomics that will give you some guidance on how to lay out your design for mobile devices.

0:40:49
For some great design resources, I recommend visiting inductiveautomation.com and heading over to our Webinars area under the Resources section. You can filter by HMI and you'll find a ton of great, in-depth content on screen design and best practices such as Design Like A Pro: Building Mobile-Responsive HMIs in ­Ignition Perspective. So we have a lot of great content out there. And these ones really help you to understand the planning process when it comes to actual design there's other resources that you can look into for that. Along with working with UI/UX folks that will help you get to where you want to go and make that a first class application. And this is really just so that you can have a very consistent application that's scalable you can move forward with. Of course you can build applications pretty rapidly with Perspective. But if you really wanna take advantage of all of these things we're talking about, it's good to go through this process.

0:41:41
Now moving right along, I do wanna spend some time on security considerations for your Perspective project. Spending time in security not only will help your development time, but it will also help making sure your project and applications are secure throughout your organization. And when we look at access we really do have to look at security. What I do wanna review is what the Perspective Module has to offer in terms of security. It was really built from the ground up with modern cyber security in mind. It supports industry leading protocols and standards. It's compatible with many federal identity providers such as Open ID, Connect, and Sample Protocols. It supports two factor authentication or single sign-on with these federated providers, and it has a permissions model that allows you to secure your apps with flexibility and ease. Defining things like security levels and using roles and zones and really applying that to your application. So here's really a closer look in how Perspective approaches security.

0:42:32
And this is a great diagram to really understand why Perspective, why it was built from the ground up with cyber security in mind because at the end of the day it's clients, it's Ignition on a server, and we're having clients out there that access the application we provide. And when they go to that URL to access the application, we wanna make sure that first, they have to authenticate. They have to be authenticated and we want to be able to verify that identity of that person. That's where federal identity and the two factor authentication becomes really important. So in that browser they'll authenticate. We'll have that validation, we'll know who they are, and that will be done over a secure encrypted connection to the server using HTTPS. So we'll have that secure tunnel between the browser and the server. So there's no outside actors that can actually see that data or manipulate that data in the middle.

0:43:22
But then what's important here to understand is that Perspective in that client we wanna get access to tag data, we wanna get access to database information, we wanna be able to read and write potentially, there are things that we wanna be able to do and we want to protect those resources, and Perspective really makes it, it does a lot of work to really protect that. So when we validate when I log in and validate a session against the server, against that federal identity I will know who that user is and what roles or security levels they will have. And that's on the server. That's going on the server. There's nothing there on the client that takes advantage of that. It's all on the server. All the things that then they wanna interact with, all the data they wanna get access to are all behind a protected layer. So these are bindings and scripting to get information from databases or tags or whatever else, and this protected layer basically says, "Hey, if I'm a browser and I want the data that if I wanna write or if I wanna read, then we have to have the right proper permissions in order to do that."

0:44:22 
And so all we're really doing is when we establish a session, all of those views, and components, and properties, and bindings are all running on the server. And when those things update, and the binding updates it send it to the browser, it updates the browser we get the value. If I wanna write, the browser typically just says, "Hey, here's a write," it writes to a property, it gets synced to the server, the server says, "Oh, let's check the authentication. Are they allowed to write? Okay yeah they are." Then I'll write that down. So there's really limited ways that the browser interacts with the server to really have a full secure system here. And we talked about events earlier. If I have a mouse-click event or a file upload event, those events are also sent to the server, checked against the same permission models and then if we pass it, we can then actually go off and run those events.

0:45:04
So it's really baked in from the beginning to have cyber security in mind and we wanna make sure that we do take advantage of using... Of actually setting up security and all of that. So let's take a look at the security considerations for Perspective. I wanna look at our four important aspects here that will help you save time and ensure your project is protected. So first is hardening your Ignition Gateway. We need to identify who will have access and how they'll have access. We're gonna figure out where users will access the application from, and then considerations for mobile device security, i.e., like location­-based stuff. So let's take a look at those real quick. Since Perspective allows you to build mobile response applications HTML5, your application will be viewed on a multitude of devices via web browsers or native mobile apps. You'll need to make sure your Gateway is secured. I wanna emphasize that it's important to set up security ahead of time, take advantage of the security features of Perspective.

0:46:00 
That involves enabling SSL for data encryption, setting up authorization for your users, enable auditing to track all the actions in your project, and for a more in­depth look at all this, you can visit us and look at our security hardening guide which can help you secure that project. Now, it was updated for now with Ignition 8 in Perspective. So go ahead and take a look at that. I also recommend visiting our past webinar, “Changing Your Perspective on Security” which goes through these steps in more detail. The next thing I wanna, I recommend you focus on, as part of your security planning, is to identify your users access. You wanna audit your organization and determine who your users are. Identify access levels ahead of time to help your development process, look into what actions people would take that would require security, consider the security levels based on roles, when you integrate with your organization's role management system, you can use that information to determine access permissions.

0:46:53
Identify which screens in your applications are open to the public and which would require authentication. You'll want to determine which screens require access levels and what actions need access levels, so who can do what and exactly what can they do in the application, based on their levels. Keep in mind too that you have the ability for accessing a URL. You wanna make sure that we protect every part of that Perspective project whether it's from the get­-go, or whether we want to have specific screens that have heightened security on them. Perspective gives you a lot of control when it comes to security. Due to the nature of how Perspective handles security, making security an afterthought will hamper your development efforts. To help you gather information and give you and your development team a good idea of how to approach security, I recommend building a flow chart as well to map out what that security would look like.

0:47:42
Alright, the third part of the planning process I like to consider is your data sources. It's a good idea to identify and map out all the data sources that feed into your Ignition Gateway. So you have things like PLCs, that were connected directly to databases that we're working with, other data sources like MQTT servers, or OPC UA servers, maybe a REST API that we're dealing with, or maybe a connection to SAP, or an ERP system, maybe we're reading files in, maybe we're looking at barcode scanners that are sending data over the network, there's all sorts of different things, data that's gonna be coming in. We want to look at all of those and understand what those data sources are, where they're coming from, have a spreadsheet that gives you that understanding because that's gonna help you understand how you're gonna use it especially in the application itself and what you wanna do with it, plus it'll also let you give you a better picture of, for security of what connections are secure and which ones are not secure, so you may wanna take extra precautions there especially with firewalls and whatever else.

0:48:41
So a really good kinda understanding of all those data sources that you have. Then now, keep in mind that Perspective also adds additional data sources through your mobile device that I showed you, with the access to the GPS, accelerometer, the camera, NFC, Bluetooth (that) you have. It really elevates the amount of things you can do. So to help you prepare defining what sensor data you would like to access and what action and purpose it will serve is an important first step. So just to kinda go through these, for GPS, I showed the GPS there, but it can be really powerful in using that for geofencing. We can tag a location when people are entering data, we can also have navigation based on GPS. So going back to the navigation strategy, I might actually change the screen automatically based on where that user is located. The accelerometer, that is, can be a great tool where you can use your phone to determine X, Y coordinates, you can maybe do something different in portrait or landscape mode with your application. You've seen a lot of apps where they'll do something different there, straight a way of using that.

0:49:49
And there's also talks of people using this to... For safety, and so they would know if somebody fell or not, or based on the results of that accelerometer. Another thing is camera barcode scanning. Barcode scanning, we're seeing customers fill barcodes out there in the plant floor. You could take a, like I showed earlier, you could take a... Scan that barcode and you can do things like inventory control, you can use it for navigation, you can put a pop­up window to get more context about that location, about the asset, get to procedures and a lot more, use those to your advantage, it's a great data source you can bring into your system. NFC, a lot of devices use NFC, this is called Near Field Communication, and this allows these devices to communicate with each other over a short distance. So you've seen this with contactless payment with your mobile device and a lot more NFCs devices out there that you can interface with. It could also be very similar to barcode scanning where you can actually kinda go and as you pass through a tag that has ... that they connect with NFC, you get their information, you could do something with that information in Ignition.

0:50:55 
Bluetooth is, can be, really great. There're a lot of Bluetooth Low Energy sensors and device like beacons that give you humidity and temperature, things like maybe iBeacon, Eddystone, these things you can work with and bring in, and be a part of that. It's really anything that's Bluetooth Low Energy, you can bring into Perspective.

0:51:18 
Okay, so now, it's time to review what we've covered today. The purpose of this webinar is to help you understand what you need to prepare for your Perspective project. We have a better understanding of what to consider in for your design and layout with Perspective. Again, identifying screen sizes, purpose of each screen, actions you want users to take, create those wireframes, understand those project assets, we also understand what considerations to take when it comes to security, determine your level of security, who'll have access, access locations, access based on roles, authorization, auditing, federal identity providers you wanna work with, all of these things are important to look at with security. And last but not least, we take a closer look at all the types of data we're bringing in to be able to us. So all of our data sources, how we're, how the data is gonna be processed, how we're gonna visualize that data, and if also if we're gonna work with mobile device, sensor information as well. We hope that by going over these considerations and planning your projects, you will gain a new perspective on how to achieve success, pun intended.

0:52:18 
So that brings us to the end of our Perspective planning webinar. In the handout section of the Go­ToWebinar panel, we've included a copy of our Planning Perspective Checklist. This checklist covers a lot of what we've talked about today, we'll also send out the checklist to all who have registered for this webinar. You can use this checklist to help keep track of your project planning and accelerate your Perspective project development. The checklist also includes links to mention this webinar to all of the different resources that we have, and past webinars and things that will help you with that process. Also be on the lookout for more resources coming soon to help you master the Ignition Perspective Module. Of course, there's no better way to learn about Ignition and Perspective Module than to download it and try it out today for free, and you can download the full version of Ignition 8 and the Perspective Module at inductiveautomation.com, and it downloads and installs in less than three minutes and you can use it in trial mode as long as you'd like and you can really evaluate and get a full proof of concept of all these features, what they have to offer there.

0:53:17 
To learn how to develop and do more with it, you have the resources that we're showing here as along with Inductive University on this, we have hundreds of free Ignition training videos that are really gonna help you understand how to build and use parts of the system and there's also a great documentation in our user manual that you can refer to. I also wanna tell you about some exciting upcoming episodes of our Ignition Community Live series. On June 2nd, we've got a presentation from Sepasoft called From Edge to Enterprise. On June 16th, our guest is Roeslein with a presentation about Moving From Vision to Perspective; that will be a good one, kind of another iteration of this. Also in June, we'll present a special session with the original developers of Ignition, Carl Gould and Colby Clegg, featuring a surprise announcement and a guest appearance from yours truly, that will be, that date will be announced pretty soon. So keep on look out, this is gonna be a very, very special Ignition Community Live with that surprise announcement at some point in June, we'll be announcing that date and we look to hope to see all there.

0:54:17 
So to register for any of these events, just go to our Events section of the website and look under June 2020 for the Ignition Community Live. Also, register now for ICC 2020 on September 15th. This year, ICC is going virtual, and it's free to all who register. So, come watch industry thought leaders from around the world and discover innovative, real­world Ignition projects from multiple different industries out there. So register today, we hope to see you all there with this event and it's gonna have some really exciting content. So if you like to also have a personalized demo of Ignition call, our number here to speak with one of our account executives. So, without further ado, let's go in and start with the Q&A. And so we've got here about five minutes for the Q&A, there's a lot of questions that have come in, so we'll get to a few of these here. So the first one is from Ivan: “Is there a way to make a button or a group of buttons to appear only after a certain condition is met, such as being logged in?”

0:55:14 
Absolutely, so if you, within a view, if you have a button or a set of buttons that you want to show or not, you can, there's a visible property of that button that you can link to whatever you want. Again, the bindings that we have, you can link to it, whether they have a particular role, whether they... It's from a, there's information, really anything you want that you can do there. So, absolutely, you can check that out. There's a question from Francois: “Is it possible to have more or less than 12 columns, and for the column layout?” I believe we used to have that functionality, I think now it's stuck to the 12 columns, I don't think there is a feature, oops, for that particular one. Let me go into a new layout here and I'll use Column. I don't think that's a parameter anymore of this, so if I go here to root, we could just specify the grid, the grids are, they are the breakpoints, yeah, and the gutters, but right at this point, we have the 12 column layout that is there, so we don't allow that to be changed at this point.

0:56:23 
Okay, another question is, “Is it just only a tool for mobile browser design and CSS?” Not quite sure what that question is regarding there, but well the great thing about the designer in Ignition is that you don't have to know anything about HTML and CSS, you can take advantage of these features and get to all the same, the powerful things that web design has, but in a very nice drag and drop designer. 

56:55
So another question from Brandon is, “Can default light style be edited?” Yes, all those default themes can be edited, they're actually in our install directory in the data folder, there's modules or Perspective, you will actually see those themes, you can modify those themes. I would recommend creating your own themes though and not modifying our existing themes, because if we ever made changes to those themes in the future, where we're just gonna overwrite your changes, so if you make your own theme, you can import everything from a previous theme and then have any overrides or changes you want to do to that.

0:57:25
Okay, another question here is: “If we're to hire an employee to work on Perspective screen building for us, what skill sets would you recommend we look at and what type of training would you recommend for this person when first engaging with us?” Great, great question. So really, the people that can take, be off the ground and running really quickly with Perspective are the ones that really truly understand web design. We're saying if you're looking from local universities, from the graduating classes, the folks that are doing a lot more with web design, really, that skill set translates perfectly to Perspective. They take over pretty quickly, they don't have ... it's great if a person has some UI/UX expertise as well, they don't have to have that, as long as they have kind of fundamentals of web design, then you can reach out to UI/UX folks, and they can work together to kinda build that branding or that theme that sticks in with of course and how those screens are laid out, but they can implement those. Besides that, knowing a bit about more about Python and with that will help out as well in case you need to use that with the transforms.

0:58:32
Alright, so another question here from Ryan is, “Can the transforms be defined globally, so they can be reused?” So unfortunately, no, the transforms cannot be defined globally, they're right in the binding. However, if you did a script transform you could refer to a function and that function you can use multiple times, but everything else is gonna be in line with that binding. Okay, another question here is from Francisco: “Will the new features of 8.0.13 be added to the Inductive University when the new feature's released? If so, how soon?” So we are, all the features that we add to the product, we're always looking at adding it to the University, adding it to our documentation, adding it to these different areas, so those teams are at work and we're doing that a lot better and faster. We actually have a blog post too that will go out with those features. So just check around, it shouldn't be too much longer you'll see information about that and what 8.0.13 really brings to the table besides what I showed here today. We appreciate everybody's time here today.

0:59:31
Hopefully, this was a valuable session to understand really how to kinda plan, to understand what Perspective can do and how to plan for building a Perspective project. Like I said, you can go at it and build a project, but having a good plan will really allow you to build an application that you can scale up, that you can use for really anybody out there that can add a lot of value to your systems. Keep in mind too that if you already have an existing Vision application, keep that working, keep that in place. Add Perspective in parallel with that and take advantage of being able to truly have mobile, first class mobile application that you can get out to people and take advantage of kind of what we talked here today and have that best of both worlds there. So it's, with Ignition, it has a great tool set, you could take advantage for that. So again, thank you for joining here today, look forward to seeing you in our events coming up, especially the community lives and we'll see you next time, have a great day.