0:15
Good morning everyone. Thank you for joining us on this webinar on sizing WebMI for mobile devices.
0:22
It’s about 26 minutes of presentation but if you’ve any questions as usual just go straight in with them and we’ll get them at the end. Hello and welcome to today’s webinar.
0:30
Today we will look at sizing WebMI for mobile devices. Let’s take a look at our agenda for today.
0:38
We are going to start with a quick review of WebMI then we are going to talk about the workflow you will need to follow.
0:45
If you are importing WebMY into your machine control project, we will go through web designer projects.
0:52
What are they and how do we use them to create mobile centric WebMY webpages?
0:59
And there will be demonstrations throughout and we will finish with a Q &A session.
1:04
So what is WebMY?
1:06
It is the ability of foreigner controllers to serve up webpages for the purpose of monitoring and control.
1:12
These webpages served up by the Horner Controller are HTML5 based, which means they are compatible with any modern web browser, does not matter whether we are talking desktop or mobile.
1:27
It should be compatible now just about all modern Horner Controllers, at least all of them with Ethernet port support WebMI.
1:35
Now for most controllers it does require one time upgrade that you will have to pay for through a WebMI voucher unless you are talking about compass models because with those models WebMI is built right in.
1:51
What is the workflow we will need to follow if we want to use WebMI?
1:56
Well first of all we are going to do our normal machine controlled project development for logic and our screens and our testing and then at the end is the point in which where we are going to start thinking about incorporating WebMY.
2:12
So if you have got a non-combat controller maybe a prime or a micro you will need to purchase a voucher and then enable WebMY functionality in your OCS unit and before you deploy it.
2:26
Now once you have done that then you need to decide how do want your web pages function?
2:32
Do you want the remote screens to mimic the OCS screens exactly?
2:36
In other words use the same screens that you have programmed into your OCS as a remote web pages.
2:43
Is that where the approach you want to take or do you want to take an approach where you create completely separate screens with different information all coming from same controller but formatted differently or size differently?
2:56
So there are two different approaches you can Now let’s talk about the workflow where your webpages are going to match exactly the screens that you have programmed into your Horner OCS for your local operator to use.
3:10
Well if that is the case, once you follow the previous three steps we just talked about.
3:15
Now what you are going to do is, from Cscape, you are going to use the built in WebMI configuration functions that are available to go through and configure and setup WebMI and we are going go through those in our presentation and then as a last step you’re going to publish your web pages to likely a micro SD card that is going to be housed inside the Horner OCS at runtime and those web pages will be served up from that micro SD card.
3:45
Now remember your web pages even though in this scenario we just have talked about are identical to your Horner OCS screens and they are the same shape as your Horner OCS screens, it still can be viewed from a tablet or a phone or any device.
4:01
Again, it does not have to be the same size and shape. Now let’s talk about the workflow.
4:07
Where this time instead of matching exactly the screens we created for our local operator, we are going to create new web pages, maybe with some of the same information, maybe with different information, formatted in a different shape so in this scenario instead of just building off our existing projects what we are going to do is we are going to create a new project in seascape called a web designer project and we will demonstrate later on in this presentation we are going to import the variables from the OCS that is running our machine and also remember that is the same OCS that is going to be up those webpages.
4:49
So we are going to import the variables from that device into our new web designer project in Cscape.
4:55
Then we are going to develop webpages in Cscape just like we are developing screens except this time the screens we develop more than likely are going to be shaped differently than your typical OCS screen.
5:07
Once we have done that we are going to publish our webpages to microSD, stick the memory card in the OCS and we will be good to and this time when we use a web browser whether it’s on a computer or phone the shape and size of the screen is going to look a little different than the screens that are just by nature located in the OCS.
5:31
Now what are the web designer projects in seascape?
5:34
Well a web designer project in seascape are created solely for the purposes of creating web pages not for doing entire machine control tasks including logic and screen so web designer projects are saved as CSP files but they do not contain all that extra material no logic no hardware configuration no protocol configuration because their entire job is to create screens that are typically served up as web pages and when you choose web designer as the target and hardware configuration for your project you will you have got a whole load of different resolutions and sizes and options in terms of what screen shape you want to use for your web pages.
6:19
Now let’s talk a little bit more about the available web designer options in terms of device type so you can choose a resolution from the pull-down list that matches an existing OCS display shape so any of the existing OCS resolutions that are available commercially. You can choose those as the resolution for your web pages.
6:41
You could choose to match the resolution and the size of your typical computer monitor something like a 1920 by 1080 which is a typical aspect ratio for a lot of computer monitors or you may choose to match a mobile device shape maybe for a phone or a tablet.
7:00
So you have got lots of choices when it comes to selecting screen geometry.
7:05
So now if we take a look at the available resolutions there are not OCS resolutions the ones that are more typically associated with monitors or phones or tablets.
7:17
These are the options that are available to you from the pull down list from the previous page.
7:23
Now keep in mind let’s say you are going to be viewing this on a 4k monitor not a 10 ADP monitor on their computer.
7:30
What we are really talking about is the available resolution that we have for creating screens or creating webpages in Cscape, aspect ratio that those screens are created in.
7:43
So 4K screens and 1080p screens have the same aspect ratio and even if there is an oddball aspect ratio you are still going to be able to view your data on the screen.
7:55
and because we label something in the web designer list of available resolutions as for a tablet or a phone because some tablet resolutions work 5 times faster and better on phones and vice versa Now on the list you will find a couple different things that we should explain before we move on First of all you will find some of the resolutions are marked with a plus and some of them do not have that For instance, phone portrait 900 by 1950 or phone portrait plus 900 by 1950.
8:33
And what that means is, if you are using canvas to serve up your web pages, you will need to pick something from the list that has a plus included in the description.
8:44
If you are not using canvas, if it is a micro or a prime series for instance, you choose of those options that do not include the plus in the description.
8:54
Now what about these ones at the very top of the list and you can only see one in that graphic there even though there are more above that. What about the ones that are labeled as InVision?
9:06
Well you can also use your web designer to create projects that would be viewed using InVision and InVision is a PC program that Horner created allows you to operate screens remotely but this time from a PC program not a web browser so the items on the list have that in vision in description those are for that purpose they will not be used for creating web pages.
9:31
Now when you are going through the workflow and you are done with your control project and creating your original screens that run on the OCS then you have got as we mentioned earlier in the workflow some web in your to be done and so you will select the user interface tab in Cscape 10 to have access to those functions and we have described what each of those functions are here on the screen which we are going to be demonstrating most of these later in the presentation.
10:01
As we mentioned earlier that some of the options for web designer targets have a plus in the description and those are the ones which you need to select if you are using canvas as the device that is to be serving up those web pages and with Canvas you have more options for configuring WebMI and using WebMI than you do with Micro OCS and with the XL Prime.
10:25
So we are showing you here on the screen the same option dialog for WebMI configuration as seen for Canvas on the left and as seen for Prime and the Micro on the right.
10:37
So you can see there are a lot more options that can be figurative using canvas. Let’s start our demonstration.
10:45
We want to go through the project that is running in our sample OCS here on the bench.
10:50
So if we take a look at the bench you can see we have got a simple canvas for running a simple demo program with a simple screen.
10:59
We have got some LEDs that are changing based on the machine cycle time simulation that we are doing here.
11:06
We start and stop it.
11:08
We can slow down the cycle on the machine and we can even stop the machine if we choose to do that. So this is a very simple demo.
11:16
It has got a little bit of ladder logic in here for making things flash and doing the stimulation.
11:23
It has a very simple screen as you can see. There is a screen graphics so everything is just a simple program.
11:30
Now if all we want to is create webpages that exactly match what we have got here on the OCS.
11:37
That is a very simple process.
11:39
All we have to do is go to the user interface section and you can see here we have a WebMI area where you can do things like configuration options, licensing.
11:49
Now let’s start with configuration options here.
11:52
Remember this is a canvas controller so we have a lot more configuration options for our canvas controller than we have with other controllers so for instance we can change the title that shows up in our webpage we can change timeouts but where things really change is for instance ability publish our web pages not only from removable media which is the option we have chosen here but also from internal memory on a canvas so that is an advantage and then other thing you can do which is unique to canvas is you lot of control over your user login configuration here.
12:31
So this is the box that shows up for user login, for username and password.
12:37
So we can go in here under configure and we can change the size of that box and we can change the location of that box on our overall screen.
12:46
So that is important because there are scenarios depending on the target.
12:51
Maybe you have got a high resolution target where you may find that this dialog box is not sized for what you need.
12:58
Maybe it is too small, maybe the fonts are too small, whatever the case may be. That is in your scenario.
13:06
Just go in here from the options to go to configure and then change the font size of your legend so that you end up with the type of login you want. So that is an important step we want to highlight here.
13:18
So this is the option configurations we have also got licensing also remember with canvas it is pre-licensed for WebMI.
13:28
There is no need to do any of those variables because this is our original program that is also running in our OCS.
13:36
The variables on our screens are the same as the variables that are running on our controller so this project already has a variable loaded so we do not need to do anything like importing or exporting.
13:50
We might want to export variables for a web page that is assigned around a phone or a tablet type, geometry.
13:56
And then we have got publishing to remove both media and publishing to OCS.
14:02
What is the difference here? Well publishing to OCS means we are going to create web pages.
14:08
The web pages are based on the screens we have got here in our project and we to copy those webpages directly to the OCS based on the fact that we are currently connected to the OCS. So if we do that now, we will publish to the OCS.
14:24
It has got the IP address of our OCS here. We hit OK.
14:29
It will take longer the first time you publish your webpages to the OCS. We have already previously published our pages.
14:38
There was no need to pull the memory for anything like that we were able to just go ahead and publish directly to the OCS with the memory card already installed and if our option has been selected to serve up the web pages from OCS memory then of course it would be copying them over to OCS memory internally so that is now complete so we have published our web pages exactly as they appear in the same screen geometry as they appear on our compass 4 and the publish to RM option is to publish to removable media.
15:13
So the other option we have would be to pull the memory card, install the memory card in our computer and then publish to removable media.
15:22
It would take the web pages, put them on removable media after that was complete.
15:27
We would move the card over to our OCS.
15:30
Now we may want to use that option in a couple of scenarios.
15:33
Maybe if we felt like it was taking too long to publish directly to the OCS, maybe it was a little bit too slow.
15:42
Based on the screens that were created and it is faster to publish as removable media.
15:48
So if you have tried publishing to the OCS and you are not seeing the changes in your web pages, you can always pull the memory card and publish removable media.
15:58
And then if you want to test what the website is going to look like with your default web browser on your computer and you can push the launch website after your web pages have been published.
16:11
Now let’s take a look at what things look like on a phone and on a tablet.
16:16
Just with the default web pages, now we are going to take a look at our standard web page formatted for the converse 4.
16:24
Let’s see what it looks like from our phone’s web browser.
16:28
This is just the default Safari web browser on our phone.
16:31
We will go ahead and login, you can see the login shows up, we will enter in our username and our password and you can see this webpage was not formatted for iphone but it is completely usable.
16:46
So we can see that our machine is currently stopped.
16:49
We can go ahead and start it if we want to do that.
16:54
We can go ahead and change the cycle time, if that is important to you.
16:59
Here as you can see we have sped it up, so again, not formatted for the iPhone or any other phone, but it is completely usable in this situation.
17:10
Now we are looking at our tablet, we will take a look at how this default screen geometry looks with the tablet.
17:17
You can see the fonts, because this is a bigger screen, we can see that we can read the entire username here without any distortions.
17:25
And there we go.
17:26
So same scenario with the tablet as there is with the phone.
17:31
Completely usable, maybe not ideal in terms of screen geometry, but completely usable from a tablet.
17:38
So now let’s go ahead and create webpages that are targeted for a higher resolution device like a phone or tablet.
17:47
So how are we going to do that?
17:49
Well, we are looking at our main project here that is running in the canvas or the OCS.
17:55
So one of the important things we are going to need to do is we are going to need to make sure that the program variables that are available in our webpages matches the program variables that are available in our main application.
18:10
So that is one of the first considerations we have.
18:13
So what we are going to do is we are going to go ahead and close this.
18:17
Now we are going to create a new project.
18:20
So we will hit the new button.
18:22
it looks like a standard project. So now what we’re going to do is this.
18:27
We are online with our OCS right now which means that if we are going to the hardware configuration it will automatically select the unit that we are online with which is canvas 4 here by creating a web designer project.
18:41
So we have to change the target to web designer for the series and then we need to pick the resolution out of the list here.
18:48
So we are going to pick a phone portrait because we want to have the phone in a vertical orientation we have two options as you can see here phone portrait and phone portrait plus if we have a canvas that is serving up a web pages which we do we need to select phone portrait plus so we do that here now we are dealing with a web designer project now we mentioned that a very important place to start is we need to sure that the program variables we are working with in our web designer match what is running on the OCS.
19:24
So we are going to go to the user interface section and we match what is running on the OCS.
19:30
So we are going to go to the user interface section and we are going to go to the WebMI section and under variables we are going to import variables and we are going to import them directly from the OCS we are connected to.
19:44
So we are going to say OK and then what is going to happen is Cscape is going to upload the logic and all the information from the controller where the tags are controlled within there and then as part of an automated routine it is going to get rid of the logic that you see here on the screen right now because all we are important is tags and since this is a web designer project and the logic is not part of the equation we are only interested in the tags so if we go to Program Variables section and we take a look at the Program Variables that are in our current project.
20:21
They do match what is running in the comments right now so that it’s very convenient at the starting point.
20:28
So now what we need to do is we need to go into our user interface, that section under main screens and we need to start adding screens.
20:38
Now these screens are web pages so as you can see here we have got a vertically orientated screen that we can start configuring and we can give it a name and we can also go under user interface to tools and we can set the global background to whatever pattern we want.
20:56
We can go in and set the background and we can also go in and change the grid settings.
21:02
We can go under our user interface tool set global grid settings and we just start building objects or building screens, web pages like we would if we were building OCS screens.
21:15
No difference.
21:16
So this is the method we would start from if we were going to create web pages from scratch based on different screen geometry.
21:24
So that is the method we were showing you.
21:27
So now we are going to show you after we have built some screens.
21:30
Because it takes some time to go ahead and build screens, we have created our screens with the new screen geometry.
21:38
Now if we have got different screen geometry, We might want to have different objects with different data geared at different audience that are browsing the webpages But in our case, we just use the same kind of objects and reconfigure them for this different screen geometry So again, this is just for demonstration purposes You may choose to have completely different objects on your screens than you do on the front of the OCS So we have got our screen created Now let’s go back to the user interface here and let’s go ahead and publish these web pages. Let’s take a quick look at the options again.
22:18
We have not changed anything here.
22:20
We’re going to see if those settings are going to work okay with this new target. If they do not we will go back and fix it.
22:28
So let’s go ahead and publish to removable media.
22:31
So what that means is we are publishing our pages directly to the memory card so they happen to be plugged into our computer as USB drive D we are exporting these files now and then as you could see that was a very fast process so now we are physically removing their memory carriage from our computer and plugging it into the OCS and so that process is complete now let’s take a look at what it looks like on the phone we now have a dialog box that is just not looking good that is not usable at all so we need to go in and fix that so that we can end up with a usable login dialog box to fix this we are going to go back to the user interface and options we’re going to go to the user login and configure and we are going to make the resolution 900 by so we want to change the size and the shape of our user login.
23:35
Let’s go ahead and this is the X and the Y coordinates with the user login. Let’s put it near the left and near the front.
23:44
So let’s put it at 50 pixels from the left and let’s say 100 pixels from the top and under width.
23:52
Let’s go ahead and make this 900 pixels to deal with.
23:58
Let’s make it 800 wide and let’s go ahead and leave the height 646 and under the legend let’s make this font much bigger.
24:09
Let’s make it 48 high, we are going to say ok and ok.
24:15
Now let’s go ahead and save this and just publish to remove both media and place our card and stick it in our computer.
24:24
Let’s go ahead and hit the publish to removable media button. Now hit OK.
24:30
It says exporting and you can see how quick that is. Now let’s go ahead and load the memory card and we will try it again.
24:39
So here is what it looks like on the phone.
24:41
Now as you can see the user login is much better.
24:45
Although we have made the fonts too large we will have to go back fix that later. For now let’s go ahead and log in using the phone here.
24:54
So you can see we are entering our username. Let’s go ahead and enter the password which is just 1234.
25:04
We will accept the terms and conditions and log in. And there we go, so it fills up the screen much better.
25:12
But as you can see based on the resolution this target size was based a little bit narrower still so the tablet resolution that is available in seascape as a target will probably end up working better for phones and tablets than this specific resolution does.
25:31
Everything is operating fine so there are no issues here.
25:35
If we wanted to fill the screen we would probably need to choose a slightly different resolution.
25:40
Probably the tablet resolution is what we will try next.
25:44
We made some adjustments to try and fill the screen better on our iPhone so we are using the tablet portrait plus option for our web designer target with a resolution of a thousand and two hundred wide by one thousand nine hundred and twenty tall and then we change the font size on our user login from 48 down to 36 and then If we take a look at what things look like on the iPhone, we can see it fills the screen perfectly well.
26:14
And that seems to be the target that works best for these new, modern phones with higher resolution.
26:20
That concludes our webinar for today.
26:23
Thank you so much for listening and the Q &A session will begin shortly.
26:39
Okay, that is the last webinar of the year before Christmas, we’ll be getting going again.
26:48
I’m not sure when we will have the registration links up on that but in this whole time in January we’ll have links up for the webinars in the new year again.
26:58
I don’t see any questions on that so thank you all for joining us and we’ll see you again next year.
