How change default spacing of widgets when using VBox and hplot?

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,

Greg

···

from bokeh.plotting import figure, curdoc, vplot, hplot

from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox

from bokeh.driving import linear

import numpy as np

Define a simple arbitrary pulse function. Let’s use 1/2 cycle of a cosine centered at 0,

and zero everywhere else.

def pulse(a):

if a < np.pi/2.0 and a > -np.pi/2.0:

return np.cos(a)

else:

return 0.0

Create a vectorized version of the pulse function so we can pass arrays as arguments

and automatically return an array

vpulse = np.vectorize(pulse)

Initializations

u = 5.0

t = 0.0

current_time = 0.0

zmin = -30

zmax = 30

numpnts = 500

periodic_callback_time_ms = 16

x = np.linspace(zmin,zmax,numpnts)

y1 = vpulse(x - u*t)

y2 = vpulse(x + u*t)

Set up plot

p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1), \

title=“Forward & Reverse Pulses”, \

tools=“pan,box_zoom,resize,save,reset”)

l_forward = p.line(x, y1, line_width=2, color=‘blue’, line_alpha=0.5)

l_reverse = p.line(x, y2, line_width=2, color=‘red’, line_alpha=0.5)

p.xaxis.axis_label = “Distance (m)”

p.yaxis.axis_label = “Pulse Amplitude (arb.)”

t1 = p.text(zmin+1.5, 1.0, text=[‘u = {} m/s’.format(u)], text_align=“left”, text_font_size=“10pt”)

t2 = p.text(zmin+1.5, 1.0-0.08, text=[‘t = {} s’.format(t)], text_align=“left”, text_font_size=“10pt”)

t3 = p.text(zmin+1.5, 1.0-0.16, text=[‘Stopped’], text_align=“left”, text_font_size=“10pt”)

Set up toggle button & callback function

def toggle_handler(active):

if active:

toggle.label = ‘Start’

toggle.type = ‘success’

t3.data_source.data[“text”] = [‘Running’]

curdoc().add_periodic_callback(update, periodic_callback_time_ms)

else:

toggle.label = ‘Stop’

toggle.type = ‘danger’

t3.data_source.data[“text”] = [‘Stopped’]

curdoc().remove_periodic_callback(update)

toggle = Toggle(label=“Start”, type=“success”)

toggle.on_click(toggle_handler)

toggle.active = False

Set up slider & callback function

def update_velocity(attrname, old, new):

global u

u = velocity.value

t1.data_source.data[“text”] = [‘u = {} m/s’.format(u)]

velocity = Slider(title=“velocity (m/s)”, value=5.0, start=0.1, end=10.0, step=0.1)

velocity.on_change(‘value’, update_velocity)

Set up layout

layout = hplot(p, VBox(toggle, velocity))

Create callback function for periodic callback

@linear(m=periodic_callback_time_ms/1000.0)

def update(new_t):

global current_time

if toggle.active:

current_time = new_t

l_forward.data_source.data[“y”] = vpulse(x - u*new_t)

l_reverse.data_source.data[“y”] = vpulse(x + u*new_t)

t2.data_source.data[“text”] = [‘t = {:.3f} s’.format(new_t)]


Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It's pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

···

On Dec 26, 2015, at 7:06 PM, Greg Nordin <[email protected]> wrote:

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,
Greg

---------
from bokeh.plotting import figure, curdoc, vplot, hplot
from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
from bokeh.driving import linear
import numpy as np

# Define a simple arbitrary pulse function. Let's use 1/2 cycle of a cosine centered at 0,
# and zero everywhere else.
def pulse(a):
    if a < np.pi/2.0 and a > -np.pi/2.0:
        return np.cos(a)
    else:
        return 0.0

# Create a vectorized version of the pulse function so we can pass arrays as arguments
# and automatically return an array
vpulse = np.vectorize(pulse)

# Initializations
u = 5.0
t = 0.0
current_time = 0.0
zmin = -30
zmax = 30
numpnts = 500
periodic_callback_time_ms = 16
x = np.linspace(zmin,zmax,numpnts)
y1 = vpulse(x - u*t)
y2 = vpulse(x + u*t)

# Set up plot
p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1), \
           title="Forward & Reverse Pulses", \
           tools="pan,box_zoom,resize,save,reset")
l_forward = p.line(x, y1, line_width=2, color='blue', line_alpha=0.5)
l_reverse = p.line(x, y2, line_width=2, color='red', line_alpha=0.5)
p.xaxis.axis_label = "Distance (m)"
p.yaxis.axis_label = "Pulse Amplitude (arb.)"
t1 = p.text(zmin+1.5, 1.0, text=['u = {} m/s'.format(u)], text_align="left", text_font_size="10pt")
t2 = p.text(zmin+1.5, 1.0-0.08, text=['t = {} s'.format(t)], text_align="left", text_font_size="10pt")
t3 = p.text(zmin+1.5, 1.0-0.16, text=['Stopped'], text_align="left", text_font_size="10pt")

# Set up toggle button & callback function
def toggle_handler(active):
    if active:
        toggle.label = 'Start'
        toggle.type = 'success'
        t3.data_source.data["text"] = ['Running']
        curdoc().add_periodic_callback(update, periodic_callback_time_ms)
    else:
        toggle.label = 'Stop'
        toggle.type = 'danger'
        t3.data_source.data["text"] = ['Stopped']
        curdoc().remove_periodic_callback(update)
toggle = Toggle(label="Start", type="success")
toggle.on_click(toggle_handler)
toggle.active = False

# Set up slider & callback function
def update_velocity(attrname, old, new):
    global u
    u = velocity.value
    t1.data_source.data["text"] = ['u = {} m/s'.format(u)]
velocity = Slider(title="velocity (m/s)", value=5.0, start=0.1, end=10.0, step=0.1)
velocity.on_change('value', update_velocity)

