Search
Close this search box.
Build Your Digital Infrastructure. Register for the ELEV8 2024 Event Today.
By Laura Strydom
16 October 2020

How-To: The Power Of Perspective: How To Utilise Breakpoints For Responsive Ui Design

Share

Transcripts

00:00
All right, I think let’s get started here this afternoon. Well, again, thanks a lot everybody, for attending our Friday changemaker sessions. It’s something that we’ve started to do here at element eight, and it’s literally just a little bit about having a little bit more technical deep dive session in some of the topics that we encounter. And we cover that for all the products that we do distribute, the ignition ScADA software, the Canary story, and also the flow information platform. And what we’ve got on for this week’s session is we’re going to have a little bit more deeper dive into ignition. And this is the fourth session that we’ve been hosting. And this time what we’re going to look at is how to utilize breakpoints. 


00:50
When I want to really have a UI design that’s responsive, doesn’t matter if I’m going to open it up in my browser, it doesn’t matter if I’m going to open it up on my mobile device. I want to have the same kind of level of experience and obviously cater for these different resolutions that we have for our different views that we’re going to use being a browser or a mobile phone. I’m going to show you guys how easy it is to do that with the perspective module that obviously comes with the ignition platform. But before I go into doing a lot of design, I just quickly want to give you guys a little bit of an intro of all the new features and functionality that they are bringing into ignition 8.1. 


01:34
So I’m just going to quickly go run through a few of these highlights and then we’ll get cracking with building out a few mimics here on the screen. Now, if you guys don’t know, ignition 8.1 is currently what we call in a release candidate phase. So that means you can actually go and download it from inductive’s website. You can install it, you can play with it, but it’s currently not the last release. So obviously I won’t advise to install it or upgrade your production facilities, but you can go and play with it, see what the new features are. They’ve really added in a bunch of new features and functionality into the product. And I’m just quickly going to highlight a few of these main features that’s coming with ignition 8.1. 


02:18
The good thing about ignition 8.1 is it’s going to be the long term support release or the LTS release for the ignition platform. They taking all the performance enhancements that they’ve been done from ignition 8.0 and then putting it into 8.1 as a final release. So that will be our lTs, our long term support release going forward. They’ve added in a new few features, a lot on the perspective module. So there’s a little bit of features that I can show you guys in perspective that they’ve added. They’ve also included full identity providers. From a security perspective, support. Now idps was available in perspective, but it wasn’t available for the gateway or for the designer. 


03:07
But now when I actually log into the designer, I also can access or log in with my IDP provider as well, not just the native security that I get with ignition. They’ve also included a whole bunch of docker images. So that’s great for us as system integrators because I can very easily spin up a new docker image of an old version of ignition, a new version of ignition, so I can have all of these docker images that I can very quickly spin up and it’s something that they will maintain. So these docker images are maintained by inductive themselves. They streamlined the tag browser design a little bit and you’ll see that if you’ve been playing a little bit in the designer, when you see me build stuff out, you’ll notice that the tag browser does look a little bit different. 


03:55
And we can very quickly highlight that when I actually build it out. And then they literally redesigned a little bit of the workspace or the start page when you commission your ignition system for the first time. Features that they’ve added to perspective, they’ve added in the concept of perspective workstation. Now this is very exciting because as you know, perspective was an HTML five browser based client. So you log your session for your SCADA solution basically in your browser, but there’s no ways to let the operator not be able to open up another tab or go into the Windows menu. Now what they’ve done is they’ve created a little app, they call it perspective workstation. 


04:40
And now I can actually launch my perspective project in such a way that it logs out the window and I can’t get the operator to actually navigate to different tabs in the browser, et cetera. So very exciting from that perspective. They’ve added in some new symbols as well, some new valve icons, motor icons, pump icons, tank icons as well that we can now utilize in our perspective project. They also added in a new chart type, which they call the power chart. Now a little bit more on workstation, obviously it’s part of the full perspective module. So when you design your perspective project, it will work in workstation. You don’t have to do anything different from that perspective. It is a separate license component. As you know, you can license your perspective either browser base or per mobile, or you can do both. 


