Correct way to embed a server app into HTML

Greetings:

I wanted to ask what is the correct way to embed a server app into HTML. When I print my script, i get:

When I insert this into the boilerplate html file like so:

ALD Control Toolbox

I get nothing but an error, do I need divs as well? I am running the server via:

python -m bokeh serve GUI.py

and below is my code.

Thank you.

import numpy as np
from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Toggle, TextInput
from bokeh.plotting import figure
from bokeh.embed import autoload_server

import functools

#Setup Toggle Button Widget
Tog_Ar = Toggle(label=“Argon”, button_type = “danger”)
Tog_TMA = Toggle(label=“TMA”, button_type = “danger”)
Tog_WATER = Toggle(label=“WATER”, button_type = “danger”)
Tog_DEZn = Toggle(label=“DEZn”, button_type = “danger”)
Tog_O2 = Toggle(label=“O2”, button_type = “danger”)
Tog_Ellip = Toggle(label=“Ellipsometer”, button_type = “danger”)

ButtonWidgetBox = widgetbox(Tog_Ar,Tog_TMA,Tog_WATER,Tog_DEZn,Tog_O2,Tog_Ellip,width = 150)

#Setup Figures
plot_width = 450
plot_height = 450
OverallPressure = figure(plot_height=450, plot_width=450,title = “Reactor Pressure”)
CyclePressure = figure(plot_height=450, plot_width=450, title = “Cycle Pressure”)

#Toggle Button On Change
def handler(metadata,attr,old_value, new_value):
if new_value == True:
metadata[“Tog”].button_type = “success” # You have activated the button
#print(metadata[“IO”], metadata[“Tog”],attr, new_value)
else:
metadata[“Tog”].button_type = “danger” # You have disabled the button

Tog_Ar.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_Ar}))
Tog_TMA.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_TMA}))
Tog_WATER.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_WATER}))
Tog_DEZn.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_DEZn}))
Tog_O2.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_O2}))
Tog_Ellip.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_Ellip}))

Set up layouts and add to document

curdoc().add_root(row(ButtonWidgetBox, OverallPressure, CyclePressure))
curdoc().title = “ALD Reactor Operations”
script = autoload_server(model = None, url=“http://localhost:5006/GUI”)
print “Script is”
print script

Hi,

You say you get an error. That is important information, please share it, as it's very hard to say anything concrete without complete information.

That say, I don't think the script will work in <head> since it adds a div below itself. It has to go in <body>, wherever you want the app to show up.

Thanks,

Bryan

···

On Jan 31, 2017, at 2:17 PM, Vivek Dwivedi <[email protected]> wrote:

Greetings:

I wanted to ask what is the correct way to embed a server app into HTML. When I print my script, i get:

<script
    src="http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=c54ae329-cf14-427e-8687-ec7ff15ec9af&quot;
    id="c54ae329-cf14-427e-8687-ec7ff15ec9af"
    data-bokeh-model-id=""
    data-bokeh-doc-id=""
></script>

When I insert this into the boilerplate html file like so:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>ALD Control Toolbox</title>
        <script
        src="http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=54cfe9c7-e531-4e91-95f5-be0c8c5e1f45&quot;
        id="54cfe9c7-e531-4e91-95f5-be0c8c5e1f45"
        data-bokeh-model-id=""
        data-bokeh-doc-id=""
    ></script>
    </head>
    <body>
        <!-- INSERT DIVS HERE -->
    </body>
</html>

I get nothing but an error, do I need divs as well? I am running the server via:

python -m bokeh serve GUI.py

and below is my code.

Thank you.

import numpy as np
from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Toggle, TextInput
from bokeh.plotting import figure
from bokeh.embed import autoload_server

import functools

#Setup Toggle Button Widget
Tog_Ar = Toggle(label="Argon", button_type = "danger")
Tog_TMA = Toggle(label="TMA", button_type = "danger")
Tog_WATER = Toggle(label="WATER", button_type = "danger")
Tog_DEZn = Toggle(label="DEZn", button_type = "danger")
Tog_O2 = Toggle(label="O2", button_type = "danger")
Tog_Ellip = Toggle(label="Ellipsometer", button_type = "danger")

ButtonWidgetBox = widgetbox(Tog_Ar,Tog_TMA,Tog_WATER,Tog_DEZn,Tog_O2,Tog_Ellip,width = 150)

#Setup Figures
plot_width = 450
plot_height = 450
OverallPressure = figure(plot_height=450, plot_width=450,title = "Reactor Pressure")
CyclePressure = figure(plot_height=450, plot_width=450, title = "Cycle Pressure")

#Toggle Button On Change
def handler(metadata,attr,old_value, new_value):
  if new_value == True:
    metadata["Tog"].button_type = "success" # You have activated the button
    #print(metadata["IO"], metadata["Tog"],attr, new_value)
  else:
    metadata["Tog"].button_type = "danger" # You have disabled the button
    
Tog_Ar.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_Ar}))
Tog_TMA.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_TMA}))
Tog_WATER.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_WATER}))
Tog_DEZn.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_DEZn}))
Tog_O2.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_O2}))
Tog_Ellip.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_Ellip}))

