How to load image in Bokeh App

Bryan · January 10, 2017, 10:21pm

Hi, every app has it's own static path, e.g. if I add a static dir to the weather app, and run

bokeh serve weather

Then a file foo.txt I put in static is at:

So perhaps you need to add the app name to the path?

Bryan

···

On Jan 10, 2017, at 4:21 AM, [email protected] wrote:

Hello,
I have the same issue however I can not find a way to solve it...
Basically mycode looks like this:

  div_img_html = "<img src='static/image.png'>"
  div_img = Div(text = div_img_html)

however when running the server I get:

  404 GET /static/tree.png (::1) 2.00ms

So basically the bokeh server doesn't know how to retrieve the file....

Thank you in advance for any suggestions !

On Wednesday, July 13, 2016 at 7:58:02 PM UTC+3, Bryan Van de ven wrote:
You'll need to:

* make a "directory" style app
* make a "static" subdirectoy in the app directory
* put all your pngs, etc in the "static" subdirectoy
* then anything in the static directory is available at the relative URL "myappname/static" (substitute whatever your actual app name is for "myappname")

Just to be clear, it's never going to be possible to load files from arbitrary filesystem locations like "C:/foo/bar.png", only from the application-specific "static" directory.

Bryan

> On Jul 13, 2016, at 11:48 AM, Rakesh Partapsing <[email protected]> wrote:
>
> Dear Bryan,
>
> Upon this subject you mentioned:
>
> "The browser security policy is not something we have control over. The 0.12 release out in a few days has support for a per-app "static" directory, with this feature you can have the bokeh server serve your .png and then it will work."
>
> I am still not able to load any .pngs from file using bokeh 0.12 when creating an app. Again same error in JSConsoleLog which is:
> localhost/:1 Not allowed to load local resource: file:///C:/foo/bar.png
>
> My code:
> fSave = r"file:///C:\foo\bar.png"
>
> src = ColumnDataSource(dict(url = [fSave]))
>
> plot = Figure(plot_width=800, plot_height=400)
> plot.x_range=Range1d(start=0, end=1)
> plot.y_range=Range1d(start=0, end=1)
> plot.image_url(url='url', x=0, y=1, h=1, w=1, source=src)
>
> Can you guide to the correct way to load png's from file into a bokeh app?
>
> Greetings,
> Rakesh
>
>
>
>
> On Thu, Jun 23, 2016 at 11:38 PM, Bryan Van de Ven <[email protected]> wrote:
> Ok, the first problem is that you don't put "file://" in the URL. Without this, the browser tries to load from a relative URL on the bokeh server, and this fails with a 404. However, even putting in that, then I see a different error in the JS console:
>
> Not allowed to load local resource: file:///private/tmp/logo.png
>
> The browser security policy is not something we have control over. The 0.12 release out in a few days has support for a per-app "static" directory, with this feature you can have the bokeh server serve your .png and then it will work.
>
> Bryan
>
> > On Jun 23, 2016, at 4:33 PM, Bryan Van de Ven <[email protected]> wrote:
> >
> >
> >> On Jun 23, 2016, at 4:31 PM, Rakesh Partapsing <[email protected]> wrote:
> >>
> >> Hi Bryan,
> >>
> >> I am not sure how I gave you the impression it was not on 1 machine. Sorry for that.
> >
> > You didn't give me that impression, but neither did I want to assume that.
> >
> >> All is on one machine inside the same folder.
> >> "C:\Users\Rakesh\Desktop\app\logo.png". pathname for the logo.
> >>
> >> Does it work on you side?
> >> So you are suggesting to make this png an http url?
> >> So basically loading from file is not possible?
> >
> > I'm not saying that either, but I am asking if you can try to provide more information. Are there errors in the browser's JS console? Are there any 404's reported?
> >
> > Bryan
> >
> >>
> >>
> >> On Thu, Jun 23, 2016 at 11:23 PM, Bryan Van de Ven <[email protected]> wrote:
> >> In general, unless everything and all use is always only ever going to be on one machine, then you will probably want real http URLs.
> >>
> >> Bryan
> >>
> >>> On Jun 23, 2016, at 4:22 PM, Bryan Van de Ven <[email protected]> wrote:
> >>>
> >>> Rakesh,
> >>>
> >>> But where is the browser? If the server is on one machine and the browser is on another, this cannot work. Or if there is a permissions issue. The URL has to be *accessible* to the *browser*. If you can't type "file://some/path/logo.png" in the browser URL bar and see the image show up, then it won't work in a bokeh server app either, because all ImageURL does is try to load the URL the same way. Is there any output in the browser JS console?
> >>>
> >>> Bryan
> >>>
> >>>
> >>>> On Jun 23, 2016, at 4:18 PM, Rakesh Partapsing <[email protected]> wrote:
> >>>>
> >>>> Hi Bryan,
> >>>>
> >>>> See below. Using Python 3.5, still no image. logo.png and main.py are in the same folder called 'app'. command: bokeh serve --show app.
> >>>> --------------------
> >>>>
> >>>> from os.path import dirname, join
> >>>>
> >>>> from bokeh.models.glyphs import ImageURL
> >>>> from bokeh.models import ColumnDataSource, Range1d, Plot, LinearAxis, Grid, VBox
> >>>> from bokeh.io import curdoc
> >>>> from bokeh.models.widgets import Panel, Tabs, Paragraph
> >>>>
> >>>> url = join(dirname(__file__), 'logo.png')
> >>>>
> >>>> source = ColumnDataSource(dict(url = [url]))
> >>>>
> >>>> xdr = Range1d(start=0, end=1)
> >>>> ydr = Range1d(start=0, end=1)
> >>>>
> >>>> plot = Plot(title="ImageURL", x_range=xdr, y_range=ydr)
> >>>>
> >>>> image1 = ImageURL(url="url", x=0, y=1, w=1, h=1, anchor="center", global_alpha=0.2)
> >>>> plot.add_glyph(source, image1)
> >>>>
> >>>> xaxis = LinearAxis()
> >>>> plot.add_layout(xaxis, 'below')
> >>>>
> >>>> yaxis = LinearAxis()
> >>>> plot.add_layout(yaxis,'left')
> >>>>
> >>>> plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
> >>>> plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))
> >>>>
> >>>> p1 = VBox(Paragraph(width=50), plot, width=800, height=600)
> >>>>
> >>>> tab1 = Panel(child=p1, title='tab1')
> >>>>
> >>>> tabs = Tabs(tabs=[tab1])
> >>>>
> >>>> curdoc().add_root(tabs)
> >>>>
> >>>> On Thu, Jun 23, 2016 at 6:26 PM, Bryan Van de Ven <[email protected]> wrote:
> >>>>
> >>>> Well, the Image code below is definitely not going to work. Can you share what you tried with ImageURL? My first thought is that the URL is simply not accessible. It's a local file, are you viewing it on a remote machine. The URL has to be accessible to the *browser*. Are there any messages in the browser JS console?
> >>>>
> >>>> Bryan
> >>>>
> >>>>> On Jun 23, 2016, at 11:19 AM, Rakesh Partapsing <[email protected]> wrote:
> >>>>>
> >>>>> Hi,
> >>>>>
> >>>>> Thank you for the quick reply.
> >>>>> ImageURL I also tried inside the bokeh app.
> >>>>> No luck sofar.
> >>>>> I also tried it inside the notebook using output_notebook() instead of pushing it to an html file, and again no image is displayed.
> >>>>>
> >>>>> Best wishes,
> >>>>> Rakesh
> >>>>>
> >>>>>> On 23 jun. 2016, at 17:52, Bryan Van de Ven <[email protected]> wrote:
> >>>>>>
> >>>>>> Hi,
> >>>>>>
> >>>>>> Image does not accept urls or image formats. It takes 2d arrays of numbers and a colormap to color the data according to. If you want to display urls of .png, etc, you want ImageURL. See, e.g.
> >>>>>>
> >>>>>> https://github.com/bokeh/bokeh/blob/master/examples/models/image_url.py
> >>>>>>
> >>>>>> Thanks,
> >>>>>>
> >>>>>> Bryan
> >>>>>>
> >>>>>>> On Jun 23, 2016, at 10:44 AM, Rakesh Partapsing <[email protected]> wrote:
> >>>>>>>
> >>>>>>> I also tried the code from the example but no luck so far...
> >>>>>>>
> >>>>>>> import numpy as np
> >>>>>>> from bokeh.models import ColumnDataSource, Range1d, Plot, LinearAxis, Grid
> >>>>>>> from bokeh.models.glyphs import Image
> >>>>>>> from bokeh.plotting import show
> >>>>>>> from bokeh.io import show, output_notebook
> >>>>>>>
> >>>>>>> url = r"C:\foo.png"
> >>>>>>>
> >>>>>>> output_notebook()
> >>>>>>>
> >>>>>>> source = ColumnDataSource(dict(
> >>>>>>> url = [url]
> >>>>>>> ))
> >>>>>>>
> >>>>>>> xdr = Range1d(start=0, end=1)
> >>>>>>> ydr = Range1d(start=0, end=1)
> >>>>>>>
> >>>>>>> plot = Plot(
> >>>>>>> title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,
> >>>>>>> h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)
> >>>>>>>
> >>>>>>> image1 = Image(image=url)
> >>>>>>> plot.add_glyph(image1)
> >>>>>>>
> >>>>>>> xaxis = LinearAxis()
> >>>>>>> plot.add_layout(xaxis, 'below')
> >>>>>>>
> >>>>>>> yaxis = LinearAxis()
> >>>>>>> plot.add_layout(yaxis,'left')
> >>>>>>>
> >>>>>>> plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
> >>>>>>> plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))
> >>>>>>>
> >>>>>>> show(plot)
> >>>>>>>
> >>>>>>> On Thu, Jun 23, 2016 at 5:13 PM, Raki <[email protected]> wrote:
> >>>>>>> Hi,
> >>>>>>>
> >>>>>>> I wish to plot an image from url. The following code works fine inside a notebook.
> >>>>>>>
> >>>>>>> from bokeh.plotting import Figure, show, output_file
> >>>>>>> from bokeh.models import ColumnDataSource
> >>>>>>>
> >>>>>>> output_file('image.html')
> >>>>>>>
> >>>>>>> url = r'C:\foo.png'
> >>>>>>>
> >>>>>>> source = ColumnDataSource(dict(url = [url]))
> >>>>>>>
> >>>>>>> p = Figure(x_range=(0,1), y_range=(0,1), plot_width=800, plot_height=400)
> >>>>>>> p.image_url(url='url', x=0, y=1, h=1, w=1, source=source)
> >>>>>>> show(p)
> >>>>>>>
> >>>>>>> ....but fails to run inside a bokeh app: first some errors on the x,y-ranges and also the image is not loaded + gives no error.
> >>>>>>>
> >>>>>>> Any help here is much appreciated.
> >>>>>>>
> >>>>>>> Best wishes,
> >>>>>>> Rakesh
> >>>>>>>
> >>>>>>> --
> >>>>>>> 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 bokeh+un...@continuum.io.
> >>>>>>> To post to this group, send email to bo...@continuum.io.
> >>>>>>> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/866781e4-3d23-41a3-9a9e-9720b555bb76%40continuum.io\.
> >>>>>>> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >>>>>>>
> >>>>>>>
> >>>>>>> --
> >>>>>>> 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 bokeh+un...@continuum.io.
> >>>>>>> To post to this group, send email to bo...@continuum.io.
> >>>>>>> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKGpf60t%3DqKcRsF834%3DS5WNe0-VS__xdUeqb1mrUpmmqSPWRGg%40mail.gmail.com\.
> >>>>>>> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >>>>>>
> >>>>>> --
> >>>>>> 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 bokeh+un...@continuum.io.
> >>>>>> To post to this group, send email to bo...@continuum.io.
> >>>>>> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/5C34A16E-87FC-4D80-906E-C8EBE02D1426%40continuum.io\.
> >>>>>> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >>>>>
> >>>>> --
> >>>>> 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 bokeh+un...@continuum.io.
> >>>>> To post to this group, send email to bo...@continuum.io.
> >>>>> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/C357537C-FC04-4F0F-BC7B-74CF6DB22E91%40gmail.com\.
> >>>>> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >>>>
> >>>> --
> >>>> 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 bokeh+un...@continuum.io.
> >>>> To post to this group, send email to bo...@continuum.io.
> >>>> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/EF114BCB-C227-44E2-94BC-A62C09DEF7A4%40continuum.io\.
> >>>> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >>>>
> >>>>
> >>>> --
> >>>> 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 bokeh+un...@continuum.io.
> >>>> To post to this group, send email to bo...@continuum.io.
> >>>> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKGpf61rxLeWEwhmkM-fcHXx%2BZzWoYWPTNUv%2BitkFikYp51R4g%40mail.gmail.com\.
> >>>> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >>>
> >>
> >> --
> >> 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 bokeh+un...@continuum.io.
> >> To post to this group, send email to bo...@continuum.io.
> >> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/221EF78A-8DD9-406D-AB05-0AD435109B10%40continuum.io\.
> >> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >>
> >>
> >> --
> >> 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 bokeh+un...@continuum.io.
> >> To post to this group, send email to bo...@continuum.io.
> >> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKGpf60r9A%3DA6yk0eQ6XYc35odvfZEiQ3TS%3DQtEEXXjCmvuv3g%40mail.gmail.com\.
> >> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
> >
>
> --
> 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 bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/6EF0C055-4D5E-41F2-88D1-4722D33F1EC5%40continuum.io\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
>
>
> --
> 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 bokeh+un...@continuum.io.
> To post to this group, send email to bo...@continuum.io.
> To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAKGpf63uTASm0%2B2FVzSrrJqR7uEmv06rfMaPST4MmzqUJJ%3DDRA%40mail.gmail.com\.
> For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
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/909d65d8-e9ad-44c3-9b6e-404297e9fbb1%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

