Fading text out after button press?

Ignition
,
1

Ignition 8.1.5

I have a seemingly simple goal - when a user hits a Save Changes button in their Perspective session, text will appear saying ‘Saved’ and fade away over 2 seconds. I don’t have a clue how to do this, but I imagine it’s possible because it’s a fairly standard thing in CSS. Any suggestions?

2

Will the text go back to just save afterwards? Or remain blank?

3

Good question, I should have been more clear. The text would be standalone:
image

In the above, ‘Saved!’ would not be visible normally. When the save button is pressed, the text appears instantly, and fades away over 2 seconds.

4

Create a style:

  1. Set animated to true
  2. Iterations to 1 and uncheck infinite
  3. Set opacity to 0
  4. Not sure about direction or fillmode, I had mine set to reverse and forwards, respectively
  5. When you set the class on the label, for example, if should show and fade out for the duration

Maybe that will get you close?

1 Like
5

This helps a lot, thanks! Totally forgot about animated styles. My implementation seems a little wonky, but it gets the job done for now.

I have the style applied to my label, and I use the button’s onActionPerformed script to set label.position.display to false then true, which re-triggers the fade. If there’s a better way to do it I’m all ears, but otherwise this works perfectly fine for me!

6

Actually, my method is flawed. For simplicity, assume the script on my save button was the following:

self.getSibling("Label").position.display = False
self.getSibling("Label").position.display = True

The script as written appears to execute fast enough to not be rendered in session. Because the display change is never rendered, animated styles don’t get restarted. End result: my button script will only cause the fade to occur once (assuming display is false when the view is opened).

Workaround: add a fixed delay between the False/True toggle using time.sleep. I feel like this is really bad form, but it does solve the immediate issue. A delay as small as 0.1s provides enough time for the change to be rendered. Much lower than that and the change is often not picked up (below 0.05 it gets flakey). Updated script:

from time import sleep
self.getSibling("Label").position.display = False
sleep(0.1)
self.getSibling("Label").position.display = True
7

This seems a bit trickier than I thought it would be. You could copy the style, rename to something similar, then swap between the two, if not one, then the other. Basically, two identical styles, just named differently.

1 Like
8

Here’s another option, probably as clunky as the others, assuming you are using a label:

  1. Create custom property on the label, I named my Timer
  2. Bind visible property of label to dateIsBefore(now(1000),{this.custom.Timer})
  3. On button press, self.getSibling("YourLabelName").custom.Timer = system.date.addSeconds(system.date.now(),2)
  4. You could then bind the style class based on if visible, but if you click the button again it won’t show until it is invisible, you could still use the flip flop style method as before, this will refresh the style on each button press.

Sorry, that’s the best I got on this, maybe others will have more eloquent ideas.