05:34
Now you’ve got this additional license component which we call workstation that we can add to our licensing component as well. It also provides a launcher when you run your perspective workstation component, just like the old vision launcher as well. So it’s got a very similar look and feel to that. And you can also put it in obviously in kiosk mode to always go and launch in full screen and then lock out the OSO to be able to prevent guys to actually Windows operating system at the back end at all. Currently in the Reese lease candidate, I know that lockout mode is not fully functionally 100%, but it is something that they’re going to bring into the future. Nice thing also that it’s going to do is also allow us to have multi screen support. 


06:23
Obviously that’s also something that with just a normal browser was a little bit difficult to do, especially if you have one or two or three or four screens that you drive in your production facility from your one skater project. What workstation does is it actually allows us to now and launch our perspective projects in a multi display support kind of scenario. So just a little bit of a way of look of how the launcher works. As you’ll notice, the launcher is very similar to the normal vision client launcher and the designer launcher. So they kept that design consideration the same. And you’ll notice there that I’ve got the display configuration open there that you can actually now say, which page of your application do you want to open up on your primary display and have that multi screen support. 


07:12
From that perspective, we spoke a little bit about it. They’ve added in some new symbols as well into the product, and you can now have a range of either representation as a pnid kind of symbol for motors, pumps, tanks and instruments, or you can go into a little bit of a more simple physical representation of those devices and then you can do the typical kind of mimic components as well. So I can add these straight from a library into my perspective module. I’m going to build a few of these out when we look at our breakpoints design very shortly here. And then obviously the new chart type that they’ve added for perspective as well. 


07:55
They call it the power chart and it’s got a whole bunch of features and functionality that you can now use and historize or show your historized tags and values right there in your perspective module. We talked about the IDP support, so this is now obviously a little bit more of the platform features that they’re going to enhance in 8.1. IDP was there for perspective projects in the past, but they now have extended that to vision, the gateway and the designer. So you’ll notice when you log into the designer in 8.1, it’s a little bit of a different look and feel of what it was in the past. It’s because they’re utilizing that same concept that you used for perspective when utilizing an IDP or an identity provider. 


08:43
And as I mentioned, they will now also release docker images so we can have very fast and very quickly spin up a different docker image for different versions of the platform. So great for us as sis that needs to maintain and for our partners that needs to maintain different versions of different projects on different sites. You literally can just very quickly spin up a docker image of the new component. All right, now we’re going to talk a little bit about UI design, and we’re going to talk about how can I create a mimic that’s going to show one way on my browser versus another, or a different way when I’m looking at that in my actual mobile device. So I’m going to go over to my vm here. 


09:31
So there I’ve got the designer open already, and I’ve got a little bit of a sample project that comes with 8.1, by the way, open here. So it’s something that they’ve also included in 8.1. It’s the concept of a quick start, and it really has a whole bunch of navigation options, a whole bunch of predefined graphics and layouts that you can utilize in your projects. And I’m going to go and explain a little bit about what is these different layouts and components that we have from that perspective. And especially when we talk about different containers and different ways that we can build our screens inside of the perspective module. I’m just going to minimize this quickly because I also want to get my phone in here because then you guys will see the difference in the way that these things operate. 


10:21
So I’m going to show you guys the different containers that we can utilize to build graphics inside of perspective. And we’re going to run through these different containers here in a second. I just quickly want to get my mobile phone here next to it as well. There we go. All right, so I’m going to log into my phone as well. I’m going to open up my application. And yes, this is live as you can see from all my WhatsApp messages. But basically what you’re seeing is the exact same project either launched in my browser as well as in my mobile device. Now I’m going to go to that exact same component there, which is the containers, and we will see how different they look when I’m looking at from a mobile device or when I’m looking at it from an actual browser. 


11:16
And it’s basically based on the resolution of these devices. So the first kind of component that you can go and create screens in perspective is what we call a coordinate component. Now coordinate component is pretty much what were used to envision, right? You can take a symbol of a tank, you can take a symbol of a pump and you can pretty much put it on any xy location on the graphic. And you’ll notice that when I use this kind of component or to create a perspective view on the mobile device, I need to actually go and scroll to the left of the right. The reason for that is obviously I don’t have enough real estate when I look at pixels to have all of that components on my small resolution on my mobile device. 


