Let the Javascript side control when to fetch new frames. draw_idle

sends a "draw" message to the browser.  If the browser is not already
waiting on another frame, it sends a "draw" message back to the server
which then returns an actual frame.  The nice thing about this approach
is that it's completely timerless.

Author: mdboom

examples/user_interfaces/embedding_webagg.py

@@ -237,7 +237,7 @@ def __init__(self, figure):
     http_server = tornado.httpserver.HTTPServer(application)
     http_server.listen(8080)
 
-    print("http://localhost:8080/")
+    print("http://127.0.0.1:8080/")
     print("Press Ctrl+C to quit")
 
     tornado.ioloop.IOLoop.instance().start()

lib/matplotlib/backends/backend_webagg.py

@@ -145,19 +145,6 @@ def show(self):
         # show the figure window
         show()
 
-    def draw_idle(self):
-        if self._pending_draw is None:
-            ioloop = tornado.ioloop.IOLoop.instance()
-            self._pending_draw = ioloop.add_timeout(
-                datetime.timedelta(milliseconds=50),
-                self._draw_idle_callback)
-
-    def _draw_idle_callback(self):
-        try:
-            self.draw()
-        finally:
-            self._pending_draw = None
-
     def new_timer(self, *args, **kwargs):
         return TimerTornado(*args, **kwargs)
 

lib/matplotlib/backends/backend_webagg_core.py

@@ -64,10 +64,6 @@ def __init__(self, *args, **kwargs):
         # sent to the clients will be a full frame.
         self._force_full = True
 
-        # Set to True when a drawing is in progress to prevent redraw
-        # messages from piling up.
-        self._pending_draw = None
-
     def show(self):
         # show the figure window
         from matplotlib.pyplot import show
@@ -87,12 +83,7 @@ def draw(self):
             self.manager.refresh_all()
 
     def draw_idle(self):
-        # This is a poor-man's timer to make sure we don't send too
-        # many frames.
-        if (self._pending_draw is None or
-            time.time() - self._pending_draw > 0.005):
-            self.draw()
-            self._pending_draw = time.time()
+        self.send_event("draw")
 
     def get_diff_image(self):
         if self._png_is_old:
@@ -167,7 +158,9 @@ def handle_event(self, event):
             # future, but for now the performance increase is enough
             # to justify it, even if the server does nothing with it.
             pass
-        if e_type in ('button_press', 'button_release', 'motion_notify'):
+        elif e_type == 'draw':
+            self.draw()
+        elif e_type in ('button_press', 'button_release', 'motion_notify'):
             x = event['x']
             y = event['y']
             y = self.get_renderer().height - y
@@ -210,9 +203,6 @@ def handle_event(self, event):
     def send_event(self, event_type, **kwargs):
         self.manager._send_event(event_type, **kwargs)
 
-    def new_timer(self, *args, **kwargs):
-        return TimerTornado(*args, **kwargs)
-
     def start_event_loop(self, timeout):
         backend_bases.FigureCanvasBase.start_event_loop_default(
             self, timeout)

lib/matplotlib/backends/web_backend/mpl.js

@@ -54,6 +54,8 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
 
     var fig = this;
 
+    this.waiting = false;
+
     onopen_creator = function(fig) {
         return function () {
             fig.send_message("supports_binary", {value: fig.supports_binary});
@@ -65,6 +67,7 @@ mpl.figure = function(figure_id, websocket, ondownload, parent_element) {
     onload_creator = function(fig) {
         return function() {
             fig.context.drawImage(fig.imageObj, 0, 0);
+            fig.waiting = false;
         };
     };
     this.imageObj.onload = onload_creator(fig);
@@ -218,6 +221,14 @@ mpl.figure.prototype.send_message = function(type, properties) {
 }
 
 
+mpl.figure.prototype.send_draw_message = function() {
+    if (!this.waiting) {
+        this.waiting = true;
+        this.ws.send(JSON.stringify({type: "draw", figure_id: this.id}));
+    }
+}
+
+
 mpl.figure.prototype._make_on_message_function = function(fig) {
     return function socket_on_message(evt) {
         if (fig.supports_binary) {
@@ -249,6 +260,10 @@ mpl.figure.prototype._make_on_message_function = function(fig) {
         var msg = JSON.parse(evt.data);
 
         switch(msg['type']) {
+        case 'draw':
+            fig.send_draw_message();
+            break;
+
         case 'message':
             fig.message.textContent = msg['message'];
             break;
@@ -358,8 +373,6 @@ mpl.figure.prototype.mouse_event = function(event, name) {
 
 
 mpl.figure.prototype.key_event = function(event, name) {
-    console.log("key_event: " + event);
-
     /* Don't fire events just when a modifier is changed.  Modifiers are
        sent along with other keys. */
     if (event.keyCode >= 16 && event.keyCode <= 20) {