drcdrgm · January 25, 2017, 5:02pm

Hello,

I am also having problems showing local images, though images from the web are displayed fine.

My directory structure and files are:

Ex1/

Ex1/ShowImage.py

Ex1/static/tree.png

Below is ShowImage.py. I run it as: bokeh serve --show ShowImage.py

What am I doing wrong?

Thanks,

Chris

···

‘’’ ShowImage.py: show image on figure in Bokeh. ‘’’

from os.path import dirname, join

from bokeh.io import curdoc

from bokeh.models import ColumnDataSource

from bokeh.plotting import figure

def PerformPlot():

url1 = “http://bokeh.pydata.org/en/latest/_static/images/logo.png” # WORKS

None of the following work…

#url1 = “http://localhost:5006/static/tree.png” # 404 error

#url1 = “http://localhost:5006/tree.png” # 404 error

#url1 = join(dirname(file), ‘static/tree.png’) # no error, but nothing shown

#url1 = “static/tree.png” # 404 error

#url1 = “tree.png” # 404 error

print(“URL IS: %s” % url1)

Add an additional image plot

plot2 = figure(plot_height=400, plot_width=400, title=“Image”, x_range=(0, 1), y_range=(0, 1))

cds = ColumnDataSource(dict(url=[url1]))

plot2.image_url(url=‘url’, x=0.5, y=0.5, w=1, h=1, anchor=“center”, source=cds)

