Scripting help: "Tap" button type to play entire GIF?

Hi there!

I have several buttons with a short GIF as their CSS class.on background. Each triggers a sample in Ableton Live. I would like to have it so that when I tap a button, it retains its 'on' state (in terms of CSS) until the GIF has done one playthrough, then return to its 'off' state (which is a still image of the first frame of the GIF). Currently, the only way I seem to be able to get the whole GIF to play through is either via a 'Toggle' button but this continues to play the GIF until the button is toggled to 'off' again. And with a 'Push' button, it must be held for the duration of the GIF (or longer).

Any ideas welcome! Thanks in advance :blush:

Hello,
I suggest using a VAR{} on your css background.
Then, in the onValue prop set a condition and a setTimeout() function.
The workflow is when you tap the button, it sets the VAR to use the GIF image, then the setTimeout function will wait for the animation duration (you have to guess what is the animation time) and when it's done, it sets the VAR to use the still background image again.
It works in theory :laughing:.
Let me know if you need help with the code.
Cheers.

This all makes sense. I see how to use onValue and understand what you mean by using setTimeout. What I don't understand is how to change CSS from the JS. Can you set css variables from within the script? Can you tell me how to do that?

Thanks

Ok, I managed to create an example using an animated GIF and a still image of its first frame.
It's not possible to upload a zip file with the folder structure, so I'll describe it and hopefully anyone can get it working.
The folder structure is as below:

πŸ“Session Folder
β”œβ”€β”€ button-gif.json
└── πŸ“ Images
       └── button-loader_animation.gif
       └── button-loader_animation.gif

So, the props to look at are the interaction, css and onValue.
The button is set to tap mode. On value is 1 and Off is 0.
The VAR{} block in the css prop sets the default value of the background-image to the still image.
When you tap the button, the onValue script is triggered and sets the background image to the animated GIF and also disable the interaction with the button. I did this because if you tap the button while the animation is running it doesn't reset the GIF to the first frame, and the sync becomes a mess.
Also I've set the setTimeout delay to a lower duration value than the actual GIF duration in order to avoid the same sync issue.
I used this site to get the exact GIF animation:

I hope it helps :wink:

download files

button-gif.json (2.4 KB)
button-loader_animation
button-loader_still
GIF source/creator: Loader animation by Surgic on Dribbble

2 Likes

Very interesting, here is an updated version with a few changes:

  • the interaction property is not modified anymore, instead the gif is reloaded each time with a simple trick (adding a unique query to the image's url). This requires v1.16.1 as there was a bug I had to fix to make it work.
  • to simplify the code, the image urls are set only once in onCreate
  • there's no need to check the value in onValue: when mode is tap or momentary, the off value is ignored
  • there's no need to call clearTimeout in onValue: setTimeout does it automatically in open stage control (see docs)

button.gif.zip (6.8 MB)

(zip files are allowed now)

3 Likes

That's great Jean! Thanks a lot.

My bad, I knew it but I forgot about the setTimeout() auto clearing in OSC :sweat_smile:

Thanks so much for this, @jean-emmanuel and @ClelsonLopes !

I'm trying to implement what you introduced in the new version, Jean-Emmanuel, but it's not working for me. Here's what I've done differently:

Is adding the URL / filepath here not what is needed? Are the spaces in the folder names in the filepath the issue? I'm still pulling classes from my CSS file, and if I remove the class holding the background images, the button goes blank.

Any help appreciated! I'm brand new to JS so I may be missing something rather basic here.

Also, I'm using this to send values to Ableton Live β€” will I still be able to make it work if the On value is 127 rather than 1?

Thanks so much :heart:

Hello lolo,
I think the issue is with the path you're using.
In my experience, I recommend having an "Images" folder in the same directory of your OSC session file.
It seems that your path starting with /Users/... is resolved from your session directory and it's not found.
If you want to use an absolute path, you must start with the drive name, like C:/Users/...

Yes, it's better to set the max value of the button to 127 to match what Ableton receives.
You always can upload a minimal session file with the issue, so we can try to fix the issue directly.
Cheers.

I have this, actually! I hadn't realized I could just cut out all the other filepath. That fixed it for me :blush:

That GIF duration site is going to be so helpful!

Done, and it works!

Thanks so much to you both, @ClelsonLopes and @jean-emmanuel , you two are amazing :heart:

1 Like

Would doing this basically mean making a duplicate of what I have and just deleting the majority of the buttons? This is a level of using this forum I'm less skilled in!

Yeah, it's just a suggestion. You can create a new session and copy the elements related to your question from your main session. But only if you feel it's the case to do so :wink:.

1 Like

Hey @ClelsonLopes and @jean-emmanuel β€” this solution is working great, however there is an issue I'm encountering where when clicking the GIF (both in PC and on remote iPad over server), the button background goes blank, maybe for about 200 or 300ms before beginning the GIF. This is not terribly exciting visually, and also means that GIFs specifically lined up with audio being triggered by the button are also out-of-sync.

Any idea why this might be happening?

Here's a simplified version: example.zip (2.7 MB)

Not sure what you mean by "blank".
What I get here is the alphaFillOn effect for the button. It goes to 0.75 opacity.
I tried in the client itself, Chrome in PC and iPad (old Air, iOS 12.5.5) and they work fine.
Not sure if push is the right mode for the buttons, because it triggers the GIF to start twice, on value "On" and then when "Off". Try using tap instead. Maybe this is the problem.

1 Like

this was precisely the issue!! i hadn't changed the button type from before fixing the GIF play issue!

however there is still a split second (maybe 5ms) of no image at all as it switches between the still and animate image files.

that's because i totally neglected to share the CSS file with alphaFillOn and Off set to 'none'

Yeah, it's actually a frame! I recorded clicking it in OBS, and watching it in DaVinci Resolve sometimes when tapping the button there is a gap of a frame.
I tested it with plain javascript and got the same issue: one frame flickering!
The explanation is that when setting the new image url with a unique query, the browser needs to make a new request and loads the image from scratch.
At this point, I don't know if there is a workaround for this.
Maybe making the GIF not looping, just playing once. I saw this option in GIMP when exporting.
Not sure if it'll work.

Fascinating! Thanks for the explanation and possible solution!!