Modification of multi-state button component

I would like to make a button that is a mash-up of the factorytalk view multi-state pushbutton and momentary pushbutton. I would like to be able to make as many styles as I want linked to a “indicator value”, and I would like to output a 1 to a tag momentarily while the mouse button is pressed. I was looking at the ignition multi-state button component as a sample, but can you create your own components to add back into ignitions component library?

Yes, you can create a template with button actions and styles customized as you’d like them. If built-in button components don’t have the options you need, you can use rectangles with scripting to and styles to create your own buttons. See:
https://docs.inductiveautomation.com/display/DOC81/Creating+a+Template

Perspective was tagged so Templates are out, but you can do the same with Views and CSS to create your own pseudo components. If you want to truly create your own components to put into the perspective component panel, you’re going to have to write a module to do it. There are examples, but you’d do well to have experience in JavaScript, react, typescript, and others

2 Likes

On a multi-state button, there isn’t a way to change the position of each of the buttons individually so that I can put them all on top of each other, and change transparency of each?

It looks like I can change the props.buttongap to a negative number and get them to overlap. Then for the props.states[?].selectedStyle and unselectedstyle I can add in a visibility = hidden. I think I will work with that for awhile trying to figure out how to script in changing the gap automatically to get them to overlap and choosing all the visibilities based on the props.indicatorValue and see if I can get something that works. Any thoughts are still welcome if I am going down the wrong road.

What exactly is the point for using a multi-state button if you are going to stack them? Why not just use a single button?

1 Like

I got this basically working with creating a custom tag named “clicked” and setting the binding to bidirectional, and writing a onclick event to set clicked to 1 and offclick to set it to 0. I see more events for touch, but sure if a windows touchscreen will use the onclick event when touching? Not doing any binding on controlvalue. indicatorvalue is binding to tag, and using the onchange script to set the visibility of the states based on the indicatorvalue.

Maybe I can do it with a single button, but In my mind it makes sense to be able to have all the states in the component so I can easily go through and set different colors and text for the indicator value. Then when I copy/paste this component, I only need to change the clicked binding, and the indicatorvalue binding and I have a working button.

It might make more sense once I describe how I am using it. In a rockwell automation factorytalk view application, I usually use a multistate indicator overtop of a momentary pushbutton. The momentary pushbutton sends a 1 to the PLC tag to request a valve to turn on while pressed. The multistate pushbutton has states set by PLC tag…
0 = “ADVANCE”, blue background, cylinder switch not made.
1 = “ADVANCE”, yellow, commanded to turn on.
2 = “ADVANCE”, orange, output is ON to advance.
3 = “ADVANCED”, green, switch made

Missed that tag. Yes, views or module are it.

FactoryTrash is severely limited and you may have had to get somewhat creative. Ignition doesn’t put you in a box and you have many more options. You can create a custom property for indication and use this for styles. There is no need to stack multiple components, like you may have had to do in FT.

A very crude example…
Button.zip (2.8 KB)