Динамическое обновление изображения в одной и той же ячейке в jippyter ноутбуке ipython [дубликат]

Question

Динамическое обновление изображения в одной и той же ячейке в jippyter ноутбуке ipython [дубликат]

Как публичная служба: ответ Дэна с правильными вычислениями (элемент может быть> окном, особенно на экранах мобильных телефонов), и исправление jQuery-тестирования, а также добавление isElementPartiallyInViewport:

Кстати, разница между window.innerWidth и document.documentElement.clientWidth заключается в том, что clientWidth / clientHeight не включает полосу прокрутки, тогда как window.innerWidth / Height делает.

function isElementPartiallyInViewport(el)
{
    //special bonus for those using jQuery
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

    var rect = el.getBoundingClientRect();
    // DOMRect { x: 8, y: 8, width: 100, height: 100, top: 8, right: 108, bottom: 108, left: 8 }
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

    // http://stackoverflow.com/questions/325933/determine-whether-two-date-ranges-overlap
    var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
    var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);

    return (vertInView && horInView);
}


// http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport (el) 
{
    //special bonus for those using jQuery
    if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];

    var rect = el.getBoundingClientRect();
    var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
    var windowWidth = (window.innerWidth || document.documentElement.clientWidth);

    return (
           (rect.left >= 0)
        && (rect.top >= 0)
        && ((rect.left + rect.width) <= windowWidth)
        && ((rect.top + rect.height) <= windowHeight)
    );

}


function fnIsVis(ele)
{
    var inVpFull = isElementInViewport(ele);
    var inVpPartial = isElementPartiallyInViewport(ele);
    console.clear();
    console.log("Fully in viewport: " + inVpFull);
    console.log("Partially in viewport: " + inVpPartial);
}

Test -case

12

matplotlib ipython jupyter-notebook

задан Thomas K 23 May 2016 в 10:30

4 ответа

Виджеты Jupyter - хороший способ отображения анимации. В приведенном ниже коде показан анимированный gif .....

from ipywidgets import Image
from IPython import display
animatedGif = "animatedGifs/01-progress.gif" #path relative to your notebook
file = open(animatedGif , "rb")
image = file.read()
progress= Image(
    value=image,
    format='gif',
    width=100,
    height=100)
display.display(progress)

Вы можете закрыть эту анимацию, используя:

progress.close()

N.B. Я нашел несколько приятных анимированных gifs из http://www.downgraf.com/inspiration/25-beautiful-loading-bar-design-examples-gif-animated/ .

2

ответ дан DougR 23 August 2018 в 20:42

Вы можете найти этот урок интересным.

Если вы можете превратить то, что вам нужно, в анимацию matplotlib, и я уверен, что из вашего описания, что это возможно, вы затем можно использовать

from matplotlib import rc, animation
rc('animation', html='html5')

и отобразить анимацию с помощью

anim = animation.FuncAnimation(fig, animate, init_func=init,
                               frames=N, interval=20, blit=True)
anim

Может пригодиться!

11

ответ дан Perfi 23 August 2018 в 20:42

У меня была аналогичная проблема, и этот вопрос помог мне начать. Я собрал ноутбук, который иллюстрирует использование FuncAnimation вместе с хорошими объяснениями, почему ноутбук делает некоторые вещи так, как он делает. Он также имеет ссылки на инструкции по FFmpeg. Он также имеет ссылки на примеры, которые я использовал при разработке и понимании анимации. Вы можете просмотреть мой вклад: Иллюстрация анимации

По вашему вопросу вы можете найти интерактивные слайдеры - лучший инструмент. Я также создал ноутбук, который демонстрирует интерактивные виджеты в Jupyter. Он доступен здесь ; однако интерактивные части там не работают.

Оба доступны в GitHub Repostory

2

ответ дан Will Holmes 23 August 2018 в 20:42

Другие вопросы по тегам:

matplotlib ipython jupyter-notebook

