Button background color change dynamically - Vision

Ignition
1

Hi,

I am using a button in the template and calling it in a template repeater in a window. I would like to change the background color of the button but the issue is,
for eg in a template repeater, if there are 3 buttons, when i click on the button 1 - bG color should be changed and when i click on the button 2 - bG color should be changed for button2 whereas button 1 should go back to its original color.
Is there any possibilities to achieve this.
Awaiting for a quick response, Thanks in advance

2

If your group of 3 buttons will only ever have one “activated”, then the Multi-State Button component could be an easy option to sync your background color needs: Multi-State Button

Otherwise, if you must stay with a standard Button component or Toggle Button component - you can use an expression binding or maybe a script to set the background colors per your desired conditions.

Basic example on a Toggle Button actionPerformed script, if your need customization beyond an expression:

if event.source.selected:
	event.source.buttonBG = 255,255,255 # one color here
else:
	event.source.buttonBG - 0,0,0 # other color here
2 Likes
3

Hey hi,

Thanks for the idea. The given script, worked only when i click on the button.
When i click on the another button, previous button color is not going back to its original color

4

Each button’s ActionPerformed script should probably look something like this, where the other button’s colors are changed by the action

event.source.buttonBG = 255,255,255
event.source.parent.getComponent("Button 2").buttonBG = 0,0,0
event.source.parent.getComponent("Button 3").buttonBG = 0,0,0
5

But i am using a single button in the template which will be repeated twice or thrice.

6

Any ideas on this?

7

I’m not in a position where I can type the code, but you could getComponants, and then use a looping statement to check all of the components for your template path. Exception handling will need to be in place for the components that return a null template path.

try:
    [...]
except:
      pass

For each component that is from your template, set the BG color to 0,0,0 using the “.name” extension

Then, after the loop is completed, fire your event.source.buttonBG = 255,255,255 code

8

I was on the road earlier and couldn’t type this out. Here is an approach that could accomplish your goal using a template button:

for comp in event.source.parent.getComponents():
	try:
		if “your template name” in comp.templatePath
			event.source.parent.getComponent(comp.name).buttonBG = 0,0,0
	except:
		pass
event.source.buttonBG = 255,255,255

This should find all the other buttons in the window that are template buttons, and modify them in the way you want.

9

Hi,
Where we have to use this script?

10

What happens when the button is clicked? Is there any tag that is set to a corresponding value? If so, you would just need to bind a custom prop to that tag and then call the script on property change of that value. Otherwise, to make it generic, you would need to get the template repeater object in script, traverse its repeating objects, and set their button background colours. You would need to clear them all first and then set the button that’s clicked to your colour

This might help to show you a breakdown of all components within an object (e.g. the template repeater component)

def printAllObjectComponents(object, indexPrefix = '', indent = ''):
	components = object.getComponents()
	for index, component in enumerate(components):
		print "%s %s%s %s" % (indent, indexPrefix, index, component)
		
		printAllObjectComponents(component, indexPrefix + str(index) + '.', indent + '\t')

using this, you can see that the templated objects are all contained within:

templateRepeater.getComponent(1).getComponent(0).getComponent(0)

image
image1019Ă—202 27.7 KB

(Area Alarms is the template I chose to repeat)

Then you can loop through this array and set the background colour of your buttons, for example:

if event.propertyName == 'refresh':
	tr = event.source
	templates = tr.getComponent(1).getComponent(0).getComponent(0).getComponents()
	
	for template in templates:
		label = template.getComponent('Label')
		label.text = 'Bob'

Just keep in mind that the component index positions could possibly change in the future if IA decide to shuffle stuff around. You could mitigate this by looking for the template objects with inspiration taken from the printAllObjectComponents function

Also note, you will need to get a reference to the TemplateRepeater component from within one of the repeated templates first. You can do that using button.parent.parent… as many parents as you need to finally get to the templaterepeater object.

The easiest way is obviously not to go down this path and to instead use a tag :slight_smile:

11

Hey hi,

Thanks a lot.
Currently i have done this with the help of a vision client tag.
I have binded the background color of the button as
if ({[client]btnColor}={Trend_btn.Button.text},color(71,255,71),color(138,255,255))

Then on mouse click:
system.tag.writeBlocking("[client]btnColor", event.source.text)

3 Likes