Learn about how to custom-configure dragging and dropping of tags into views, creating manifestations of the tags as components.

Video recorded using: Ignition 8.0


(open in window)

[00:00] Perspective offers a handful of tools to make building a project simpler and more efficient. One of the most prominent of these tools is the ability to drag tags from the Tag browser into a View, and automatically create a component to display the value of that tag. For example, I have an integer tag here with a value of 10, and when I drag it into my View, I can select a component I'd like to use to represent the tag in my View. For example, if I choose a simple LED display, it shows the value of my tag. Note that what this is actually doing is creating a binding on the component to my tag. Now I also have a string tag here, and when I drag that into My View, a different menu appears. Every tag datatype is associated with its own component menu. So for here, I'll just select Label, and I'll make it a little bit bigger. Now if we'd like, we can customize the components that are shown for each tag datatype. To do that, we select Project and then Project Properties. And then within Project Properties we'll want to be at Tag Drop under Perspective. And the first part of this menu gives us the opportunity to configure different components for each tag datatype. So first, we select a datatype, I'll stick with Integer. So here, we can see the components that can be created on an integer tag. To add a component, we click the plus icon, and to remove a component from the list, we click the trashcan icon. So for example, let's say I want to add a component, I scroll down to the bottom of the list, and when I double-click, I can see a drop-down that shows all of the components we could put in this menu. There are many components to choose from. Let's say I just want a Toggle Switch for example. And now when I drag in an integer tag, the Toggle Switch option will be available. This menu also gives us the ability to specify which bindings are actually configured on components that I created via tag drop. For example, if I specify a component type of Cylindrical Tank, by default, the value property of the tag would be bound to the props.value property on the cylindrical tank. I've also added another tag binding. Here, I'm binding the meta.visible property on the cylindrical tank to the enabled property of the tag. So to see this in action, I'm going to click OK. And now I have an integer tag here that I've disabled. So when I drag it in to my View and select a Cylindrical Tank, it is invisible because the Visible property on the component has been bound to the enabled property on the tag. So now let's say that instead of dropping a component into My View, I want to drop another View into my View. To do this, we'll need to do a little configuration on the View we'd like to drop in. So to demonstrate, I have created another View called View 2, and for this example, I've created a UDT instance. In my UDT instance, I have a single memory tag called UDT Int Tag, and it's assigned a value of five. My goal is that when I drop this UDT into another View, this View, View 2, will automatically be created as an Embedded View. To do this, I'll verify that I have the View selected in the project browser, and the settings we'll need to configure are on this dropConfig property of the View. There are two arrays nested inside the dropConfig object. One is UDTs, which allows us to drive UDTs in to create Views, and the other is datatypes, which allows us to drag in standard tags to create Views. So I'm going to expand the udts array, and I'm going to click Add Array Element, and here we have three properties we'll need to specify to connect our UDT with this View. For starters, we'll need the name of the UDT. In my case, it is My Data Type. And now the other two properties here should deal with how the View will incorporate the UDT instance. Now data from the UDT is passed in as a parameter to this View. In my case, I've created a parameter called myPath, and we'll see why in a second. But here I just need to specify the parameter I'd like to use, so I'll specify myPath. And now the Action property allows us to specify whether the parameter we've chosen should have a binding to the UDT instance, or whether it should be passed the tag path to the UDT instance as a string. For this example, I'm going to select an action of Path. This means our View will receive a tag path to the UDT instance. And from there, I'm using an indirect tag binding on my gauge to reference my UDT's integer tag. And that's all we have to do to configure it. I'm gonna go back to View 1, and now let's try dragging in our UDT instance. We can see that when we drop in the instance, we're given the option to select View 2, so I'm going to do that. And then I'll pull it a bit further into the View, and as we can see, an embedded View component has been created containing our other View, and data from the UDT instance has been passed into the View.

You are editing this transcript.

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