Похожие вопросы:

score 16 · Accepted Answer

Некоторые параметры, которые у вас есть для анимации графиков в Jupyter / IPython, с использованием matplotlib:

Использование display в цикле Используйте IPython.display.display(fig) для отображения фигуры на выходе. Используя цикл, вы хотите очистить вывод до отображения новой фигуры. Обратите внимание, что эта методика дает в целом не столь гладкие результы. Поэтому я бы посоветовал использовать любое из приведенных ниже.
```
import matplotlib.pyplot as plt
import matplotlib.animation
import numpy as np
from IPython.display import display, clear_output

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
l, = ax.plot([0,2*np.pi],[-1,1])

animate = lambda i: l.set_data(t[:i], x[:i])

for i in range(len(x)):
    animate(i)
    clear_output(wait=True)
    display(fig)
    
plt.show()
```
%matplotlib notebook Использовать магию IPython %matplotlib notebook для установки бэкэнд на бэкэнд ноутбука. Это приведет к сохранению фигуры вместо отображения статического файла png и, следовательно, может также отображать анимацию. Полный пример:
```
%matplotlib notebook
import matplotlib.pyplot as plt
import matplotlib.animation
import numpy as np

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
l, = ax.plot([0,2*np.pi],[-1,1])

animate = lambda i: l.set_data(t[:i], x[:i])

ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t))

plt.show()
```
%matplotlib tk Используйте магию IPython %matplotlib tk, чтобы установить бэкэнд на бэкэнд tk. Это откроет фигуру в новом окне графика, который является интерактивным и может также показывать анимацию. Полный пример:
```
%matplotlib tk
import matplotlib.pyplot as plt
import matplotlib.animation
import numpy as np

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
l, = ax.plot([0,2*np.pi],[-1,1])

animate = lambda i: l.set_data(t[:i], x[:i])

ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t))

plt.show()
```

Преобразование анимации в видео mp4 (опция, упомянутая уже с помощью @Perfi):

from IPython.display import HTML
HTML(ani.to_html5_video())

или использовать plt.rcParams["animation.html"] = "html5" в начале ноутбука. Это потребует наличия видеокодеков ffmpeg для конвертирования в видео HTML5. Затем видео отображается в строке. Поэтому он совместим с бэкэндом %matplotlib inline. Полный пример:

%matplotlib inline
import matplotlib.pyplot as plt
plt.rcParams["animation.html"] = "html5"
import matplotlib.animation
import numpy as np

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
l, = ax.plot([0,2*np.pi],[-1,1])

animate = lambda i: l.set_data(t[:i], x[:i])

ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t))
ani

%matplotlib inline
import matplotlib.pyplot as plt
import matplotlib.animation
import numpy as np

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
l, = ax.plot([0,2*np.pi],[-1,1])

animate = lambda i: l.set_data(t[:i], x[:i])

ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t))

from IPython.display import HTML
HTML(ani.to_html5_video())

Преобразование анимации в JavaScript:

from IPython.display import HTML
HTML(ani.to_jshtml())

или использование plt.rcParams["animation.html"] = "jshtml" в начале ноутбука. Это отобразит анимацию как HTML с JavaScript. Это очень совместимо с большинством новых браузеров, а также с бэкэндом %matplotlib inline. Он доступен в matplotlib 2.1 или выше. Полный пример:

%matplotlib inline
import matplotlib.pyplot as plt
plt.rcParams["animation.html"] = "jshtml"
import matplotlib.animation
import numpy as np

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
l, = ax.plot([0,2*np.pi],[-1,1])

animate = lambda i: l.set_data(t[:i], x[:i])

ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t))
ani

%matplotlib inline
import matplotlib.pyplot as plt
import matplotlib.animation
import numpy as np

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
l, = ax.plot([0,2*np.pi],[-1,1])

animate = lambda i: l.set_data(t[:i], x[:i])

ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t))

from IPython.display import HTML
HTML(ani.to_jshtml())