I am trying to bound an interactive box into a numerical value only (something similar to the BoundedFloatText object). This is an example of my code - an interactive box with a button. I want this box to be limited to numerical values only. Does anyone know if it is possible?
import ipywidgets as widgets
from ipywidgets import interactive, interact_manual, Layout, Button, ButtonStyle
def diff(MeaP):
MeaP = float(MeaP);
diff = abs(MeaP)
print(f"Difference in the population = {round(diff,7)}")
style = {'description_width': 'initial'}
Z2 = interactive(diff, {'manual': True}, MeaP="0")
Z2.children[0].layout = Layout(width='200px', padding = "0px 25px 0px 0px")
Z2.children[0].style = style
Z2.children[0].description = "<b> Difference </b>"
Z2.children[1].style.button_color="lightblue"
Z2.children[1].description="Click the button"
Z2.children[1].style.font_weight = "bold"
Z2.children[1].layout = Layout(width='250px')
display(Z2)
Related
In the example below, I am trying to get the x and y coordinates that appear in the Div next to the plot when the bokeh plot is Tapped to be appended to the data dictionary coordList in their respective list.
import numpy as np
from bokeh.io import show, output_notebook
from bokeh.plotting import figure
from bokeh.models import CustomJS, Div
from bokeh.layouts import column, row
from bokeh.events import Tap
coordList = dict(x=[], y=[])
output_notebook()
def display_event(div, attributes=[], style = 'float:left;clear:left;font_size=10pt'):
"Build a suitable CustomJS to display the current event in the div model."
return CustomJS(args=dict(div=div), code="""
var attrs = %s; var args = [];
for (var i = 0; i<attrs.length; i++) {
args.push(Number(cb_obj[attrs[i]]).toFixed(2));
}
var line = "<span style=%r>(" + args.join(", ") + ")</span>\\n";
var text = div.text.concat(line);
var lines = text.split("\\n")
if (lines.length > 35)
lines.shift();
div.text = lines.join("\\n");
""" % (attributes, style))
x = np.random.random(size=4000) * 100
y = np.random.random(size=4000) * 100
radii = np.random.random(size=4000) * 1.5
colors = ["#%02x%02x%02x" % (int(r), int(g), 150) for r, g in zip(50+2*x, 30+2*y)]
p = figure(tools="pan,wheel_zoom,zoom_in,zoom_out,reset")
p.scatter(x, y, radius=np.random.random(size=4000) * 1.5,
fill_color=colors, fill_alpha=0.6, line_color=None)
div = Div(width=400, height=p.plot_height)
layout = row(p, div)
point_attributes = ['x', 'y']
p.js_on_event(Tap, display_event(div, attributes=point_attributes))
show(layout)
I'm not sure how the coordinates are saved and how to access them and append them to the lists.
There is no way to append to coordinates to a python object with code like above, because that code is generating standalone output (i.e. it is using "show"). Standalone output is pure static HTML and Bokeh JSON that is sent to browser, without any sort of connection to any Python process. If you want to connect Bokeh visualizations to a real running Python process, that is what the Bokeh server is for.
If you run a Bokeh server application, then you can use on_event with a real python callback to run whatever python code you want with the Tap even values:
def callback(event):
# use event['x'], event['y'], event['sx'], event['sy']
p.on_event(Tap, callback)
I'm studying gmaps and I'm trying refresh gmap marker using widgets.button, but I cannot refresh map when I click in button.
Maybe is a simple question, but I'm trying it for hours and can't solve.
Follow my code.
from IPython.display import display
import ipywidgets as widgets
import gmaps
gmaps.configure(api_key='')
class AcledExplorer(object):
"""
Jupyter widget for exploring the ACLED dataset.
The user uses the slider to choose a year. This renders
a heatmap of civilian victims in that year.
"""
def __init__(self):
self.marker_locations = [(None, None)]
self._slider = None
self._slider2 = None
title_widget = widgets.HTML(
'<h3>MY TEST, my test</h3>'
'<h4>test1 ACLED project</h4>'
)
map_figure = self._render_map(-15.7934036, -47.8823172)
control = self._render_control()
self._container = widgets.VBox([title_widget, control, map_figure])
def render(self):
display(self._container)
def on_button_clicked(self, b):
latitude = self.FloatSlider1.value
longitude = self.FloatSlider2.value
print("Button clicked.")
self.markers = gmaps.marker_layer([(latitude, longitude)])
return self._container
def _render_control(self):
""" Render the widgets """
self.FloatSlider1 = widgets.FloatSlider(
value=-15.8,
min=-34,
max=4.5,
step=0.2,
description='Latitude:',
disabled=False,
continuous_update=False,
orientation='horizontal',
readout=True,
readout_format='.1f',
)
self.FloatSlider2 = widgets.FloatSlider(
value=-47.9,
min=-74,
max=-33,
step=0.2,
description='Longitude:',
disabled=False,
continuous_update=False,
orientation='horizontal',
readout=True,
readout_format='.1f',
)
self.button = widgets.Button(
description="Plot!"
)
self.button.on_click(self.on_button_clicked)
controls = widgets.VBox(
[self.FloatSlider1, self.FloatSlider2, self.button])
return controls
def _render_map(self, latitude, longitude):
""" Render the initial map """
self.marker_locations = [(latitude, longitude)]
brasilia_coordinates = (-15.7934036, -47.8823172)
fig = gmaps.figure(center=brasilia_coordinates, zoom_level=3)
self.markers = gmaps.marker_layer(self.marker_locations)
fig.add_layer(self.markers)
return fig
AcledExplorer().render()
I start creating widgets, after I link values from Sliders to button. I need refresh marker position when click in button.
In function on_button_click I can view that news values of latitude and longitude are being getting from slider bar, so I'm update self.marker, maybe my mistake stay here.
Problem with your code
In on_button_click, you are not actually updating the marker layer. You currently write:
self.markers = gmaps.marker_layer([(latitude, longitude)])
but that just sets the markers attribute of your class. What you actually want to do is mutate the set of markers in your marker layer. The simplest change you can make is to change that line to:
self.markers.markers = [gmaps.Marker(location=(latitude, longitude))]
This mutates the markers attribute of your marker layer — basically the list of markers. Every time you press plot, it destroys the marker on the map and replaces it with a new one at an updated location.
Improving your solution
Using the high-level factory methods like marker_layer can obscure how jupyter-gmaps uses widgets internally. To make it somewhat more understandable, let's introduce a _create_marker() method that creates a gmaps.Marker object:
def _create_marker(self, latitude, longitude):
return gmaps.Marker(location=(latitude, longitude))
We can now use this in the initial render:
def _render_map(self, latitude, longitude):
""" Render the initial map """
brasilia_coordinates = (-15.7934036, -47.8823172)
fig = gmaps.figure(center=brasilia_coordinates, zoom_level=3)
self.marker_layer = gmaps.Markers()
initial_marker = self._create_marker(latitude, longitude)
self.marker_layer.markers = [initial_marker] # set the first marker
fig.add_layer(self.marker_layer)
return fig
Note that I have renamed self.markers to self.marker_layer to make it clear it's a layer.
Finally, the update code is now:
def on_button_clicked(self, _):
latitude = self.FloatSlider1.value
longitude = self.FloatSlider2.value
# look how closely the following two lines match the construction code
new_marker = self._create_marker(latitude, longitude)
self.marker_layer.markers = [new_marker]
The challenge:
How can you change the color for backround, font etc for widgets.SelectMultiple() and other widgets for that matter? Here's a simple setup for widgets.SelectMultiple()
Snippet / Cell 1:
# settings
%matplotlib inline
# imports
from ipywidgets import interactive, Layout
from IPython.display import clear_output
import ipywidgets as widgets
from IPython.display import display
# widget 1
wdg = widgets.SelectMultiple(
options=['Apples', 'Oranges', 'Pears'],
value=['Oranges'],
#rows=10,
description='Fruits',
disabled=False
)
display(wdg)
Widget 1:
What I've tried:
I thought i was onto something with Layout and style and was hoping the following setup with layout=Layout(width='75%', height='80px') would let me change colors somehow as well and not only width and height:
Snippet / Cell 2:
wdg2 = widgets.SelectMultiple(
options=['Apples', 'Oranges', 'Pears'],
value=['Oranges'],
description='Fruits',
layout=Layout(width='75%', height='80px'),
disabled=False
)
display(wdg2)
Widget2:
But to my huge disappointment it seems that you can't change colors in a similar way. According to the ipywidgets docs, properties of the style attribute are specific to each widget type. You can get a list of the style attributes for a widget with the keys property. And wdg2.style.keys returns this:
['_model_module',
'_model_module_version',
'_model_name',
'_view_count',
'_view_module',
'_view_module_version',
'_view_name',
'description_width']
And since there are noe color attributes there, is it impossible to change the colors for widgets.SelectMultiple()? For other widgets, like Button, you'll find an attribute button_color as well.
The short answer is: You can't do that without creating your own "custom widget".
Those attributes of style and layout objects are hard-coded in both the server-side and client-side libraries of ipywidgets.
There is a dirty way to get a similar effect though, by mixing the ButtonStyle with SelectMultiple.
# Tested on JupyterLab 0.35.3 with Python 3.6 kernel
import ipywidgets as widgets
from ipywidgets.widgets import widget_serialization, trait_types
from traitlets import Unicode, Instance, CaselessStrEnum
class MySelectMultiple(widgets.SelectMultiple):
style=trait_types.InstanceDict(widgets.ButtonStyle).tag(sync=True, **widget_serialization)
wdg2 = MySelectMultiple(
options=['Apples', 'Oranges', 'Pears'],
value=['Oranges'],
description='Fruits',
layout=widgets.Layout(width='75%', height='80px'),
style= {'button_color':'red'},
disabled=False
)
wdg2
wdg2.style.button_color = 'green'
Another dirty way is to inject a CSS rule into the notebook which affects all select widget.
%%html
<style>
.widget-select > select {background-color: red;}
</style>
Custom widget
The ultimate solution is to make your own custom widget.
Unfortunately you need to write both server- and client side codes for it.
For classical jupyter notebook, the client side code (JavaScript) can be put in a cell.
But this feature may be dropped in the "next-generation" of Jupyter, i.e. JupyterLab, for security reasons.
Cell 1
%%javascript
require.undef('myselectmultiple');
define('myselectmultiple', ["#jupyter-widgets/base"], function(widgets) {
class selectmultipleView extends widgets.SelectMultipleView {
render () {
super.render();
this.mycolor_changed();
this.model.on('change:mycolor', this.mycolor_changed, this);
}
mycolor_changed () {
var mycolor = this.model.get('mycolor')
this.el.childNodes[1].style.backgroundColor = mycolor;
}
}
return {
myselectmultipleview : selectmultipleView
};
});
Cell 2
class MySelectMultipleC(widgets.SelectMultiple):
_view_name = Unicode('myselectmultipleview').tag(sync=True)
_view_module = Unicode('myselectmultiple').tag(sync=True)
_view_module_version = Unicode('0.1.0').tag(sync=True)
mycolor = Unicode('white', help='background color').tag(sync=True)
wdg3 = MySelectMultipleC(
options=['Apples', 'Oranges', 'Pears'],
value=['Oranges'],
description='Fruits',
mycolor = 'green',
disabled=False
)
wdg3
Cell 3
wdg3.mycolor = 'red'
JupyterLab uses a completely different framework. To make the above custom widget working in the "Lab" interface, the client-side code should be translated to TypeScript, and then be compiled, built and installed on the Lab server.
Late to the party, but here is my simple solution, for the case where the color will be used to encode simple two (or a number of) states: use unicode!
sample:
code (in python 3... :) )
from ipywidgets import interactive, Layout
from IPython.display import clear_output
import ipywidgets as widgets
from IPython.display import display
c_base = int("1F534",base=16)
# widget 1
options=['Apples', 'Oranges', 'Pears']
state = [False,True,True]
colored_options = ['{} {}'.format(chr(c_base+s), o) for s,o in zip(state,options)]
wdg = widgets.SelectMultiple(
options=colored_options,
description='Fruits',
disabled=False
)
display(wdg)
Try searching with this code if you need more colours...:
for i in range (10):
ii = int('0x1f7e0',base=16)+i
print('{:>15}'.format('[{}: {}] '.format(hex(ii),chr(ii))),end='')
if i%7==6:
print()
jp_proxy_widget makes it easy to do anything you can do in HTML5/javascript in a widget. For example here is a colorized multiple select:
Find it here: https://github.com/AaronWatters/jp_proxy_widget
GTK ComboBox has style property "arrow-size" (link). I want to set it to 0.
Unfortunately next snippet doesn't work. No error messages reported and arrow appears in default size (=15)
import pygtk
pygtk.require('2.0')
import gtk
def the_dialog():
dialog = gtk.Dialog("Title", None, gtk.DIALOG_MODAL)
liststore = gtk.ListStore(str)
for a in ["one","two","three"]:
liststore.append([a])
rc_str = """
style 'no_arrow_style' {
GtkComboBox::arrow-size = 0
}
widget_class '*' style 'no_arrow_style'
"""
gtk.rc_parse_string(rc_str)
combo_box = gtk.ComboBox()
cell = gtk.CellRendererText()
combo_box.pack_start(cell)
combo_box.add_attribute(cell, 'text', 0)
combo_box.set_model(liststore)
combo_box.get_cells()
dialog.vbox.pack_start(combo_box)
dialog.show_all()
dialog.run()
the_dialog()
Combo box with default "v"-shaped arrow:
GtkComboBox::arrow-size actually means "minimum arrow size". To see the difference set it to 100. The example snippet did work.
I have a Bokeh plot where I add some data in the form of a LabelSet and BoxAnnotation as overlay, but I want to be able to dynamically enable/disable this overlay.
I can enable/hide some of the lines in the plot already, but the system for the Annotations seems to be different. I've got so far already
Initialising
from ipywidgets import interact
from bokeh.plotting import figure as bf
from bokeh.layouts import layout as bl
from bokeh.models import Toggle, BoxAnnotation, CustomJS
from bokeh.io import push_notebook, show, output_notebook
output_notebook()
Widget generation
p = bf(title='test', x_range=(0,1), y_range=(0,1))
x = [1/3, 2/3]
y=[1/3, 2/3]
p.circle(x=x, y=y, size=15)
box = BoxAnnotation(left=None, right=0.5, fill_color='red', fill_alpha=0.1)
p.add_layout(box)
Interactivity
code = '''\
if toggle.active
box.visible = true
console.log 'enabling box'
else
box.visible = false
console.log 'disabling box'
'''
callback = CustomJS.from_coffeescript(code=code, args={})
toggle = Toggle(label="Red Box", button_type="success", callback=callback)
callback.args = {'toggle': toggle, 'box': box}
layout = bl([p], [toggle])
show(layout)
When I check the JS console, the if/else clauses get triggered as expected, so the Toggle works but the red box stays in place, both in Firefox as in IE
I think there might be some plumbing that is not hooked up on the BokehJS side to respond to visible. If so, that's a bug. Please make an issue with all this information in the Project Issue Tracker.
In the mean time, you can accomplish the same visual effect by manipulating the alpha values instead:
code = '''\
if toggle.active
box.fill_alpha = 0.1
box.line_alpha = 1
console.log 'enabling box'
else
box.fill_alpha = 0
box.line_alpha = 0
console.log 'disabling box'
'''
callback = CustomJS.from_coffeescript(code=code, args={})
toggle = Toggle(label="Red Box", button_type="success", callback=callback)
callback.args = {'toggle': toggle, 'box': box}
layout = bl([p], [toggle])
show(layout)