In [31]:
import ipywidgets as widgets
from traitlets import Unicode, validate
class HelloWidget(widgets.DOMWidget):
_view_name = Unicode('HelloView').tag(sync=True)
_view_module = Unicode('hello').tag(sync=True)
_view_module_version = Unicode('0.1.0').tag(sync=True)
value = Unicode('Hello World!').tag(sync=True)
In [39]:
%%javascript
// require.undef('hello');
define(["@jupyter-widgets/base"], function(widgets) {
var HelloView = widgets.DOMWidgetView.extend({
// Render the view.
render: function() {
this.value_changed();
this.model.on('change:value', this.value_changed, this);
},
value_changed: function() {
this.el.textContent = this.model.get('value');
},
});
return {
HelloView: HelloView
};
});
In [ ]:
In [40]:
w = HelloWidget()
w
In [38]:
w.value
Out[38]:
In [ ]:
In [17]:
import ipywidgets as widgets
from traitlets import Unicode, validate
class MyWidget(widgets.DOMWidget):
_view_name = Unicode('MyWidgetView').tag(sync=True)
_view_module = Unicode('mywidget').tag(sync=True)
_view_module_version = Unicode('0.1.0').tag(sync=True)
value = Unicode('My Widget!').tag(sync=True)
count = Int(23).tag(sync=True)
In [21]:
%%javascript
require.undef('mywidget');
define('mywidget', ["@jupyter-widgets/base"], function(widgets) {
var MyWidgetView = widgets.DOMWidgetView.extend({
// Render the view.
render: function() {
this.value_changed();
this.model.on('change:count', this.value_changed, this);
},
value_changed: function() {
var old_value = this.model.previous('count');
var new_value = this.model.get('count');
this.el.textContent = String(old_value) + ' -> ' + String(new_value);
// this.el.textContent = this.model.get('value');
},
});
return {
MyWidgetView: MyWidgetView
};
});
In [22]:
w = MyWidget()
w
In [24]:
w.count = 67
In [ ]:
In [20]:
%%javascript
this.model.get('count');
this.model.set('count', 999);
this.touch();
/////////////////////////////////
this.colorpicker = document.createElement('input');
this.colorpicker.setAttribute('type', 'color');
this.el.appendChild(this.colorpicker);
In [7]:
from ipywidgets import DOMWidget
# from traitlets import Int
from traitlets import Unicode, validate
class MyWidget(DOMWidget):
_view_module = Unicode('mywidget').tag(sync=True)
_view_module_version = Unicode('0.1.0').tag(sync=True)
_view_name = Unicode('MyWidgetView').tag(sync=True)
count = Int(23).tag(sync=True)
value = Unicode('Hello World!').tag(sync=True)
In [8]:
%%javascript
require.undef('mywidget');
define('mywidget', ['@jupyter-widgets/base'], function(widgets) {
var MyWidgetView = widgets.DOMWidgetView.extend({
// render: function() {
// // MyWidgetView.__super__.render.apply(this, arguments);
// this._count_changed();
// this.model.on('change:value', this.value_changed, this);
// this.listenTo(this.model, 'change:count', this._count_changed, this);
// },
// _count_changed: function() {
// var old_value = this.model.previous('count');
// var new_value = this.model.get('count');
// this.el.textContent = String(old_value) + ' -> ' + String(new_value);
// }
// });
// Render the view.
render: function() {
this.value_changed();
this.model.on('change:value', this.value_changed, this);
},
value_changed: function() {
this.el.textContent = this.model.get('value');
},
});
return {
MyWidgetView: MyWidgetView
}
});
In [9]:
w = mywidget()
w
In [ ]:
In [ ]:
In [30]:
from ipywidgets import IntSlider
from IPython.display import display
x = IntSlider(description='x')
y = IntSlider(description='y')
def update_y(args):
y.value = args['new']
print(args['new'])
x.observe(update_y, 'value')
display(x)
display(y)
In [31]:
from functools import wraps
def yield_for_change(widget, attribute):
"""Pause a generator to wait for a widget change event.
This is a decorator for a generator function which pauses the generator on yield
until the given widget attribute changes. The new value of the attribute is
sent to the generator and is the value of the yield.
"""
def f(iterator):
@wraps(iterator)
def inner():
i = iterator()
def next_i(change):
try:
i.send(change.new)
except StopIteration as e:
widget.unobserve(next_i, attribute)
widget.observe(next_i, attribute)
# start the generator
next(i)
return inner
return f
In [32]:
from ipywidgets import IntSlider, VBox, HTML
slider2=IntSlider()
@yield_for_change(slider2, 'value')
def f():
for i in range(10):
print('did work %s'%i)
x = yield
print('generator function continued with value %s'%x)
f()
slider2
In [ ]:
In [ ]:
In [ ]:
In [ ]:
In [28]:
%%javascript
var widgets = require('@jupyter-widgets/base');
console.log(widgets.DOMWidgetView|IPython.widget)
In [ ]: