MultiState indicator/Button

Ignition
,
1

So, in vision, the multistate indicator works differently than in perspective. Perspective kind of shows the non-active states, whereas in vision it is all the same indicator just changes fill color/text based on binding.

In persepective I made added a property, as a Value, named "Controlindicator". I then bound it to an expression of a case statement that changes it from 0-4 based on a few PLC tags.

Then I made 5 new objects called States[0]-States[4] and added Values in each object for keys Value, Text, and FillColor.

I then bound the text output of the button to this:

CASE(
{this.props.ControlIndicator},
{this.props.States[0].Value}, {this.props.States[0].Text},
{this.props.States[1].Value}, {this.props.States[1].Text},
{this.props.States[2].Value}, {this.props.States[2].Text},
{this.props.States[3].Value}, {this.props.States[3].Text},
{this.props.States[4].Value}, {this.props.States[4].Text},
'ButtonBroke'
)

and I bound the Background color of the button to this:

CASE(
{this.props.ControlIndicator},
{this.props.States[0].Value}, {this.props.States[0].FillColor},
{this.props.States[1].Value}, {this.props.States[1].FillColor},
{this.props.States[2].Value}, {this.props.States[2].FillColor},
{this.props.States[3].Value}, {this.props.States[3].FillColor},
{this.props.States[4].Value}, {this.props.States[4].FillColor},
-1
)

So I effectively created a mutlistate button as it works in Vision.... or rather as I USED it in vision. I am sure there were other functionalities I was not using and as such did not create.

Can I save this as a Component somehow for re-use? Or would I just have to copy and paste in the future.

Thanks

1 Like
2

Normally for things like this you would make a small flex view with the button on it with width 100% and height 100% then put the whole view in a folder in your project called 'resources' or something, and you can just drag it into any view you want to use it in, and edit the parameters you set up in the original view.
This is how most of us do reusable components in Perspective, as it means you can make styling changes to one item and it cascades to all usages of that item in the project. It also means when we make new projects, we just copy the resources folder and take it with us.
Making a Component for Perspective involves making a custom Module for Ignition with Java and React/Typescript and installing that onto the Gateway. Not impossible, but not exactly the stuff you do as the average Ignition integrator.

3

I will have to check this out, thank you!

I like the idea of cascading theme changes too. Can only imagine someone deciding the color scheme is unfavorable and having to individually update every screen to something new.

1 Like