# Set up layout
layout = hplot(p, VBox(toggle, velocity))

# Create callback function for periodic callback
@linear(m=periodic_callback_time_ms/1000.0)
def update(new_t):
    global current_time
    if toggle.active:
        current_time = new_t
        l_forward.data_source.data["y"] = vpulse(x - u*new_t)
        l_reverse.data_source.data["y"] = vpulse(x + u*new_t)
        t2.data_source.data["text"] = ['t = {:.3f} s'.format(new_t)]
---------------

--
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/ce5343ed-b662-4724-b86c-8867313bbab6%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi Bryan,

I just looked at PhosphorJS and it looks great–glad to hear this is in Bokeh’s near future!

Regarding adding custom CSS, I’m not really sure how to do this for Bokeh widgets and haven’t found anything in the documentation (perhaps I’ve missed it). I’ve also looked a bit at the docs on how to embed components in layout templates, but haven’t tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.

Thanks,

Greg

···

On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:

Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It’s pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

On Dec 26, 2015, at 7:06 PM, Greg Nordin [email protected] wrote:

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,

Greg


from bokeh.plotting import figure, curdoc, vplot, hplot

from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox

from bokeh.driving import linear

import numpy as np

Define a simple arbitrary pulse function. Let’s use 1/2 cycle of a cosine centered at 0,

and zero everywhere else.

def pulse(a):

if a < np.pi/2.0 and a > -np.pi/2.0:
    return np.cos(a)
else:
    return 0.0

Create a vectorized version of the pulse function so we can pass arrays as arguments

and automatically return an array

vpulse = np.vectorize(pulse)

Initializations

u = 5.0

t = 0.0

current_time = 0.0

zmin = -30

zmax = 30

numpnts = 500

periodic_callback_time_ms = 16

x = np.linspace(zmin,zmax,numpnts)

y1 = vpulse(x - u*t)

y2 = vpulse(x + u*t)

Set up plot

p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1), \

       title="Forward & Reverse Pulses", \
       tools="pan,box_zoom,resize,save,reset")

l_forward = p.line(x, y1, line_width=2, color=‘blue’, line_alpha=0.5)

l_reverse = p.line(x, y2, line_width=2, color=‘red’, line_alpha=0.5)

p.xaxis.axis_label = “Distance (m)”

p.yaxis.axis_label = “Pulse Amplitude (arb.)”

t1 = p.text(zmin+1.5, 1.0, text=[‘u = {} m/s’.format(u)], text_align=“left”, text_font_size=“10pt”)

t2 = p.text(zmin+1.5, 1.0-0.08, text=[‘t = {} s’.format(t)], text_align=“left”, text_font_size=“10pt”)

t3 = p.text(zmin+1.5, 1.0-0.16, text=[‘Stopped’], text_align=“left”, text_font_size=“10pt”)

Set up toggle button & callback function

def toggle_handler(active):

if active:
    toggle.label = 'Start'
    toggle.type = 'success'
    t3.data_source.data["text"] = ['Running']
    curdoc().add_periodic_callback(update, periodic_callback_time_ms)
else:
    toggle.label = 'Stop'
    toggle.type = 'danger'
    t3.data_source.data["text"] = ['Stopped']
    curdoc().remove_periodic_callback(update)

toggle = Toggle(label=“Start”, type=“success”)

toggle.on_click(toggle_handler)

toggle.active = False

Set up slider & callback function

def update_velocity(attrname, old, new):

global u
u = velocity.value
t1.data_source.data["text"] = ['u = {} m/s'.format(u)]

velocity = Slider(title=“velocity (m/s)”, value=5.0, start=0.1, end=10.0, step=0.1)

velocity.on_change(‘value’, update_velocity)

Set up layout

layout = hplot(p, VBox(toggle, velocity))

Create callback function for periodic callback

@linear(m=periodic_callback_time_ms/1000.0)

def update(new_t):

global current_time
if toggle.active:
    current_time = new_t
    l_forward.data_source.data["y"] = vpulse(x - u*new_t)
    l_reverse.data_source.data["y"] = vpulse(x + u*new_t)
    t2.data_source.data["text"] = ['t = {:.3f} s'.format(new_t)]


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/ce5343ed-b662-4724-b86c-8867313bbab6%40continuum.io.

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

Greg,

Just FYI, we are going to try and offer a little relief/improvement in the immediate term:

  Attempt to make widgets look a bit better by fpliger · Pull Request #3439 · bokeh/bokeh · GitHub

Bryan

···

On Dec 26, 2015, at 7:46 PM, Greg Nordin <[email protected]> wrote:

Hi Bryan,

I just looked at PhosphorJS and it looks great--glad to hear this is in Bokeh's near future!

