How to use @jupyter-widgets/controls - 10 common examples

var pretty = "00" + number;
    return pretty.substr(pretty.length-size);
}

//-----------------------------------------------

// Widget models must provide default values for the model attributes that are
// different from the base class.  These include at least `_model_name`, `_view_name`,
// `_model_module`, and `_view_module`.  When serialiazing entire widget state for embedding,
// only values different from default will be specified.

console.log(widgets_base);
console.log(widgets_controls);


var TimeCodeModel = widgets_controls.HTMLModel.extend({
    defaults: _.extend(_.result(this, 'widgets.HTMLModel.prototype.defaults'), {
        _model_name:          'TimeCodeModel',
        _model_module:         module_name,
        _model_module_version: module_version,

        _view_name:          'TimeCodeView',
        _view_module:         module_name,
        _view_module_version: module_version,
    })
});


var VideoModel = widgets_base.DOMWidgetModel.extend({
    defaults: _.extend(_.result(this, 'widgets.DOMWidgetModel.prototype.defaults'), {
        _model_name:          'VideoModel',
        _model_module:         module_name,

//  - `_view_name`
//  - `_view_module`
//  - `_view_module_version`
//
//  - `_model_name`
//  - `_model_module`
//  - `_model_module_version`
//
//  when different from the base class.

// When serialiazing the entire widget state for embedding, only values that
// differ from the defaults will be specified.

var version = require('../package.json').version;

var InnotaterImagePadModel = controls.ImageModel.extend({
	defaults: _.extend(controls.ImageModel.prototype.defaults(), {
	})
});


// Custom View. Renders the widget model.
var InnotaterImagePadView = widgets.DOMWidgetView.extend({

	InnotaterImagePadView: function() {
		this.imageLoaded = false;
		InnotaterImagePadView.__super__.apply(this, arguments);
	},

	render: function () {
		/**
		 * Called when view is rendered.

//  - `_view_module`
//  - `_view_module_version`
//
//  - `_model_name`
//  - `_model_module`
//  - `_model_module_version`
//
//  when different from the base class.

// When serialiazing the entire widget state for embedding, only values that
// differ from the defaults will be specified.

var version = require('../package.json').version;

var InnotaterImagePadModel = controls.ImageModel.extend({
	defaults: _.extend(controls.ImageModel.prototype.defaults(), {
	})
});


// Custom View. Renders the widget model.
var InnotaterImagePadView = widgets.DOMWidgetView.extend({

	InnotaterImagePadView: function() {
		this.imageLoaded = false;
		InnotaterImagePadView.__super__.apply(this, arguments);
	},

	render: function () {
		/**
		 * Called when view is rendered.
		 */

// See the License for the specific language governing permissions and
// limitations under the License.


import {
  ButtonView,
  ButtonModel
} from '@jupyter-widgets/controls';

import {
  extend
} from 'lodash';


// Custom Model. Custom widgets models must at least provide default values
var ImageButtonModel = ButtonModel.extend({
  defaults: extend(ButtonModel.prototype.defaults(), {
    _model_name: 'ImageButtonModel',
    _view_name: 'ImageButtonView',
    _model_module: 'jupyter_cadquery',
    _view_module: 'jupyter_cadquery',
    _model_module_version: "v0.9.5",
    _view_module_version: "v0.9.5",
    value: null
  })
});


// Custom View. Renders the widget model.
var ImageButtonView = ButtonView.extend({
  render: function () {
    var width = this.model.get('width');

// limitations under the License.


import {
  ButtonView,
  ButtonModel
} from '@jupyter-widgets/controls';

import {
  extend
} from 'lodash';


// Custom Model. Custom widgets models must at least provide default values
var ImageButtonModel = ButtonModel.extend({
  defaults: extend(ButtonModel.prototype.defaults(), {
    _model_name: 'ImageButtonModel',
    _view_name: 'ImageButtonView',
    _model_module: 'jupyter_cadquery',
    _view_module: 'jupyter_cadquery',
    _model_module_version: "v0.9.5",
    _view_module_version: "v0.9.5",
    value: null
  })
});


// Custom View. Renders the widget model.
var ImageButtonView = ButtonView.extend({
  render: function () {
    var width = this.model.get('width');
    var height = this.model.get('height');

// Custom Model. Custom widgets models must at least provide default values
var ImageButtonModel = ButtonModel.extend({
  defaults: extend(ButtonModel.prototype.defaults(), {
    _model_name: 'ImageButtonModel',
    _view_name: 'ImageButtonView',
    _model_module: 'jupyter_cadquery',
    _view_module: 'jupyter_cadquery',
    _model_module_version: "v0.9.5",
    _view_module_version: "v0.9.5",
    value: null
  })
});


// Custom View. Renders the widget model.
var ImageButtonView = ButtonView.extend({
  render: function () {
    var width = this.model.get('width');
    var height = this.model.get('height');
    var blob = new Blob([this.model.get("value")], {
      type: 'image/png'
    });
    var tooltip = this.model.get('tooltip');
    this.el.classList.add('jupyter-widgets');
    this.el.classList.add('jupyter-button');
    this.el.setAttribute('width', width + 4);
    this.el.setAttribute('height', height + 4);
    this.el.setAttribute('title', tooltip);
    var img = document.createElement('img');
    img.setAttribute('width', width);
    img.setAttribute('height', height);
    img.src = URL.createObjectURL(blob);

_model_name: 'TreeModel',
    _view_name: 'TreeView',
    _model_module: 'jupyter_cadquery',
    _view_module: 'jupyter_cadquery',
    _model_module_version: "v0.9.5",
    _view_module_version: "v0.9.5",
    icons: null,
    tree: null,
    state: null
  })
});


// TreeView

var TreeView = DescriptionView.extend({
  initialize: function (parameters) {
    DescriptionView.prototype.initialize.apply(this, arguments);

    this.icons = this.model.get("icons");
    // Be sure to work on deep copy, otherwise object will be updated and
    // model.set will not find any differences and nothing will be sent to python!
    this.states = clone(this.model.get("state"));
    this.treeModel = this.toModel(this.model.get("tree"));

    this.listenTo(this.model, "change:state", () => this.updateAllStates());
  },

  render: function () {
    var ul = tag("ul", ["toplevel"]);
    ul.appendChild(this.toHtml(this.treeModel));
    this.el.appendChild(ul);

initialize: function (parameters) {
    DescriptionView.prototype.initialize.apply(this, arguments);

    this.icons = this.model.get("icons");
    // Be sure to work on deep copy, otherwise object will be updated and
    // model.set will not find any differences and nothing will be sent to python!
    this.states = clone(this.model.get("state"));
    this.treeModel = this.toModel(this.model.get("tree"));

    this.listenTo(this.model, "change:state", () => this.updateAllStates());
  },

defaults: _.extend(_.result(this, 'widgets.DOMWidgetModel.prototype.defaults'), {
        _model_name:          'VideoModel',
        _model_module:         module_name,
        _model_module_version: module_version,

        _view_name:          'VideoView',
        _view_module:         module_name,
        _view_module_version: module_version,
    })
});


//-----------------------------------------------

// Widget View renders the model to the DOM
var TimeCodeView = widgets_controls.HTMLView.extend({
    // https://codereview.stackexchange.com/questions/49524/updating-single-view-on-change-of-a-model-in-backbone
    render: function() {
        this.listenTo(this.model, 'change:timecode', this.timecode_changed);

        TimeCodeView.__super__.render.apply(this);

        this.timecode_changed();
        this.update();

        return this;
    },

    timecode_changed: function() {
        var time_base = this.model.get('timebase');

        var t = this.model.get('timecode');  //  current video time in seconds

};

function clone(obj) {
  return JSON.parse(JSON.stringify(obj));
};

const States = {
  unselected: 0,
  selected: 1,
  mixed: 2,
  empty: 3
};

// TreeModel

var TreeModel = SelectionModel.extend({
  defaults: extend(SelectionModel.prototype.defaults(), {
    _model_name: 'TreeModel',
    _view_name: 'TreeView',
    _model_module: 'jupyter_cadquery',
    _view_module: 'jupyter_cadquery',
    _model_module_version: "v0.9.5",
    _view_module_version: "v0.9.5",
    icons: null,
    tree: null,
    state: null
  })
});


// TreeView