this works too:

plot2.image_url(url=[url1], x=0.5, y=0.5, w=1, h=1, anchor=“center”)

curdoc().add_root(plot2)

PerformPlot()

On Thursday, June 23, 2016 at 11:13:23 AM UTC-4, Raki wrote:

Hi,

I wish to plot an image from url. The following code works fine inside a notebook.

from bokeh.plotting import Figure, show, output_file

from bokeh.models import ColumnDataSource

output_file(‘image.html’)

url = r’C:\foo.png’

source = ColumnDataSource(dict(url = [url]))

p = Figure(x_range=(0,1), y_range=(0,1), plot_width=800, plot_height=400)

p.image_url(url=‘url’, x=0, y=1, h=1, w=1, source=source)

show(p)

…but fails to run inside a bokeh app: first some errors on the x,y-ranges and also the image is not loaded + gives no error.

Any help here is much appreciated.

Best wishes,

Rakesh

Bryan · November 25, 2017, 5:51pm

Here is a minimal bokeh server app example:

  # main.py
  from bokeh.io import curdoc
  from bokeh.plotting import figure

p = figure(x_range=(0,10), y_range=(0,10))
p.image_url(x=5, y=5, w=2, h=2, url=["imgtest/static/logo.png"])

curdoc().add_root℗