Regarding adding custom CSS, I'm not really sure how to do this for Bokeh widgets and haven't found anything in the documentation (perhaps I've missed it). I've also looked a bit at the docs on how to embed components in layout templates, but haven't tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.

Thanks,
Greg

On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:
Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It's pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

> On Dec 26, 2015, at 7:06 PM, Greg Nordin <[email protected]> wrote:
>
> I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?
>
> Thanks,
> Greg
>
>
>
>
>
> ---------
> from bokeh.plotting import figure, curdoc, vplot, hplot
> from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
> from bokeh.driving import linear
> import numpy as np
>
> # Define a simple arbitrary pulse function. Let's use 1/2 cycle of a cosine centered at 0,
> # and zero everywhere else.
> def pulse(a):
> if a < np.pi/2.0 and a > -np.pi/2.0:
> return np.cos(a)
> else:
> return 0.0
>
> # Create a vectorized version of the pulse function so we can pass arrays as arguments
> # and automatically return an array
> vpulse = np.vectorize(pulse)
>
> # Initializations
> u = 5.0
> t = 0.0
> current_time = 0.0
> zmin = -30
> zmax = 30
> numpnts = 500
> periodic_callback_time_ms = 16
> x = np.linspace(zmin,zmax,numpnts)
> y1 = vpulse(x - u*t)
> y2 = vpulse(x + u*t)
>
> # Set up plot
> p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1), \
> title="Forward & Reverse Pulses", \
> tools="pan,box_zoom,resize,save,reset")
> l_forward = p.line(x, y1, line_width=2, color='blue', line_alpha=0.5)
> l_reverse = p.line(x, y2, line_width=2, color='red', line_alpha=0.5)
> p.xaxis.axis_label = "Distance (m)"
> p.yaxis.axis_label = "Pulse Amplitude (arb.)"
> t1 = p.text(zmin+1.5, 1.0, text=['u = {} m/s'.format(u)], text_align="left", text_font_size="10pt")
> t2 = p.text(zmin+1.5, 1.0-0.08, text=['t = {} s'.format(t)], text_align="left", text_font_size="10pt")
> t3 = p.text(zmin+1.5, 1.0-0.16, text=['Stopped'], text_align="left", text_font_size="10pt")
>
> # Set up toggle button & callback function
> def toggle_handler(active):
> if active:
> toggle.label = 'Start'
> toggle.type = 'success'
> t3.data_source.data["text"] = ['Running']
> curdoc().add_periodic_callback(update, periodic_callback_time_ms)
> else:
> toggle.label = 'Stop'
> toggle.type = 'danger'
> t3.data_source.data["text"] = ['Stopped']
> curdoc().remove_periodic_callback(update)
> toggle = Toggle(label="Start", type="success")
> toggle.on_click(toggle_handler)
> toggle.active = False
>
> # Set up slider & callback function
> def update_velocity(attrname, old, new):
> global u
> u = velocity.value
> t1.data_source.data["text"] = ['u = {} m/s'.format(u)]
> velocity = Slider(title="velocity (m/s)", value=5.0, start=0.1, end=10.0, step=0.1)
> velocity.on_change('value', update_velocity)
>
> # Set up layout
> layout = hplot(p, VBox(toggle, velocity))
>
> # Create callback function for periodic callback
> @linear(m=periodic_callback_time_ms/1000.0)
> def update(new_t):
> global current_time
> if toggle.active:
> current_time = new_t
> l_forward.data_source.data["y"] = vpulse(x - u*new_t)
> l_reverse.data_source.data["y"] = vpulse(x + u*new_t)
> t2.data_source.data["text"] = ['t = {:.3f} s'.format(new_t)]
> ---------------
>
> --
> 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/ce5343ed-b662-4724-b86c-8867313bbab6%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/ef92276b-0796-4595-992c-fb1bd369f2af%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Thanks, Bryan. I just posted a comment in the PR. Looks like a good plan for v0.11.

Greg

···

On Tuesday, December 29, 2015 at 11:22:26 AM UTC-7, Bryan Van de ven wrote:

Greg,

Just FYI, we are going to try and offer a little relief/improvement in the immediate term:

    [https://github.com/bokeh/bokeh/pull/3439](https://github.com/bokeh/bokeh/pull/3439)

Bryan

On Dec 26, 2015, at 7:46 PM, Greg Nordin [email protected] wrote:

Hi Bryan,

I just looked at PhosphorJS and it looks great–glad to hear this is in Bokeh’s near future!

Regarding adding custom CSS, I’m not really sure how to do this for Bokeh widgets and haven’t found anything in the documentation (perhaps I’ve missed it). I’ve also looked a bit at the docs on how to embed components in layout templates, but haven’t tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.

Thanks,

Greg

On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:

Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It’s pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

On Dec 26, 2015, at 7:06 PM, Greg Nordin [email protected] wrote:

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,
Greg


from bokeh.plotting import figure, curdoc, vplot, hplot
from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
from bokeh.driving import linear
import numpy as np

Define a simple arbitrary pulse function. Let’s use 1/2 cycle of a cosine centered at 0,

and zero everywhere else.

def pulse(a):
if a < np.pi/2.0 and a > -np.pi/2.0:
return np.cos(a)
else:
return 0.0

Create a vectorized version of the pulse function so we can pass arrays as arguments

and automatically return an array

vpulse = np.vectorize(pulse)

Initializations

u = 5.0
t = 0.0
current_time = 0.0
zmin = -30
zmax = 30
numpnts = 500
periodic_callback_time_ms = 16
x = np.linspace(zmin,zmax,numpnts)
y1 = vpulse(x - ut)
y2 = vpulse(x + u
t)

Set up plot

p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1),
title=“Forward & Reverse Pulses”,
tools=“pan,box_zoom,resize,save,reset”)
l_forward = p.line(x, y1, line_width=2, color=‘blue’, line_alpha=0.5)
l_reverse = p.line(x, y2, line_width=2, color=‘red’, line_alpha=0.5)
p.xaxis.axis_label = “Distance (m)”
p.yaxis.axis_label = “Pulse Amplitude (arb.)”
t1 = p.text(zmin+1.5, 1.0, text=[‘u = {} m/s’.format(u)], text_align=“left”, text_font_size=“10pt”)
t2 = p.text(zmin+1.5, 1.0-0.08, text=[‘t = {} s’.format(t)], text_align=“left”, text_font_size=“10pt”)
t3 = p.text(zmin+1.5, 1.0-0.16, text=[‘Stopped’], text_align=“left”, text_font_size=“10pt”)

Set up toggle button & callback function

