Merge pull request #10 from johnwason/pr/ViewerJavascriptControl

johnwason · web-flow · commit 112ee04c70a6 · 2021-03-01T21:40:27.000-05:00
Add ability to control tesseract_viewer_python from javascript
diff --git a/tesseract_viewer_python/.gitignore b/tesseract_viewer_python/.gitignore
@@ -126,4 +126,7 @@ venv.bak/
 dmypy.json
 
 # Pyre type checker
-.pyre/
+.pyre/
+
+node_modules
+package-lock.json
diff --git a/tesseract_viewer_python/examples/javascript/tesseract_viewer_python_iframe.html b/tesseract_viewer_python/examples/javascript/tesseract_viewer_python_iframe.html
@@ -0,0 +1,52 @@
+<html>
+    <head>
+        <script
+  src="https://code.jquery.com/jquery-3.5.1.js"  
+  crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <iframe src="http://localhost:8000/index.html?noupdate=true" width="100%" height="100%" id="viewer"></iframe>
+
+            <script>
+
+                function sleep(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
+                }
+
+                async function example_loop()
+                {
+                    while(true)
+                    {
+                        viewer = document.getElementById("viewer")
+                        viewer.contentWindow.postMessage(
+                        {
+                            "command": "joint_positions",
+                            "joint_names": ["joint_1", "joint_2", "joint_3","joint_4","joint_5","joint_6"],
+                            "joint_positions": [0.6, 0.2, 0.3, 0.4, 0.5, 0.6]
+                        },
+                        "*")
+                        await sleep(1000);
+                        viewer.contentWindow.postMessage(
+                        {
+                            "command": "joint_positions",
+                            "joint_names": ["joint_1", "joint_2", "joint_3","joint_4","joint_5","joint_6"],
+                            "joint_positions": [-0.6, -0.2, -0.3, -0.4, -0.5, -0.6]
+                        },
+                        "*");
+                        await sleep(1000);
+
+                    }
+                }
+                
+                $("#viewer").ready(function(){
+                    console.log("Viewer loaded")
+                }
+                ).delay(5000).queue(function()
+                {
+                    example_loop();
+                })
+                
+            </script>
+    </body>
+
+</html>
diff --git a/tesseract_viewer_python/examples/javascript/tesseract_viewer_python_iframe_trajectory.html b/tesseract_viewer_python/examples/javascript/tesseract_viewer_python_iframe_trajectory.html
@@ -0,0 +1,41 @@
+<html>
+    <head>
+        <script
+  src="https://code.jquery.com/jquery-3.5.1.js" crossorigin="anonymous"></script>
+    </head>
+    <body>
+        <iframe src="http://localhost:8000/index.html?noupdate=true" width="100%" height="100%" id="viewer"></iframe>
+
+            <script>
+
+                
+                function example_set_trajectory()
+                {
+                    
+                        viewer = document.getElementById("viewer")
+                        trajectory = [ 
+                            [0.6, 0.2, 0.3, 0.4, 0.5, 0.6, 0], // Joint positions, with time as last element
+                            [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 5],
+                            [-0.7, 0.4, -0.9, -0.1, 0.1, 0.2, 10],
+                        ]; // Array of waypoints for trajectory
+                        viewer.contentWindow.postMessage(
+                        {
+                            "command": "joint_trajectory",
+                            "joint_names": ["joint_1", "joint_2", "joint_3","joint_4","joint_5","joint_6"],
+                            "joint_trajectory": trajectory
+                        },
+                        "*")                    
+                }
+                
+                $("#viewer").ready(function(){
+                    console.log("Viewer loaded")
+                }
+                ).delay(5000).queue(function()
+                {
+                    example_set_trajectory();
+                })
+                
+            </script>
+    </body>
+
+</html>
diff --git a/tesseract_viewer_python/tesseract_viewer/resources/static/tesseract_viewer.js b/tesseract_viewer_python/tesseract_viewer/resources/static/tesseract_viewer.js
@@ -27,6 +27,7 @@ class TesseractViewer {
     constructor(canvasElement) {
         this._scene_etag = null;
         this._trajectory_etag = null;
+        this._disable_update_trajectory = false;
         // Create canvas and engine.
         this._canvas = document.getElementById(canvasElement);
         this._engine = new BABYLON.Engine(this._canvas, true);
@@ -67,7 +68,17 @@ class TesseractViewer {
             });
             yield this.enableVR();
             let _this = this;
-            setTimeout(() => _this.updateTrajectory(), 2000);
+            const queryString = window.location.search;
+            const urlParams = new URLSearchParams(queryString);
+            let do_update = true;
+            if (urlParams.has("noupdate")) {
+                if (urlParams.get("noupdate") === "true") {
+                    do_update = false;
+                }
+            }
+            if (do_update) {
+                setTimeout(() => _this.updateTrajectory(), 2000);
+            }
             //this._scene.debugLayer.show();
         });
     }