This assumes the following directory structure, as described earlier:

  imgtest/
     + main.py
     + static/
    + logo.png

Then run (in the directory above "imgtest") with

bokeh serve --show imgtest

Thanks,

Bryan

···

On Jun 23, 2016, at 10:52, Bryan Van de ven <[email protected]> wrote:

Hi,

Image does not accept urls or image formats. It takes 2d arrays of numbers and a colormap to color the data according to. If you want to display urls of .png, etc, you want ImageURL. See, e.g.

  https://github.com/bokeh/bokeh/blob/master/examples/models/image_url.py

Thanks,

Bryan

On Jun 23, 2016, at 10:44 AM, Rakesh Partapsing <[email protected]> wrote:

I also tried the code from the example but no luck so far...

import numpy as np
from bokeh.models import ColumnDataSource, Range1d, Plot, LinearAxis, Grid
from bokeh.models.glyphs import Image
from bokeh.plotting import show
from bokeh.io import show, output_notebook

url = r"C:\foo.png"

output_notebook()

source = ColumnDataSource(dict(
   url = [url]
))

xdr = Range1d(start=0, end=1)
ydr = Range1d(start=0, end=1)

plot = Plot(
   title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,
   h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)

image1 = Image(image=url)
plot.add_glyph(image1)

xaxis = LinearAxis()
plot.add_layout(xaxis, 'below')

