Screenshot support

README.md

@@ -112,15 +112,28 @@ jupyter labextension install glvis-jupyter
 
 ## Development
 
-Development installation requires `npm`, after installing:
+Development installation requires `npm`.
+
+If you want to test a new version of `glvis`:
+
+1. Bump the version in _pyglvis/js/package.json_ and _glvis-js/package.json_
+2. `npm install path/to/glvis-js`
+
+
+Each time you update stuff in _pyglvis/js/src_:
+
+1. `npm install`
+2. `npx webpack`
+
+
+Once:
 
 ```
 git clone https://github.com/glvis/pyglvis.git
 cd pyglvis
 pip install -e .
 ```
 
-
 ### Developing in Jupyter Notebook
 
 ```

glvis/widget.py

@@ -15,6 +15,7 @@
 from traitlets import Unicode, Int, Bool
 from typing import Union, Tuple
 from ._version import extension_version
+import base64
 
 try:
     from mfem._ser.mesh import Mesh
@@ -65,12 +66,23 @@ def _sync(self, data: Stream, is_new: bool = True):
         self.data_type = stream[0:offset]
         self.data_str = stream[offset + 1:]
 
+    def _on_msg(self, _, content, buffers):
+        if content.get("type", "") == "screenshot":
+            data = content.get("b64", "")
+            name = content.get("name", "glvis.png")
+            if not data:
+                print(f"unable to save {name}, bad data")
+                return
+            with open(name, "wb") as f:
+                f.write(base64.decodebytes(data.encode('ascii')))
+
     def __init__(
         self, data: Stream, width: int = 640, height: int = 480, *args, **kwargs
     ):
         widgets.DOMWidget.__init__(self, *args, **kwargs)
         self.set_size(width, height)
         self._sync(data, is_new=True)
+        self.on_msg(self._on_msg)
 
     def plot(self, data: Stream):
         self._sync(data, is_new=True)
@@ -85,6 +97,9 @@ def set_size(self, width: int, height: int):
     def render(self):
         ipydisplay(self)
 
+    def screenshot(self, name, use_web=False):
+        self.send({"type": "screenshot", "name": name, "use_web": use_web})
+
     def serialize(self):
         """Return dict that can be used to construct a copy of this instance
 

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glvis-jupyter",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Jupyter Widget using glvis-js",
   "author": "",
   "license": "BSD-3-Clause",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@jupyter-widgets/base": "^4.0.0",
-    "glvis": "^0.1.1",
+    "glvis": "^0.2.1",
     "lodash": "^4.17.19"
   },
   "jupyterlab": {

js/src/index.js

@@ -36,19 +36,33 @@ var GLVisView = widgets.DOMWidgetView.extend({
     this.height = this.model.get("height");
 
     this.glv = new glvis.State(this.div, this.width, this.height);
-    this.model.on("change:data_str", this.visualize, this);
-    this.model.on("change:height", this.resize, this);
-    this.model.on("change:width", this.resize, this);
-    this.visualize();
+    this.model.on("change:data_str", this.plot, this);
+    this.model.on("change:height", this.set_size, this);
+    this.model.on("change:width", this.set_size, this);
+    this.model.on("msg:custom", this.handle_message, this);
+    this.plot();
   },
 
-  resize: function () {
+  handle_message: function (msg, buffers) {
+    if (msg.type === "screenshot") {
+      if (msg.use_web) {
+        this.glv.saveScreenshot(msg.name);
+      } else {
+        let that = this;
+        this.glv.getPNGAsB64().then((v) => {
+          that.send({ type: "screenshot", name: msg.name, b64: v });
+        });
+      }
+    }
+  },
+
+  set_size: function () {
     const width = this.model.get("width");
     const height = this.model.get("height");
     this.glv.setSize(width, height);
   },
 
-  visualize: function () {
+  plot: function () {
     const type = this.model.get("data_type");
     const data = this.model.get("data_str");