def toggle_handler(active):
if active:
toggle.label = ‘Start’
toggle.type = ‘success’
t3.data_source.data[“text”] = [‘Running’]
curdoc().add_periodic_callback(update, periodic_callback_time_ms)
else:
toggle.label = ‘Stop’
toggle.type = ‘danger’
t3.data_source.data[“text”] = [‘Stopped’]
curdoc().remove_periodic_callback(update)
toggle = Toggle(label=“Start”, type=“success”)
toggle.on_click(toggle_handler)
toggle.active = False

Set up slider & callback function

def update_velocity(attrname, old, new):
global u
u = velocity.value
t1.data_source.data[“text”] = [‘u = {} m/s’.format(u)]
velocity = Slider(title=“velocity (m/s)”, value=5.0, start=0.1, end=10.0, step=0.1)
velocity.on_change(‘value’, update_velocity)

Set up layout

layout = hplot(p, VBox(toggle, velocity))

Create callback function for periodic callback

@linear(m=periodic_callback_time_ms/1000.0)
def update(new_t):
global current_time
if toggle.active:
current_time = new_t
l_forward.data_source.data[“y”] = vpulse(x - unew_t)
l_reverse.data_source.data[“y”] = vpulse(x + u
new_t)
t2.data_source.data[“text”] = [‘t = {:.3f} s’.format(new_t)]


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/ce5343ed-b662-4724-b86c-8867313bbab6%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/ef92276b-0796-4595-992c-fb1bd369f2af%40continuum.io.

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

P.S. I’d be happy to try it out and provide feedback when it makes it into a dev build.

···

On Tuesday, December 29, 2015 at 2:58:45 PM UTC-7, Greg Nordin wrote:

Thanks, Bryan. I just posted a comment in the PR. Looks like a good plan for v0.11.

Greg

On Tuesday, December 29, 2015 at 11:22:26 AM UTC-7, Bryan Van de ven wrote:

Greg,

Just FYI, we are going to try and offer a little relief/improvement in the immediate term:

    [https://github.com/bokeh/bokeh/pull/3439](https://github.com/bokeh/bokeh/pull/3439)

Bryan

On Dec 26, 2015, at 7:46 PM, Greg Nordin [email protected] wrote:

Hi Bryan,

I just looked at PhosphorJS and it looks great–glad to hear this is in Bokeh’s near future!

Regarding adding custom CSS, I’m not really sure how to do this for Bokeh widgets and haven’t found anything in the documentation (perhaps I’ve missed it). I’ve also looked a bit at the docs on how to embed components in layout templates, but haven’t tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.

Thanks,

Greg

On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:

Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It’s pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

On Dec 26, 2015, at 7:06 PM, Greg Nordin [email protected] wrote:

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,
Greg


from bokeh.plotting import figure, curdoc, vplot, hplot
from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
from bokeh.driving import linear
import numpy as np

Define a simple arbitrary pulse function. Let’s use 1/2 cycle of a cosine centered at 0,

and zero everywhere else.

def pulse(a):
if a < np.pi/2.0 and a > -np.pi/2.0:
return np.cos(a)
else:
return 0.0

Create a vectorized version of the pulse function so we can pass arrays as arguments

and automatically return an array

vpulse = np.vectorize(pulse)

Initializations

u = 5.0
t = 0.0
current_time = 0.0
zmin = -30
zmax = 30
numpnts = 500
periodic_callback_time_ms = 16
x = np.linspace(zmin,zmax,numpnts)
y1 = vpulse(x - ut)
y2 = vpulse(x + u
t)

Set up plot

p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1),
title=“Forward & Reverse Pulses”,
tools=“pan,box_zoom,resize,save,reset”)
l_forward = p.line(x, y1, line_width=2, color=‘blue’, line_alpha=0.5)
l_reverse = p.line(x, y2, line_width=2, color=‘red’, line_alpha=0.5)
p.xaxis.axis_label = “Distance (m)”
p.yaxis.axis_label = “Pulse Amplitude (arb.)”
t1 = p.text(zmin+1.5, 1.0, text=[‘u = {} m/s’.format(u)], text_align=“left”, text_font_size=“10pt”)
t2 = p.text(zmin+1.5, 1.0-0.08, text=[‘t = {} s’.format(t)], text_align=“left”, text_font_size=“10pt”)
t3 = p.text(zmin+1.5, 1.0-0.16, text=[‘Stopped’], text_align=“left”, text_font_size=“10pt”)

Set up toggle button & callback function

def toggle_handler(active):
if active:
toggle.label = ‘Start’
toggle.type = ‘success’
t3.data_source.data[“text”] = [‘Running’]
curdoc().add_periodic_callback(update, periodic_callback_time_ms)
else:
toggle.label = ‘Stop’
toggle.type = ‘danger’
t3.data_source.data[“text”] = [‘Stopped’]
curdoc().remove_periodic_callback(update)
toggle = Toggle(label=“Start”, type=“success”)
toggle.on_click(toggle_handler)
toggle.active = False

Set up slider & callback function

def update_velocity(attrname, old, new):
global u
u = velocity.value
t1.data_source.data[“text”] = [‘u = {} m/s’.format(u)]
velocity = Slider(title=“velocity (m/s)”, value=5.0, start=0.1, end=10.0, step=0.1)
velocity.on_change(‘value’, update_velocity)

Set up layout

layout = hplot(p, VBox(toggle, velocity))

Create callback function for periodic callback

@linear(m=periodic_callback_time_ms/1000.0)
def update(new_t):
global current_time
if toggle.active:
current_time = new_t
l_forward.data_source.data[“y”] = vpulse(x - unew_t)
l_reverse.data_source.data[“y”] = vpulse(x + u
new_t)
t2.data_source.data[“text”] = [‘t = {:.3f} s’.format(new_t)]


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/ce5343ed-b662-4724-b86c-8867313bbab6%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/ef92276b-0796-4595-992c-fb1bd369f2af%40continuum.io.

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

