Version:

This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off
Take topic challenge

Supplemental Videos

LESSON

Display Components

Description

This lesson goes over some of the simple display components in the Perspective perspective module. It shows off some of the basic properties of the Label, LED Display, Cylindrical Tank, and Linear Scale.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] Almost all of the components in Perspective allow you to show information in one form or another but the Display section of the Component Palette focuses on components that don't require much interaction. All components rely on their properties to be the most useful, so we're going to pick out a few display components and talk about the most commonly used properties. One of the simplest components is the Label. The Label is used for displaying text and we go ahead and drop one on the screen here. The most important property of the Label component is the text property. And you can see we can type in here whatever we want. This is some text. And it will get displayed on screen. Now you can see that the text will actually go below the bounds of the Label component. But if you drag the component to the right here then you can see the text reacts. We can also change the alignVertical property to be something like center. And if we do that, then the text will stay in the center of the component. Now there is no horizontal alignment property of this component, but that's a part of the style. We talk a lot about styles in other videos but let's do a simple example. One of the most common things you'd like to do with a Label on the screen is change the size of the text. To do that, we'll go into our style by clicking on the style icon here. And you'll see the style properties pop up. If we click on text here, you can see that there are several available in this category. I'm just going to change the font size. So I'll click and drag that a bit so you can see our text gets bigger. And then I'll click OK to submit. And now you can see that there is a font size property underneath style, so we can bind that or set it however we'd like. The next component we wanna talk about is the LED Display. The LED Display is a great way to display numeric values. And the LED Display's main property is the value property. We can set this value to whatever we want. So something like 45. Or I can take and bind a tag to it. I have a few down here. I'll grab my ramp0 and drag it over onto value. And then you can see that the value is updating. You can change the diode on and off colors to make the LED Display a little easier to read. I'll change it to red here. And you can also change the number format. So I can do something like set it to be only one decimal point of precision. Now there are two different segment formats that are available. We have 7 and 14. Seven segment is great for showing numbers and makes it a little bit easier to read. But the 14 segment is a little better if you're using alphanumeric values. And the next display component I wanna take a look at is the Cylindrical Tank. Now with the Cylindrical Tank component we get to select some value and we get to set a capacity and the tank will fill to that level. So, for example, I'll choose 40 as my value and 75 as my capacity. And you can see now it's displaying 53% full. We could also change the liquid color here. If you don't like blue, we could do something maybe green or whatever color your liquid is. Now below the liquid color, you'll notice that we have warning colors here and a warning threshold. So this just means that whenever our value is more than this percentage of the capacity, the colors will change to be whatever our liquid warning color and tank warning color are. So, for example, I can change my warning threshold to 50. And now you can see my tank has changed to that red liquid. The last component I wanna look at is the Linear Scale. So I'll grab a Linear Scale and drag it on the screen here. And you can see it's just a scale from zero to 100. And if we look at the properties here, you can see that we have our min value and our max value. And then we have major, minor, and fine ticks which show off these lines between zero and 100. Now what's really interesting about this component is the indicators. So our low marked at 20 and our high marked from 85 to 100. So how you set these values is you look at the indicator's property and you can see that it's an array here and we have two values, zero and one. Our value zero, you can see, has a value of 85 and a Label of high which is the top one here. And it's got an extent of 15 and an indicator style of range. That means it's that block from 85 to 100. If we look at number one here, you can see that we have the Label of low and an indicator style of line. Now I can add one more array element here. And that'll give us one additional thing that we can draw on the linear scale. Now in this case, I might add a maybe good range somewhere between the top and the bottom. So to do that, I'll change my indicator style to range and then I'm going to set my extent to something like 50 and I can start my value at 25. Now you can see we have this blue range from 25 to 75. And if I wanna give it a Label, then I can type in good and you can see here we have that Label on our scale. Of course, all the properties I've mentioned so far can be bound however you like and there are many more properties that are available. I encourage you to go through and play with some of the components to get familiar with them.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.