12:03
So I need to scroll to see the information that’s either on the left or the right of this particular mimic or graphic that I’ve created. So coordinates, components does have its drawbacks, especially if I want to now show it on a mobile device. The next type of view that we can create is what we call a column view. And a column view is literally there to create different columns and show different components in these columns. And the component size will be the same for every column. You’ll notice that I can specify a different size for that column and I can go and specify which views do I want to go and view in these different components that we’ve got. And the one that we are very interested in and the one that I’m going to build out today is obviously the breakpoint view. 


12:52
Now the breakpoint view changes the way that graphic component is shown depending on my resolution. So you’ll notice on this one I’ve got all my views in horizontal way when I look in my big browser, but obviously it’s a different way when I look at it in my mobile device. And now I literally just have to scroll up and down to see all the different information that’s been represented on my mobile device. So breakpoints is a great way to cater for different form factors, great way to cater for different resolutions. And I can actually go and change a single view to show complete different types of data depending on the resolution that we have. And that’s exactly what we’re going to build out. Another very important and very powerful container type that we have is flex. 


13:42
Now, a flex container will look at the size that’s available and depending on which one you want to grow and shrink, it will try and determine how much of the real estate it can actually take up. So you notice it does look different on my mobile device depending on the resolution versus the full blown desktop. So the flex will try and grow and shrink to the available size that’s available for me in these different components. Now, I can either flex in a row component like we see there, or I can go and flex in what we call columns. So you’ll notice that I’m flexing up and down depending if I flexed on a column component or not. 


14:20
So I’m going to utilize this flex layout and I’m also going to utilize the breakpoint layout to create two different types of components when I actually run my project so that I cater for both scenarios and both form factors where I want to open up my projects. Cool. I’m going to just hide my phone for a bit, make this to a big screen again, and let’s start building out these different types of views that I’m going to have in my project. So I’m going to go back to the designer. So you’ll notice there I’ve got the perspective component already selected. So I’m going to go and build out some perspective views in my project. For the guys that was familiar with a little bit of 7.9 and 8.0, you probably noticed the difference here in the tag browser. 


15:14
Just to quickly highlight that, as we mentioned, the new feature of 8.1, you’ll notice that tags and udefined definitions are now split out. And there’s also a new way to actually go and browse for your devices and add new folder structures. So they’ve changed a little bit the way the look and the feel of the tag browser. And you can notice from the icons as well that they highlighted the way to see if it’s an OPC item or a query tag or a memory tag, et cetera. So that’s one of the things that you’ll notice when you start playing with a release candidate, is that the tag browser does look a little bit different. But I think the changes that they made for that is great. Cool. All right, so let’s create a view. I’ve got my little change maker Friday folder here. 


16:00
Now you’ll notice that I’ve already created a few widgets. I’ve got a motor widget here that’s just a very simple little motor. And I’m utilizing the new icons that’s available in the perspective library. So you notice there’s a motor. I also have an image of a pump as well with a little spark line that just historize and see if I’m controlling within my particular band. Again, I’m utilizing the new symbol components for that as well. I’ve got a little tank here or a vessel that’s looking at my level. Sure, it’s horrible. It’s completely empty. But again, utilizing the new components that I’ve got inside of the perspective library. 


16:42
So you guys will notice if you start playing with this and you go to the components section right at the bottom, you’ll notice that they’ve added in these new symbols and you can add a motor symbol, a pump symbol, a sensor for analog devices, valves and vessels into your perspective project. Cool. So let’s quickly build out a graphic. So I’m going to create a new view inside of my project. And this is going to be my mimic. This is going to be my full blown plant mimic that I would like to show in my big browser space. All right. And when you create a new view, that’s where you’re going to determine what type of container will this be? 