I just tried out 0.11.0rc1. If you compare the snapshot below with the one in my original post above, you’ll see that the two buttons and slider are now at the far right of the browser window. Unfortunately, this is significantly worse than the original placement. Can this be fixed? The code to generate this is in my original post above.

Thanks,

Greg

···

On Tuesday, December 29, 2015 at 2:59:33 PM UTC-7, Greg Nordin wrote:

P.S. I’d be happy to try it out and provide feedback when it makes it into a dev build.

On Tuesday, December 29, 2015 at 2:58:45 PM UTC-7, Greg Nordin wrote:

Thanks, Bryan. I just posted a comment in the PR. Looks like a good plan for v0.11.

Greg

On Tuesday, December 29, 2015 at 11:22:26 AM UTC-7, Bryan Van de ven wrote:

Greg,

Just FYI, we are going to try and offer a little relief/improvement in the immediate term:

    [https://github.com/bokeh/bokeh/pull/3439](https://github.com/bokeh/bokeh/pull/3439)

Bryan

On Dec 26, 2015, at 7:46 PM, Greg Nordin [email protected] wrote:

Hi Bryan,

I just looked at PhosphorJS and it looks great–glad to hear this is in Bokeh’s near future!

Regarding adding custom CSS, I’m not really sure how to do this for Bokeh widgets and haven’t found anything in the documentation (perhaps I’ve missed it). I’ve also looked a bit at the docs on how to embed components in layout templates, but haven’t tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.

Thanks,

Greg

On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:

Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It’s pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

On Dec 26, 2015, at 7:06 PM, Greg Nordin [email protected] wrote:

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,
Greg


from bokeh.plotting import figure, curdoc, vplot, hplot
from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
from bokeh.driving import linear
import numpy as np

Define a simple arbitrary pulse function. Let’s use 1/2 cycle of a cosine centered at 0,

and zero everywhere else.

def pulse(a):
if a < np.pi/2.0 and a > -np.pi/2.0:
return np.cos(a)
else:
return 0.0

Create a vectorized version of the pulse function so we can pass arrays as arguments

and automatically return an array

vpulse = np.vectorize(pulse)

Initializations

u = 5.0
t = 0.0
current_time = 0.0
zmin = -30
zmax = 30
numpnts = 500
periodic_callback_time_ms = 16
x = np.linspace(zmin,zmax,numpnts)
y1 = vpulse(x - ut)
y2 = vpulse(x + u
t)

Set up plot

p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1),
title=“Forward & Reverse Pulses”,
tools=“pan,box_zoom,resize,save,reset”)
l_forward = p.line(x, y1, line_width=2, color=‘blue’, line_alpha=0.5)
l_reverse = p.line(x, y2, line_width=2, color=‘red’, line_alpha=0.5)
p.xaxis.axis_label = “Distance (m)”
p.yaxis.axis_label = “Pulse Amplitude (arb.)”
t1 = p.text(zmin+1.5, 1.0, text=[‘u = {} m/s’.format(u)], text_align=“left”, text_font_size=“10pt”)
t2 = p.text(zmin+1.5, 1.0-0.08, text=[‘t = {} s’.format(t)], text_align=“left”, text_font_size=“10pt”)
t3 = p.text(zmin+1.5, 1.0-0.16, text=[‘Stopped’], text_align=“left”, text_font_size=“10pt”)

Set up toggle button & callback function

def toggle_handler(active):
if active:
toggle.label = ‘Start’
toggle.type = ‘success’
t3.data_source.data[“text”] = [‘Running’]
curdoc().add_periodic_callback(update, periodic_callback_time_ms)
else:
toggle.label = ‘Stop’
toggle.type = ‘danger’
t3.data_source.data[“text”] = [‘Stopped’]
curdoc().remove_periodic_callback(update)
toggle = Toggle(label=“Start”, type=“success”)
toggle.on_click(toggle_handler)
toggle.active = False

Set up slider & callback function

def update_velocity(attrname, old, new):
global u
u = velocity.value
t1.data_source.data[“text”] = [‘u = {} m/s’.format(u)]
velocity = Slider(title=“velocity (m/s)”, value=5.0, start=0.1, end=10.0, step=0.1)
velocity.on_change(‘value’, update_velocity)

Set up layout

layout = hplot(p, VBox(toggle, velocity))

Create callback function for periodic callback

@linear(m=periodic_callback_time_ms/1000.0)
def update(new_t):
global current_time
if toggle.active:
current_time = new_t
l_forward.data_source.data[“y”] = vpulse(x - unew_t)
l_reverse.data_source.data[“y”] = vpulse(x + u
new_t)
t2.data_source.data[“text”] = [‘t = {:.3f} s’.format(new_t)]


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/ce5343ed-b662-4724-b86c-8867313bbab6%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/ef92276b-0796-4595-992c-fb1bd369f2af%40continuum.io.

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

Greg,

Can you share the exact structure of your layout? Is this in the notebook, or outside of the notebook? I'd expect them to be left-justified, at a first glance. Perhaps we can offer some different alternatives or tweaks, in any case. Unfortunately we got some bad feedback regarding the other layout as well. I am afraid we will not be able to satisfy every use case in this release despite our best intentions. Another option might be to embed the components of the document individually in a custom template of your own, but that would be a little more work (e.g. making your own jinja2 template).

Bryan

···

On Jan 5, 2016, at 2:07 AM, Greg Nordin <[email protected]> wrote:

I just tried out 0.11.0rc1. If you compare the snapshot below with the one in my original post above, you'll see that the two buttons and slider are now at the far right of the browser window. Unfortunately, this is significantly worse than the original placement. Can this be fixed? The code to generate this is in my original post above.

Thanks,

Greg

On Tuesday, December 29, 2015 at 2:59:33 PM UTC-7, Greg Nordin wrote:
P.S. I'd be happy to try it out and provide feedback when it makes it into a dev build.

