Bokeh Embedded in GUI

Hi Jeremy,

Unfortunately I don't have alot of time I can spend on working up examples for this right now, but here is a small static example I cribbed together from some Stack Overflow WX questions:

UPDATE: THE CODE BELOW IS ANCIENT AND NOT APPLICABLE TO ANY VERSION OF BOKEH AFTER 2014

from bokeh.embed import file_html
from bokeh.plotting import *
from bokeh.resources import INLINE
import numpy as np
import wx
import wx.html2

class PlotWidget(wx.Dialog):
  def __init__(self, *args, **kwds):
    wx.Dialog.__init__(self, *args, **kwds)
    sizer = wx.BoxSizer(wx.VERTICAL)
    self.browser = wx.html2.WebView.New(self)
    sizer.Add(self.browser, 1, wx.EXPAND, 10)
    self.SetSizer(sizer)
    self.SetSize((700, 700))

app = wx.App()
w = PlotWidget(None, -1)

N = 1000
x = np.random.random(size=N) * 100
y = np.random.random(size=N) * 100
radii = np.random.random(size=N) * 4.5
colors = ["#%02x%02x%02x" % (r, g, 150) for r, g in zip(np.floor(50+2*x), np.floor(30+2*y))]
scatter(
  x,y, radius=radii, fill_color=colors,
  fill_alpha=0.6, line_color=None,
)
html = file_html(curdoc(), INLINE, "WX Embed Example")

w.browser.SetPage(html, ".")

w.Show()

app.MainLoop()

Note: on OSX with Anaconda, you have to run this with python.app (WX needs a Framework build of python)

Working up an example using the server should not be too hard. You will probably want to use bokeh.embed.autoload_server to generate a script tag that will load your plot from the server, then you can put the script tag wherever you like in the HTML text you pass to the SetPage(...) method. Let me know if I can answer any questions.

Thanks,

Bryan

···

On Aug 14, 2014, at 10:24 AM, Jeremy Patterson <[email protected]> wrote:

Hey Bryan,
I think my best option would be to write the app completely in Python (wxPython looks like a good option). Since I would be planning on updating the data/labels when buttons/dropdown menus are selected, I would either need to delete and remake the static plot or use the bokeh-server method. I am interested in both methods. I would like to keep the interactive tools that bokeh has (zoom, pan, etc.) beside the plot.

It would get me started if you would make a short example showing how to make a simple bokeh plot in a wxPython app and connect a drop-down box or listbox to the plot. (I am new to the GUI building tools in Python since I use Matlab.) Both the static plot and the bokeh-server method would be great to see.

Thanks,
Jeremy

On Friday, August 8, 2014 4:29:43 AM UTC-7, Bryan Van de ven wrote:

Hi Jeremy,

First, here and Stack Overflow are both great places to ask questions, we try to be as responsive as we can to both.

Bokeh requires an HTML5 canvas to render on, but what you have described, embedding a HTML widget into a rich client app, is something that has occurred to me before, although I have not had the opportunity to try it yet. We try to make Bokeh flexible in the ways it can be embedded, so I can imagine a few different scenarios:

* App is written in python (PyQt, wxPython, etc)

This is probably the simplest case right now, you can just call out to Bokeh directly in your app. You can create "static" charts that have the data embedded in them (but still have interactive tools) based on the native app widget interactions. Or you can run bokeh-server and host the data there, and push data updates to the server (causing the plots to update). You can also get things like selections back from the plot to your python app code through the server.

* App is not written in python

If you rich client is written in some other language but you still have access to an HTML widget, you can create and export the JS required to plot your data in python, and then re-use it in your app. If you use the bokeh-server you can update the data with appropriate REST calls to the server, and the pots will update. Without the server, I think in this case you would be limited to "static" data plots.

* pure web-app

We are working on providing our own widget interface that can be used to develop "Bokeh Apps" or "Bokeh Dashboards". WE are still baking things out but will gladly help anyone that wants to try it out.

Can you describe your app a little more, what languages and toolkits, etc that you will be using? I would be interested in helping you develop this use-case and then augmenting our user guide and documentation with more step by step instructions on how to integrate Bokeh in this way.

Thanks for your interest in Bokeh!

Bryan

On Aug 8, 2014, at 12:10 AM, Jeremy Patterson <[email protected]> wrote:

> Hey Bokeh,
>
> I am an active Data plotter and am very interested in Bokeh. Bokeh looks like a very good plotting tool.
>
> Is it possible to embed a Bokeh plot in a Graphical User Interface? Specifically, I would like to make something like the GUI shown halfway down this page:
>
> Create user interface control - MATLAB uicontrol
>
> When the buttons are clicked, the plot responds accordingly. I know there are several packages available to make GUIs in Python but I am not sure if the issue would be embedding iPython or embedding a small browser in the GUI?
>
> Would it be simpler/more appropriate to simply use a browser (Chrome/Firefox) with a plot in it and then put buttons around the plot?
>
> If more appropriate, I can put this question on Stackoverflow.
>
> Thanks.
>
> --
> Jeremy Patterson
>
> --
> 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/CACTwgNa_%3DuFTsYeZg2ea%2BzxSGj88x%3DBqt34THUkFjKcNip3Z7w%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/9d68b891-94f3-4cf3-beb8-816f38c2176a%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.