IPython Livecoding Hack with Inlet.js

README.md

While widgets provide the best way to enable bidirectional communication between the Notebook and the kernel this approach, borrowed from Bret Victor's talk Inventing on Principal and implemented with Ian Johnson's Inlet.js is kind of fun.

Once this is installed, clicking on a number (int, float... or scientific notation!) or a hex/hsl color, and a visual tool (slider or color picker) will show up.

Installation

You can copy and paste the ipython-inlet.js file in a Notebook cell with %%javascript uncommented, it should take care of everything. You could probably also do some kind of magic with requirejs, but I don't know the URL yet...

ipython-inlet.js

//%%javascript
;(function(IPython, $, require, element){
  'use strict';
  // this would be replaced with `nbextensions/inlet`
  var url_base = '//enjalot.github.io/Inlet';
  
  // add the style (for the slider)
  $(element).append($('<style/>')
    .text('@import url("' + url_base + '/inlet.css")'));
  
  // at present, inlet exposes one global: `Inlet`
  require.config({
    paths: {inlet: url_base + '/inlet'},
    shim: {inlet: {exports: 'Inlet'}}
  });
  
  require(["inlet", "underscore"], function(inlet, _){
    $([IPython.events])
      .on('edit_mode.Cell', function(evt, data){
        var cell = data.cell,
          cm = data.cell.code_mirror;
        if(cm._inletted){ return; }
        
        cm._inletted = true;

        inlet(cm);
        
        cm.on("change", _.debounce(
          function(cm, delta){
            if(!delta.origin && data.cell.execute){
              data.cell.execute();
            }
          },
          300
        ));
      });
  });
}).call(this, IPython, jQuery, require, element);