8000 Update HTML animation as slider is dragged by timhoffm · Pull Request #12387 · matplotlib/matplotlib · GitHub
[go: up one dir, main page]
Skip to content

Update HTML animation as slider is dragged #12387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Oct 5, 2018
Merged

Update HTML animation as slider is dragged #12387

merged 1 commit into from
Oct 5, 2018

Conversation

timhoffm
Copy link
Member
@timhoffm timhoffm commented Oct 3, 2018

PR Summary

Currently, HTML animations do not update while the slider is dragged. The update occurs only when the slider is released. This is because we are using the onchange event. This PR switches to using oninput so that we get continuous updates.

Special handling of Internet Explorer <= 11 is done because it does not understand oninput and its onchange works like the W3C specifcation of oninput.

For details see https://www.impressivewebs.com/onchange-vs-oninput-for-range-sliders/

If someone wants to test the effect, here is some example code to create an animation. To test on different browsers you can simply open a binder instance and change between oninput and onchange using the developer tools of the browser.

import numpy as np
import matplotlib.pyplot as plt
import matplotlib.animation as animation
from IPython.display import display, HTML

fig, ax = plt.subplots()

x = np.arange(0, 2*np.pi, 0.01)
line, = ax.plot(x, np.sin(x))

def init():  # only required for blitting to give a clean slate.
    line.set_ydata([np.nan] * len(x))
    return line,

def animate(i):
    line.set_ydata(np.sin(x + i / 100))  # update the data.
    return line,

ani = animation.FuncAnimation(
    fig, animate, init_func=init, interval=2, blit=True, save_count=50)

display(HTML(ani.to_jshtml(default_mode='reflect')))

QuLogic
QuLogic approved these changes Oct 4, 2018
View reviewed changes
Copy link
Member
@QuLogic QuLogic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WFM on Firefox, but I have no idea about compatibility for other browsers.

@timhoffm
Copy link
Member Author
timhoffm commented Oct 4, 2018

I’ve tested this on IE 11, Microsoft Edge, Firefox, Chrome.

jklymak
B4C2 jklymak approved these changes Oct 5, 2018
View reviewed changes
Copy link
Member
@jklymak jklymak left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems reasonable to me!

@jklymak jklymak added this to the v3.1 milestone Oct 5, 2018
@jklymak jklymak merged commit aac5726 into matplotlib:master Oct 5, 2018
@timhoffm timhoffm deleted the animation-oninput branch October 5, 2018 15:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@QuLogic QuLogic QuLogic approved these changes

@jklymak jklymak jklymak approved these changes

Assignees
No one assigned
Labels
topic: animation
Projects
None yet
Milestone
v3.1.0
Development

Successfully merging this pull request may close these issues.
3 participants
@timhoffm @QuLogic @jklymak
0