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\.