Wednesday, January 2, 2013

Ignition Designer: Dependencies and Spotlights

Ignition's designer has a lot of features that can make designing new projects easier. Two such features are dependencies and spotlights. We don't really talk about these features in the documentation so I guess you can call them hidden features or gems.

Designer Dependencies

When you are designing screens in Ignition you are constantly linking (binding) properties to tags and other properties on the same window. Each time you bind a property to something else you are setting up a dependency.

Let's look at a small example. Add a tank component and a slider component to a window. Bind the tank's value property to the slider's value property through a "Property" binding. By doing that, the tank is now dependent on the slider. If you try to delete the slider component Ignition won't let you saying "Cannot Delete. Non-Selected component Root Container.Cylindrical Tank depends on selected component Root Container.Slider."

People always ask, "Is there a way I can see who is linked to who?" Yes, the designer has a built-in feature to show all of the dependencies. Just simply click on View > Dependencies > Show All from the file menu in the designer. It will draw arrows from components to other components to illustrate such dependencies.

The direction of the arrow is important. In our example above, the arrow is drawn from the slider to the tank. The arrow shows how data flows. When the slider changes the tank will update. So, if the arrow is going away from the component it means those components are linked to it.

This is an extremely important feature when designing templates or indirect popup windows. Components inside of templates are always linked in some way to the template parameters. That way the template can dynamically change. With indirect popup windows you pass in a value that is used in all of the component property bindings.

In both cases, if you turn on the dependencies you can easily see if one of the components is not linked to the template parameter or the value passed in. If you don't see line drawn to the center something may be wrong.

Pressure label doesn't have an arrow because it is not bound
using the template parameter. In this case that is expected.


Designer Spotlights

Spotlights are another great feature of the designer. Spotlights allow you to see invisible components, components that have bindings, and components that have scripting on the window by painting a box around the component.

There are a lot of situations where you will have invisible components in the designer. It can be challenging to figure out if there are any and where they are. If you turn on the invisible spotlight, it is easy to pinpoint where they are. Click on View > Spotlights > Invisible to turn the spotlight on. The image below shows that there are two components invisible (the purple outline) in this window.

The binding and scripting spotlights are the same idea but show which components have binding or scripting configured.

If you turn on both features dependencies and spotlights, you will get a good idea of how a window is configured.

1 comment:

  1. Awesome Blog...thanks for taking the time to post these tidbits. Best Wishes, Michael