Changing the color of a singular button every time it is clicked on

Ignition
1

Hi there!
I'm back with a new problem. I have 5 buttons on a view in ignition perspective. Each button is binded to a memory tag name buttonColor. This tag is a string tag that holds the string value of the current color. The main idea is when a button is selected, ONLY that button selected changes color. However, the selected button only changes to green and then will not change again if selected. There are no errors with my code so I keep going line by line to see what could be wrong but honestly, I don't know. This is the code I have at the moment:

	ButtonName = self.name
	color_list = ["#D5D5D5","#026b45","#FF0000"]
	tagPath = '[MorningMeetings]{}/ButtonColor'.format(ButtonName)
		    # Get the current background color of the button
	current_color = system.tag.readBlocking([tagPath])[0].value    
	if not current_color or current_color not in color_list:
		current_color = color_list[0]
	# Find the index of the current color in the list	   
	current_index = color_list.index(current_color)
	next_index = (current_index + 1) % len(color_list)
	# Set the button's background color to the next color
	self.props.style.backgroundColor = color_list[next_index]
	newColor = self.props.style.backgroundColor
	system.tag.writeBlocking(tagPath, newColor)

Any and all help is appreciated!
Thanks!

2

Did you check your logs to see if the script is failing? I'm surprised it's taking any action as I would have expected a failure accessing self.name as that's not a property defined in the schema.

There is also potentially an issue with the write back to the tag. I believe non-iterable values have worked for many, but I've always had spotty success. I suggest supplying your values within lists like the function truly expects:

system.tag.writeBlocking([tagPath], [newColor])
3 Likes
3

yea I have been using the console to make sure that it is going to the correct next item in the list. However, I did notice that the value in the tag does not change even though the background color does. When I put brackets around tagPath and new color it just reverts back to the original color it started at. I have a feeling that it might have something to do with line 4 since when I asked the console to print the current color, it was blank.

4

Also, how should I reference that specific button if self.name is not a property in the schema? I wanted to add a parameter to the button, but I'm not too sure how to do that. I originally made a custom value property called param, however, when I made the tag indirect and made the path [MorningMeetings]{param}/ButtonColor, an error appeared saying that it was invalid.

5

I'm not sure that you haven't over complicated this.

Here is how I would approach this issue.

  1. Create a custom property on the button to hold the current index
  2. Create a custom property on the button to hold the color list. This can also be on the view if the list is global to all buttons.
  3. Create an expression binding on the backgroundColor style property:
{this.custom.color_list}[{this.custom.color_index}]
  1. On the button actionPerformed event add a script:
self.custom.current_index = (self.custom.current_index + 1) % len(self.custom.color_list)

5. If you need the color to be persistent across view loads, then I would make the memory tag an Integer value and Bi-Directionally bind it to the current index.

EDIT: I don't think a tag is the correct place to hold this.

6

The name of the button is found at self.meta.name.

This is likely because the script is working up to the point that it sets the color of the button, but then fails to write a value to the Tag.

None of this really matters, because this approach is really bad.

  1. Tags are Gateway-wide, so if you have multiple sessions open you will have multiple people writing to this tag, when it seems liek you really want it to be for a single session.
  2. Considering this script is executed based on the button name, I have to assume you're placing this script on multiple buttons which is going to be a maintenance nightmare when you need to update any of them for any reason. Suppose you add a color next year; will you remember all of the places you need to update this script?

Try this instead for something you won't need to update:

  1. Make a new Tag which is a string array.
  2. Place all of your colors into the string array.
  3. Place a new custom property on your Button and name it index, then set it to 0 for now.
  4. Place a new onClick Event with a Script Action: self.custom.index += 1
  5. Add backgroundColor as a property of style.
  6. Bind props.style.backgroundColor with an Expression Structure binding, like so:
    Screenshot 2024-02-21 at 9.05.35 AM
    Screenshot 2024-02-21 at 9.05.35 AM614×670 42.8 KB
7

the reason I did a tag is because a co-worker recommended me to use it if I want to update the value on all sessions being used which is the current plan. I have another idea I am going to try. Thanks for the help though!

8

Consider instead, using system.perspective.sendMessage() with a session scoped message handler to update the index.

9

I appreciate the help, as I am still very much a beginner, however the end goal is to not just change the color of the button when selected but to refresh all sessions. This is for a dashboard, and it is preferred if it did update all sessions. I did change my code slightly to where it does change colors every time it is selected, I just run into two problems:

  1. Since all the buttons are connected to the same tag, they all change at the same time.
  2. I tried using the name of the button so it could be used as a parameter but that was not the case. Here is the slightly updated version of the code:
	ButtonName = self.meta.name
	color_list = ["#D5D5D5","#026b45","#FF0000"]
	tagPath = '[MorningMeetings]{}/ButtonColor'.format(ButtonName)
	# Get the current background color of the button
	current_color = self.props.style.backgroundColor
	#system.perspective.print("current color is")
	#system.perspective.print(current_color)    
	if current_color not in color_list:
		current_color = color_list[0]
	# Find the index of the current color in the list	   
	current_index = color_list.index(current_color)
	#system.perspective.print("current color index is")
	#system.perspective.print(current_index)
	next_index = (current_index + 1) % len(color_list)
	#system.perspective.print("Next color index is")
	#system.perspective.print(next_index)
	# Set the button's background color to the next color
	self.props.style.backgroundColor = color_list[next_index]
	newColor = self.props.style.backgroundColor
	system.tag.writeBlocking([tagPath], [newColor])

Thanks for the info though!

10

If you want all sessions, then the Tag route is the way to go. Using the button name is not the way to go.

New project script:

def meetingButtonClicked(self):
    tagPath = '[MorningMeetings]somePath'
    fallback_color = "#D5D5D5"
    quasi_linked_list = {
        "#D5D5D5": "#026b45",
        "#026b45": "#FF0000",
        "#FF0000": fallback_color
    }
    next_color = quasi_linked_list.get(system.tag.readBlocking([tagPath])[0].value, fallback_color)
    system.tag.writeBlocking([tagPath], [next_color])

Now your Button(s) only needs to invoke this project script when it is clicked. Bind your Button's background color to the value of the Tag.

11

Thank you for this, however, when I run it, all buttons change colors at once. I need it to only change the color of the selected button.