Great - we have 2-way comms working properly now

abp/visiblegraphstate.py

@@ -14,38 +14,20 @@ class VisibleGraphState(GraphState):
     def __init__(self, *args, **kwargs):
         GraphState.__init__(self, *args, **kwargs)
         self.ws = create_connection("ws://localhost:5001")
-        self.diff = []
         atexit.register(self.shutdown)
-        self.ws.send(json.dumps({"method":"clear"}))
+        #self.ws.send(json.dumps({"method":"clear"}))
 
     def shutdown(self):
-        if len(self.diff)>0:
-            self.update()
+        self.update()
         self.ws.close()
 
-    def send(self, method, *args, **kwargs):
-        kwargs.update({"method": method})
-        self.diff.append(kwargs)
-
-    def add_node(self, node, meta = {}):
-        GraphState.add_node(self, node, meta)
-        self.send("add_node", node=node, meta=meta)
-
-    def add_edge(self, start, end):
-        GraphState.add_edge(self, start, end)
-        self.send("add_edge", start=start, end=end)
-
-    def del_edge(self, start, end):
-        GraphState.del_edge(self, start, end)
-        self.send("del_edge", start=start, end=end)
-
-    def act_local_rotation(self, node, operation):
-        GraphState.act_local_rotation(self, node, operation)
-        self.send("update_vop", node = node, vop = self.vops[node])
+    def to_json(self):
+        ngbh = {a: {b : True for b in self.ngbh[a]} 
+                for a in self.ngbh}
+        return {"vops": self.vops, "ngbh": ngbh, "meta": self.meta}
 
     def update(self):
-        #data = json.dumps({"diff": self.diff, "state":self.to_json()})
-        data = json.dumps({"diff": self.diff})
+        data = json.dumps(self.to_json())
         self.ws.send(data)
-        self.diff = []
+
 

profiling/profile_viz.py

@@ -1,10 +1,12 @@
 from abp import VisibleGraphState
+import numpy as np
 
 s = VisibleGraphState()
-for i in range(1000):
-    s.add_node(i)
+for i in range(200):
+    x = 10*np.cos(np.pi*2*i/60)
+    y = 10*np.sin(np.pi*2*i/60)
+    s.add_node(i, {"position": (x, y, i/50.)})
     s.act_local_rotation(i, "hadamard")
-s.update()
-for i in range(1000-1):
+for i in range(200-1):
     s.act_cz(i, i+1)
 s.update()

server/anders_briegel.js

@@ -99,6 +99,19 @@ function act_cz(a, b){
     }
 }
 
