0:23
Good morning everyone. Thank you for joining us today on this webinar on Canvas Graphics Overview in Cscape 10.
0:31
The presentation should last around 20 minutes and if you have any questions, please add them in the question panel and we will go through them at the end.
0:41
That said, let’s get started.
0:44
Hello and welcome to today’s webinar. Today we will look at an overview of Canvas Graphics in Cscape 10.
0:51
Let’s look at our agenda for today.
0:54
We will start by comparing advanced graphics and standard graphics.
0:59
We will discuss why these advanced graphics are canvas exclusive, as well as what capabilities are included with advanced graphics.
1:08
Then we will review some of the more common canvas graphics objects listed on the screen here.
1:14
There will be demonstrations throughout and we will finish with a Q &A session.
1:18
First we will compare the advanced graphics featured in Canvas with the standard graphics featured in the rest of Horner’s all-in-one controllers.
1:27
Our standard graphics, which are used in every OCS all-in-one controller prior to Canvas, are designed for speed and efficiency.
1:36
So when you are changing screens on a controller, or when your graphics objects update on the screen, you are met with high quality performance and quick response times.
1:45
Standard graphics allow you to do nearly anything you want to do graphically, however this will sometimes need a bit of extra work.
1:53
You will often have to import a lot of images and you may need to use a lot of hidden objects in your project.
2:00
So there are some advanced techniques you need to use if you want advanced looking graphics on your screen.
2:06
However for more basic graphics, the standard graphics engine is sufficient.
2:10
There are also some limitations to the standard graphics engine, some of which we have listed here.
2:16
For one, when you are graphing variable data, the data must be in an integer form.
2:22
So if you have a floating point value in a variable that you’d like to graph or trend for example, you will need to have an integer version of that variable that the trend can use to display the data on the screen.
2:34
Another limitation with standard graphics is with the image types you can import into your project.
2:40
Here you are limited to JPEGs, bitmaps and scalable vector graphics, so this does not include some more modern image types such as GIFs and PNGs.
2:50
There is also no gesture support with standard graphics.
2:54
So standard graphics have some limitations but offer a lot of capability and high performance for basic applications.
3:01
Now we will look at our advanced graphics.
3:04
This is a more modern graphics engine, which provides more advanced tools for the system designer.
3:10
So with advanced graphics, you don’t need to use as many advanced techniques, and less image importing and hidden objects are needed for simple tasks.
3:19
We have built this advanced graphics engine using a leading third-party industrial graphics package, used in many applications such as automotive dashboards for cars.
3:29
This needed a lot of customization so that it could be optimized for Cscape to allow you to have complete flexibility over the design and provide the same efficient runtime performance from our other controllers.
3:42
Why have we not used this advanced graphics engine in other controller series such as newer models like the Micro OCS and XL Prime?
3:51
Our standard graphics used in all of our previous models are highly efficient and don’t require a lot of memory.
3:57
They also don’t need a really high-end microprocessor, allowing them to run smoothly on any of our products regardless of the price.
4:05
Our third-party package, which we designed our advanced graphics on, requires a lot more power and memory at runtime.
4:13
Our advanced graphics also need a faster microprocessor, such as the dual-core microprocessor that we designed Canvas around, which has a dedicated core to run graphics.
4:23
Next, we will discuss what is included in Canvas’ Advanced Graphics package and how this compares to our standard graphics.
4:32
For one, advanced graphics include more refined and modern graphics objects, so if you want a more advanced look for your graphics, you don’t necessarily need to import as many custom images into your project.
4:45
Advanced graphics are better at handling screen and object backgrounds than standard graphics.
4:50
You can also add custom backgrounds to nearly any canvas object.
4:55
The Advanced Graphics engine supports gestures, such as swiping and scrolling.
4:59
You can now graph all variable types, so your data does not need to be in an integer form.
5:05
As well as this, Advanced Graphics offer more complex objects with extensive runtime adjustability.
5:12
For example, if you have a trend with several pens, and you want to be able to focus in on some of the pens at any given moment, you now have the ability to dynamically hide and show pens at runtime.
5:25
You can manipulate graphics objects by tying some of their attributes to variables, such as the X and Y position of the object, the size, and the rotation angle.
5:35
For the rest of this webinar, we will review some of the standard objects that are available in Canvas.
5:41
We will review and demonstrate more advanced objects in future webinars.
5:46
For today, we will focus on some of the more basic and commonly used objects and capabilities, such as data fields, push buttons, indicators, jump objects, sliders, rotary objects, progress bars, and custom backgrounds.
6:02
We will start with numeric data fields.
6:05
Numeric data fields are one of the basic building blocks for any industrial operator, interface application. They are used to display variable data on the screen for the operator.
6:16
You can also use these objects to allow operators to change set points for certain variables.
6:22
These objects have been significantly improved for canvas.
6:26
For example, you now have more control over the shape of the object with additional shapes such as ellipses.
6:33
You also have more background options because nearly every object in Canvas can have a custom background, so as well as colors or gradients, you can now choose to use custom images and patterns.
6:46
For integer type objects, or for date or time type adjustments, you can select a spinner or tumbler for the operator to use to edit data at runtime.
6:57
Another object that has been enhanced for Canvas is the indicator object, which is used to show the on-off status for boolean type variables.
7:06
You now have additional choices in terms of what the graphics look like for the indicator, as well as the ability to support your own user-defined indicator.
7:15
So you can import any images you want to represent the indicator when it is on and to represent it when it is off.
7:22
You also have a lot of control over how these images are scaled and customized.
7:27
So with Canvas, you can basically create your own custom indicator.
7:31
You now also have more options to customize your legend plate.
7:36
Switches and selectors are fundamental tools for giving the operator the ability to turn the boolean variables on and off.
7:44
The switch object has been expanded to include more than just simple push buttons.
7:48
These now include toggle switches, multiposition switches, and slide switches to manipulate boolean variables, so you have many more visual options for different scenarios.
8:00
You now also have user-defined capabilities for switches, so you can import images and customize graphics to represent the boolean variable switched on and switched off on the screen.
8:12
The jump object allows the operator to switch screens on a controller, with new enhancements for canvas, such as more shapes and icons to choose from.
8:21
So if you want to have a specific icon on a button to indicate you are switching to a maintenance screen or a help screen, for example, you have more style options than ever before to represent different functions.
8:33
If you want your operator to switch between a series of screens by swiping left and right, you can now incorporate gesture support into the jump object.
8:42
The slider object is no longer just linear.
8:45
You still have many choices of linear sliders as well as some new styles available, but you can now also use rotary sliders or knob in your project.
8:55
Sliders also have gesture support available, so you can allow the operator to turn a knob or rotary slider clockwise or anti-clockwise.
9:04
There is also a new type of linear slider available called a range slider, where you have two knobs and you can control the range of a variable.
9:12
With the range slider, you have a lower level and an upper level. The operator can set a specific range between the two levels.
9:20
Bar graphs have also been enhanced for canvas.
9:23
You can now choose to treat bar graphs like progress bars, as you have more options than ever for the fills on your bar graph, such as custom images and graphics.
9:33
And similar to sliders, you now have rotary bar graphs for your project.
9:38
As mentioned before, nearly every canvas graphics object can have a custom background.
9:44
As shown on the screen here, you have many pattern options to choose from to suit any type of project.
9:50
You can also import your own images to use for object backgrounds and you can manipulate the image to fit your object with options such as scale to fit and maintaining the aspect ratio of the image.
10:02
You can also choose to tile an image if you have a really small image that you would like to use as a pattern for a background, so you have a lot more control over your object backgrounds than ever before.
10:14
Now, we will demonstrate some of these new canvas graphics enhancements in Cscape 10.
10:20
We have created a new file, as well as a new screen under the main screen group called Motion Control, which is screen number 1.
10:28
We will first demonstrate the new custom background capability.
10:32
We will be creating a Motion Control screen here, and we want to have an industrial looking background for our screen, so we will right click anywhere within the screen area and select Set Background.
10:44
From here we will choose the Pattern option and we will choose Scale to Fish for our image scaling.
10:49
Then we will select Select Pattern and we can view all available patterns to choose from.
10:55
For our project we will opt for this brushed aluminium pattern.
10:59
If we select Tint Color we can also choose to change the color of our pattern.
11:05
For example we will select this dark blue color and we can see what this looks like in the preview window.
11:12
To Return to the default, we select Tint Color again and select None.
11:17
Once we are happy with the pattern and color, we will select OK.
11:21
We currently have our pattern image set to Scale to Fit.
11:24
We will select Maintain Aspect Ratio so that our image isn’t stretched out of proportion to fit our object.
11:31
We will select OK and see what this looks like on our screen.
11:35
We have some white space on both sides of the screen, so we will need to change our We will right-click our screen again and select Set Background, and this time we will select Maintain Aspect Ratio with Clipping.
11:51
This will ensure that our pattern is large enough to fill the screen, and will then just clip off the edges as needed.
11:57
When we select OK again, our pattern is rescaled and fits our screen a lot better.
12:02
As we can see, we currently have our gridlines displayed on the screen, which can make it difficult to view our background.
12:08
To turn these off, we will right-click on our screen area again and select Grid Settings.
12:14
We will choose to turn off grid lines for both of our object grids and only snap to our secondary grid.
12:20
We will select OK again and we are now able to view our screen and background a lot easier, and we can still snap to our secondary grid as we build additional objects.
12:31
Next, we will add a hand auto selector switch on our Motor Control page.
12:35
From our Graphics toolbox, we will select Touch Objects, and then click and drag the Button Switch object onto our screen.
12:44
Then we will double-click this to change the switch properties.
12:47
For our switch type, we will select a multi-position switch, and we will choose this first switch.
12:54
We will then tie this to a variable we created called Auto Mode.
12:58
So when the switch is on, it will be automatic, and when the switch is off, it will be manual.
13:03
We will set the action to toggle, so the operator can go back and forth between manual and automatic modes.
13:10
We will also keep the position at 2 and select OK.
13:14
We can see that our button doesn’t currently have a legend plate, so we will need to add one.
13:19
We will go to Fixed Objects and click and drag the text label object onto our screen over our switch.
13:26
We will double click this and we will set the font size to 30.
13:30
We will edit the text box to say Hand for the manual mode.
13:34
We will place this on the upper left of our switch.
13:37
To see if this is lined up properly, we can select the Simulator button from the Graphics toolbar and press our switch.
13:44
The text label is lined up well with this state of the switch.
13:48
We will copy this text label and paste it, and place it to the right of our switch.
13:53
We will double-click this text label and change the text box to say Auto.
13:57
Finally, we will change into our simulator mode again to make sure this is lined up properly.
14:03
So now we have an auto mode selector switch for our motor control screen.
14:07
Next we will add some basic start and stop buttons.
14:11
We will go to touch objects again and as before we will click and drag a button switch object onto our screen.
14:18
We will assign the motor start push button variable we created to our button.
14:23
This time for our switch type, we will select a push button, and we will select this green button in the bottom row.
14:30
We will select OK, and once we are happy with our button, we will create a text label for it.
14:37
We will copy and paste this text label and place it on top of our button.
14:41
We will also make the label wider to support a longer word, which is start.
14:46
So now we have our label for our button.
14:48
If we right-click on the switch object, we can choose to set this switch object as the default.
14:55
So if we want to have multiple start buttons on our screen for example, we can set this as the default, and once we add another button switch object onto our screen, it will be the same as our default start button.
15:07
We can also do this by simply copying and pasting the button.
15:11
We want to make this button our stop button, so we will double-click this button and change the push button to the red option.
15:19
We also need to assign this to our motion stop push button variable.
15:23
We will copy and paste our start label and place it over our new button, then change the text box to stop.
15:30
So now we have start and stop push buttons for our motion control screen. Next, we will make a custom indicator to show if our motor is running or not.
15:40
To do this, we will go to the Graphic Toolbox again and select Live Graphic Data and click and drag a lamp indicator object onto our screen.
15:49
As before, we will then size and place the object as desired.
15:53
We will remove this legend plate here and create our own to match our other objects, and we will change this lamp to a user-defined indicator.
16:02
First, we will go to our Indicator Properties and assign this indicator to our MotorRunPilotLight variable.
16:08
Then, under Legend Plate Properties, we will get rid of the Legend Plate.
16:13
For our Indicator Type, we will opt for a User-Defined Indicator.
16:17
From here, we can select our images for when our indicator is on and off.
16:22
For scaling, we want these images to maintain their aspect ratio.
16:26
For our on and off images, we will choose symbols from Cscape’s Symbol Library, however you could also import your own images if you wish.
16:34
The symbol library offers many different images for all types of applications.
16:40
For the on image, which indicates that a motor is running, we will select this green motor.
16:46
Then for our off image, we will select this same motor image and change the color to red.
16:51
Under fill color, we will change the mode to shaded, and then select the color we want.
16:57
Now we have both our images set for both states of our indicator.
17:01
When the operator is using this screen, we want to make it even more clear if the motor is running or not.
17:08
So we will add some text under the indicator that changes between running and stopped.
17:13
Instead of using a static text label to do this, we will create a text table.
17:19
First we will make our indicator a bit smaller to make room for our text table.
17:23
Then from the graphics toolbox, we will select live text data and click and drag the text table object onto our screen.
17:32
By default, just like Cscape 9, this object automatically comes with a legend plate and a border.
17:39
Before we assign a variable, we will select a size of 1 bit, and then we will assign the same motor run pilot light variable that we did for the indicator.
17:49
For the running stopped text we want for our table, 8 characters or less should be sufficient.
17:56
When we select Text Table, we can see we already have a default stopped and running table created, which we will use here.
18:04
Then we will set the font size to 30 to match the size of the rest of our text labels.
18:10
We will choose to not make the table editable, and under Attributes, we will remove the border around the text table.
18:17
Under Legend, we will delete this text to remove the legend plate.
18:22
We will also choose to make our table transparent, so we will select Display Style, and then select Solid Color, and under Background, we will choose None.
18:33
So these are the changes we have made to our live text table.
18:37
We will select OK, and we will place it underneath our indicator.
18:41
We will switch to our simulation mode, and when we click on our custom indicator, we can see that it changes between red and green, and when the operator uses the screen, our text table will change accordingly.
18:54
Finally, we will create a numeric data field for motor speed.
18:58
We will go to the Live Text Data group again, and this time we will click and drag a numeric object onto our screen, and adjust it to the size we want.
19:07
Then we double-click this and go to our Object Properties.
19:11
We will change the data size to 32-bit, and we will change the Formash to Floating Point, as we want to use this for Motor Speed.
19:19
We will set our Motor Speed variable, and then we’ll choose to display the speed with three decimals to the left, and one decimal to the right.
19:28
We will also set the Engineering Units as Hertz.
19:31
Once again, we will set the font size to 30 to match the rest of our objects.
19:37
Under Edit slash Right, we will set the frequency range between 0 to 100.
19:42
So these are the changes we have made to our numeric field so far.
19:47
We will make this wider, and then we will go back into our object properties, and then we will edit our legend to say Motor Speed and adjust the font size.
19:56
Under Display Style, we will select a round end object with a 3D bezel.
20:02
For this object, we will select a custom background.
20:06
We will select a pattern and opt for this darker steel background.
20:10
Once again, we will maintain the aspect ratio with clipping to make sure a pattern fits our object without being stretched out of proportion.
20:18
Now we have created our motor speed object and because this object has edit enabled, it can be adjusted by the operator.
20:27
Next we will make a motor speed control in the form of a rotary knob slider.
20:32
To do this we will go to our graphics toolbox and select touch objects.
20:37
Then we will click and drag the slider object onto our screen.
20:40
By default this is a linear slider, however we will change this to a rotary slider in our configuration.
20:47
First, we will set the data format to floating point, with a range of 0 to 100 and 1 decimal.
20:54
We will choose to show the scale limits, and for the type of slider, we will select Rotary.
21:00
We have a few choices of different colours for the knob.
21:03
For now, we will keep this as silver.
21:06
Then under legend, we will delete the text completely.
21:10
Finally, we will set the data size to 32 bit, and assign our motor speed variable.
21:15
We will select OK and see what adjustments we may need to make to it.
21:20
For one, we want to change the background, so we will go back into our settings and go to background and make the background transparent in the same way as we did for the other objects.
21:31
We will also remove the legend plate.
21:34
We will try a different colour for the knob as the silver blends into our screen background.
21:39
First we will try gold and select OK.
21:42
This color stands out more, but we will change this to grey to match our screen design better.
21:49
Now we have our Rotary Speed Control Object completed, and have demonstrated some of the basic graphic enhancements for Canvas and Cscape 10.
21:59
That concludes our webinar for today. Thank you so much for listening, and the Q &A session will begin shortly.
22:13
Okay, as you could see with Cscape 10, you have now several new ways to better design your screen and even more with Canvas.
22:23
Since we don’t have any questions so far, let me jump into the agenda.
22:39
I hope you all can see it now.
22:42
The next webinar will be on Canvas Enhanced Display at Builds in Cscape 10.
22:51
And the following is about Canvas Trends and Graphics in Cscape 10.
22:57
And if you want to participate, please register on our website.
23:03
I believe that’s all for today.
23:05
Thank you all for your time, and I hope to see you in the next webinar.
23:10Have a nice day everyone.