17:27
Is it going to be a container, a coordinate container, as we mentioned, where I can actually place the components wherever I want, depending on the x and y location. Is it going to be a column container? Is it going to be a flex or very importantly that Breakpoint container to cater for different resolutions when I’m going to open it up. So my plant mimic, I’m going to do a coordinate for that. So this is going to be my actual mimic. I’m going to drag things around and place them on specific locations on the screen. So I’m going to use a coordinate container for that. So I’m going to create this view right here. And this is going to be my mimic. Now, as you notice, I can obviously resize it a bit. So I’m just going to give it a little bit more space. 


18:10
And I’m going to go and add these already created widgets that I’ve created prior just on my mimic canvas here. So I’m going to go and open up the embedded view component. The embedded view component is a component that I can utilize to embed already existing views and you notice because it’s a coordinate container, I can move it around based on the x and y location of my screen. Right. So that’s the first thing about container or coordinate containers. I can move them around. Now all I have to do is in this case, I would like to show my pump in this container. So there I’ve got my little pump and I can move it around on the screen. Now obviously the pump is pumping products into my tank. So the next component that I’m going to add is again, embedded component. 


19:04
I can move it around. And this time I’m going to go and move it to and select my tank mimic that I’ve already created. So there’s my tank. I’m just going to make it a little bit smaller here so I can see what the product is that’s going into my tank. I’m going to create another one just for the valve or the dump valve that’s coming out of this tank. I’m going to add that to my screen and I’m going to go and select my little valve that I’ve created here as well. There we go. On top of this, I also have a fan or a blower fan. So that’s the last component that I’m going to add in for this plant mimic. It’s just the status of that blower fan. 


19:48
Resize this a little bit and again, go and open up my fan motor that sits on top of my screen there. Right. So you guys can get the idea. You can build out your typical kind of plant mimics with this. Obviously. I would also potentially like to see some alarm statuses. So I’m going to add in my alarm status table here at the bottom as well. So I can see what is my current alarms that’s active on the plant. I’m just going to go and give it a little bit less real estate. So I can just see what is the first critical alarm that’s active. And then the last component that I’m going to add is the power table. Just need to filter the right component here. So the last thing that I’m going to add is my plant power chart. 


20:36
So I’m going to add that as well and just move that a little bit into space here so I can actually see some historized values on my mimic as well. Okay, so a very simple kind of mimic that I’ve created. Nothing fancy adding in the different components or widgets. The last thing that I want to potentially do is I’ve got some weather information as well. So I’m going to add that as well to my screen here. So I’ve got a little widget. It also gets some weather data for me. So I’m going to just add that as embedded view right here at the top so that I can see what my actual weather information is. Now this sits in a little different location underneath widgets. 


21:24
I’ve got my little weather station there and that’s going to tell me what the current humidity and sunshine and speed is. So you notice as I move things around they change in size. So there you go. There’s my very simple little plant mimic. If I put it in runtime, I just want to add one tag here to my screen. So this is obviously all the easterized values that I’ve got on my plant floor. I just want to go and add one of them so we can see that on the power chart as well. Great. So there’s my little screen, there’s my little HMI. This is what I’m going to see when I actually show it on a browser. So I’m going to save that out into my project. 


22:09
Now when I want to show it on my mobile device, I don’t want to be able to scroll up and down to see the actual entire mimic. I just want to see very key components to make a decision when I have to open up my mobile device and see what’s actually happening on my plant floor. So what I’m going to do now is I’m going to create a new view. But in this case I’m going to create one that’s going to cater for my mobile device. I’m not going to create a coordinate view. I’m not going to be able to put it into any place that I want. I’m going to use a flex container. Now the flex container, obviously as we mentioned, it’s going to try and space the components that I add and whatever size is available. 


22:53
It will grow and shrink depending on how many of those components I add to the screen. So I’m going to create a flex container for this, create this view. And again, I’ve got a blank canvas that I can add. Now again, I’m going to use the embedded view component to add all of my different containers. And you’ll notice now when I start adding these embedded views, it will go and space it in my flex container. Currently I am flexing depending on the columns. If I change this to a row flex, obviously it will then flex the components as rows, but I want to keep it as a column container. And obviously I’m going to do exactly the same here. So in the top one here I want to see if my pump is running or not. 