+function edgelist() {
+    var seen = {};
+    var output = [];
+    for (var i in ngbh) {
+        for (var j in ngbh[i]) {
+            if (!Object.prototype.hasOwnProperty.call(seen, j)){
+                output.push([i, j]);
+            }
+        }
+        seen[i] = true;
+    }
+    return output;
+}
 
 function log_graph_state() {
     console.log(JSON.stringify(vops));

server/api.js

@@ -9,8 +9,11 @@ function connect_to_server() {
      
     ws.onmessage = function (evt) 
     { 
-       var received_msg = evt.data;
-       console.log("Message received: " + evt.data);
+       var new_state = JSON.parse(evt.data);
+       vops = new_state.vops;
+       ngbh = new_state.ngbh;
+       meta = new_state.meta;
+       updateScene();
     };
      
     ws.onclose = function()

server/curve.js

@@ -7,8 +7,10 @@ var curveProperties = {
 // Add a curved edge between two points
 function makeEdge(start, end) {
     // Make the geometry of the curve
-    var a = new THREE.Vector3(start.x, start.y, start.z);
-    var b = new THREE.Vector3(end.x, end.y, end.z);
+    //var a = new THREE.Vector3(start.x, start.y, start.z);
+    //var b = new THREE.Vector3(end.x, end.y, end.z);
+    var a = start;
+    var b = end;
     var length = new THREE.Vector3().subVectors(a, b).length();
     var bend = new THREE.Vector3(length / curveProperties.curvature, length / curveProperties.curvature, 0);
     var mid = new THREE.Vector3().add(a).add(b).multiplyScalar(0.5).add(bend);

server/graph.js

@@ -1,26 +1,28 @@
-function updateScene(state) {
+var colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];
+
+function updateScene() {
     var oldState = scene.getObjectByName("graphstate");
     scene.remove(oldState);
     oldState = null;
    
     var geometry = new THREE.Geometry();
-    //nodeGeometry.labels = [];
-    //nodeGeometry.colors = [];
-    for (var i in state.nodes) {
-        var node = state.nodes[i];
-        var pos = state.meta[i].pos;
-        var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
+    for (var i in vops) {
+        var vop = vops[i];
+        var pos = meta[i].position;
+        var vertex = new THREE.Vector3(pos[0], pos[1], pos[2]);
         geometry.vertices.push(vertex);
-        //geometry.colors[i] = new THREE.Color(n.color);
-        //geometry.labels[i] = n.label;
+        geometry.colors[i] = new THREE.Color(colors[vops[i] % colors.length]);
     }
 
     var edges = new THREE.Object3D();
-    for (i=0; i < state.edges.length; ++i) {
-        var edge = state.edges[i];
-        var start = state.meta[edge[0]].pos;
-        var end = state.meta[edge[1]].pos;
-        var newEdge = makeEdge(start, end);
+    var my_edges = edgelist();
+    for (i=0; i < my_edges.length; ++i) {
+        var edge = my_edges[i];
+        var start = meta[edge[0]].position;
+        var startpos = new THREE.Vector3(start[0], start[1], start[2]);
+        var end = meta[edge[1]].position;
+        var endpos = new THREE.Vector3(end[0], end[1], end[2]);
+        var newEdge = makeEdge(startpos, endpos);
         edges.add(newEdge);
     }
 

server/main.js

@@ -1,12 +1,7 @@
-// IE9
-if (typeof console === "undefined") {
-    var console = {
-        log: function(logMsg) {}
-    };
-}
-
 var controls, renderer, raycaster, scene, selection, camera;
 
+var mouseprevpos = {};
+
 // Run on startup
 window.onload = init;
 
@@ -14,8 +9,6 @@ window.onload = init;
 function makeScene() {
     var myScene = new THREE.Scene();
     var grid = new THREE.GridHelper(20, 2);
-    graph = new graph_model();
-    myScene.add(graph.object);
     grid.rotation.x = Math.PI/2;
     grid.setColors(0xdddddd, 0xeeeeee);
     myScene.add(grid);
@@ -38,29 +31,51 @@ function onWindowResize(evt){
     render();
 }
 
+function bind_events() {
+    window.addEventListener("resize", onWindowResize, false);
+    renderer.domElement.addEventListener("mousedown", function (event) {
+        var mouse = new THREE.Vector2(); // create once and reuse
+        mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+        mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
+        mouseprevpos.x = mouse.x;
+        mouseprevpos.y = mouse.y;
+    });
+
+    renderer.domElement.addEventListener("mouseup", function (event) {
+        var mouse = new THREE.Vector2(); // create once and reuse
+        mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
+        mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
+        if (mouse.x != mouseprevpos.x || mouse.y != mouseprevpos.y ){return;}
+
+        var raycaster = new THREE.Raycaster(); // create once and reuse
+        raycaster.setFromCamera( mouse, camera );
+        var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
+        var intersection = raycaster.ray.intersectPlane(plane);
+        console.log(intersection);
+
+        intersection.x = Math.round(intersection.x);
+        intersection.y = Math.round(intersection.y);
+        add_node(Object.keys(vops).length, intersection);
+        updateScene();
+    });
+    controls.addEventListener("change", render);
+
+}
+
 
 // Called on startup
 function init() {
-    // Measure things, get references
-    var width = window.innerWidth;
-    var height = window.innerHeight;
-
     // Renderer
     renderer = new THREE.WebGLRenderer({"antialias":true});
-    renderer.setSize(width, height);
+    renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setClearColor(0xffffff, 1);
     document.querySelector("body").appendChild(renderer.domElement);
-    window.addEventListener("resize", onWindowResize, false);
-
-    renderer.domElement.addEventListener("click", function (evt) {
-        add_node(0);
-    });
 
     // Time to load the materials
     loadMaterials();
 
     // Camera, controls, raycaster
-    camera = new THREE.PerspectiveCamera(45, width / height, 0.3, 100);
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 100);
     controls = new THREE.OrbitControls(camera);
 
     // Center the camera
@@ -70,8 +85,8 @@ function init() {
     camera.position.set(0, 0, 40);
 
     // Run
+    bind_events();
     scene = makeScene();
-    controls.addEventListener("change", render);
     connect_to_server();
     render();
 }

server/materials.js

@@ -14,11 +14,11 @@ function loadMaterials(argument) {
     materials.edge = new THREE.LineBasicMaterial(lineStyle);
 
     var pointStyle = {
-        color: 0xcccccc,
         size: 0.1,
         map: textures.sprite,
         alphaTest: 0.5,
         transparent: true,
+        vertexColors:THREE.VertexColors
     };
     materials.point = new THREE.PointsMaterial(pointStyle);
 
@@ -27,7 +27,7 @@ function loadMaterials(argument) {
         map: textures.sprite,
         alphaTest: 0.5,
         transparent: true,
-        color: "red"
+        vertexColors:THREE.VertexColors
     };
 
     materials.qubit = new THREE.PointsMaterial(qubitStyle);

server/poll.js

@@ -7,8 +7,10 @@ function poll() {
      
     ws.onmessage = function (evt) 
     { 
-       var received_msg = evt.data;
-       console.log("Message received: " + evt.data);
+       var new_state = JSON.parse(evt.data);
+       vops = new_state.vops;
+       ngbh = new_state.ngbh;
+       updateScene();
     };
      
     ws.onclose = function()
@@ -17,5 +19,3 @@ function poll() {
     };
 }
 
-window.onload = poll;
-