yaxis = LinearAxis()
plot.add_layout(yaxis,'left')

plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))
plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))

show(plot)

On Thu, Jun 23, 2016 at 5:13 PM, Raki <[email protected]> wrote:
Hi,

I wish to plot an image from url. The following code works fine inside a notebook.

from bokeh.plotting import Figure, show, output_file
from bokeh.models import ColumnDataSource

output_file('image.html')

url = r'C:\foo.png'

source = ColumnDataSource(dict(url = [url]))

p = Figure(x_range=(0,1), y_range=(0,1), plot_width=800, plot_height=400)
p.image_url(url='url', x=0, y=1, h=1, w=1, source=source)
show(p)

....but fails to run inside a bokeh app: first some errors on the x,y-ranges and also the image is not loaded + gives no error.

Any help here is much appreciated.

Best wishes,
Rakesh

--
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/866781e4-3d23-41a3-9a9e-9720b555bb76%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
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/CAKGpf60t%3DqKcRsF834%3DS5WNe0-VS__xdUeqb1mrUpmmqSPWRGg%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

jameswaltner · May 22, 2018, 7:13pm

all of these examples use bokeh.plotting.figure to include images. (I appologize in advance if the following is really a separate topic)

Is it possible to access the static directory inside a div for the purposes of displaying a header or footer images? Or am I missing something that would allow you to include a bokeh app layout inside a wrapper HTML file to give you nice headers and footers?

I did the following and then included the div_footer object in the layout and the tags came through, but showed up as broken references. Note that I placed the images inside the static folder and I launch the serve app with

bokeh serve main.py --show

···

from bokeh.models.widgets import Div

footer_text = “”"

.footer { height: 30px; width: 100%; } img { max-width: 100%; max-height: 100%; }

“”"

div_footer = Div(text=footer_text,width=1000,height=30)

Please advise. Thanks!

-james