23:41
At the bottom container here I want to see what is the actual level of my tanks. I’m going to select my tank here. And at the bottom here I want to see the status of my dump valve. So that’s the only components that I would like to see when I look at the mobile device. I do not need to know the weather information. That’s not very critical for me at this point in time. But maybe the last point of information that I would like to see on my mobile device is I’m going to just add another embedded view at the bottom here and that’s going to be my fan, if my fan is running or not. So I don’t care about the weather when I look at my mobile device. That’s obviously and I don’t care too much about the alarm information. 


24:31
I just want to know if these key critical components that I’ve got on my plant floor is running or not. I’m just going to make it a little bit smaller here not to eat up too much of the real estate. So there we go. There’s the key components that I would like to see when I’m in a mobile device perspective. Now I need to obviously add these two views that I’ve just created to that very special view which we call the breakpoint view. Because the breakpoint view is going to determine based on the resolution which one of these two views is it going to show. Is it going to show the mimic or is it going to show just the one that I’ve created to be able to be shown on my mobile device? 


25:17
Now I’m going to right click here and I’m going to create another view. In this case I’m going to call that view BP just for short, for breakpoint. And very importantly I’m going to go and add or choose the breakpoint container type. For this scenario I would like to be able to navigate to this particular view. You’ll notice that for my plant mimic and for my mobile mimic I did not include a URL because I don’t want to go and be able to navigate to them individually. I would like when I navigate to this one view or this one page in my URL to automatically determine which one of these views it’s going to show from a graphical perspective. So in this case I am going to go and add a URL to my project as well. 


26:05
And I’m going to go and create this breakpoint view. Cool. Now the first thing that you’ll notice from a breakpoint view is at the top here. I can go and specify at which point or at which resolution do I actually want to go and switch over between the two screens. If you’ll notice, it’s got the concept of a small and a large component. So anything that’s going to be greater than 640 pixels, it’s going to be determined as the large view that it needs to show from a breakpoint perspective and anything smaller than 640 pixels, it’s going to then go and see that as something that I need to cater for a smaller resolution like my mobile device that I’ve got. 


26:52
Again, all that I have to do is obviously now link my mimic and my mobile screens that I’ve created depending on the small or the large component. All right, so I’ve got large selected. So that’s the one that I’m going to do first. And again, I’m going to go and drag that embedded view in here. And on the embedded view I’m going to say when I’m in my large mode, you’ll notice at the bottom there’s also a property or a position property that says I’m currently in this large component. Please go and show my full blown mimic. Cool. I’m just going to give it a little bit more real estate here on the size so that it all fits into my graphic that I’ve got here. Perfect. So there’s my large view. 


27:45
So this is the view that I’m going to see when I have enough pixels. Again, what I’m going to do now is I’m going to go and change this. I’m going to go to the small view from that perspective. And on the small components I now need to obviously add another embedded view. So on the small side you’ll notice that I’m now selected back to my break container. Currently I’m in the small mode and that’s why you don’t see anything because I haven’t associated any views on this smaller size. So I’m going to do exactly the same. I’m going to go into my perspective components. I’m going to take the embedded view here and I’m going to slap it onto the screen. And now you’ll notice that I’ve got two embedded views associated with this breakpoint. 


28:34
And obviously this guy is now linked to the smaller resolution. So the property of the size is small. And I’m going to go and select that mobile graphic that I’ve just created in there as well. And I’m just going to give it a little bit more size here to cater for my mobile device. Cool. That’s it. That’s how easy it is to utilize the breakpoint and determine where it needs to break to show you the different components on the screen. Now you’ll notice with this sample application that we’ve got here that there is already a menu structure associated with it. So underneath the applications there are already some applications that’s been added there. And on my mobile device I also have a menu structure. 


29:25
So all I’m going to do now is just give it the way to navigate to this new view that I’ve created, the BP view. And remember, I associated a URL to that view. Right. So if I go back to my initial perspective project, you’ll notice that I’ve got a BP page. That’s the new URL that I’ve created. And that URL will automatically link to my view component that I’ve just created, the BP view. Right. So all I’m going to do here is just add this to those two menu structures that I’ve got. So I’m going to go to my application menu structure here. That’s the one that you saw in the browser one. And all I’m going to do here is just add another component to the menu tree here. So you’ll notice I’ve got currently five menu items. 


