Add support for caching commands Python side

Author: martinRenou

examples/introduction.ipynb

@@ -49,7 +49,9 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "c = ipycanvas.Canvas(stroke_style='red', size=(200, 200))\n",
+    "c = ipycanvas.Canvas(size=(200, 200))\n",
+    "\n",
+    "c.stroke_style = 'red'\n",
     "\n",
     "# Draw smiley face\n",
     "c.begin_path()\n",

examples/numpy_heatmap.ipynb

@@ -0,0 +1,113 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import numpy as np\n",
+    "from ipycanvas import Canvas"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# make these smaller to increase the resolution\n",
+    "dx, dy = 0.05, 0.05\n",
+    "\n",
+    "# generate 2 2d grids for the x & y bounds\n",
+    "y, x = np.mgrid[slice(1, 5 + dy, dy),\n",
+    "                slice(1, 5 + dx, dx)]\n",
+    "\n",
+    "z = np.sin(x)**10 + np.cos(10 + y*x) * np.cos(x)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def colormap(value, min, max):\n",
+    "    scaled_value = (value - min) / (max - min) \n",
+    "    color_value = 255 if value > max else scaled_value * 255\n",
+    "    return 'rgb({0}, {0}, 0)'.format(int(color_value))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "n_pixels = 10\n",
+    "\n",
+    "canvas = Canvas(size=(z.shape[0] * n_pixels, z.shape[1] * n_pixels))"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "min = np.min(z)\n",
+    "max = np.max(z)\n",
+    "\n",
+    "canvas.caching = True\n",
+    "r = 0\n",
+    "for row in z:\n",
+    "    c = 0\n",
+    "    for value in row:\n",
+    "        canvas.fill_style = colormap(value, min, max)\n",
+    "        canvas.fill_rect(r * n_pixels, c * n_pixels, n_pixels, n_pixels)\n",
+    "        \n",
+    "        c += 1\n",
+    "    r += 1"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "canvas"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "canvas.flush()"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.7.3"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 4
+}

ipycanvas/canvas.py

@@ -6,11 +6,17 @@
 
 from ipywidgets import Color, DOMWidget
 
-from traitlets import Float, Tuple, Unicode
+from traitlets import Float, Tuple, Unicode, observe
 
 from ._frontend import module_name, module_version
 
 
+def to_camel_case(snake_str):
+    """Turn a snake_case string into a camelCase one."""
+    components = snake_str.split('_')
+    return components[0] + ''.join(x.title() for x in components[1:])
+
+
 class Canvas(DOMWidget):
     _model_name = Unicode('CanvasModel').tag(sync=True)
     _model_module = Unicode(module_name).tag(sync=True)
@@ -21,11 +27,14 @@ class Canvas(DOMWidget):
 
     size = Tuple((700, 500), help='Size of the Canvas, this is not equal to the size of the view').tag(sync=True)
 
-    fill_style = Color('black').tag(sync=True)
-    stroke_style = Color('black').tag(sync=True)
-    global_alpha = Float(1.0).tag(sync=True)
+    fill_style = Color('black')
+    stroke_style = Color('black')
+    global_alpha = Float(1.0)
 
     def __init__(self, *args, **kwargs):
+        self.caching = kwargs.get('caching', False)
+        self.commands_cache = []
+
         super(Canvas, self).__init__(*args, **kwargs)
         self.layout.width = str(self.size[0]) + 'px'
         self.layout.height = str(self.size[1]) + 'px'
