Bug? script changes colours correctly in designer preview but not on web page

Ignition
,
1

I have several icons which i have given a event script onClick which should change all of their colours (to indicate which one has been selected) and it works perfectly in the designer but in the web page it does not change the colours as expected
The code is simply but theres a good few lines and maybe it cant handle that but it really seems like it should; the second part which turns the powercharts visible works correctly.

	self.props.color = "#25C100"
	self.parent.parent.getChild("FPS03").getChild("Icon").props.color = "A5A5A5"
	self.parent.parent.getChild("FPS04").getChild("Icon").props.color = "A5A5A5"
	self.parent.parent.getChild("FPS05").getChild("Icon").props.color = "A5A5A5"
	self.parent.parent.getChild("FPS06").getChild("Icon").props.color = "A5A5A5"
	self.parent.parent.getChild("FPS07").getChild("Icon").props.color = "A5A5A5"
	self.parent.parent.getChild("FPS08").getChild("Icon").props.color = "A5A5A5"
	self.parent.parent.getChild("FPS11").getChild("Icon").props.color = "A5A5A5"
	self.parent.parent.getChild("FPS12").getChild("Icon").props.color = "A5A5A5"
	
	self.parent.parent.getChild("Powercharts").getChild("fps01").meta.visible = 1
	self.parent.parent.getChild("Powercharts").getChild("fps03").meta.visible = 0
	self.parent.parent.getChild("Powercharts").getChild("fps04").meta.visible = 0
	self.parent.parent.getChild("Powercharts").getChild("fps05").meta.visible = 0
	self.parent.parent.getChild("Powercharts").getChild("fps06").meta.visible = 0
	self.parent.parent.getChild("Powercharts").getChild("fps07").meta.visible = 0
	self.parent.parent.getChild("Powercharts").getChild("fps08").meta.visible = 0
	self.parent.parent.getChild("Powercharts").getChild("fps11").meta.visible = 0
	self.parent.parent.getChild("Powercharts").getChild("fps12").meta.visible = 0

The actual result of this is firstly when i launch the page the icons are black instead of the grey they should be and when i click one it will turn itself green but the rest will remain unchanged

image
image158×530 2.94 KB

also once they turn green they do not change by clicking another icon its as if it reads the line saying turn green and ignores everything until the powerchart lines. In the designer it works exactly as expected which makes me think this is a bug?

2

For reference it is supposed to look like this, which i have taken from the designer preview mode
image

3

Your green color includes the #, the grey color does not. Generally when a color is not recognized it will default to black.

These lines should be

	self.parent.parent.getChild("FPS03").getChild("Icon").props.color = "#A5A5A5"

I would also strongly suggest using theme variables for your colors, as opposed to hard coding them. So if you ever decide to change them you will only need to change it in one place.

Some more on that here:

1 Like
4

Thank you that fixed it and i will look into the themes

5

It looks like you might have 9 copies of this script on each radio button?
It also seems like like you should be doing this using bindings on your components to set their colours and visibilities rather than using script(s) to set these. Unless I’m missing something?

2 Likes
6

Well i just thought this would be easier im not sure what i would bind it to as im clicking an icon to change these properties and its mostly a copy and paste job i only had to change one or two characters each time. You are probably right though im sure this wasnt the most efficient method

7

If you wanted to keep the config for the session ie between page navigations, you could bind to session custom props. Because it’s a radio button I’d use a single integer prop. Otherwise you could use a view custom prop instead.
I’d have a custom prop on each radio button to hold the number it corresponds to and then bind to an expression that compares this value to the value of the session prop, and colour accordingly. The action performed script would just set the session prop to its custom int value prop

1 Like
8

Yes moving forward i used an approach more like this, made things more coherent

9

I see bad user interface there. You seem to be using radiobutton icons as checkboxes. This will be confusing. Radio buttons are interlocked so that only one can be on at any time.

I recommend that you use a different icon or component. The Toggle Switch or Checkbox components seems appropriate. The Checkbox allows you to configure the icons and colors.

1 Like