0:00
Good morning everyone.
0:01
Thank you for joining us on this webinar where we’ll be comparing the graphics between the canvas controller and our traditional graphics.
0:09
If you have any questions at any point just put them into the questions tab and we can get to them at the end.
0:14
Hello and welcome to today’s webinar. Today we’ll be comparing canvas and traditional graphics.
0:20
First we will start by outlining what exactly traditional and canvas graphics are.
0:26
Then we will spend the rest of this webinar comparing the two.
0:31
We will showcase the differences in their system graphics, basic graphic options, complex graphic functions, object attributes, and runtime operation.
0:44
As always, there will be a Q &A session at the end.
0:48
What are traditional graphics?
0:51
Traditional graphics are supported by all Horner controllers with color touchscreens.
0:56
They have been available since the mid 2000s.
1:00
These graphics are focused on speed of execution and flexibility.
1:06
The objects are straightforward and easy to use.
1:09
What are Canvas graphics?
1:12
Canvas graphics are supported by Canvas all-in-one controllers and modular CPUs.
1:18
They have been available since the release of Cscape.
1:22
The graphics are modern and nuanced.
1:25
The runtime properties are more extensive.
1:30
The complex objects are more comprehensive and feature-rich.
1:34
Canvas graphics are made with a top-of-the-line graphics toolkit.
1:40
You may notice that canvas graphics execute slightly slower than traditional graphics at runtime.
1:48
This is because of their improved detail and complexity.
1:52
Now, we are going to look at some comparisons.
1:56
Let’s begin with the system graphics.
2:00
On the left, we have the traditional graphics, which uses a text-based system menu.
2:06
It is very straightforward and effective, but it can also be quite simple and not very pretty.
2:14
On the right, we have the canvas graphical system menu.
2:18
We can see that every option has a graphic, which might make it more pleasant to navigate.
2:25
Next, let’s look at our basic graphic options.
2:29
On the left, we have the traditional graphics.
2:33
These have a focus on ease of setup. They are very streamlined and simple.
2:39
On the right, we have the canvas graphics, which gives us many more options when it comes to deciding the look of our interface.
2:49
These are more modern and extensive.
2:54
Next, we have our basic data objects.
2:58
The main differences between these are the number of shapes and optional Tumblr editing.
3:04
The canvas graphics give us far more options when it comes to customizing our basic data objects, with more shapes, different colors, and even color gradients.
3:18
Canvas graphics also allow for the implementation of tumblers.
3:22
As we can see in the lower right, this allows us to scroll through options like they are on a scroll wheel.
3:30
Next, let’s look at sliders.
3:32
With traditional graphics we can set up simple sliders with the choice to add increment and decrement buttons on either end.
3:43
With canvas graphics we have far more options.
3:47
We can create rotary sliders as we can see on the far right side or two point sliders or even simple sliders like with our traditional graphics.
3:59
Next, we have gauges and meters.
4:04
The big difference here is the amount of detail.
4:07
Canvas graphics retain all the functionality of their traditional gauges and meters.
4:13
But, they have a modernized look with more nuanced elements, and more designs that are not possible with traditional graphics.
4:23
Now, let’s talk about the alarm object.
4:26
The alarm object with traditional graphics is very functional.
4:32
You can create a button which tells you what alarms you have active and their status based on colour.
4:40
When pressed, this button will open a detailed list for more information on your alarms.
4:47
With canvas graphics, you have more options that expand this functionality.
4:52
you can now have an alarm ribbon displayed on the top of your screen and the alarm list has been updated.
5:02
Next let’s look at data graphing objects specifically at trends.
5:09
Starting with traditional graphics you are limited to four pens per trend.
5:14
You can customize basic features like the axis name, the and more. And if you have multiple pens, then at runtime they will all render together.
5:31
Canvas graphics are much more advanced.
5:35
To begin, our maximum pens have been increased to 16 per trend. Multiple axes can be displayed on the same graph and at the same time.
5:47
This This is useful for pens with differing scales, for example temperature and pressure.
5:55
To make things clearer, at runtime you can temporarily hide pens to make others more visible.
6:03
This is useful when trying to monitor a single zone or a single element, for example temperature in a specific area.
6:12
Another big advancement with canvas graphics is the ability to graph more than just integers.
6:22
Along with integers, you can also trend double integers, floating point values, and more.
6:28
Continuing with data graphing objects, let’s now discuss XY graphs.
6:33
The object, called an XY graph in traditional graphics, is not technically a true X vs Y graph.
6:44
In reality, it simply takes a list of variable values and graphs them all on the Y axis.
6:52
This is what is available with traditional graphics.
6:56
Now, in canvas graphics, we have retained this style of XY graph, but we have also included many other types of graphs, such as scatter plots, and a true XY graph, which we call a multi-point graph.
7:13
This allows for the tracking of an X variable against a Y variable.
7:19
Now let’s look at recipe handling.
7:22
The background process for recipe handling is the same between traditional and canvas graphics.
7:29
In the background you have a spreadsheet of different ingredients and different products but what you see displayed on the screen and what the operator can do at execution time is much different.
7:45
With traditional graphics you are going to build a screen that allows your operator to make adjustments to recipes, to change recipes and so on.
7:58
However this screen must be manually created using objects and buttons.
8:04
With Canvas graphics you have a pre-configured recipe object that you can configure options for.
8:12
You can add graphics to it, you can have a scroll list of recipes and more.
8:17
You have many pre-configured options, seen here along the bottom right, that lets the operator precisely customize the recipe at runtime.
8:28
Canvas graphics make the process of setting up recipe handling much quicker.
8:33
Next, we will look at the video object.
8:37
With traditional graphics, you have the option to display simple videos at lower resolutions.
8:44
With canvas graphics you get far more options including built-in video controls, higher resolutions and support for large file sizes.
8:56
Now let’s look at runtime properties.
9:00
On the left we see the display attributes menu with traditional graphics.
9:06
You can control visibility and make temporary changes to color based on an override variable.
9:15
With Canvas we have retained the same functionality but we have added to it.
9:21
There is still the same basic attribute capability however they also have advanced properties.
9:29
You can assign simple variables or structured variables to your advanced properties to control features like the rotation of an object, its opacity, its height, its width, and so on. Now let’s talk about backgrounds.
9:47
With traditional graphics, when using Cscape 10, you have the ability to set simple backgrounds on your screens.
9:57
With canvas graphics, not just screens, but nearly every object can be given its own background.
10:04
Your background can be a color, image, or texture, and you can adjust the tint of this background.
10:13
Once again, canvas graphics give you far more customization than traditional graphics. Now, let’s look at runtime keypads.
10:25
When the operator is asked to input a value, a keypad will be displayed on your screen.
10:32
With traditional graphics, the keypads are simple but functional.
10:36
On the left is an example of one.
10:39
On the right, however, we can see the difference with canvas graphics.
10:45
These keypads are built with a modern graphics toolkit, and so they feature a modern look and feel.
10:53
You can have a full keyboard as your keypad with Canvas Graphics.
11:01
There is also built-in support for Tumblr objects, if you would prefer to spin through a set range of characters.
11:11
And that concludes our webinar for today.
11:14
We hope you enjoyed this showcase of the differences between traditional and Canvas graphics.
11:20
Thank you so much for listening and the Q &A session will begin shortly.
