displaying animated images

Hi,

On reset module of a figure, I would like to be able to display animated images. The idea is to make user wait until a certain of backend operations complete like a wait cycle. I want to sort of freeze the screen and put an animated image. So far, I was able to append an image to a plot but not a gif. Could you please help me with this? You can find a sample code below.

from bokeh.plotting import figure, curdoc

from bokeh.models import ColumnDataSource, Range1d

from bokeh.models.glyphs import ImageURL

from bokeh.models.widgets import Panel, Tabs, Select,Button

bosch_logo = “myapp1/static/loading-animated-gif-transparent-background-11.gif”

logo_src = ColumnDataSource(dict(url = [bosch_logo]))

page_logo = figure(plot_width = 500, plot_height = 500, title="")

page_logo.toolbar.logo = None

page_logo.toolbar_location = None

page_logo.x_range=Range1d(start=0, end=1)

page_logo.y_range=Range1d(start=0, end=1)

page_logo.xgrid.grid_line_color = None

page_logo.ygrid.grid_line_color = None

image = ImageURL(url=‘url’, x=0.05, y = 0.85, h=0.7, w=0.9)

page_logo.add_glyph(logo_src, image)

page_logo.outline_line_alpha = 0

curdoc().add_root(page_logo)

Thanks.

Hi,

Animated GIFs will not work with ImageURL because the underlying HTML canvas the browser provides does not support animated GIFs. There is not anything we can do about that. Your best bet is to make a layout with a Div, then you could put an animated GIF in the Div.

Thanks,

Bryan

···

On Aug 6, 2018, at 03:06, [email protected] wrote:

Hi,

On reset module of a figure, I would like to be able to display animated images. The idea is to make user wait until a certain of backend operations complete like a wait cycle. I want to sort of freeze the screen and put an animated image. So far, I was able to append an image to a plot but not a gif. Could you please help me with this? You can find a sample code below.

from bokeh.plotting import figure, curdoc
from bokeh.models import ColumnDataSource, Range1d
from bokeh.models.glyphs import ImageURL
from bokeh.models.widgets import Panel, Tabs, Select,Button

bosch_logo = "myapp1/static/loading-animated-gif-transparent-background-11.gif"
logo_src = ColumnDataSource(dict(url = [bosch_logo]))

page_logo = figure(plot_width = 500, plot_height = 500, title="")
page_logo.toolbar.logo = None
page_logo.toolbar_location = None
page_logo.x_range=Range1d(start=0, end=1)
page_logo.y_range=Range1d(start=0, end=1)
page_logo.xgrid.grid_line_color = None
page_logo.ygrid.grid_line_color = None
image = ImageURL(url='url', x=0.05, y = 0.85, h=0.7, w=0.9)
page_logo.add_glyph(logo_src, image)
page_logo.outline_line_alpha = 0
curdoc().add_root(page_logo)

Thanks.

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6e7c9d86-ad5f-4ce7-982a-ccbdcc70cb4d%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi Bryan,

Thank for the answer. As I said, my main goal is to replace one of the current plots of the tool I am developing with a progress cycle until some backend operations complete. When I try the approach you suggested and replaced one of the current figure with a Div inside a widgetbox, I get an error saying “parent of a view wasn’ t configured”. When I inspect the elements, I get to see that the Div inside widgetbox I replaced do not scale to width and height I provided as keyword arguments. You can find a sample code below but this one scales and I was able to replace the figure with a Div inside a widgetbox which is holding an animated gif. I am using children attribute of a column or row layout to replace one of it’ s children, just to mention. Could you please help me with this error?

from bokeh.plotting import figure, curdoc

from bokeh.models.widgets import Panel, Tabs, Select,Button

from bokeh.layouts import row,column

from bokeh.models.layouts import Column

from bokeh.models.layouts import WidgetBox

from bokeh.models.layouts import Row

from bokeh.models.widgets import Paragraph,Div

from bokeh.layouts import widgetbox

doc = curdoc()

def heythere():

divP = Div(text="<img src='myapp1/static/new_giphy.gif'>",width = 300,height=300)

layoutRow.children[0] = widgetbox(children = [divP], width = 300, height = 300)

page_logo = figure(plot_width = 300, plot_height = 300, title="")

page_logo.toolbar.logo = None

page_logo.toolbar_location = None

button = Button(label=“foo”)

button.on_click(heythere)

layoutRow = row(page_logo,button)

layout = column(layoutRow)

doc.add_root(layout)

Thanks,

Baran.

···

On Monday, August 6, 2018 at 7:13:14 PM UTC+3, Bryan Van de ven wrote:

Hi,

Animated GIFs will not work with ImageURL because the underlying HTML canvas the browser provides does not support animated GIFs. There is not anything we can do about that. Your best bet is to make a layout with a Div, then you could put an animated GIF in the Div.

Thanks,

Bryan

On Aug 6, 2018, at 03:06, [email protected] wrote:

Hi,

On reset module of a figure, I would like to be able to display animated images. The idea is to make user wait until a certain of backend operations complete like a wait cycle. I want to sort of freeze the screen and put an animated image. So far, I was able to append an image to a plot but not a gif. Could you please help me with this? You can find a sample code below.

from bokeh.plotting import figure, curdoc

from bokeh.models import ColumnDataSource, Range1d

from bokeh.models.glyphs import ImageURL
from bokeh.models.widgets import Panel, Tabs, Select,Button

bosch_logo = “myapp1/static/loading-animated-gif-transparent-background-11.gif”

logo_src = ColumnDataSource(dict(url = [bosch_logo]))

page_logo = figure(plot_width = 500, plot_height = 500, title="")

page_logo.toolbar.logo = None

page_logo.toolbar_location = None

page_logo.x_range=Range1d(start=0, end=1)

page_logo.y_range=Range1d(start=0, end=1)

page_logo.xgrid.grid_line_color = None

page_logo.ygrid.grid_line_color = None

image = ImageURL(url=‘url’, x=0.05, y = 0.85, h=0.7, w=0.9)

page_logo.add_glyph(logo_src, image)

page_logo.outline_line_alpha = 0
curdoc().add_root(page_logo)

Thanks.


You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.

To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].

To post to this group, send email to [email protected].

To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6e7c9d86-ad5f-4ce7-982a-ccbdcc70cb4d%40continuum.io.

For more options, visit https://groups.google.com/a/continuum.io/d/optout.

Hi,

There are some issues with layout we are still sorting out. Additionally I would never recommend any approach that swaps plots in and out like you are attempting, since that will result in *alot* of complicated synchronization options. Instead, I would recommend using a non-bokeh overlay div that you explicitly control via CustomJS callbacks. Here is a simple complete example, that you can hopefully adapt suit your specific needs:

    import jinja2

    from bokeh.io import curdoc
    from bokeh.layouts import row,column
    from bokeh.plotting import figure
    from bokeh.models import Button, CustomJS

    plot = figure(plot_width = 300, plot_height = 300, title="")
    plot.toolbar.logo = None
    plot.toolbar_location = None

    button = Button(label="foo")
    button.js_on_click(CustomJS(code="""
        document.getElementById("overlay").style.display = "block";
    """))

    curdoc().add_root(row(plot, button))
    curdoc().template = jinja2.Template("""
    {% extends base %}

    {% block title %}Overlay Example{% endblock %}

    {% block preamble %}
    <style>
    #overlay {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: pointer; /* Add a pointer on hover */
    }
    </style>
    {% endblock %}
    {% block contents %}
    <div id="overlay"><img src='https://media.giphy.com/media/zZMTVkTeEfeEg/giphy.gif'></div>
    {{ embed(roots[0]) }}
    {% endblock %}
    """)

Thanks,

Bryan

···

On Aug 8, 2018, at 02:17, [email protected] wrote:

from bokeh.plotting import figure, curdoc
from bokeh.models.widgets import Panel, Tabs, Select,Button
from bokeh.layouts import row,column
from bokeh.models.layouts import Column
from bokeh.models.layouts import WidgetBox
from bokeh.models.layouts import Row
from bokeh.models.widgets import Paragraph,Div
from bokeh.layouts import widgetbox

doc = curdoc()
def heythere():
  divP = Div(text="<img src='myapp1/static/new_giphy.gif'>",width = 300,height=300)
  layoutRow.children[0] = widgetbox(children = [divP], width = 300, height = 300)
page_logo = figure(plot_width = 300, plot_height = 300, title="")
page_logo.toolbar.logo = None
page_logo.toolbar_location = None
button = Button(label="foo")
button.on_click(heythere)
layoutRow = row(page_logo,button)
layout = column(layoutRow)
doc.add_root(layout)

Thanks again Bryan for the reply. In the documentation, I think there is a conflict of template directory. In REFERENCE guide, it says that the FILE is under bokeh.core.templates but is under bokeh.core._templates in my local bokeh directory. I also checked the bokeh version, whether this is version dependent but in latest version, file.html is also under …_templates folder. And in the answer you provided, I didn’t get where base is defined or which directory jinja2 is checking for base. I believe it should be located under templates folder but when I locate file.html under templates, “there is no roots defined” is raised. You can find the sample code below. Could you please help me out figuring this particular example?