On Tuesday, December 29, 2015 at 2:58:45 PM UTC-7, Greg Nordin wrote:
Thanks, Bryan. I just posted a comment in the PR. Looks like a good plan for v0.11.

Greg

On Tuesday, December 29, 2015 at 11:22:26 AM UTC-7, Bryan Van de ven wrote:
Greg,

Just FYI, we are going to try and offer a little relief/improvement in the immediate term:

        Attempt to make widgets look a bit better by fpliger · Pull Request #3439 · bokeh/bokeh · GitHub

Bryan

> On Dec 26, 2015, at 7:46 PM, Greg Nordin <[email protected]> wrote:
>
> Hi Bryan,
>
> I just looked at PhosphorJS and it looks great--glad to hear this is in Bokeh's near future!
>
> Regarding adding custom CSS, I'm not really sure how to do this for Bokeh widgets and haven't found anything in the documentation (perhaps I've missed it). I've also looked a bit at the docs on how to embed components in layout templates, but haven't tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.
>
> Thanks,
> Greg
>
> On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:
> Greg,
>
> There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It's pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.
>
> Bryan
>
>
> > On Dec 26, 2015, at 7:06 PM, Greg Nordin <[email protected]> wrote:
> >
> > I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?
> >
> > Thanks,
> > Greg
> >
> >
> >
> >
> >
> > ---------
> > from bokeh.plotting import figure, curdoc, vplot, hplot
> > from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
> > from bokeh.driving import linear
> > import numpy as np
> >
> > # Define a simple arbitrary pulse function. Let's use 1/2 cycle of a cosine centered at 0,
> > # and zero everywhere else.
> > def pulse(a):
> > if a < np.pi/2.0 and a > -np.pi/2.0:
> > return np.cos(a)
> > else:
> > return 0.0
> >
> > # Create a vectorized version of the pulse function so we can pass arrays as arguments
> > # and automatically return an array
> > vpulse = np.vectorize(pulse)
> >
> > # Initializations
> > u = 5.0
> > t = 0.0
> > current_time = 0.0
> > zmin = -30
> > zmax = 30
> > numpnts = 500
> > periodic_callback_time_ms = 16
> > x = np.linspace(zmin,zmax,numpnts)
> > y1 = vpulse(x - u*t)
> > y2 = vpulse(x + u*t)
> >
> > # Set up plot
> > p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1), \
> > title="Forward & Reverse Pulses", \
> > tools="pan,box_zoom,resize,save,reset")
> > l_forward = p.line(x, y1, line_width=2, color='blue', line_alpha=0.5)
> > l_reverse = p.line(x, y2, line_width=2, color='red', line_alpha=0.5)
> > p.xaxis.axis_label = "Distance (m)"
> > p.yaxis.axis_label = "Pulse Amplitude (arb.)"
> > t1 = p.text(zmin+1.5, 1.0, text=['u = {} m/s'.format(u)], text_align="left", text_font_size="10pt")
> > t2 = p.text(zmin+1.5, 1.0-0.08, text=['t = {} s'.format(t)], text_align="left", text_font_size="10pt")
> > t3 = p.text(zmin+1.5, 1.0-0.16, text=['Stopped'], text_align="left", text_font_size="10pt")
> >
> > # Set up toggle button & callback function
> > def toggle_handler(active):
> > if active:
> > toggle.label = 'Start'
> > toggle.type = 'success'
> > t3.data_source.data["text"] = ['Running']
> > curdoc().add_periodic_callback(update, periodic_callback_time_ms)
> > else:
> > toggle.label = 'Stop'
> > toggle.type = 'danger'
> > t3.data_source.data["text"] = ['Stopped']
> > curdoc().remove_periodic_callback(update)
> > toggle = Toggle(label="Start", type="success")
> > toggle.on_click(toggle_handler)
> > toggle.active = False
> >
> > # Set up slider & callback function
> > def update_velocity(attrname, old, new):
> > global u
> > u = velocity.value
> > t1.data_source.data["text"] = ['u = {} m/s'.format(u)]
> > velocity = Slider(title="velocity (m/s)", value=5.0, start=0.1, end=10.0, step=0.1)
> > velocity.on_change('value', update_velocity)
> >
> > # Set up layout
> > layout = hplot(p, VBox(toggle, velocity))
> >
> > # Create callback function for periodic callback
> > @linear(m=periodic_callback_time_ms/1000.0)
> > def update(new_t):
> > global current_time
> > if toggle.active:
> > current_time = new_t
> > l_forward.data_source.data["y"] = vpulse(x - u*new_t)
> > l_reverse.data_source.data["y"] = vpulse(x + u*new_t)
> > t2.data_source.data["text"] = ['t = {:.3f} s'.format(new_t)]
> > ---------------
> >
> > --
> > 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/ce5343ed-b662-4724-b86c-8867313bbab6%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/ef92276b-0796-4595-992c-fb1bd369f2af%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/9783f04d-579c-4746-9f01-78d377a12e80%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi Greg,

In this case you can just set the hplot width explicitly. Something like

layout = hplot(p, VBox(toggle, velocity, height=400), width=900)

Should work.

Thanks

Fabio

···

On Tue, Jan 5, 2016 at 2:07 AM, Greg Nordin [email protected] wrote:

I just tried out 0.11.0rc1. If you compare the snapshot below with the one in my original post above, you’ll see that the two buttons and slider are now at the far right of the browser window. Unfortunately, this is significantly worse than the original placement. Can this be fixed? The code to generate this is in my original post above.

Thanks,

Greg

On Tuesday, December 29, 2015 at 2:59:33 PM UTC-7, Greg Nordin wrote:

P.S. I’d be happy to try it out and provide feedback when it makes it into a dev build.

