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).
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 .
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?
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:
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:
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)
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?
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.
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 .
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.
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.
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.
Hey @jean-emmanuel I love this solution but with the unique url query + "?" + Date.now()) it causes the image/gift to load with a significant delay. By removing it, there is no longer a delay when running from my iPad and it's working exactly as I had hoped. What was the reason for this additional part of the query?
Without the query there's no guarantee the gif will always start exactly at the beginning of the loop, reloading is the only reliable way I know to make this happen reliably without implementing a custom gif player.
.