On Saturday, November 25, 2017 at 12:51:34 PM UTC-5, Bryan Van de ven wrote:

Here is a minimal bokeh server app example:
    # main.py
    from [bokeh.io](http://bokeh.io) import curdoc
    from bokeh.plotting import figure


    p = figure(x_range=(0,10), y_range=(0,10))
    p.image_url(x=5, y=5, w=2, h=2, url=["imgtest/static/logo.png"])


    curdoc().add_root℗
This assumes the following directory structure, as described earlier:
    imgtest/

       + main.py

       + static/

            + logo.png
Then run (in the directory above “imgtest”) with
    bokeh serve --show imgtest
Thanks,

Bryan

On Jun 23, 2016, at 10:52, Bryan Van de ven [email protected] wrote:

Hi,

Image does not accept urls or image formats. It takes 2d arrays of numbers and a colormap to color the data according to. If you want to display urls of .png, etc, you want ImageURL. See, e.g.
    [https://github.com/bokeh/bokeh/blob/master/examples/models/image_url.py](https://github.com/bokeh/bokeh/blob/master/examples/models/image_url.py)
Thanks,

Bryan

On Jun 23, 2016, at 10:44 AM, Rakesh Partapsing [email protected] wrote:

I also tried the code from the example but no luck so far…

import numpy as np

from bokeh.models import ColumnDataSource, Range1d, Plot, LinearAxis, Grid

from bokeh.models.glyphs import Image

from bokeh.plotting import show

from bokeh.io import show, output_notebook

url = r"C:\foo.png"

output_notebook()

source = ColumnDataSource(dict(

url = [url]

))

xdr = Range1d(start=0, end=1)

ydr = Range1d(start=0, end=1)

plot = Plot(

title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,

h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)

image1 = Image(image=url)

plot.add_glyph(image1)

xaxis = LinearAxis()

plot.add_layout(xaxis, ‘below’)

yaxis = LinearAxis()

plot.add_layout(yaxis,‘left’)

plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))

plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))

show(plot)

On Thu, Jun 23, 2016 at 5:13 PM, Raki [email protected] wrote:

Hi,

I wish to plot an image from url. The following code works fine inside a notebook.

from bokeh.plotting import Figure, show, output_file

from bokeh.models import ColumnDataSource

output_file(‘image.html’)

url = r’C:\foo.png’

source = ColumnDataSource(dict(url = [url]))

p = Figure(x_range=(0,1), y_range=(0,1), plot_width=800, plot_height=400)

p.image_url(url=‘url’, x=0, y=1, h=1, w=1, source=source)

show(p)

…but fails to run inside a bokeh app: first some errors on the x,y-ranges and also the image is not loaded + gives no error.

Any help here is much appreciated.

Best wishes,

Rakesh

–
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/866781e4-3d23-41a3-9a9e-9720b555bb76%40continuum.io.

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

–
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/CAKGpf60t%3DqKcRsF834%3DS5WNe0-VS__xdUeqb1mrUpmmqSPWRGg%40mail.gmail.com.

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

jameswaltner · May 22, 2018, 7:29pm

I apologize in advance if this is a double post, I hit “Reply”, but didn’t see the reply get posted… I also apologize if this should be a separate post, but it appears to fit here.

I would like to add images to the bokeh app to make it look nice. In particular, would like to add headers and footers. I tried the following to create a div element, and while the div element gets created, all of the img elements show up as broken. Note that I have placed the required images in static directory as discussed above and launched the bokeh server from the directory above my project as shown above.

Is what I am trying to do possible?

Is there a better way of wrapping the bokeh app to give it nice headers and footers or include it in another page?

···

from bokeh.models.widgets import Div

footer_text = “”"

.footer { height: 30px; width: 100%; } img { max-width: 100%; max-height: 100%; }

“”"

div_footer = Div(text=footer_text,width=1000,height=30)

note that in my implementation, there are more elements in the column, but this is not needed for this example.

col = column(div_footer)

create the document

curdoc().add_root(col)

curdoc().title = “My Bokeh App with Footers”

