Update interaction around replay, download GIF, and sliders

[jhofman]

Related to PR #146, let's clamp down the way you can interact with the buttons and slider when a datamation is playing.

First, let's rename "GIF" to something that clearly indicates a "download". To save space maybe we use an icon like this one? https://fontawesome.com/icons/download?s=solid

Also let's move it to the right of the slider bar.

Whenever a datamation is playing, the replay button should be present but inactive so you can't click. Same for the download gif button. Same for the download GIF button.

When you click the download GIF button it turns to a spinner while the export is happening, maybe using one of these? https://fontawesome.com/icons/categories/spinners

When the datamation finishes, then you can click either the replay button, the download GIF button, or scrub the slider.

[giorgi-ghviniashvili]

@jhofman

I tried to implement the "scrub the slider when animation is running". Since gemini animate does not have .stop() function, we can't stop the animation immediately. If the animation object is played it must finish it. So this means that if we leave the slider enabled while animation is running, then we will get a little jump. So to avoid this. I disabled the slider during animation and user can scrub the slider after animation finishes.

Here is the video how it works: https://user-images.githubusercontent.com/6615532/159026215-70113507-c85e-483f-b469-ac41c830bcd1.mov

Gif exporting clicked: https://user-images.githubusercontent.com/6615532/159027621-cbcfeb4a-55a3-49a1-bb69-4a9f1a1db75c.mov

The disabled color is grey for the slider and buttons. Let me know if that is a problem and I will make the disabled slider have blue color.

[jhofman]

this looks great overall. only thing i'd say is that waiting for the animation to play all the way on the example you sent takes a while, so i'd actually say leave the slider active (as it was before we talked yesterday) and we just tolerate the jump if it happens.

is that easy to revert?

On Fri, Mar 18, 2022 at 11:00 AM Giorgi Ghviniashvili < @.***> wrote:

@jhofman https://github.com/jhofman

I tried to implement the "scrub the slider when animation is running". Since gemini animate https://github.com/uwdata/gemini#output-1 does not have .stop() function, we can't stop the animation immediately. If the animation object is played it must finish it. So this means that if we leave the slider enabled while animation is running, then we will get a little jump. So to avoid this. I disabled the slider during animation and user can scrub the slider after animation finishes.

Here is the video how it works:

https://user-images.githubusercontent.com/6615532/159026215-70113507-c85e-483f-b469-ac41c830bcd1.mov

Gif exporting clicked:

https://user-images.githubusercontent.com/6615532/159027421-ac91fcf0-6073-4086-9df8-d51ad4c94bcf.mov

The disabled color is grey for the slider and buttons. Let me know if that is a problem and I will make the disabled slider have blue color.

— Reply to this email directly, view it on GitHub https://github.com/microsoft/datamations/issues/147#issuecomment-1072494282, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAATNS34XSV6FHEPIXRS6T3VASLBDANCNFSM5Q7CAYPQ . You are receiving this because you were mentioned.Message ID: @.***>

[giorgi-ghviniashvili]

Ok reverted it and enabled the slider if animation running. Also updated datamationSandDance_html, but seems like that it has problem loading font awesome webfonts. @willdebras can you see why it can't load fonts from webfonts folder?

[willdebras]

Sure thing! I'll take a look. We might not even need to load it because I believe a package this app is dependent on {shiny} has access to FA library, i.e. calling icon(). I can get this working today either with the webfonts folder or with native {shiny}

[willdebras]

Pushed an update to the export branch that properly loads the fa icon:

[giorgi-ghviniashvili]

Thanks @willdebras, works great

[jhofman]

this was taken care of in #146