Testing ipywidgets and Music21¶
These are tests of widgets within Music21
import ipywidgets
import ipywidgets as widgets
from ipywidgets import HBox, VBox
import numpy as np
import matplotlib.pyplot as plt
from IPython.display import display
%matplotlib inline
@widgets.interact
def f(x=5):
print(x)
interactive(children=(IntSlider(value=5, description='x', max=15, min=-5), Output()), _dom_classes=('widget-in…
@widgets.interact(x=(0, 5))
def f(x=5):
print(x)
interactive(children=(IntSlider(value=5, description='x', max=5), Output()), _dom_classes=('widget-interact',)…
@widgets.interact_manual(
color=['blue', 'red', 'green'], lw=(1., 10.))
def plot(freq=1., color='blue', lw=2, grid=True):
t = np.linspace(-1., +1., 1000)
fig, ax = plt.subplots(1, 1, figsize=(8, 6))
ax.plot(t, np.sin(2 * np.pi * freq * t),
lw=lw, color=color)
ax.grid(grid)
interactive(children=(FloatSlider(value=1.0, description='freq', max=3.0, min=-1.0), Dropdown(description='col…
freq_slider = widgets.FloatSlider(
value=2.,
min=1.,
max=10.0,
step=0.1,
description='Frequency:',
readout_format='.1f',
)
freq_slider
FloatSlider(value=2.0, description='Frequency:', max=10.0, min=1.0, readout_format='.1f')
import ipywidgets as widgets
from traitlets import Unicode, Int, validate
class CounterWidget(widgets.DOMWidget):
_view_name = Unicode('CounterView').tag(sync=True)
_view_module = Unicode('counter').tag(sync=True)
value = Int(0).tag(sync=True)
%%javascript
// We make sure the `counter` module is defined
// only once.
require.undef('counter');
// We define the `counter` module depending on the
// Jupyter widgets framework.
define('counter', ["@jupyter-widgets/base"],
function(widgets) {
// We create the CounterView frontend class,
// deriving from DOMWidgetView.
var CounterView = widgets.DOMWidgetView.extend({
// This method creates the HTML widget.
render: function() {
// The value_changed() method should be
// called when the model's value changes
// on the kernel side.
this.value_changed();
this.model.on('change:value',
this.value_changed, this);
var model = this.model;
var that = this;
// We create the plus and minus buttons.
this.bm = $('<button/>')
.text('-')
.click(function() {
// When the button is clicked,
// the model's value is updated.
var x = model.get('value');
model.set('value', x - 1);
that.touch();
});
this.bp = $('<button/>')
.text('+')
.click(function() {
var x = model.get('value');
model.set('value', x + 1);
that.touch();
});
// This element displays the current
// value of the counter.
this.span = $('<span />')
.text('0')
.css({marginLeft: '10px',
marginRight: '10px'});
// this.el represents the widget's DOM
// element. We add the minus button,
// the span element, and the plus button.
$(this.el)
.append(this.bm)
.append(this.span)
.append(this.bp);
},
value_changed: function() {
// Update the displayed number when the
// counter's value changes.
var x = this.model.get('value');
$($(this.el).children()[1]).text(x);
},
});
return {
CounterView : CounterView
};
});
<IPython.core.display.Javascript object>
def a_w(min=0, max=100):
@widgets.interact(x=(min,max))
def f(x=50):
print(x)
a_w(20, 60)
interactive(children=(IntSlider(value=50, description='x', max=60, min=20), Output()), _dom_classes=('widget-i…
def a_w(min=0, max=100):
@widgets.interact(x=(min,max))
def f(x=(min+max)//2):
print(x)
a_w(10, 20)
interactive(children=(IntSlider(value=15, description='x', max=20, min=10), Output()), _dom_classes=('widget-i…