[00:00] Welcome back. All right, so we have our overview vessel view created and we created the station number view parameter. Now we need the components inside of overview vessel to start using station number in some way. My thought is for the top most label here we'll just utilize the direct value of station number. So if the value of station number's two will show station two. For the pump faulted label and the vessel we'll actually try to look up some tag values. Now, before we dive in here, let's stay organized here. I have two labels here at the same level within my root container but they don't really have helpful names here. So starting with the top most one looks like that one called label. I'm going to change the name of this component so we'll head over to the META section of the property editor. And for the name property, we'll just change this to something else.

[00:56] So how about title, hit the enter key. And then for the second label here, instead of label zero how about just a alarm banner and I'll hit enter. So not a huge deal but just wanted to show you how to change the name of components when you start getting really busy containers it's kind of useful to be able to change the name of things. Now, going back to title here. I want to change the text based off of the value of station number. So I want to be able to change the value of the text property here. If you're familiar with Ignition's Vision Module then you're aware of a concept called component bindings. If you're not familiar with Vision that's okay. Binding is basically a way to update the value of a property. So you're basically configuring your opponent to watch something else. So like a tag value or the results of a query and that results in the property being updated. Perspective has a very similar feature so what we can do is we can place a binding on the text property that watches the station number view parameter.

[01:57] And then just update the text whatever the station number changes. So to configure a binding, you may notice just to the left of where I'm hovering here, there's a little gutter, right? And you notice as I moved to different properties here, there's a little icon that follows me in the gutter. So if you click that little icon there that opens the binding window and it will configure a binding on whatever property your mouse cursor was next to. So in this case the text property and you can always check the title of this window, right? So on the title component or the component name to title that we just renamed and props, there's a text property. That's where this binding we're going to configure will be placed. So in our case here, I want to have the word station next to the value of whatever station number is. So that's just some simple string concatenation and the expression binding type is an easy way to do this. Now we do have the other Inductive University videos for all of these binding types if you want to learn more and of course we have the user manual as well. So I'm not really going to cover these in depth but basically the expression binding type allows to configure an expression.

[03:01] An expression is, again, there are more videos if you want to check that out. But an expression is basically a very simplistic not quite a scripting language. It doesn't have a lot of the sort of trappings you would expect in a scripting language but it's very lightweight. It's very quick and it's easy to configure. It's fantastic to use in cases where you're trying to do some string manipulation or run some quick calculations. First, I'd like to increase the size of the text here so I'll hold control and scroll my mouse wheel. And we actually have functions in the expression language. So on the right hand side you'll see that there's some buttons. Second from the top is a little Sigma icon. If you click on that that opens up a little function browser. If we go down to strings, there is a concat function. So I'll go ahead and select that, which will handle some concatenation for us. So I want to start with the word station. So what I'll do is I'll go ahead and type quotation marks, station, space, closing quotes. So that's the first parameter. I'll put a comma down, we'll add a second parameter. And so here, we want to grab a reference to the station number view parameter.

[04:01] Now there's an easy way to do that. If you go back to those buttons on the right, the bottom most button is the little property browser. If I click on that, I get a tree and we can see all of the properties in our view here. And there's some stuff that's outside of the view technically like the session of properties and the page properties. I'm going to ignore those for right now. So we can head down under our view, we can go to params. That's where all of our view parameters are. There's our station number, we'll click okay and then we'll finish this off. We'll put a closing parenthesis. And when I do that you'll notice that the little binding preview down below is no longer giving us an error instead it's actually resolving our binding for us. So it's a good way to see if you're getting what you expect in this case and this is actually what I expect. Great so we'll click okay here which will apply the binding. The property now has a little blue icon next to it all the time, which means there's a binding configured there. And we also see that same icon in the project browser. So we know there's at least one binding on the component named title and we can test that out too. We can click on the overview vessel, the view object here. We change the value of our station number to two.

[05:03] I can hit enter and we see that the text is updated. Now for pump faulted and for our vessel, I would like to actually incorporate the tags that are pulling data from our simulator. Now, if we look at one of our UDT instances here there are two tags to note. There's pump fault and then there's tank capacity. So pump fault, it's just a Boolean fortunately. So that's pretty easy. So how about we just show this banner, one pump fault has a true value, right? So we'll just show or hide this little label here or I should say the text in the label based off of the tag value and then take capacity. We'll go ahead and we'll take the tank capacity value. and then we'll go ahead and represent that with the fill on our vessel here. So to begin with, we'll start with a pump or the alarm banner here and components have under the META category of properties they have visible properties. So if we set this to false you can see that the text disappears. Now this doesn't cause the other components to resize or move here so this is actually ideal for want I wanted to do

