add lattice plane (#54)

Draw a plane that is defined by the miller indices and distance from the origin or by selecting the atoms.

README.md

@@ -178,6 +178,20 @@ viewer
 
 <img src="docs/source/_static/images/example-phonon.gif"  width="300px"/>
 
+### Lattice plane
+Draw a plane that is defined by the miller indices and distance from the origin or by selecting the atoms.
+
+```python
+viewer.avr.lp.add_plane_from_indices(name = "111",
+                                     indices = [1, 1, 1],
+                                     distance = 4,
+                                     scale = 1.0,
+                                     color = [0, 1, 1, 0.5])
+viewer.avr.lp.build_plane()
+```
+
+<img src="docs/source/_static/images/lattice_plane.png"  width="300px"/>
+
 
 
 ## Test

docs/source/development/index.rst

@@ -0,0 +1,10 @@
+
+===========================================
+Developer documentation
+===========================================
+
+.. toctree::
+   :maxdepth: 1
+   :caption: Contents:
+
+   plugin

docs/source/development/plugin.rst

@@ -0,0 +1,5 @@
+Plugin
+============
+
+
+In this section, we will show you how to Develop a custom plugin.

docs/source/gallery.rst

@@ -48,6 +48,11 @@ Color by attribute is a powerful tool to visualize the data. Here we show how to
    :width: 10cm
 
 
+Lattice plane
+=================
+
+.. figure:: _static/images/lattice_plane.png
+   :align: center
 
 
 Animation

docs/source/index.rst

@@ -29,13 +29,16 @@ A widget to visualize and interact with atomic structures in Jupyter Notebook. I
    measurement
    isosurface
    vector_field
+   lattice_plane
    mesh_primitive
    search_operator
    selection
    camera
+   development/index
    gallery
 
 
+
 Indices and tables
 ==================
 

docs/source/lattice_plane.rst

@@ -0,0 +1,49 @@
+Lattice plane
+=================
+
+The lattice plane is a plane that intersects the lattice. It is useful to visualize the lattice plane in the crystal structure.
+
+Plane form miller indices
+--------------------------
+The lattice plane can be defined by the miller indices and distance from the origin or by selecting the atoms.
+
+Here is an example of how to visualize lattice planes (111):
+
+.. code-block:: python
+
+    from ase.build import bulk
+    from weas_widget import WeasWidget
+    import numpy as np
+    atoms = bulk("Au", cubic=True)
+    viewer = WeasWidget()
+    viewer.from_ase(atoms)
+    viewer.avr.model_style = 1
+    viewer.camera.setting = {"direction": [0, -0.2, 1], "zoom": 0.8}
+    viewer
+
+In another cell:
+
+.. code-block:: python
+
+    # color is defined by RGBA, where R is red, G is green, B is blue, and A is the transparency
+    viewer.avr.lp.add_plane_from_indices(name = "111",
+                                         indices = [1, 1, 1],
+                                         distance = 4,
+                                         scale = 1.0,
+                                         color = [0, 1, 1, 0.5])
+    viewer.avr.lp.build_plane()
+
+.. figure:: _static/images/lattice_plane.png
+   :align: center
+
+
+Plane from selected atoms
+--------------------------
+One can also draw a plane from the selected atoms. Here is an example:
+
+
+.. code-block:: python
+
+    viewer.avr.lp.add_plane_from_selected_atoms(name = "plane1",
+                                                color = [1, 0, 0, 0.5])
+    viewer.avr.lp.build_plane()

js/widget.js

@@ -167,12 +167,20 @@ function render({ model, el }) {
         editor.avr.VFManager.fromSettings(data);
         editor.avr.VFManager.drawVectorFields();
     });
-    // mesh primitives
+    // instanced mesh primitives
     model.on("change:instancedMeshPrimitive", () => {
         const data = model.get("instancedMeshPrimitive");
         console.log("instancedMeshPrimitive: ", data);
         editor.instancedMeshPrimitive.fromSettings(data);
-        editor.avr.meshPrimitive.drawMesh();
+        editor.instancedMeshPrimitive.drawMesh();
+    });
+
+    // any mesh
+    model.on("change:anyMesh", () => {
+        const data = model.get("anyMesh");
+        console.log("anyMesh: ", data);
+        editor.anyMesh.fromSettings(data);
+        editor.anyMesh.drawMesh();
     });
 
     // camera settings

package.json

@@ -7,7 +7,7 @@
 	"dependencies": {
 		"dat.gui": "^0.7.9",
 		"three": "^0.161.0",
-		"weas": "^0.1.3"
+		"weas": "^0.1.6"
 	},
 	"devDependencies": {
 		"esbuild": "^0.20.0"

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "weas_widget"
-version = "0.1.1"
+version = "0.1.2"
 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/atoms_viewer.py

@@ -1,6 +1,7 @@
 from .base_class import WidgetWrapper
 from .plugins.vector_field import VectorField
 from .plugins.isosurface import Isosurface
+from .plugins.lattice_plane import LatticePlane
 
 
 class AtomsViewer(WidgetWrapper):
@@ -31,6 +32,7 @@ def __init__(self, _widget):
         # Initialize plugins
         object.__setattr__(self, "vf", VectorField(_widget))
         object.__setattr__(self, "iso", Isosurface(_widget))
+        object.__setattr__(self, "lp", LatticePlane(_widget))
 
     @property
     def atoms(self):

src/weas_widget/base_widget.py

@@ -38,8 +38,10 @@ class BaseWidget(anywidget.AnyWidget):
     vectorField = tl.List().tag(sync=True)
     showVectorField = tl.Bool(True).tag(sync=True)
     guiConfig = tl.Dict({}).tag(sync=True)
-    # mesh primitives
+    # instanced mesh primitives
     instancedMeshPrimitive = tl.List(tl.Dict({})).tag(sync=True)
+    # any mesh
+    anyMesh = tl.List(tl.Dict({})).tag(sync=True)
     # viewer
     viewerStyle = tl.Dict({}).tag(sync=True)
     # camera