Make the WebAgg backend work with the IPython notebook

matplotlib · mdboom · Aug 28, 2013 · May 23, 2013 · May 23, 2013 · May 23, 2013
commit 27482be73b5ad69d2d52cc77cdf698d3a0a6d3e1
diff --git a/lib/matplotlib/backends/backend_webagg.py b/lib/matplotlib/backends/backend_webagg.py
@@ -10,6 +10,8 @@
 import os
 import random
 import socket
+import threading
+import types
 
 import numpy as np
 
@@ -30,6 +32,15 @@
 from matplotlib._pylab_helpers import Gcf
 from matplotlib import _png
 
+# TODO: This should really only be set for the IPython notebook, but
+# I'm not sure how to detect that.
+try:
+    __IPYTHON__
+except:
+    _in_ipython = False
+else:
+    _in_ipython = True
+
 
 def draw_if_interactive():
     """
@@ -57,7 +68,30 @@ def mainloop(self):
 
         WebAggApplication.start()
 
-show = Show()
+
+if not _in_ipython:
+    show = Show()
+else:
+    def show():
+        class RawHTML(object):
+            def __init__(self, content):
+                self._content = content
+
+            def _repr_html_(self):
+                return self._content
+
+        result = []
+        import matplotlib._pylab_helpers as pylab_helpers
+        for manager in pylab_helpers.Gcf().get_all_fig_managers():
+            result.append(ipython_inline_display(manager.canvas.figure))
+        return RawHTML('\n'.join(result))
+
+
+class ServerThread(threading.Thread):
+    def run(self):
+        tornado.ioloop.IOLoop.instance().start()
+
+server_thread = ServerThread()
 
 
 def new_figure_manager(num, *args, **kwargs):
@@ -127,6 +161,16 @@ def __init__(self, *args, **kwargs):
         # messages from piling up.
         self._pending_draw = None
 
+        # TODO: I'd like to dynamically add the _repr_html_ method
+        # to the figure in the right context, but then IPython doesn't
+        # use it, for some reason.
+
+        # Add the _repr_html_ member to the figure for IPython inline
+        # support
+        # if _in_ipython:
+        #     self.figure._repr_html_ = types.MethodType(
+        #         ipython_inline_display, self.figure, self.figure.__class__)
+
     def show(self):
         # show the figure window
         show()
@@ -199,7 +243,7 @@ def get_diff_image(self):
             self._png_is_old = False
         return self._png_buffer.getvalue()
 
-    def get_renderer(self, cleared=False):
+    def get_renderer(self, cleared=None):
         # Mirrors super.get_renderer, but caches the old one
         # so that we can do things such as prodce a diff image
         # in get_diff_image
@@ -436,6 +480,8 @@ def get(self):
             manager = Gcf.get_fig_manager(1)
             canvas = manager.canvas
 
+            self.set_header('Content-Type', 'application/javascript')
+
             t = tornado.template.Template(tpl)
             self.write(t.generate(
                 toolitems=NavigationToolbar2WebAgg.toolitems,
@@ -624,3 +670,27 @@ def start(cls):
             print("Server stopped")
 
         cls.started = True
+
+
+def ipython_inline_display(figure):
+    import matplotlib._pylab_helpers as pylab_helpers
+
+    WebAggApplication.initialize()
+    if not server_thread.is_alive():
+        server_thread.start()
+
+    with open(os.path.join(
+            WebAggApplication._mpl_dirs['web_backend'],
+            'ipython_inline_figure.html')) as fd:
+        tpl = fd.read()
+
+    fignum = figure.number
+    manager = pylab_helpers.Gcf.get_fig_manager(fignum)
+
+    t = tornado.template.Template(tpl)
+    return t.generate(
+        prefix=WebAggApplication.url_prefix,
+        fig_id=fignum,
+        toolitems=NavigationToolbar2WebAgg.toolitems,
+        canvas=figure.canvas,
+        port=WebAggApplication.port)
diff --git a/lib/matplotlib/backends/web_backend/all_figures.html b/lib/matplotlib/backends/web_backend/all_figures.html
@@ -3,65 +3,49 @@
     <link rel="stylesheet" href="{{ prefix }}/_static/css/page.css" type="text/css">
     <link rel="stylesheet" href="{{ prefix }}/_static/css/boilerplate.css" type="text/css" />
     <link rel="stylesheet" href="{{ prefix }}/_static/css/fbm.css" type="text/css" />
-	<link rel="stylesheet" href="{{ prefix }}/_static/jquery/css/themes/base/jquery-ui.min.css" >
-	<script src="{{ prefix }}/_static/jquery/js/jquery-1.7.1.min.js"></script>
-	<script src="{{ prefix }}/_static/jquery/js/jquery-ui.min.js"></script>
-	<script src="{{ prefix }}/_static/mpl.js"></script>
-	<script src="{{ prefix }}/mpl_interface.js"></script>
+    <link rel="stylesheet" href="{{ prefix }}/_static/jquery/css/themes/base/jquery-ui.min.css" >
+    <script src="{{ prefix }}/_static/jquery/js/jquery-1.7.1.min.js"></script>
+    <script src="{{ prefix }}/_static/jquery/js/jquery-ui.min.js"></script>
+    <script src="{{ prefix }}/_static/mpl.js"></script>
+    <script src="{{ prefix }}/mpl_interface.js"></script>
 
-	<script>
-	var websocket_url_prefix = "{{ ws_uri }}";
-	var figures = new Array();
+    <script>
 
-    {% for (fig_id, _) in figures %}
-        $(document).ready(
-        function() {
-            fig = new figure({{ repr(str(fig_id)) }}, websocket_url_prefix);
-            figures.push(fig);
-
-            fig.focus_on_mouseover = true;
-
-            var toolbar_prefix = '{{ str(fig_id).replace(' ', '') }}-toolbar';
-            init_mpl_toolbar(fig, toolbar_prefix);
-
-            var statusbar_prefix = '{{ str(fig_id).replace(' ', '') }}-statusbar';
-            var status_id = init_mpl_statusbar(toolbar_prefix, statusbar_prefix);
-
-            var canvas_prefix = '{{ str(fig_id).replace(' ', '') }}-canvas';
-            init_mpl_canvas(fig, '{{ str(fig_id).replace(' ', '') }}-canvas-div', canvas_prefix);
+      {% for (fig_id, fig_manager) in figures %}
+        {% set fig_label='Figure: {}'.format(fig_manager.canvas.figure.get_label()) %}
 
-            fig.finalize(canvas_prefix, toolbar_prefix, statusbar_prefix);
+        {% if fig_label == 'Figure: ' %}
+          {% set fig_label="Figure {}".format(fig_id) %}
+        {% end %}
 
-            $(fig.canvas).attr('tabindex', {{ fig_id }});
+        $(document).ready(
+        function() {
+          var main_div = $('div.figures');
+          var header_div = $('<h2><a href="{{ prefix }}/{{ str(fig_id) }}">{{ fig_label }}</a></h2>');
+          main_div.append(header_div);
+          var figure_div = $('<div/>')
+          main_div.append(figure_div);
+          var websocket_url_prefix = "{{ ws_uri }}";
+          var fig = new figure(
+            {{ repr(str(fig_id)) }},
+            websocket_url_prefix,
+            figure_div);
+
+          fig.focus_on_mouseover = true;
+
+          $(fig.canvas).attr('tabindex', {{ fig_id }});
           }
         );
 
 	{% end %}
-	</script>
+    </script>
 
-  <title>MPL | WebAgg current figures</title>
+    <title>MPL | WebAgg current figures</title>
 
   </head>
-  <body>
+  <body onkeydown="fig.key_event(event, 'key_press');"
+        onkeyup="fig.key_event(event, 'key_release');">
     <div id="mpl-warnings" class="mpl-warnings"></div>
-    {% for (fig_id, fig_manager) in figures %}
-        {% set fig_label='Figure: {}'.format(fig_manager.canvas.figure.get_label()) %}
-
-        {% if fig_label == 'Figure: ' %}
-        {% set fig_label="Figure {}".format(fig_id) %}
-        {% end %}
-
-    <div style="margin: 25px 100px;">
-        <h2>
-        <a href="{{ prefix }}/{{ str(fig_id) }}">
-        {{ fig_label }}
-
-        </a>
-        </h2>
-       <div id="{{ str(fig_id).replace(' ', '') }}-canvas-div"></div>
-       <div id="{{ str(fig_id).replace(' ', '') }}-toolbar" style="width: 700px;"></div>
-    </div>
-    {% end %}
-
+    <div class="figures" style="margin: 10px 10px;"></div>
   </body>
 </html>