# Set up layouts and add to document

curdoc().add_root(row(ButtonWidgetBox, OverallPressure, CyclePressure))
curdoc().title = "ALD Reactor Operations"
script = autoload_server(model = None, url="http://localhost:5006/GUI&quot;\)
print "Script is"
print script

--
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/5bafcf0b-3834-43ec-a5f2-bcaa83c27895%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi Bryan:

I moved the script to the body but I get the following error:

2017-02-01 10:27:31,299 W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Figure(id=‘9962b87c-bead-4326-81cc-f64bdf65b7fb’, …)
2017-02-01 10:27:31,300 W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Figure(id=‘ffa62f48-9783-481f-a83d-afab3411c99b’, …)
2017-02-01 10:27:31,311 200 GET /GUI/autoload.js?bokeh-autoload-element=54cfe9c7-e531-4e91-95f5-be0c8c5e1f45 (127.0.0.1) 83.03ms
2017-02-01 10:27:31,827 Refusing websocket connection from Origin ‘null’; use --allow-websocket-origin= to permit this; currently we allow origins set([‘localhost:5006’])
2017-02-01 10:27:31,827 403 GET /GUI/ws?bokeh-protocol-version=1.0&bokeh-session-id=4CZ4OVMDm88l9VPdzrvthjhKFCbI9MHvjNK2xYG55XlX (127.0.0.1) 0.71ms

I am running the bokeh server first via:

python -m bokeh serve --host localhost:5006 GUI.py

···

On Tuesday, January 31, 2017 at 6:35:15 PM UTC-5, Bryan Van de ven wrote:

Hi,

You say you get an error. That is important information, please share it, as it’s very hard to say anything concrete without complete information.

That say, I don’t think the script will work in since it adds a div below itself. It has to go in , wherever you want the app to show up.

Thanks,

Bryan

On Jan 31, 2017, at 2:17 PM, Vivek Dwivedi [email protected] wrote:

Greetings:

I wanted to ask what is the correct way to embed a server app into HTML. When I print my script, i get:

<script
src="[http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=c54ae329-cf14-427e-8687-ec7ff15ec9af](http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=c54ae329-cf14-427e-8687-ec7ff15ec9af)"
id="c54ae329-cf14-427e-8687-ec7ff15ec9af"
data-bokeh-model-id=""
data-bokeh-doc-id=""

When I insert this into the boilerplate html file like so:

<head>
    <meta charset="utf-8">
    <title>ALD Control Toolbox</title>
    <script
    src="[http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=54cfe9c7-e531-4e91-95f5-be0c8c5e1f45](http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=54cfe9c7-e531-4e91-95f5-be0c8c5e1f45)"
    id="54cfe9c7-e531-4e91-95f5-be0c8c5e1f45"
    data-bokeh-model-id=""
    data-bokeh-doc-id=""
></script>
</head>
<body>
    <!-- INSERT DIVS HERE -->
</body>

I get nothing but an error, do I need divs as well? I am running the server via:

python -m bokeh serve GUI.py

and below is my code.

Thank you.

import numpy as np

from bokeh.io import curdoc

from bokeh.layouts import row, widgetbox

from bokeh.models import ColumnDataSource

from bokeh.models.widgets import Toggle, TextInput

from bokeh.plotting import figure

from bokeh.embed import autoload_server

import functools

#Setup Toggle Button Widget

Tog_Ar = Toggle(label=“Argon”, button_type = “danger”)

Tog_TMA = Toggle(label=“TMA”, button_type = “danger”)

Tog_WATER = Toggle(label=“WATER”, button_type = “danger”)

Tog_DEZn = Toggle(label=“DEZn”, button_type = “danger”)

Tog_O2 = Toggle(label=“O2”, button_type = “danger”)

Tog_Ellip = Toggle(label=“Ellipsometer”, button_type = “danger”)

ButtonWidgetBox = widgetbox(Tog_Ar,Tog_TMA,Tog_WATER,Tog_DEZn,Tog_O2,Tog_Ellip,width = 150)

#Setup Figures

plot_width = 450

plot_height = 450

OverallPressure = figure(plot_height=450, plot_width=450,title = “Reactor Pressure”)

CyclePressure = figure(plot_height=450, plot_width=450, title = “Cycle Pressure”)

#Toggle Button On Change

def handler(metadata,attr,old_value, new_value):

if new_value == True:

metadata["Tog"].button_type = "success" # You have activated the button
#print(metadata["IO"], metadata["Tog"],attr, new_value)

else:

metadata["Tog"].button_type = "danger" # You have disabled the button

Tog_Ar.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_Ar}))