30:18
All I’m going to do is add a 6th one. And obviously the target for this is going to be my BP URL. So I’m just going to type in there BP and I’m just going to give it a label. So in this case, this is my new breakpoint demo that I’ve created. Cool. All right, so you’ll notice it’s added in a scroll bar for me. And now I’ve got my new menu structure that I can go and select for. I just need to do exactly the same for the mobile device. The mobile device does have a different little menu structure because of the resolution and the space or the real estate that’s available. So in this guy, I’m just going to go into the menu items here as well. You’ll notice that this is a submenu item. 


31:06
So you’ve got home ignition layout and components. So the second one there is the ignition one and that one’s got two items. It’s got the actual projects that we’ve got there as well. And I think the second one is the actual project that we need to do. Let me just see. Yes. Applications, real time control. Perfect. So I’m going to add to this component just a new menu structure. And that menu structure will now obviously target that exact same page, which is my breakpoint page. And I’m just going to give it a little bit of a text here to say this is my breakpoint demo. Cool. That’s it. So if I save this and go back to my component here, you’ll notice that, hey, it’s already updated. So there’s the scrolly bar with my new project that I’ve added to here. Select on that. 


32:07
And there we go. There’s my new mimic that I’ve just created. Now, if I’m lucky and everything goes to plan and if I minimize this and I start reducing the pixels or the resolution that’s available, at some point it’s going to break and change to the mobile view. So that’s great. So that lease shows that at my breakpoint resolution, it was automatically cut over to the different views that I’ve got. So let’s see if that actually works on the mobile device as well. So I’m just going to get my mobile device up here again if I can get to this top bar to minimize my vm. Come now. Sorry. There we go. I’m going to just minimize that. Let’s go back to the mobile device. Let’s open that. It’s just going to reload it. 


33:13
And if I’m happy or I should see a new menu item under ignition 101 underneath applications for my demo breakpoint. So that’s the second one that I’ve added is that demo breakpoint section. So if I open this up. There we go. It automatically shows the small one because that’s the one that I’ve created. And obviously the resolution of this device only caters for that. So it’s not even going to show me the big mimic that I’ve got here. It’s automatically going to show me the mimic to handle my mobile device if I switch it around. There we go. Now I’ve got enough real estate on the phone as well. And now I can actually go and use my pinch and zoom and move around to move around the coordinate container that I’ve got in the graphic. 


34:01
But if I swap it to the side here, it will obviously now resize it to the mobile view. So I hope that showed you guys a little bit of how easy it is to cater for the different devices that we’ve got depending on the resolution that we’ve gapped and how we can automatically switch over to these different ways or different graphics that we’ve created depending on the resolution using that breakpoint controller. So very important to understand what these different component types are and very important to understand what the different component types are going to do with your graphical layout from that perspective. One thing that I also want to quickly show you guys is if I go back to the sample project that they’ve got created, they also have sample layouts that they’ve already created for us. 


34:52
So if you want to have a scrollable canvas kind of layout, especially when you do like GPS location projects, et cetera, they’ve got a sample layout for that. So if I can just show you that as well, you can go and obviously install this as well. You can have this floating menu structure, you can zoom in and out in this kind of perspective idea to see your different map integrations. And obviously if I open this on my mobile phone, it will look completely different. If we look at the list panel or list panes kind of project or layout there, I’ve got a whole bunch of list items from a heading perspective, from a menu perspective, and obviously I can go and change that as well. So all of these layouts is already predefined for you in the sample project. 


35:44
You can literally go and use them and change them depending on what the need for your application is. But it’s a very good starting point to understand how these different layout components work and how you can utilize them to build your applications. Now, the last thing that I want to show is actually a new feature, obviously with 8.1 and that’s the workstation feature because as you notice, because I’m in my browser here, because prospective projects you launch in your browser, I can actually open up new tabs, right? And I can actually go to my windows start menu at the bottom here. So the operating system is not locked out. And obviously it’s going to be very difficult for me with a browser perspective to have multi screen support because everything is now hosted in my browser. 