On Saturday, November 25, 2017 at 12:51:34 PM UTC-5, Bryan Van de ven wrote:

Here is a minimal bokeh server app example:
    # main.py
    from [bokeh.io](http://bokeh.io) import curdoc
    from bokeh.plotting import figure


    p = figure(x_range=(0,10), y_range=(0,10))
    p.image_url(x=5, y=5, w=2, h=2, url=["imgtest/static/logo.png"])


    curdoc().add_root℗
This assumes the following directory structure, as described earlier:
    imgtest/

       + main.py

       + static/

            + logo.png
Then run (in the directory above “imgtest”) with
    bokeh serve --show imgtest
Thanks,

Bryan

On Jun 23, 2016, at 10:52, Bryan Van de ven [email protected] wrote:

Hi,

Image does not accept urls or image formats. It takes 2d arrays of numbers and a colormap to color the data according to. If you want to display urls of .png, etc, you want ImageURL. See, e.g.
    [https://github.com/bokeh/bokeh/blob/master/examples/models/image_url.py](https://github.com/bokeh/bokeh/blob/master/examples/models/image_url.py)
Thanks,

Bryan

On Jun 23, 2016, at 10:44 AM, Rakesh Partapsing [email protected] wrote:

I also tried the code from the example but no luck so far…

import numpy as np

from bokeh.models import ColumnDataSource, Range1d, Plot, LinearAxis, Grid

from bokeh.models.glyphs import Image

from bokeh.plotting import show

from bokeh.io import show, output_notebook

url = r"C:\foo.png"

output_notebook()

source = ColumnDataSource(dict(

url = [url]

))

xdr = Range1d(start=0, end=1)

ydr = Range1d(start=0, end=1)

plot = Plot(

title=None, x_range=xdr, y_range=ydr, plot_width=300, plot_height=300,

h_symmetry=False, v_symmetry=False, min_border=0, toolbar_location=None)

image1 = Image(image=url)

plot.add_glyph(image1)

xaxis = LinearAxis()

plot.add_layout(xaxis, ‘below’)

yaxis = LinearAxis()

plot.add_layout(yaxis,‘left’)

plot.add_layout(Grid(dimension=0, ticker=xaxis.ticker))

plot.add_layout(Grid(dimension=1, ticker=yaxis.ticker))

show(plot)

On Thu, Jun 23, 2016 at 5:13 PM, Raki [email protected] wrote:

Hi,

I wish to plot an image from url. The following code works fine inside a notebook.

from bokeh.plotting import Figure, show, output_file

from bokeh.models import ColumnDataSource

output_file(‘image.html’)

url = r’C:\foo.png’

source = ColumnDataSource(dict(url = [url]))

p = Figure(x_range=(0,1), y_range=(0,1), plot_width=800, plot_height=400)

p.image_url(url=‘url’, x=0, y=1, h=1, w=1, source=source)

show(p)

…but fails to run inside a bokeh app: first some errors on the x,y-ranges and also the image is not loaded + gives no error.

Any help here is much appreciated.

Best wishes,

Rakesh

–
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/866781e4-3d23-41a3-9a9e-9720b555bb76%40continuum.io.

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

–
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/CAKGpf60t%3DqKcRsF834%3DS5WNe0-VS__xdUeqb1mrUpmmqSPWRGg%40mail.gmail.com.

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

jameswaltner · May 23, 2018, 2:05pm

got it working… from the example above, needed to start it as Bryan suggested in the directory above the project and the path needs to be the folder name of the project, in this case ‘imgtest’. My previous version used “main” instead of “imgtest” and hence it didn’t work.

Some code here for making an HTML footer with an image inside.

···

from bokeh.models.widgets import Div

footer_text = “”"

.footer { height: 30px; width: 100%; } img { max-width: 100%; max-height: 100%; }

“”"

div_footer = Div(text=footer_text,width=1000,height=30)

note that in my implementation, there are more elements in the column, but this is not needed for this example.

col = column(div_footer)

create the document

curdoc().add_root(col)

curdoc().title = “My Bokeh App with Footers”