Tog_TMA.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_TMA}))

Tog_WATER.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_WATER}))

Tog_DEZn.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_DEZn}))

Tog_O2.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_O2}))

Tog_Ellip.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_Ellip}))

Set up layouts and add to document

curdoc().add_root(row(ButtonWidgetBox, OverallPressure, CyclePressure))

curdoc().title = “ALD Reactor Operations”

script = autoload_server(model = None, url=“http://localhost:5006/GUI”)

print “Script is”

print script


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/5bafcf0b-3834-43ec-a5f2-bcaa83c27895%40continuum.io.

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

You’ll have to call the required Javascript also. Please generate a html file and copy the related div tags in the starting of the lines.

···

On Jan 31, 2017 2:17 PM, “Vivek Dwivedi” [email protected] wrote:

Greetings:

I wanted to ask what is the correct way to embed a server app into HTML. When I print my script, i get:

When I insert this into the boilerplate html file like so:

ALD Control Toolbox

I get nothing but an error, do I need divs as well? I am running the server via:

python -m bokeh serve GUI.py

and below is my code.

Thank you.

import numpy as np
from bokeh.io import curdoc
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Toggle, TextInput
from bokeh.plotting import figure
from bokeh.embed import autoload_server

import functools

#Setup Toggle Button Widget
Tog_Ar = Toggle(label=“Argon”, button_type = “danger”)
Tog_TMA = Toggle(label=“TMA”, button_type = “danger”)
Tog_WATER = Toggle(label=“WATER”, button_type = “danger”)
Tog_DEZn = Toggle(label=“DEZn”, button_type = “danger”)
Tog_O2 = Toggle(label=“O2”, button_type = “danger”)
Tog_Ellip = Toggle(label=“Ellipsometer”, button_type = “danger”)

ButtonWidgetBox = widgetbox(Tog_Ar,Tog_TMA,Tog_WATER,Tog_DEZn,Tog_O2,Tog_Ellip,width = 150)

#Setup Figures
plot_width = 450
plot_height = 450
OverallPressure = figure(plot_height=450, plot_width=450,title = “Reactor Pressure”)
CyclePressure = figure(plot_height=450, plot_width=450, title = “Cycle Pressure”)

#Toggle Button On Change
def handler(metadata,attr,old_value, new_value):
if new_value == True:
metadata[“Tog”].button_type = “success” # You have activated the button
#print(metadata[“IO”], metadata[“Tog”],attr, new_value)
else:
metadata[“Tog”].button_type = “danger” # You have disabled the button

Tog_Ar.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_Ar}))
Tog_TMA.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_TMA}))
Tog_WATER.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_WATER}))
Tog_DEZn.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_DEZn}))
Tog_O2.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_O2}))
Tog_Ellip.on_change(“active”,functools.partial(handler, {“IO”: “EIO0”,“Tog”:Tog_Ellip}))

Set up layouts and add to document

