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, koseog...@gmail.com 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\.