[06:01] So why don't we go ahead and for this visible property here I'm going to place a binding. And in this case, we're going to do what's called an indirect tag binding. So basically we're going to define a path to a tag somewhere. And that can't be a tag inside of a UDT but then parts of the path will use parameter references. So we could reference the value of station number and know which of the UDTs we need to drill into. So I'll check on tag, I'll select indirect. And then for this tag path field here, I'll click on the little tag button on the right and then now we have this little tree where we can basically browse all of our tags. So I'll go to the tags folder here and it doesn't really matter which one of these stations we go into because we're going to add a parameter that replaces the number here. But since we're looking a station two right now in the background, I'll go ahead and do this on stage two. So I'll expand the station two and I'll grab pump fault and click, okay. Now to actually make this dynamic or I should say indirect, we need to replace the two.

[07:02] So in the path here, right, this is like a hard-coded path to a specific tag in our tag provider. We can replace the number two with a parameter so basically a reference to station number. So I'm going to delete that two there. I'm going to leave the underscore and I'm going to leave the rest of the characters around it. And I'm going to leave the text cursor where the number was and with the text cursor right there I'm going to go ahead and I'm going to click the little browse properties button here, just the right icon. And I'm going to go in and I'm going to find under params, our station number. And because my text cursor was where the number was, I'm going to click okay here. And it's going to insert a little reference to that property right where the text cursor was. And there we are. We're not getting any errors in our binding preview so we'll click okay. And it looks like it's working already so the pump fault is false. It was false so it it disappeared. It became true again and now we're seeing the text again. Great, now we want to do something very similar for the vessel here.

[08:03] We basically just want to do another indirect tag binding but we can kind of cheat a little bit since we set one of them up. So for the alarm banner here if we go back to the visible property I can right click where it says visible. And I can copy or select copy binding, which will just take the entire binding configuration and it will allow us to paste it elsewhere. So I'm going to now select the vessel here and then under the props category of properties, there's quite a bit more properties here than there were on the cylindrical tank. Now under value, this little value object here there's another value property. So there's a value value. So value value will actually determine the fill level so if I type in 20 and hit enter you can see that the liquid level and the percentage went up to 20%. So we can place a binding here and just point this property to a tag. and that will change the liquid level. So for the value value property, I'm actually just going to right click on right where it says value and I will paste a binding.

[09:03] All right now it's not ideal in this case, it's actually, in my case it's giving me a little bit of an error. And if I hover over there, it tells me, oh, value.value, I found a Boolean but I was expecting a number, right. And that's true. The value value wants a number but the binding we're using or we used initially is returning a Boolean value. So it's having trouble processing but that's fine. All we have to do is update our binding. So instead of looking at pump fault it looks at tank capacity instead. So let's modify the binding on value value. So I'll click the binding icon. And from here, this part we can actually just type in here. So this is why you can type in here so you can actually just make manual edits. So instead of pump fault all the way at the end there, let's go ahead and type in tank capacity just as we haven't named on our tag. So a tank_capacity. And a fun fact, I know some of you are kind of wondering out here is a case sensitive? No, it is not.

[09:59] So tag paths generally aren't case sensitive. So it doesn't really matter if you do some different casing here. But if that's bothering anyone, I'll go ahead and backspace. And we're looking at a number so we'll go ahead and click okay here And we can see we do have a moving liquid level, right? So we have our indirect tag binding set up already. Now, I'm not quite done with this little banner. There's like some more formatting. I'm not particularly happy with the look of some of the texts here. Also the value, the percentage here is doing some pretty generous rounding which may or may not want to do. We can play around with that a little bit more. So I'll show you some tricks on how to do that in the next video. But I did want to point if we head back over to our overview. So we do have out of three instances we created before but they're all showing station two. And the reason why is because overview vessel, if I go back to overview vessel and we look at the view object, this is set with a station number of two. So the value to here is basically the default value for the station number for any instance of this view. And that's fine, we can leave with the two.

[11:00] We can step to one or whatever. But what we want to do is we actually want our instances, if we go back to overview, we actually want to start assigning numbers to these different instances. So the way you do that is actually really easy. I'm going to start with this leftmost one here. Now with these embedded view objects, and remember we are working with embedded view components here. These components have a params property. So the idea here if there are any view parameters on the view we're embedding that you want to pass a value to, you simply define them under here by name, right? So in our case, if I look back at overview vessel, So I could actually double click in here and copy that out. But instead I'll just go back to overview and the casing here is actually important. So I'll go ahead and I'll click the little add here under parameters, I'll add a value, type station number Which I was basically me just saying, hey for the, if the view you're embedding has a parameter by the name of station number, I'll hit tab over here.

[12:03] And it's going to air out because it's literally trying to use value as the value of station number. In this case, I'll just time a one. And there we go. We're looking at station one on this one and now we're looking at station two on the second. That means station three. If I switch over to station three here I'll go ahead and hit the little add object member. I'll select value and again station number and I'll tab over. I'll set that to three, I'll hit enter, and there we are. So now we have our three instances and they're all looking at a different or have a different station number now. So now's a fantastic time to save our project. And in the next video we'll go ahead and we'll start taking a closer look at some formatting options here.