Toggle button

I’ve run the examples/glyphs/buttons_server.py example and it works fine using the following process

  1. start “bokeh serve” in one terminal window

  2. execute “python buttons_server.py” in another terminal window

  3. then a browser window starts up with all of the defined buttons

  4. button actions print to the 2nd terminal window as expected given the print statements in the callback functions

Here is my question: I would like to use a toggle button such that when active = True the button text is “Start” and the button color is green and when active = False the button text is “Stop” and the button color is red. I’ve been through the documentation and docstring (i.e., help(bokeh.models.widgets.Toggle)), but haven’t been able to figure out how to do this. Any suggestions on where I ought to look next?

Thanks,

Greg

Greg,

Toggle inherits from AbstractButton, which has a "label" property for the text to display. You should be able to just change this property.

Bryan

···

On Dec 25, 2015, at 3:04 PM, Greg Nordin <[email protected]> wrote:

I've run the examples/glyphs/buttons_server.py example and it works fine using the following process

1. start "bokeh serve" in one terminal window
2. execute "python buttons_server.py" in another terminal window
3. then a browser window starts up with all of the defined buttons
4. button actions print to the 2nd terminal window as expected given the print statements in the callback functions

Here is my question: I would like to use a toggle button such that when active = True the button text is "Start" and the button color is green and when active = False the button text is "Stop" and the button color is red. I've been through the documentation and docstring (i.e., help(bokeh.models.widgets.Toggle)), but haven't been able to figure out how to do this. Any suggestions on where I ought to look next?

Thanks,
Greg

--
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/3a9c6c8a-ac74-484e-85a4-8f50b18c1076%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

Hi Bryan,

I whittled down buttons_server.py to the code below (toggle.py) and change the label property in the callback. When I run “bokeh serve” and “python toggle.py” I see a button in a browser window labeled “Toggle Button”. Here is what I see after each subsequent click of the button:

  1. no change in text

  2. “start”

  3. no change in text

  4. “stop”

  5. “start”

  6. no change in text

  7. “stop”

  8. “start”

  9. no change in text

I’m apparently missing something here. Any suggestions?

Thanks,

Greg

···

from future import print_function

from bokeh.util.browser import view

from bokeh.document import Document

from bokeh.plotting import curdoc

from bokeh.models.widgets import VBox, Toggle

from bokeh.client import push_session

def toggle_handler(active):

print(“toggle_handler: %s” % active)

if active:

toggle.label = ‘start’

else:

toggle.label = ‘stop’

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

toggle.on_click(toggle_handler)

vbox = VBox(children=[toggle])

document = Document()

document.add_root(vbox)

session = push_session(document)

session.show()

if name == “main”:

session.loop_until_closed()


On Friday, December 25, 2015 at 2:36:49 PM UTC-7, Bryan Van de ven wrote:

Greg,

Toggle inherits from AbstractButton, which has a “label” property for the text to display. You should be able to just change this property.

Bryan

On Dec 25, 2015, at 3:04 PM, Greg Nordin [email protected] wrote:

I’ve run the examples/glyphs/buttons_server.py example and it works fine using the following process

  1. start “bokeh serve” in one terminal window
  1. execute “python buttons_server.py” in another terminal window
  1. then a browser window starts up with all of the defined buttons
  1. button actions print to the 2nd terminal window as expected given the print statements in the callback functions

Here is my question: I would like to use a toggle button such that when active = True the button text is “Start” and the button color is green and when active = False the button text is “Stop” and the button color is red. I’ve been through the documentation and docstring (i.e., help(bokeh.models.widgets.Toggle)), but haven’t been able to figure out how to do this. Any suggestions on where I ought to look next?

Thanks,

Greg


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/3a9c6c8a-ac74-484e-85a4-8f50b18c1076%40continuum.io.

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

Greg,

Not missing anything, the toggle implementation was just not very reliable, it was trying to to set the active state based on the presence or absence of the CSS class. It works much better to explicitly maintain the state and set the class based on that:

diff --git a/bokehjs/src/coffee/widget/toggle.coffee b/bokehjs/src/coffee/widget/toggle.coffee
index ec6856e..6bb2b23 100644
--- a/bokehjs/src/coffee/widget/toggle.coffee
+++ b/bokehjs/src/coffee/widget/toggle.coffee
@@ -37,7 +37,7 @@ class ToggleView extends ContinuumView
     return @

   change_input: () ->
- @mset('active', @$el.hasClass("bk-bs-active"))
+ @mset('active', not @mget('active'))
     @mget('callback')?.execute(@model)

class Toggle extends AbstractButton.Model

Would you like to submit a PR with this change? Ideally it might be worth seeing if any of the other button implementation do anything similar.

Bryan

···

On Dec 25, 2015, at 4:07 PM, Greg Nordin <[email protected]> wrote:

from __future__ import print_function

from bokeh.util.browser import view
from bokeh.document import Document
from bokeh.plotting import curdoc

from bokeh.models.widgets import VBox, Toggle
from bokeh.client import push_session

def toggle_handler(active):
    print("toggle_handler: %s" % active)
    if active:
        toggle.label = 'start'
    else:
        toggle.label = 'stop'

toggle = Toggle(label="Toggle button", type="success")
toggle.on_click(toggle_handler)

vbox = VBox(children=[toggle])

document = Document()
document.add_root(vbox)
session = push_session(document)
session.show()

if __name__ == "__main__":
    session.loop_until_closed()
---------------

Hi Bryan,

Thanks for the help! The PR is submitted. Hopefully it can make it into the next dev release. I checked button.coffee and it just increments a counter. I also looked at radio_button_group.coffee and it looks a little suspect to me, but I don’t know enough about coffeescript (or javascript) to really know.

Greg

···

On Friday, December 25, 2015 at 4:14:13 PM UTC-7, Bryan Van de ven wrote:

Greg,

Not missing anything, the toggle implementation was just not very reliable, it was trying to to set the active state based on the presence or absence of the CSS class. It works much better to explicitly maintain the state and set the class based on that:

diff --git a/bokehjs/src/coffee/widget/toggle.coffee b/bokehjs/src/coffee/widget/toggle.coffee

index ec6856e…6bb2b23 100644

— a/bokehjs/src/coffee/widget/toggle.coffee

+++ b/bokehjs/src/coffee/widget/toggle.coffee

@@ -37,7 +37,7 @@ class ToggleView extends ContinuumView

 return @

change_input: () →

  • @mset(‘active’, @$el.hasClass(“bk-bs-active”))
  • @mset(‘active’, not @mget(‘active’))

    @mget(‘callback’)?.execute(@model)

class Toggle extends AbstractButton.Model

Would you like to submit a PR with this change? Ideally it might be worth seeing if any of the other button implementation do anything similar.

Bryan

On Dec 25, 2015, at 4:07 PM, Greg Nordin [email protected] wrote:

from future import print_function

from bokeh.util.browser import view

from bokeh.document import Document

from bokeh.plotting import curdoc

from bokeh.models.widgets import VBox, Toggle

from bokeh.client import push_session

def toggle_handler(active):

print("toggle_handler: %s" % active)
if active:
    toggle.label = 'start'
else:
    toggle.label = 'stop'

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

toggle.on_click(toggle_handler)

vbox = VBox(children=[toggle])

document = Document()

document.add_root(vbox)

session = push_session(document)

session.show()

if name == “main”:

session.loop_until_closed()