Changing the Color of a TabStrip Selected Tab Based on the State of a Tag/Multi-state Indicator

Ignition
,
1

I have a tab strip that I am using to navigate between containers on a page:

image
image841×713 35.2 KB

Is there a way to change the background of a selected tab depending on an indicator?

For example, the component labeled "Servo Status" has that indicator on it that says "Servo OK".
I want to be able to do something to where if that tag, or the state of the indicator, isn't equal to one, the background color of the Servos tab on the tabStrip will change to red. How can I do this?

2

I'm sorry, but I'm not doing enough Vision work to help with your actual question but I think you need to study some good HMI / GUI guidelines. I'm looking at it and have the following problems:

  1. The tab strip looks like a row of buttons. There is no visual clue that it's a tab.
  2. The tab strip is center-aligned. This makes it look less like a tab. Align hard left or right as on any office application.
  3. The active tab should be the same color as the page it is revealing if you wish to give a visual cue. Yours aren't.
  4. There are two different styles of heading, "Servo Motors" and "Accumulator 1" in different styles. These further break up any hope of the page looking tabbed. The headings have wildly contrasting styles.
  5. Inconsistent use of italics. Why use it at all? What GUI standard uses it? Similar inconsistent use of boldface.
  6. Numbers center-aligned in numeric fields. Decimals now don't align. Numbers should generally be right aligned.
  7. "Reset Torque" is blue. The text looks like it might be that of a button but the component doesn't look like a button. Maybe if every other button is blue the user might get used to it but on first glance it's not obvious.
  8. Non-alignment of items: Servo Status seems unnecessarily wide as does Reset Torque. They could be narrowed, made the same width and the three labels below left aligned with the edge of the components above. The numeric value fields could then be right-aligned with the components above. The result would be much more pleasing to the eye.
  9. What does white and gray signify on the numeric and text fields? I would expect the background color to give a clue as to whether or not the field is editable but I doubt that any are.
  10. Why is "Faults" in a purple frame when Fault Lookup and the torque readings aren't?

The overall result makes it very difficult to establish what is important.

https://docs.inductiveautomation.com/display/DOC81/High+Performance+HMI+Techniques

It's worth getting this right. It can change your HMIs from an amateurish hodge-podge to a professional looking one. This is critical if safety related information is being conveyed.

4 Likes
3

As for the question posed taken literally - consider a cell update binding on the tab dataset. I can't remember for sure, but I think the style customizer isn't sufficiently powerful to animate different tabs, but a cell update binding can do so.

1 Like
4

Vision dashboard
Vision dashboard851×446 34.6 KB

Figure 1. Sample clean layout.

This doesn't quite adhere to the High Performance HMI standards but it might be a lot cleaner and give a logical reading sequence.

  • The tabs look like tabs! (I've set a radius on the tabs.)
  • The display does not rely on red-green color vision (1 in 12 males / 1 in 200 females have some form of color blindness) but has text in the indicators for clarity.
  • Only two font sizes: large for page headings (both same size) and normal.
  • Bold for headings - if required - but be consistent through your whole application.
  • Torque units added (Nm). The numbers are a bit meaningless without the units.
  • Reset button is 3D as with most GUI designs.
  • Numbers right aligned.
  • Redundant "Servo" removed from Servo Status labels. The meaning of the indicators is still obvious with half the reading required. Same with redundant "Torque" in labels.
  • All fault related information in one box.
  • Easily read from left to right / top to bottom.
  • The frames, though very light, serve to group the components visually. Demarcation is clear.
  • Plenty of white space. Don't be afraid of it.

Your original question has been addressed by the addition of a tab icon (see the VFD Status tab) to indicate a problem. A colored tab doesn't convey the status with the same clarity.

10 Likes
5

Thank you. I'll try that out.

6

Thanks for your suggestions!

7

I'd like to implement your suggestion with the icons... but is there a way to make it only appear when a particular tag is triggered? I'm wanting the icons to show up only when there is a problem.

8

I work almost exclusively in Perspective and the bindings work a little differently there. You might find this thread useful (but it will take a bit of study and experimentation).

1 Like
9

I was able to implement this in my test environment with the following procedure:
• First, I added a Boolean custom property to my tab strip called isWarning
• Then, I bound the property to my Boolean test tag
• Finally, added this script to the tab strip's propertyChange event handler:

# Trigger this script only when the isWarning custom property changes state
if event.propertyName == 'isWarning':

	# Set the icon path to the warning picture if the property has become True
	# ...else, set the icon path to blank
	iconPath = 'Builtin/icons/16/warning.png' if event.newValue else ''
	
	# Get the tabData dataset
	tabData = event.source.tabData
	
	# Create an updated dataset by changing the selected image path of the tab data
	# CHANGE THE ZERO IN THE system.dataset.setValue call to the row of the tab you wish to add the icon to
	updatedTabData = system.dataset.setValue(tabData, 0, 'SELECTED_IMAGE_PATH', iconPath)
	
	# Update the unselected image path of the dataset, so the icon is present whether or not the tab is selected
	updatedTabData = system.dataset.setValue(updatedTabData, 0, 'UNSELECTED_IMAGE_PATH', iconPath)
	
	# Write the updated dataset back to the tabData property
	event.source.tabData = updatedTabData
1 Like