On Tuesday, December 29, 2015 at 2:58:45 PM UTC-7, Greg Nordin wrote:

Thanks, Bryan. I just posted a comment in the PR. Looks like a good plan for v0.11.

Greg

On Tuesday, December 29, 2015 at 11:22:26 AM UTC-7, Bryan Van de ven wrote:

Greg,

Just FYI, we are going to try and offer a little relief/improvement in the immediate term:

    [https://github.com/bokeh/bokeh/pull/3439](https://github.com/bokeh/bokeh/pull/3439)

Bryan

On Dec 26, 2015, at 7:46 PM, Greg Nordin [email protected] wrote:

Hi Bryan,

I just looked at PhosphorJS and it looks great–glad to hear this is in Bokeh’s near future!

Regarding adding custom CSS, I’m not really sure how to do this for Bokeh widgets and haven’t found anything in the documentation (perhaps I’ve missed it). I’ve also looked a bit at the docs on how to embed components in layout templates, but haven’t tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.

Thanks,

Greg

On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:

Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It’s pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

On Dec 26, 2015, at 7:06 PM, Greg Nordin [email protected] wrote:

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,
Greg


from bokeh.plotting import figure, curdoc, vplot, hplot
from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
from bokeh.driving import linear
import numpy as np

Define a simple arbitrary pulse function. Let’s use 1/2 cycle of a cosine centered at 0,

and zero everywhere else.

def pulse(a):
if a < np.pi/2.0 and a > -np.pi/2.0:
return np.cos(a)
else:
return 0.0

Create a vectorized version of the pulse function so we can pass arrays as arguments

and automatically return an array

vpulse = np.vectorize(pulse)

Initializations

u = 5.0
t = 0.0
current_time = 0.0
zmin = -30
zmax = 30
numpnts = 500
periodic_callback_time_ms = 16
x = np.linspace(zmin,zmax,numpnts)
y1 = vpulse(x - ut)
y2 = vpulse(x + u
t)

Set up plot

p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1),
title=“Forward & Reverse Pulses”,
tools=“pan,box_zoom,resize,save,reset”)
l_forward = p.line(x, y1, line_width=2, color=‘blue’, line_alpha=0.5)
l_reverse = p.line(x, y2, line_width=2, color=‘red’, line_alpha=0.5)
p.xaxis.axis_label = “Distance (m)”
p.yaxis.axis_label = “Pulse Amplitude (arb.)”
t1 = p.text(zmin+1.5, 1.0, text=[‘u = {} m/s’.format(u)], text_align=“left”, text_font_size=“10pt”)
t2 = p.text(zmin+1.5, 1.0-0.08, text=[‘t = {} s’.format(t)], text_align=“left”, text_font_size=“10pt”)
t3 = p.text(zmin+1.5, 1.0-0.16, text=[‘Stopped’], text_align=“left”, text_font_size=“10pt”)

Set up toggle button & callback function

def toggle_handler(active):
if active:
toggle.label = ‘Start’
toggle.type = ‘success’
t3.data_source.data[“text”] = [‘Running’]
curdoc().add_periodic_callback(update, periodic_callback_time_ms)
else:
toggle.label = ‘Stop’
toggle.type = ‘danger’
t3.data_source.data[“text”] = [‘Stopped’]
curdoc().remove_periodic_callback(update)
toggle = Toggle(label=“Start”, type=“success”)
toggle.on_click(toggle_handler)
toggle.active = False

Set up slider & callback function

def update_velocity(attrname, old, new):
global u
u = velocity.value
t1.data_source.data[“text”] = [‘u = {} m/s’.format(u)]
velocity = Slider(title=“velocity (m/s)”, value=5.0, start=0.1, end=10.0, step=0.1)
velocity.on_change(‘value’, update_velocity)

Set up layout

layout = hplot(p, VBox(toggle, velocity))

Create callback function for periodic callback

@linear(m=periodic_callback_time_ms/1000.0)
def update(new_t):
global current_time
if toggle.active:
current_time = new_t
l_forward.data_source.data[“y”] = vpulse(x - unew_t)
l_reverse.data_source.data[“y”] = vpulse(x + u
new_t)
t2.data_source.data[“text”] = [‘t = {:.3f} s’.format(new_t)]


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/ce5343ed-b662-4724-b86c-8867313bbab6%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/ef92276b-0796-4595-992c-fb1bd369f2af%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/9783f04d-579c-4746-9f01-78d377a12e80%40continuum.io.

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

Fabio Pliger

Senior Software Engineer, Bokeh

Bryan, I’m not running this in a notebook. Instead I’m just doing “bokeh serve <filename.py> --show” from the command line.

Fabio, you’re right, that works. The only problem with it is if the resize tool is enabled and I increase the size of the plot it runs into and on top of the buttons & slider. However, this is still workable because I’ll just disable the resize tool so students can’t do that. Still, I think it would be better to have things like this be left justified by default instead of right justified.

Thanks for all of your help!

Greg

···

On Tuesday, January 5, 2016 at 7:08:19 AM UTC-7, Fabio Pliger wrote:

Hi Greg,

In this case you can just set the hplot width explicitly. Something like

layout = hplot(p, VBox(toggle, velocity, height=400), width=900)

Should work.

Thanks

Fabio

On Tue, Jan 5, 2016 at 2:07 AM, Greg Nordin [email protected] wrote:

I just tried out 0.11.0rc1. If you compare the snapshot below with the one in my original post above, you’ll see that the two buttons and slider are now at the far right of the browser window. Unfortunately, this is significantly worse than the original placement. Can this be fixed? The code to generate this is in my original post above.

Thanks,

Greg

On Tuesday, December 29, 2015 at 2:59:33 PM UTC-7, Greg Nordin wrote:

P.S. I’d be happy to try it out and provide feedback when it makes it into a dev build.

