0:00
of our webinar.
0:01
Today we are going to demonstrate how to customize splash screens in the MicroPrime and Canvas devices, and the presentation should last around 11 minutes.
0:13
As always, if you have any questions, please add them in the question panel and we will go through them at the end of the presentation. That said, let’s get started.
0:25
Hello and welcome to today’s webinar.
0:29
Today we will have a look at custom splash screens in the Horner OCS. Let’s look at our agenda for today.
0:36
We are going to start by clarifying what we mean by splash screens and then we are going to show you how to create and install splash screens for Canvas, Prime and the Micro OCS and there will be demonstrations throughout and we will finish with a Q &A session. So what do we mean by a slash screen?
0:55
Sometimes it is called a boot up screen but this is what you see when you boot up an electronic product and these vast screens are going to contain company logos and other branding as an advertising opportunity to identify this product is from this company.
1:12
On the right there you can see the apple logo that you see whenever you boot up your iPhone, so that is what we mean by a splash screen.
1:20
Now the Horner OCS like other electronic products also has a splash screen and it varies by product line.
1:28
You can see in the upper right hand corner our traditional Horner splash screen.
1:32
We have used for a while that shows the Horner Cube.
1:35
The Cube represents the four different aspects of all in one controller, controller IO, HMI and networking.
1:43
and then we simplify things on the canvas series.
1:46
Just go into the Cscape HD along with the Horner Automation group logo but this is what we chose graphic wise to put on the screen during boot up.
1:55
You may want something different and that is what we are going to show you today.
1:59
This is how you put your image and your logo on the screen.
2:03
The first step is you are going to need to create the graphic or take an existing image and modify it to access the splash screen And to do that you are going to need to use a graphics editing software.
2:14
We are going to show you Adobe Photoshop but this is just one of many that could work.
2:19
And what you are going to be doing is you are going to be taking that image and you are going to be cropping and scaling it so that it matches the end result and that it matches the exact screen size of the OCS that you are working with.
2:32
And then you are going to export that file as a JPEG with a special name slash dot JPEG and you are going to copy that file to the root directory of either the micro SD drive or a USB drive.
2:46
Now to load that particular splash screen you go to the recovery screen we access that by pressing and holding the system button for at least three seconds you will get a special menu that pops up.
2:58
Now if you have a unit like we have shown on the screen here that does not have an indicated system key you will need to press in the upper right hand corner until all function keys and the system key slide out then press and hold the system button for at least three seconds and you will see the system recovery menu pop up and there will be an option on there to replace system graphic and that is why you are going to use.
3:23
Now in terms of specifications for that image you are going to be creating an image in the default JPEG format or RGB mode 8 bits per channel and you can see here chart of the different resolutions for the models in the canvas line here and then this is what it looks like if you take a look at the images you would create for each of the different units you can see they are scaled to different resolutions.
3:49
On the Prime series it is the same no difference you just have a new table here showing additional resolutions but everything else is still the same and you can see here here is what the graphics look like when they are scaled by resolution.
4:04
Now there is a special case, and if you are going to do a special splash screen for the XL6 Prime, you need to make sure that you keep these dark areas on the left and the right as we have shown here on the screen, otherwise this is just a standard JPEG as the rest of them.
4:20
For our demonstration we are going to start by showing you some simple steps for taking an image and turning it into a splash screen. We are going to use Photoshop here.
4:31
The steps going to be the same idea here is our image that we are starting with and if we go in and take a look at the size of this particular image you can see it is very large so let’s bring it down we are going to create a splash screen for canvas 7d so it is 800 by 480 so instead of making it 800 wide and 480 tall now let’s go back here and fit it on the screen so now we have already scaled it down but now our image is smaller in terms of pixels.
5:03
Now we just need to crop off from the left and the right to get it to 800 pixels wide.
5:09
So let’s go back here and this time we are going to go to canvas size and we are going to chop this down to 800 evenly on all sides.
5:18
It will notify us that we are going to get some clipping.
5:21
So now if we take a look at our image size, You can see we are at exactly 800 by 480, which is what we are looking for.
5:30
Now we just need to make sure we save this file as a JPEG.
5:34
We will use the export feature here and hit export.
5:38
And instead of a PNG, let’s make it a JPEG.
5:41
The default quality settings are fine.
5:43
800 by 480 and we hit export.
5:47
We will call it ACME Logo Canvas 7D.
5:51
Hit save and we are done.
5:53
So here is a file we just edited and we have put it on a micro SD drive. However, it does not have the right name, so we need to rename this from its current name to splash.
6:05
So now we have a file called splash.jpg and we have placed it on the root directory of the micro SD drive. Now we could do it on a USB drive as well.
6:16
We have installed the micro SD card here in our Canvas 7D.
6:21
Let’s go to the system menu to make sure that the file is there and ready to go.
6:26
So we will press the meter option here and slash dot jpeg is sitting there on the micro SD drive.
6:33
This is what we are looking for there.
6:35
Now if you have a unit that does not have a dedicated system button to display on the system button, you just need to press this corner right there and then all the function keys and the system buttons will slide out.
6:47
Now let’s call up the system recovery screen so we can replace that splash graphic and we press and hold the system button and there we have the system recovery screen show up and one of the options is replace system graphics SD.
7:01
Now if we were using a USB to replace the system graphics we would have to scroll down a bit.
7:06
We will go ahead and now press this button and it will notify us saying Are you sure you want to replace system graphics?
7:14
We press I do and now we just wait.
7:17
It is now saying that the replaced graphics will only take effect after the power cycle.
7:22
So let’s go ahead and power cycle.
7:24
Let’s keep our eye out for the splat screen.
7:27
And there it is again.
7:28
So we have successfully replaced the built in splat screen with the custom branded graphics.
7:34
So that is the steps you need to take on either a canvas or a prime.
7:38
The steps are the same for both product families.
7:40
So now we have covered canvas and prime and what about the micro?
7:45
The micro does not have a built in splash screen for you to replace but you can stimulate it easily enough with a graphic and some logic.
7:53
Now we are going to focus on the colour touch screen models in the micro family.
7:58
The X2 has a low resolution monochrome display.
8:02
You could do a slash screen but it is possibly going to be text based with a company name, photo, number and your web address.
8:10
So again we are going to start with a colour graphic, a scale to the proper size but in the case of the micro it is recommended a PNG format if you are using Cscape 10.
8:22
So start with graphic but this time save it as PNG.
8:26
Next what we are going to do is you are going to find an empty screen somewhere in your project and you are going to load that graphic as a full screen graphic on that screen and then you are going to write some logic to make that screen show up for the first 5 seconds or so after boot up.
8:44
Let’s start in seascape, now what we need is a blank screen somewhere in our project so our project had 5 screens created originally.
8:53
So we needed to add in another blank one under the main screen.
8:56
we hit right click select new screen it automatically came up with the next one in line which was screen number 6 we renamed it to splash so what we want to do now is we want to add a graphics object to this new blank screen it does not matter what screen number it is it does not have to be the initial screen after power up it just needs to be blank so we will go to the fixed objects go to picture graphics click and drag on the screen.
9:25
Now instead of scale to fit we want to retain the original size because we have pre-scaled our graphic for 800 by 480.
9:35
Now we would also want to max our number of colors and go select our image. Now let’s find the PNG file that we previously created.
9:44
Again PNG is what we prefer to use for our new micros with seascape 10.
9:49
We will hit open and there is.
9:51
We will go to the regular screen and you can see it fills everything up nicely and everything is scaled properly and it all looks good. We have created our splash screen.
10:02
Now we just got to get it to pop up for the first few seconds after power up.
10:07
Let’s go take a look at some logic.
10:09
We wrote just a couple of runs here so on the first scan we are going to turn off a bit called splash done and then when it is off we have got an off delay timer that is going to run for 5 seconds and then turn that bit off again but this does not force the screen.
10:27
We need to add another coil to force the screen to be displayed so we will go grab a coil, place it in an open area here on the right and then we are going to press the screen button.
10:38
Select the screen that is our splat screen that we created and leave it to force.
10:43
Because we want the screen to be displayed as long as this run is true and it is going to be true for the first 5 seconds after the first scan and that should be the logic and the screen that we need in order to create our own splash screen. Now let’s take a look at it on the bench.
11:00
So we have downloaded our program.
11:02
Now let’s do a reboot and see if it works and there is our splash screen for 5 seconds.
11:09
Now we are back at the home screen and ready to run the machine. That concludes our webinar for today.
11:15
Thank you so much for listening and Q &A session will begin shortly.
11:31
Okay, I’m back. I hope it was easy enough. I’m not greatly seeing any questions.
11:41
In this case, let me jump into the schedule.
11:58
Okay, so in June, we have three more webinars scheduled. And if you want to participate, please register on our website.
12:10
Since we still don’t have any questions, I will be ending this webinar.
12:17
Thank you everyone for your attendance and I hope to see you next week.
12:23Have a nice day.
