Handle non-binary image streams

Author: mdboom

lib/matplotlib/backends/backend_webagg.py

@@ -375,6 +375,8 @@ def get(self, fignum, format):
             self.write(buffer.getvalue())
 
     class WebSocket(tornado.websocket.WebSocketHandler):
+        supports_binary = True
+
         def open(self, fignum):
             self.fignum = int(fignum)
             manager = Gcf.get_fig_manager(self.fignum)
@@ -388,8 +390,14 @@ def on_close(self):
 
         def on_message(self, message):
             message = json.loads(message)
-            canvas = Gcf.get_fig_manager(self.fignum).canvas
-            canvas.handle_event(message)
+            # whole.
+            if message['type'] == 'supports_binary':
+                self.supports_binary = message['value']
+            else:
+                canvas = Gcf.get_fig_manager(self.fignum).canvas
+                canvas.handle_event(message)
 
         def send_event(self, event_type, **kwargs):
             payload = {'type': event_type}
@@ -399,7 +407,12 @@ def send_event(self, event_type, **kwargs):
         def send_image(self):
             canvas = Gcf.get_fig_manager(self.fignum).canvas
             diff = canvas.get_diff_image()
-            self.write_message(diff, binary=True)
+                self.write_message(diff, binary=True)
+            else:
+                data_uri = "data:image/png;base64,{0}".format(
+                    diff.encode('base64').replace('\n', ''))
+                self.write_message(data_uri)
 
     def __init__(self):
         super(WebAggApplication, self).__init__([

lib/matplotlib/backends/web_static/mpl.css

@@ -1,6 +1,6 @@
 .mpl-message {
     float:right;
-    vertical-align:text-center;
 }
 
 .mpl-toolbar-spacer {

lib/matplotlib/backends/web_static/mpl.js

@@ -17,28 +17,50 @@ window.onload = function() {
     } else if (typeof(MozWebSocket) !== 'undefined') {
         this.WebSocket = MozWebSocket;
     } else {
-        alert('Your browser does not have WebSocket support, please try Chrome, Safari or Firefox ≥ 6. Firefox 4 and 5 are also supported by you have to enable WebSockets in about:config.');
+              'Please try Chrome, Safari or Firefox ≥ 6. ' +
+              'Firefox 4 and 5 are also supported but you ' +
+              'have to enable WebSockets in about:config.');
     };
 
     var message = document.getElementById("mpl-message");
     var canvas = document.getElementById("mpl-canvas");
 
     ws = new this.WebSocket(ws_url("ws"));
+
+    var supports_binary = (ws.binaryType != undefined);
+
+    ws.onopen = function () {
+        ws.send(JSON.stringify(
+            {type: 'supports_binary',
+             value: supports_binary}));
+    }
+
     ws.onmessage = function (evt) {
-        if (evt.data instanceof Blob) {
-            /* FIXME: We get "Resource interpreted as Image but
-             * transferred with MIME type text/plain:" errors on
-             * Chrome.  But how to set the MIME type?  It doesn't seem
-             * to be part of the websocket stream */
-            evt.data.type = "image/png";
-
-            /* Free the memory for the previous frames */
-            if (imageObj.src) {
-                (window.URL || window.webkitURL).revokeObjectURL(imageObj.src);
+                /* Free the memory for the previous frames */
+                if (imageObj.src) {
+                    (window.URL || window.webkitURL).revokeObjectURL(imageObj.src);
+                }
+
+                imageObj.src = (window.URL || window.webkitURL).createObjectURL(evt.data);
+                return;
+            }
+        } else {
+            if (evt.data.slice(0, 21) == "data:image/png;base64") {
+                console.log("got image");
+                imageObj.src = evt.data;
+                return;
             }
-
-            imageObj.src = (window.URL || window.webkitURL).createObjectURL(evt.data);
-            return;
         }
 
         var msg = JSON.parse(evt.data);