@@ -78,5 +87,29 @@ def quadratic_curve_to(self, cp1x, cp1y, x, y):
     def bezier_curve_to(self, cp1x, cp1y, cp2x, cp2y, x, y):
         self._send_canvas_command('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y)
 
+    def flush(self):
+        if not self.caching:
+            return
+
+        self.send(self.commands_cache)
+
+        self.caching = False
+        self.commands_cache = []
+
+    @observe('fill_style', 'stroke_style', 'global_alpha')
+    def _on_set_attr(self, change):
+        command = {
+            'name': 'set',
+            'attr': to_camel_case(change.name),
+            'value': change.new
+        }
+        self._send_command(command)
+
     def _send_canvas_command(self, name, *args):
-        self.send({'name': name, 'args': args})
+        self._send_command({'name': name, 'args': args})
+
+    def _send_command(self, command):
+        if self.caching:
+            self.commands_cache.append(command)
+        else:
+            self.send(command)

package-lock.json

@@ -21,38 +21,19 @@ class CanvasModel extends DOMWidgetModel {
       _view_module: CanvasModel.view_module,
       _view_module_version: CanvasModel.view_module_version,
       size: [],
-      fill_style: 'black',
-      stroke_style: 'black'
     };
   }
 
   static serializers: ISerializers = {
     ...DOMWidgetModel.serializers,
-    // Add any extra serializers here
   }
 
   initialize(attributes: any, options: any) {
     super.initialize(attributes, options);
 
     this.commandsCache = [];
 
-    this.cacheSetCommand('fill_style', 'fillStyle');
-    this.cacheSetCommand('stroke_style', 'strokeStyle');
-    this.cacheSetCommand('global_alpha', 'globalAlpha');
-
     this.on('msg:custom', (command) => { this.commandsCache.push(command); });
-
-    this.on('change:fill_style', () => { this.cacheSetCommand('fill_style', 'fillStyle'); });
-    this.on('change:stroke_style', () => { this.cacheSetCommand('stroke_style', 'strokeStyle'); });
-    this.on('change:global_alpha', () => { this.cacheSetCommand('global_alpha', 'globalAlpha'); });
-  }
-
-  cacheSetCommand(python_name: string, ts_name: string) {
-    this.commandsCache.push({
-      name: 'set',
-      attr: ts_name,
-      value: this.get(python_name)
-    });
   }
 
   static model_name = 'CanvasModel';
@@ -62,7 +43,7 @@ class CanvasModel extends DOMWidgetModel {
   static view_module = MODULE_NAME;
   static view_module_version = MODULE_VERSION;
 
-  commandsCache: any;
+  commandsCache: Array<any>;
 }
 
 
@@ -89,25 +70,28 @@ class CanvasView extends DOMWidgetView {
 
   firstDraw() {
     // Replay all the commands that were received until this view was created
-    for (const command of (this.model as CanvasModel).commandsCache) {
-      if (command.name == 'set') {
-        this.ctx[command.attr] = command.value;
-      } else {
-        this.ctx[command.name](...command.args);
-      }
+    for (const command of this.model.commandsCache) {
+      this._processCommand(command);
     }
   }
 
   modelEvents() {
-    this.model.on('msg:custom', (command) => {
-      this.ctx[command.name](...command.args);
-    });
+    this.model.on('msg:custom', this._processCommand.bind(this));
+  }
 
-    this.model.on('change:size', () => { this.resize_canvas(); });
+  private _processCommand (command: any) {
+    if (command instanceof Array) {
+      for (const subcommand of command) {
+        this._processCommand(subcommand);
+      }
+      return;
+    }
 
-    this.model.on('change:fill_style', () => { this.ctx.fillStyle = this.model.get('fill_style'); });
-    this.model.on('change:stroke_style', () => { this.ctx.strokeStyle = this.model.get('stroke_style'); });
-    this.model.on('change:global_alpha', () => { this.ctx.globalAlpha = this.model.get('global_alpha'); });
+    if (command.name == 'set') {
+      this.ctx[command.attr] = command.value;
+    } else {
+      this.ctx[command.name](...command.args);
+    }
   }
 
   resize_canvas() {
@@ -119,4 +103,5 @@ class CanvasView extends DOMWidgetView {
 
   canvas: any;
   ctx: any;
+  model: CanvasModel;
 }

src/widget.ts

@@ -12,6 +12,8 @@
     "rootDir": "src",
     "skipLibCheck": true,
     "sourceMap": true,
+    // This allows us to initialize members in the "initialize" method
+    "strictPropertyInitialization": false,
     "strict": true,
     "target": "es2015"
   },