.. _devTest_widgets:

.. WARNING: DO NOT EDIT THIS FILE:
   AUTOMATICALLY GENERATED.
   PLEASE EDIT THE .py FILE DIRECTLY.

Testing ipywidgets and Music21
==============================

These are tests of widgets within Music21

.. code:: ipython3

    import ipywidgets

.. code:: ipython3

    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

.. code:: ipython3

    @widgets.interact
    def f(x=5):
        print(x)



.. parsed-literal::
   :class: ipython-result

    interactive(children=(IntSlider(value=5, description='x', max=15, min=-5), Output()), _dom_classes=('widget-in…


.. code:: ipython3

    @widgets.interact(x=(0, 5))
    def f(x=5):
        print(x)



.. parsed-literal::
   :class: ipython-result

    interactive(children=(IntSlider(value=5, description='x', max=5), Output()), _dom_classes=('widget-interact',)…


.. code:: ipython3

    @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)



.. parsed-literal::
   :class: ipython-result

    interactive(children=(FloatSlider(value=1.0, description='freq', max=3.0, min=-1.0), Dropdown(description='col…


.. code:: ipython3

    freq_slider = widgets.FloatSlider(
        value=2.,
        min=1.,
        max=10.0,
        step=0.1,
        description='Frequency:',
        readout_format='.1f',
    )
    freq_slider




.. parsed-literal::
   :class: ipython-result

    FloatSlider(value=2.0, description='Frequency:', max=10.0, min=1.0, readout_format='.1f')



.. code:: ipython3

    import ipywidgets as widgets
    from traitlets import Unicode, Int, validate

.. code:: ipython3

    class CounterWidget(widgets.DOMWidget):
        _view_name = Unicode('CounterView').tag(sync=True)
        _view_module = Unicode('counter').tag(sync=True)
        value = Int(0).tag(sync=True)

.. code:: javascript

    %%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
        };
    });



.. parsed-literal::
   :class: ipython-result

    <IPython.core.display.Javascript object>


.. code:: ipython3

    def a_w(min=0, max=100):
        @widgets.interact(x=(min,max))
        def f(x=50):
            print(x)

.. code:: ipython3

    a_w(20, 60)



.. parsed-literal::
   :class: ipython-result

    interactive(children=(IntSlider(value=50, description='x', max=60, min=20), Output()), _dom_classes=('widget-i…


.. code:: ipython3

    def a_w(min=0, max=100):
        @widgets.interact(x=(min,max))
        def f(x=(min+max)//2):
            print(x)

.. code:: ipython3

    a_w(10, 20)



.. parsed-literal::
   :class: ipython-result

    interactive(children=(IntSlider(value=15, description='x', max=20, min=10), Output()), _dom_classes=('widget-i…