add cameraSetting (#34)

viewer.cameraSetting = {"direction": [0, 2, 1], "zoom": 0.8}

docs/requirements.txt

@@ -1,4 +1,4 @@
-sphinx_rtd_theme==1.2.2
-nbsphinx==0.9.2
+sphinx_rtd_theme==2.0.0
+nbsphinx==0.9.3
 ipython
 ase

docs/source/camera.rst

@@ -0,0 +1,18 @@
+===================
+Camera
+===================
+
+Setting
+=============
+
+One can set the direction and zoom of the camera:
+
+.. code-block:: python
+
+    viewer.cameraSetting = {"direction": [0, 5, 1], "zoom": 2}
+
+
+Camera Type
+=============
+
+For the moment, only orthographic camera is supported.

docs/source/color.rst

@@ -21,7 +21,7 @@ Supported style are:
 
 
 Color by attribute
-----------------
+----------------------
 Coloring based on the attribute of the atoms. The attribute can be: charge, magmom, or any other attribute in the structure.
 
 Here we show how to color the atoms by their forces.

docs/source/index.rst

@@ -32,6 +32,7 @@ A widget to visualize and interact with atomistic structures in Jupyter Notebook
    mesh_primitive
    search_operator
    selection
+   camera
    gallery
 
 

docs/source/quick_start.ipynb

@@ -410,12 +410,36 @@
     "<img src=_static/images/example_color_by_force.png width=300px />\n"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "69f8b8f3",
+   "metadata": {},
+   "source": [
+    "### Camera setting\n",
+    "\n",
+    "One can set the direction and zoom of the camera:\n",
+    "\n",
+    "```python\n",
+    "viewer.cameraSetting = {\"direction\": [0, 5, 1], \"zoom\": 2}\n",
+    "```\n"
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "ede9f9c6",
    "metadata": {},
    "source": [
-    "### Download image"
+    "### Export image\n",
+    "\n",
+    "Save image to a path by:\n",
+    "\n",
+    "```python\n",
+    "viewer.save_image(\"/homg/xing/filename.png\")\n",
+    "```\n",
+    "\n",
+    "\n",
+    "\n",
+    "Trigger the download panel by:"
    ]
   },
   {

js/widget.js

@@ -2,7 +2,7 @@
 // clone the weas repo and import the weas module
 // import * as weas from "../../weas/src/index.js";
 // if not, then use the release version from unpkg
-import * as weas from "https://unpkg.com/[email protected]a/dist/weas.mjs";
+import * as weas from "https://unpkg.com/[email protected]b/dist/weas.mjs";
 import "./widget.css";
 
 
@@ -60,7 +60,9 @@ function render({ model, el }) {
         avr.showVectorField = model.get("showVectorField")
         // mesh primitives
         avr.meshPrimitive.fromSettings(model.get("meshPrimitives"));
-
+        // camera settings
+        const cameraSetting = model.get("cameraSetting");
+        avr.tjs.updateCameraAndControls(cameraSetting);
         avr.drawModels();
         avr.render();
         return avr;
@@ -86,9 +88,6 @@ function render({ model, el }) {
                 case "downloadImage":
                     avr.tjs.downloadImage(task.kwargs.filename);
                     break;
-                case "setCameraPosition":
-                    avr.tjs.updateCameraAndControls(avr.atoms.getCenterOfGeometry(), task.kwargs.position);
-                    break;
             }
         }
         run_task(task);

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "weas_widget"
-version = "0.0.13"
+version = "0.0.14"
 description = "A widget to visualize and interact with atomistic structures in Jupyter Notebook."
 authors = [{name = "Xing Wang", email = "[email protected]"}]
 readme = "README.md"

src/weas_widget/__init__.py

@@ -45,6 +45,8 @@ class WeasWidget(anywidget.AnyWidget):
     meshPrimitives = tl.List(tl.Dict({})).tag(sync=True)
     # viewer
     viewerStyle = tl.Dict({}).tag(sync=True)
+    # camera
+    cameraSetting = tl.Dict({}).tag(sync=True)
     # task
     js_task = tl.Dict({}).tag(sync=True)
     debug = tl.Bool(False).tag(sync=True)
@@ -147,16 +149,12 @@ def download_image(self, filename="weas-model.png"):
             }
         )
 
-    def save_image(
-        self, filename="weas-model.png", resolutionScale=5, camera_position=None
-    ):
+    def save_image(self, filename="weas-model.png", resolutionScale=5):
         import base64
 
         def _save_image():
             while not self.ready:
                 time.sleep(0.1)
-            if camera_position is not None:
-                self.camera_position = camera_position
             self.export_image(resolutionScale)
             # polling mechanism to check if the image data is available
             while not self.imageData:
@@ -169,11 +167,3 @@ def _save_image():
 
         thread = threading.Thread(target=_save_image, args=(), daemon=False)
         thread.start()
-
-    @property
-    def camera_position(self):
-        return self._camera_position
-
-    @camera_position.setter
-    def camera_position(self, value):
-        self.send_js_task({"name": "setCameraPosition", "kwargs": {"position": value}})

tests/notebooks/playwright.config.js

@@ -2,7 +2,7 @@ const baseConfig = require('@jupyterlab/galata/lib/playwright-config');
 
 module.exports = {
   ...baseConfig,
-  timeout: 120000,
+  timeout: 180000,
   webServer: {
     command: 'jlpm start',
     url: 'http://localhost:8888/lab',