You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing training@inductiveautomation.com.
LESSON LIST
LESSON
Wrapping Up
Description
In this final lesson, we'll make sure we can view our mobile screens, and we'll perform a final polish pass on the project.
Transcript
(open in window)[00:00] Welcome to the last video in the series here. So we have all of our views together. The final thing we need to do is that we need to make sure that our station details views are things we can actually navigate to and make sure our pages are working and just kind of do a final once-over. So let's head back to the home of the Perspective section here and let's go and fix this primary view here. So for the station details, right, we can go ahead and select stage details. The page URL is fine. All of our buttons and our other navigation is sort of designed to work with this page URLs or leave it alone, but we do need to fix the primary view. We can just click the dropdown, go down on to primary views, go to station details and we just need to point this to a view that exists. So remember, we ended up renaming station details to station details large, right? But ultimately we want to go to station details main. So I'm going to select stage details main, which should fix that little error there. So let's save our projects and let's go and launch an instance of the session here.
[01:05] We'll go to tools, launch Perspective and launch session. Now the point of this pass is just to make sure that our screens look good at different sizes. So if you wanted to, you could actually go figure out the IP address of the computer that ignition is installed on and if you have like a mobile device that's on the same network, you can actually navigate to your gateway and launch a session from there so you can check it out on your phone if you wanted to. But just so you can see what I'm doing here, I'm simply going to resize my browser and just check it at the different widths. So we did switch to the smaller station details, which is good. It looks like clicking on our buttons, does switch us around to different stations, that's good. We do have this little floating chevron here which brings up the Up bar. It just gives us some diagnostic information which sometimes useful, but right now the chevron is actually kind of a floating over one of our buttons. We should probably get this out of the way. So let's head back to the designer and looking at the home of the Perspective module here. If we look on the right, there's a session properties area that we haven't really messed with too much, just has a bunch of properties for the entire session.
[02:04] There's Up bar over here, which allows us to sort of control that little chevron pop-up and then the correspondent bar that appears when you click on it. Let's set this up the position to hidden, which will then remove the chevron and then we will save our projects. Let's bring our browser back over, and in the browser let's go ahead and refresh the page and there we go now it's all gone. Now let's go back to overview and these things are kind of cluttered next to each other. So I think one of the things I'd like to do is actually tell the flux container on this view to wrap our little vessels there. So that way it kind of stacks them when there's not enough width. So if we were to go back to the designer here, if we go into the project browser, if you look at our primary views, we'll leave station details. If we go back to our overview, you double click on that, and we can actually just select the root container there and we can actually just tell it to wrap, right? So when it doesn't have enough room, it'll go ahead and just wrap around like that.
[03:01] So if we save a project here, it's going to look like this on mobile we then kind of scroll down and then once there's more and more space, they'll be able to spread out a little bit more, right? Now for our History View, it's not a whole lot we actually need to do here. The chart does actually have a, does actually change its interface up a little bit. It does have sort of a mobile view here. So we're actually okay in this regard. So that about wraps up this series here. So now we have this very simple little project that can hopefully give you a good sort of introduction to Perspective and how it works, but there's quite a bit more to learn. I'd recommend you check out the other Perspective videos here on Inductive University, as well as the written documentation we have in our user manual. On top of that, we also offer Perspective training classes So if you'd like to sign up for that, feel free to reach out to us to learn more. Thank you for following along with this series. I hope you learned quite a bit about Perspective and I wish you luck on your next project.