On Tuesday, December 29, 2015 at 2:58:45 PM UTC-7, Greg Nordin wrote:

Thanks, Bryan. I just posted a comment in the PR. Looks like a good plan for v0.11.

Greg

On Tuesday, December 29, 2015 at 11:22:26 AM UTC-7, Bryan Van de ven wrote:

Greg,

Just FYI, we are going to try and offer a little relief/improvement in the immediate term:

    [https://github.com/bokeh/bokeh/pull/3439](https://github.com/bokeh/bokeh/pull/3439)

Bryan

On Dec 26, 2015, at 7:46 PM, Greg Nordin [email protected] wrote:

Hi Bryan,

I just looked at PhosphorJS and it looks great–glad to hear this is in Bokeh’s near future!

Regarding adding custom CSS, I’m not really sure how to do this for Bokeh widgets and haven’t found anything in the documentation (perhaps I’ve missed it). I’ve also looked a bit at the docs on how to embed components in layout templates, but haven’t tried it yet. Ideally, I would like to include text areas with LaTeX mathematical expressions (i.e., MathJax) and narrative prose for brief explanations and instructions for students.

Thanks,

Greg

On Saturday, December 26, 2015 at 6:27:45 PM UTC-7, Bryan Van de ven wrote:

Greg,

There is active work for better layout under active development, but will not be ready for 0.11, unfortunately. It will use the new PhosphorJS library that is also the basis of the new Jupyter Workbench. It’s pretty amazing, frankly, and I wish it was ready now, but it is a top priority for 0.11.1 in early 2016. In the mean time, if you need a more polished UI, it might be possible to add custom CSS to help, otherwise, embedding components in your own layout templates (with bokeh.embed functions) is probably the best short term route.

Bryan

On Dec 26, 2015, at 7:06 PM, Greg Nordin [email protected] wrote:

I have some code that generates the widgets/plot shown in the image below. It vertically orients a button and a slider, i.e., VBox(button, slider) and places them to the right of a plot, i.e., hplot(plot, VBox(button, slider)). The code is below the image. The problem is the button and slider are scrunched together and pushed right up against the plot. Is there a way to space these out so the result looks more appealing? For example, have the button and slider centered relative to each other and placed lower?

Thanks,
Greg


from bokeh.plotting import figure, curdoc, vplot, hplot
from bokeh.models.widgets import Button, Toggle, Slider, VBoxForm, HBox, VBox
from bokeh.driving import linear
import numpy as np

Define a simple arbitrary pulse function. Let’s use 1/2 cycle of a cosine centered at 0,

and zero everywhere else.

def pulse(a):
if a < np.pi/2.0 and a > -np.pi/2.0:
return np.cos(a)
else:
return 0.0

Create a vectorized version of the pulse function so we can pass arrays as arguments

and automatically return an array

vpulse = np.vectorize(pulse)

Initializations

u = 5.0
t = 0.0
current_time = 0.0
zmin = -30
zmax = 30
numpnts = 500
periodic_callback_time_ms = 16
x = np.linspace(zmin,zmax,numpnts)
y1 = vpulse(x - ut)
y2 = vpulse(x + u
t)

Set up plot

p = figure(plot_width=600, plot_height=400, x_range=(zmin,zmax), y_range=(0,1.1),
title=“Forward & Reverse Pulses”,
tools=“pan,box_zoom,resize,save,reset”)
l_forward = p.line(x, y1, line_width=2, color=‘blue’, line_alpha=0.5)
l_reverse = p.line(x, y2, line_width=2, color=‘red’, line_alpha=0.5)
p.xaxis.axis_label = “Distance (m)”
p.yaxis.axis_label = “Pulse Amplitude (arb.)”
t1 = p.text(zmin+1.5, 1.0, text=[‘u = {} m/s’.format(u)], text_align=“left”, text_font_size=“10pt”)
t2 = p.text(zmin+1.5, 1.0-0.08, text=[‘t = {} s’.format(t)], text_align=“left”, text_font_size=“10pt”)
t3 = p.text(zmin+1.5, 1.0-0.16, text=[‘Stopped’], text_align=“left”, text_font_size=“10pt”)

Set up toggle button & callback function

def toggle_handler(active):
if active:
toggle.label = ‘Start’
toggle.type = ‘success’
t3.data_source.data[“text”] = [‘Running’]
curdoc().add_periodic_callback(update, periodic_callback_time_ms)
else:
toggle.label = ‘Stop’
toggle.type = ‘danger’
t3.data_source.data[“text”] = [‘Stopped’]
curdoc().remove_periodic_callback(update)
toggle = Toggle(label=“Start”, type=“success”)
toggle.on_click(toggle_handler)
toggle.active = False

Set up slider & callback function

def update_velocity(attrname, old, new):
global u
u = velocity.value
t1.data_source.data[“text”] = [‘u = {} m/s’.format(u)]
velocity = Slider(title=“velocity (m/s)”, value=5.0, start=0.1, end=10.0, step=0.1)
velocity.on_change(‘value’, update_velocity)

Set up layout

layout = hplot(p, VBox(toggle, velocity))

Create callback function for periodic callback

@linear(m=periodic_callback_time_ms/1000.0)
def update(new_t):
global current_time
if toggle.active:
current_time = new_t
l_forward.data_source.data[“y”] = vpulse(x - unew_t)
l_reverse.data_source.data[“y”] = vpulse(x + u
new_t)
t2.data_source.data[“text”] = [‘t = {:.3f} s’.format(new_t)]


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/ce5343ed-b662-4724-b86c-8867313bbab6%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/ef92276b-0796-4595-992c-fb1bd369f2af%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/9783f04d-579c-4746-9f01-78d377a12e80%40continuum.io.

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


Fabio Pliger

Senior Software Engineer, Bokeh