import jinja2

#from bokeh.core._templates import file as base

from bokeh.io import curdoc

from bokeh.layouts import row,column

from bokeh.plotting import figure

from bokeh.models import Button, CustomJS

from jinja2 import Environment, BaseLoader,FileSystemLoader

plot = figure(plot_width = 300, plot_height = 300, title="")

plot.toolbar.logo = None

plot.toolbar_location = None

button = Button(label=“foo”)

button.js_on_click(CustomJS(code="""

document.getElementById(“overlay”).style.display = “block”;

“”"))

curdoc().add_root(row(plot, button))

curdoc().template = Environment(loader=FileSystemLoader(‘templates/’)).from_string("""

{% extends “file.html” %}

{% block title %}Overlay Example{% endblock %}

{% block preamble %}

#overlay { position: fixed; /* Sit on top of the page content */ display: none; /* Hidden by default */ width: 100%; /* Full width (cover the whole page) */ height: 100%; /* Full height (cover the whole page) */ top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); /* Black background with opacity */ z-index: 2; /* Specify a stack order in case you're using a different order for other elements */ cursor: pointer; /* Add a pointer on hover */ }

{% endblock %}

{% block contents %}

{{ embed(doc.roots[0]) }}

{% endblock %}

“”")

Thanks,

Baran.

···

On Wednesday, August 8, 2018 at 10:06:12 PM UTC+3, Bryan Van de ven wrote:

Hi,

There are some issues with layout we are still sorting out. Additionally I would never recommend any approach that swaps plots in and out like you are attempting, since that will result in alot of complicated synchronization options. Instead, I would recommend using a non-bokeh overlay div that you explicitly control via CustomJS callbacks. Here is a simple complete example, that you can hopefully adapt suit your specific needs:

import jinja2



from [bokeh.io](http://bokeh.io) import curdoc

from bokeh.layouts import row,column

from bokeh.plotting import figure

from bokeh.models import Button, CustomJS





plot = figure(plot_width = 300, plot_height = 300, title="")

plot.toolbar.logo = None

plot.toolbar_location = None



button = Button(label="foo")

button.js_on_click(CustomJS(code="""

    document.getElementById("overlay").style.display = "block";

"""))



curdoc().add_root(row(plot, button))

curdoc().template = jinja2.Template("""

{% extends base %}



{% block title %}Overlay Example{% endblock %}



{% block preamble %}

<style>

#overlay {

    position: fixed; /* Sit on top of the page content */

    display: none; /* Hidden by default */

    width: 100%; /* Full width (cover the whole page) */

    height: 100%; /* Full height (cover the whole page) */

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0,0,0,0.5); /* Black background with opacity */

    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */

    cursor: pointer; /* Add a pointer on hover */

}

</style>

{% endblock %}

{% block contents %}

<div id="overlay"><img src='[https://media.giphy.com/media/zZMTVkTeEfeEg/giphy.gif](https://media.giphy.com/media/zZMTVkTeEfeEg/giphy.gif)'></div>

{{ embed(roots[0]) }}

{% endblock %}

""")

Thanks,

Bryan

On Aug 8, 2018, at 02:17, [email protected] wrote:

from bokeh.plotting import figure, curdoc

from bokeh.models.widgets import Panel, Tabs, Select,Button

from bokeh.layouts import row,column
from bokeh.models.layouts import Column

from bokeh.models.layouts import WidgetBox

from bokeh.models.layouts import Row

from bokeh.models.widgets import Paragraph,Div

from bokeh.layouts import widgetbox

doc = curdoc()

def heythere():

    divP = Div(text="<img src='myapp1/static/new_giphy.gif'>",width = 300,height=300)
    layoutRow.children[0] = widgetbox(children = [divP], width = 300, height = 300)

page_logo = figure(plot_width = 300, plot_height = 300, title="")

page_logo.toolbar.logo = None

page_logo.toolbar_location = None

button = Button(label=“foo”)

button.on_click(heythere)
layoutRow = row(page_logo,button)

layout = column(layoutRow)

doc.add_root(layout)

The reference guide is referring to the python module that exposes the Jinja Template objects:

  https://github.com/bokeh/bokeh/blob/master/bokeh/core/templates.py

Yes, the raw template source code is under bokeh.core._templates but that's not anything users should ever use directly.

Here is a complete example of a standalone Bokeh document using a custom template you can refer to:

  https://github.com/bokeh/bokeh/blob/master/examples/plotting/file/custom_layout.py

Thanks,

Bryan

···

On Aug 10, 2018, at 11:19, [email protected] wrote:

Thanks again Bryan for the reply. In the documentation, I think there is a conflict of template directory. In REFERENCE guide, it says that the FILE is under bokeh.core.templates but is under bokeh.core._templates in my local bokeh directory. I also checked the bokeh version, whether this is version dependent but in latest version, file.html is also under ..._templates folder. And in the answer you provided, I didn't get where base is defined or which directory jinja2 is checking for base. I believe it should be located under templates folder but when I locate file.html under templates, "there is no roots defined" is raised. You can find the sample code below. Could you please help me out figuring this particular example?

import jinja2
#from bokeh.core._templates import file as base
from bokeh.io import curdoc
from bokeh.layouts import row,column
from bokeh.plotting import figure
from bokeh.models import Button, CustomJS
from jinja2 import Environment, BaseLoader,FileSystemLoader

plot = figure(plot_width = 300, plot_height = 300, title="")
plot.toolbar.logo = None
plot.toolbar_location = None

button = Button(label="foo")
button.js_on_click(CustomJS(code="""
    document.getElementById("overlay").style.display = "block";
"""))

curdoc().add_root(row(plot, button))
curdoc().template = Environment(loader=FileSystemLoader('templates/')).from_string("""
{% extends "file.html" %}

{% block title %}Overlay Example{% endblock %}

{% block preamble %}
<style>
#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
</style>
{% endblock %}
{% block contents %}
<div id="overlay"><img src='https://media.giphy.com/media/zZMTVkTeEfeEg/giphy.gif'></div>
{{ embed(doc.roots[0]) }}
{% endblock %}
""")

Thanks,

Baran.

On Wednesday, August 8, 2018 at 10:06:12 PM UTC+3, Bryan Van de ven wrote:
Hi,

There are some issues with layout we are still sorting out. Additionally I would never recommend any approach that swaps plots in and out like you are attempting, since that will result in *alot* of complicated synchronization options. Instead, I would recommend using a non-bokeh overlay div that you explicitly control via CustomJS callbacks. Here is a simple complete example, that you can hopefully adapt suit your specific needs:

    import jinja2

    from bokeh.io import curdoc
    from bokeh.layouts import row,column
    from bokeh.plotting import figure
    from bokeh.models import Button, CustomJS

    plot = figure(plot_width = 300, plot_height = 300, title="")
    plot.toolbar.logo = None
    plot.toolbar_location = None

    button = Button(label="foo")
    button.js_on_click(CustomJS(code="""
        document.getElementById("overlay").style.display = "block";
    """))

    curdoc().add_root(row(plot, button))
    curdoc().template = jinja2.Template("""
    {% extends base %}

    {% block title %}Overlay Example{% endblock %}

    {% block preamble %}
    <style>
    #overlay {
        position: fixed; /* Sit on top of the page content */
        display: none; /* Hidden by default */
        width: 100%; /* Full width (cover the whole page) */
        height: 100%; /* Full height (cover the whole page) */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
        z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
        cursor: pointer; /* Add a pointer on hover */
    }
    </style>
    {% endblock %}
    {% block contents %}
    <div id="overlay"><img src='https://media.giphy.com/media/zZMTVkTeEfeEg/giphy.gif'></div>
    {{ embed(roots[0]) }}
    {% endblock %}
    """)

Thanks,

Bryan

> On Aug 8, 2018, at 02:17, [email protected] wrote:
>
> from bokeh.plotting import figure, curdoc
> from bokeh.models.widgets import Panel, Tabs, Select,Button
> from bokeh.layouts import row,column
> from bokeh.models.layouts import Column
> from bokeh.models.layouts import WidgetBox
> from bokeh.models.layouts import Row
> from bokeh.models.widgets import Paragraph,Div
> from bokeh.layouts import widgetbox
>
>
> doc = curdoc()
> def heythere():
> divP = Div(text="<img src='myapp1/static/new_giphy.gif'>",width = 300,height=300)
> layoutRow.children[0] = widgetbox(children = [divP], width = 300, height = 300)
> page_logo = figure(plot_width = 300, plot_height = 300, title="")
> page_logo.toolbar.logo = None
> page_logo.toolbar_location = None
> button = Button(label="foo")
> button.on_click(heythere)
> layoutRow = row(page_logo,button)
> layout = column(layoutRow)
> doc.add_root(layout)

--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/8d01d5f8-6307-4d07-b0df-f9883212d8eb%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.