curdoc().add_root(row(ButtonWidgetBox, OverallPressure, CyclePressure))
curdoc().title = “ALD Reactor Operations”
script = autoload_server(model = None, url=“http://localhost:5006/GUI”)
print “Script is”
print script

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/5bafcf0b-3834-43ec-a5f2-bcaa83c27895%40continuum.io.

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

Hi,

The first two warnings are because you have created figures, but not called any glyph methods on them. The result is a completely blank plot, which is not usually what's desired. I'm not sure if you just omitted them here for brevity, or intend to add renderers dynamically later. I will say that as of 0.12.4 the most robust technique is to add all renderers up front at the start (even if they are "empty") and then update their data sources later.

The second message was intended to be self-descriptive, but perhaps needs to be expanded. By default, Bokeh server will only allow websocket connections to originate from e.g. localhost:5006 but if you are embedding a bokeh server app in some page a foo.bar.com then you need to tell the bokeh server that it's OK to allow websocket connections from foo.bar.com explicitly. That's what that --allow-websocket-origin command line parameter is for. You need to set that to whatever the host/ip of the page that embeds the plot is.

Thanks,

Bryan

···

On Feb 1, 2017, at 9:29 AM, Vivek Dwivedi <[email protected]> wrote:

Hi Bryan:

I moved the script to the body but I get the following error:

2017-02-01 10:27:31,299 W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Figure(id='9962b87c-bead-4326-81cc-f64bdf65b7fb', ...)
2017-02-01 10:27:31,300 W-1001 (NO_DATA_RENDERERS): Plot has no data renderers: Figure(id='ffa62f48-9783-481f-a83d-afab3411c99b', ...)
2017-02-01 10:27:31,311 200 GET /GUI/autoload.js?bokeh-autoload-element=54cfe9c7-e531-4e91-95f5-be0c8c5e1f45 (127.0.0.1) 83.03ms
2017-02-01 10:27:31,827 Refusing websocket connection from Origin 'null'; use --allow-websocket-origin= to permit this; currently we allow origins set(['localhost:5006'])
2017-02-01 10:27:31,827 403 GET /GUI/ws?bokeh-protocol-version=1.0&bokeh-session-id=4CZ4OVMDm88l9VPdzrvthjhKFCbI9MHvjNK2xYG55XlX (127.0.0.1) 0.71ms

I am running the bokeh server first via:

python -m bokeh serve --host localhost:5006 GUI.py

On Tuesday, January 31, 2017 at 6:35:15 PM UTC-5, Bryan Van de ven wrote:
Hi,

You say you get an error. That is important information, please share it, as it's very hard to say anything concrete without complete information.

That say, I don't think the script will work in <head> since it adds a div below itself. It has to go in <body>, wherever you want the app to show up.

Thanks,

Bryan

> On Jan 31, 2017, at 2:17 PM, Vivek Dwivedi <[email protected]> wrote:
>
> Greetings:
>
> I wanted to ask what is the correct way to embed a server app into HTML. When I print my script, i get:
>
> <script
> src="http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=c54ae329-cf14-427e-8687-ec7ff15ec9af&quot;
> id="c54ae329-cf14-427e-8687-ec7ff15ec9af"
> data-bokeh-model-id=""
> data-bokeh-doc-id=""
> ></script>
>
> When I insert this into the boilerplate html file like so:
>
> <!DOCTYPE html>
> <html lang="en">
> <head>
> <meta charset="utf-8">
> <title>ALD Control Toolbox</title>
> <script
> src="http://localhost:5006/GUI/autoload.js?bokeh-autoload-element=54cfe9c7-e531-4e91-95f5-be0c8c5e1f45&quot;
> id="54cfe9c7-e531-4e91-95f5-be0c8c5e1f45"
> data-bokeh-model-id=""
> data-bokeh-doc-id=""
> ></script>
> </head>
> <body>
> <!-- INSERT DIVS HERE -->
> </body>
> </html>
>
> I get nothing but an error, do I need divs as well? I am running the server via:
>
> python -m bokeh serve GUI.py
>
> and below is my code.
>
> Thank you.
>
> import numpy as np
> from bokeh.io import curdoc
> from bokeh.layouts import row, widgetbox
> from bokeh.models import ColumnDataSource
> from bokeh.models.widgets import Toggle, TextInput
> from bokeh.plotting import figure
> from bokeh.embed import autoload_server
>
> import functools
>
>
> #Setup Toggle Button Widget
> Tog_Ar = Toggle(label="Argon", button_type = "danger")
> Tog_TMA = Toggle(label="TMA", button_type = "danger")
> Tog_WATER = Toggle(label="WATER", button_type = "danger")
> Tog_DEZn = Toggle(label="DEZn", button_type = "danger")
> Tog_O2 = Toggle(label="O2", button_type = "danger")
> Tog_Ellip = Toggle(label="Ellipsometer", button_type = "danger")
>
>
> ButtonWidgetBox = widgetbox(Tog_Ar,Tog_TMA,Tog_WATER,Tog_DEZn,Tog_O2,Tog_Ellip,width = 150)
>
> #Setup Figures
> plot_width = 450
> plot_height = 450
> OverallPressure = figure(plot_height=450, plot_width=450,title = "Reactor Pressure")
> CyclePressure = figure(plot_height=450, plot_width=450, title = "Cycle Pressure")
>
> #Toggle Button On Change
> def handler(metadata,attr,old_value, new_value):
> if new_value == True:
> metadata["Tog"].button_type = "success" # You have activated the button
> #print(metadata["IO"], metadata["Tog"],attr, new_value)
> else:
> metadata["Tog"].button_type = "danger" # You have disabled the button
>
> Tog_Ar.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_Ar}))
> Tog_TMA.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_TMA}))
> Tog_WATER.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_WATER}))
> Tog_DEZn.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_DEZn}))
> Tog_O2.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_O2}))
> Tog_Ellip.on_change("active",functools.partial(handler, {"IO": "EIO0","Tog":Tog_Ellip}))
>
> # Set up layouts and add to document
>
> curdoc().add_root(row(ButtonWidgetBox, OverallPressure, CyclePressure))
> curdoc().title = "ALD Reactor Operations"
> script = autoload_server(model = None, url="http://localhost:5006/GUI&quot;\)
> print "Script is"
> print script
>
>
> --
> 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/5bafcf0b-3834-43ec-a5f2-bcaa83c27895%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/74c496ee-924f-4b2c-b800-30b16558615b%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.