36:36
Now I’ve already downloaded workstation, but you guys will notice on your gateways, your new 8.1 gateways, it looks a little bit different. You’ll notice that the way or the icons that they’ve created or shown is a little bit different. And the layouts are where certain things are a little bit different. So they’ve changed it into this kind of concept of build it. Then obviously to build you need to download your designer and to run it. There’s now obviously the things that were used to the Vision client launcher as well as the perspective session launcher. So this will still launch it in your browser as normal. The Vision client launcher will launch it as normal for a vision project. But that’s what’s new is this perspective workstation. 


37:21
So this will actually launch your perspective projects almost as if it was a vision launcher to lock out the actual operating system. Now I’ve got it open here. I’ve already downloaded it, so you’ll see, there it is, perspective workstation. When I open it here in the bottom, you’ll notice that it looks and feels similar to the designer launcher to the new Vision client launcher as well. So it all looks exactly like you used to creating these launches. When I click on this and click on manage, this is now where you can decide which way do you want to launch it. Do you want to launch it in the kiosk mode or in the windowed mode? So obviously windowed mode, you’ll still be able to get to your Windows components. Kiosk mode will block it out. 


38:05
You can’t get to new tabs, you can’t get to your Windows stuff. So I’m going to show you that on the kiosk mode. And then if you had more than one screen connected to your computer at the page, configuration is where you will go and decide which initial display do you want to show on screen one and which initial display you want to go and show in screen two. And currently I only have one display, so it will identify the different displays that I’ve got. But I could have set up which is the initial display and is it going to show on the primary display or your secondary display depending on how many displays you’ve got configured? 


38:44
Okay, I’m going to say, okay, here I am quickly going to launch this guy and it will go and launch up my perspective workstation in kiosk mode. So let’s see how that’s going to look. So what I’m going to expect to see is I’m just going to open it here, is that it’s going to go and block out my os. It’s not final, it’s still in the release candidate phase, so I still can get out of it by some shortcut keys. But just to give you guys an idea of how it’s going to look and how it’s going to operate, it’s literally going to look like your normal perspective client that’s in your browser that we’ve just seen, but with the difference that it’s actually now locked out. Now I can still exit it. So shortcut w to exit the full screen view. 


39:35
But you’ll notice now that there we go. There’s my perspective project. I can’t access any more tabs. It’s not physically in a browser anymore, but it is exactly the same project as that I’ve just done. And you’ll notice there is my little breaking point demo that I’ve just created as well. So there we go. And I can launch it. And I am locked out. So I can’t get to the windows components. I can’t get to the server to actually close this application for now. What was that? Shortcut w shortcut w. There we go. Cool. Almost locked myself out of my VM there. Right. 


40:13
But just to quickly give you a quick example of the workstation component, that’s very exciting for us that we don’t have to obviously launch it as we did here in our browser, and we can actually utilize workstation now to run it on panels, panel, pcs to devices on the plant floor as well. So I think the message that I want to say with this is that there’s always this kind of confusion about will perspective be able to create a full blown SCaDA solution? I think with workstation, definitely it brings that familiarity from how we’ve launched ScADA projects in the past into the future as well. So with that definitely, perspective is definitely something that you guys need to start playing with, build on, and it’s definitely something that we will very highly focus on in the next tech sessions. 


41:08
I think the next three tech sessions that we’re going to have from an ignition perspective is particularly going to be around perspective and the capability of what we have from a perspective side. Cool. That’s what I’ve got prepared for you guys for this Friday afternoon. If you’ve got any questions, you can utilize the Q A section on the webex there. So if you want to post me any questions at this point, feel free to post them in the Q A session. I’m going to wait a little bit for Q A and after that I will release. You guys can have some nice Friday afternoon. I see there’s a chat coming. Thanks, jills. No questions. You guys are letting me off easy this Friday. All right. With that, I say thanks to everybody. 


42:20
Obviously, if you’ve got any topics or suggestions that we like to cover in these tech sessions, please feel free to contact us at information at element eight. Or you can email me as well. Leonard Smith at Elementa Co Za and we’ll work in those topics and components into our next or future sessions as well. Awesome. I say thanks and enjoy the rest of your Fridays.

You might also like