@@ -157,6 +168,9 @@ class TesseractViewer {
     }
     updateTrajectory() {
         return __awaiter(this, void 0, void 0, function* () {
+            if (this._disable_update_trajectory) {
+                return;
+            }
             let fetch_res;
             let _this = this;
             try {
@@ -199,6 +213,36 @@ class TesseractViewer {
             }
         });
     }
+    disableUpdateTrajectory() {
+        this._disable_update_trajectory = true;
+    }
+    enableUpdateTrajectory() {
+        this._disable_update_trajectory = false;
+    }
+    setJointPositions(joint_names, joint_positions) {
+        let trajectory = [[...joint_positions, 0], [...joint_positions, 100000]];
+        this.setTrajectory(joint_names, trajectory);
+    }
+    /*
+    trajectory format:
+    [
+        [0.1,0.2,0.3,0.4,0.5,0.6, 0] // waypoint 1, last element is time
+        [0.11,0.21,0.31,0.41,0.51,0.61, 1] // waypoint 2, last element is time
+        ... // more waypoints
+    ]
+    Position is in radians or meters, time is in seconds
+    */
+    setTrajectory(joint_names, trajectory) {
+        try {
+            if (this._joint_trajectory !== null) {
+                this._joint_trajectory.stop();
+                this._joint_trajectory = null;
+            }
+        }
+        catch (_a) { }
+        this._joint_trajectory = new JointTrajectoryAnimation(this._scene, joint_names, trajectory, true, 0);
+        this._joint_trajectory.start();
+    }
 }
 class JointTrajectoryAnimation {
     constructor(scene, joint_names, trajectory, use_time, loop_time) {
@@ -343,8 +387,20 @@ window.addEventListener('DOMContentLoaded', function () {
     return __awaiter(this, void 0, void 0, function* () {
         // Create the game using the 'renderCanvas'.
         let viewer = new TesseractViewer('renderCanvas');
+        window.tesseract_viewer = viewer;
         // Create the scene.
         yield viewer.createScene();
+        window.addEventListener("message", function (event) {
+            let data = event.data;
+            if (data.command === "joint_positions") {
+                viewer.disableUpdateTrajectory();
+                viewer.setJointPositions(data.joint_names, data.joint_positions);
+            }
+            if (data.command === "joint_trajectory") {
+                viewer.disableUpdateTrajectory();
+                viewer.setTrajectory(data.joint_names, data.joint_trajectory);
+            }
+        });
         // Start render loop.
         viewer.doRender();
     });
diff --git a/tesseract_viewer_python/tesseract_viewer/resources/static/tesseract_viewer.ts b/tesseract_viewer_python/tesseract_viewer/resources/static/tesseract_viewer.ts
@@ -34,6 +34,7 @@ class TesseractViewer {
     private _joint_trajectory: JointTrajectoryAnimation;
     private _scene_etag = null;
     private _trajectory_etag= null;
+    private _disable_update_trajectory = false;
 
     constructor(canvasElement : string) {
         // Create canvas and engine.
@@ -89,7 +90,22 @@ class TesseractViewer {
         
         await this.enableVR();
         let _this = this;
-        setTimeout(() => _this.updateTrajectory(),2000);
+
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        let do_update = true;
+        if (urlParams.has("noupdate"))
+        {
+            if (urlParams.get("noupdate") === "true")
+            {
+                do_update = false;
+            }
+        }
+
+        if (do_update)
+        {
+            setTimeout(() => _this.updateTrajectory(),2000);
+        }
         
         //this._scene.debugLayer.show();
 
@@ -195,6 +211,10 @@ class TesseractViewer {
 
     async updateTrajectory(): Promise<void>
     {
+        if (this._disable_update_trajectory)
+        {
+            return;
+        }
         let fetch_res: Response;
         let _this = this;
         try
@@ -250,6 +270,46 @@ class TesseractViewer {
         }
     }
 
+    public disableUpdateTrajectory() : void
+    {
+        this._disable_update_trajectory = true;
+    }
+
+    public enableUpdateTrajectory() : void
+    {
+        this._disable_update_trajectory = false;
+    }
+
+    public setJointPositions(joint_names : string[], joint_positions: number[])
+    {
+        let trajectory = [[...joint_positions,0],[...joint_positions,100000]];
+        this.setTrajectory(joint_names, trajectory);
+    }
+
+    /*
+    trajectory format:
+    [
+        [0.1,0.2,0.3,0.4,0.5,0.6, 0] // waypoint 1, last element is time
+        [0.11,0.21,0.31,0.41,0.51,0.61, 1] // waypoint 2, last element is time
+        ... // more waypoints
+    ]
+    Position is in radians or meters, time is in seconds
+    */
+    public setTrajectory(joint_names: string[], trajectory: number[][])
+    {
+        try
+        {
+            if (this._joint_trajectory !== null)
+            {
+                this._joint_trajectory.stop();
+                this._joint_trajectory = null;
+            }
+        }
+        catch {}
+        this._joint_trajectory = new JointTrajectoryAnimation(this._scene, joint_names, trajectory, true, 0);
+        this._joint_trajectory.start();
+    }
+
 }
 
 class JointTrajectoryAnimation
@@ -466,9 +526,26 @@ class JointTrajectoryAnimation
 window.addEventListener('DOMContentLoaded', async function() {
     // Create the game using the 'renderCanvas'.
     let viewer = new TesseractViewer('renderCanvas');
+
+    (window as any).tesseract_viewer = viewer;
   
     // Create the scene.
     await viewer.createScene();
+
+    window.addEventListener("message", function(event: Event)    
+        {
+            let data = (event as MessageEvent).data;
+            if (data.command === "joint_positions")
+            {
+                viewer.disableUpdateTrajectory();
+                viewer.setJointPositions(data.joint_names, data.joint_positions)
+            }
+            if (data.command === "joint_trajectory")
+            {
+                viewer.disableUpdateTrajectory();
+                viewer.setTrajectory(data.joint_names, data.joint_trajectory)
+            }
+        });
   
     // Start render loop.
     viewer.doRender();
diff --git a/tesseract_viewer_python/tesseract_viewer/tesseract_viewer.py b/tesseract_viewer_python/tesseract_viewer/tesseract_viewer.py
@@ -53,7 +53,7 @@ def __init__(self, request, client_address, server ):
             super(_TesseractViewerRequestHandler,self).__init__(request,client_address,server)
 
     def do_file(self, send_data):
-        path = self.path
+        path = self.path.split("?")[0]
         if (self.path == "/"):
             path = "/index.html"
         path=path[1:]
