Now we can render to the browser

abp/graphstate.py

@@ -100,9 +100,10 @@ class GraphState(object):
 
     def to_json(self):
         """ Convert the graph to JSON form """
-        ngbh = {key: tuple(value) for key, value in self.ngbh.items()}
+        #ngbh = {key: tuple(value) for key, value in self.ngbh.items()}
         meta = {key: value for key, value in self.meta.items()}
-        return json.dumps({"vops": self.vops, "ngbh": ngbh, "meta": meta})
+        edge = self.edgelist()
+        return json.dumps({"vops": self.vops, "edge": edge, "meta": meta})
 
     def to_networkx(self):
         """ Convert the graph to a networkx graph """
@@ -118,7 +119,9 @@ class GraphState(object):
         """ Automatically lay out the graph """
         g = self.to_networkx()
         pos = nx.spring_layout(g, dim=3, scale=10)
+        average = lambda axis: sum(p[axis] for p in pos.values())/float(len(pos))
+        ax, ay, az = average(0), average(1), average(2)
         for key, (x, y, z) in pos.items():
-            self.meta[key]["pos"] = {"x": round(x, 0), "y": round(y, 0), "z": round(z, 0)}
+            self.meta[key]["pos"] = {"x": round(x-ax, 0), "y": round(y-ay, 0), "z": round(z-az, 0)}
 
         

abp/server.py

@@ -83,6 +83,7 @@ if __name__ == '__main__':
     server.start()
 
     g = demograph()
+    g.layout()
 
     while True:
         server.update(g)

static/curve.js

@@ -1,14 +1,14 @@
 // Curve settings
 var curveProperties = {
-    splineDensity: 30,
-    curvature: 10
+    splineDensity: 10,
+    curvature: 100
 };
 
 // Add a curved edge between two points
-function makeEdge(e) {
+function makeEdge(start, end) {
     // Make the geometry of the curve
-    var a = new THREE.Vector3(e.start[0], e.start[1], e.start[2]);
-    var b = new THREE.Vector3(e.end[0], e.end[1], e.end[2]);
+    var a = new THREE.Vector3(start.x, start.y, start.z);
+    var b = new THREE.Vector3(end.x, end.y, end.z);
     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);

static/grid.js

@@ -1,4 +1,4 @@
-
+//TODO Move to THREE.gridhelper
 // Make a grid
 function makeGrid(side, n, color) {
     var markers = new THREE.Object3D();
@@ -19,5 +19,6 @@ function makeGrid(side, n, color) {
         markers.add(line);
         markers.add(line90);
     }
+    markers.name = "grid";
     return markers;
 }

static/main.js

@@ -13,7 +13,18 @@ window.onload = init;
 // Clear the whole scene
 function makeScene() {
     var myScene = new THREE.Scene();
-    myScene.add(makeGrid(10, 10, "lightgray"));
+    var grid1 = makeGrid(10, 10, "lightgray");
+    grid1.position.z = -5;
+    myScene.add(grid1);
+
+    var grid2 = makeGrid(10, 10, "lightgray");
+    grid2.rotation.x = Math.PI/2;
+    grid2.position.y = -5;
+    myScene.add(grid2);
+    var grid3 = makeGrid(10, 10, "lightgray");
+    grid3.rotation.y = Math.PI/2;
+    grid3.position.x = -5;
+    myScene.add(grid3);
     return myScene;
 }
 
@@ -34,6 +45,7 @@ function loopForever() {
 function startMainLoop() {
     scene = makeScene();
     controls.addEventListener("change", render);
+    poll();
     loopForever();
 }
 
@@ -45,7 +57,7 @@ function init() {
     var height = window.innerHeight;
 
     // Renderer
-    renderer = new THREE.WebGLRenderer();
+    renderer = new THREE.WebGLRenderer({"antialias":true});
     renderer.setSize(width, height);
     renderer.setClearColor(0xffffff, 1);
     document.querySelector("body").appendChild(renderer.domElement);

static/materials.js

@@ -23,7 +23,7 @@ function loadMaterials(argument) {
     materials.point = new THREE.PointsMaterial(pointStyle);
 
     var qubitStyle = {
-        size: 0.6,
+        size: 0.8,
         map: textures.sprite,
         alphaTest: 0.5,
         transparent: true,

static/poll.js

@@ -1,13 +1,11 @@
 var body;
-var state;
 
 function poll() {
     var xhr = new XMLHttpRequest();
 
     xhr.onload = function() {
-        state = JSON.parse(xhr.responseText);
-        console.log(state);
-        //soft_console.innerHTML = "\n" + xhr.responseText;
+        var state = JSON.parse(xhr.responseText);
+        updateScene(state);
     };
 
     xhr.onerror = function(e){
@@ -18,3 +16,38 @@ function poll() {
     xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
     xhr.send();
 }
+
+function updateScene(state) {
+    var oldState = scene.getObjectByName("graphstate");
+    scene.remove(oldState);
+    oldState = null;
+   
+    var geometry = new THREE.Geometry();
+    //nodeGeometry.labels = [];
+    //nodeGeometry.colors = [];
+    for (var i in state.vops) {
+        var vop = state.vops[i];
+        var pos = state.meta[i].pos;
+        var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
+        geometry.vertices.push(vertex);
+        //geometry.colors[i] = new THREE.Color(n.color);
+        //geometry.labels[i] = n.label;
+    }
+
+    var edges = new THREE.Object3D();
+    for (i=0; i < state.edge.length; ++i) {
+        var edge = state.edge[i];
+        var start = state.meta[edge[0]].pos;
+        var end = state.meta[edge[1]].pos;
+        var newEdge = makeEdge(start, end);
+        edges.add(newEdge);
+    }
+
+    var particles = new THREE.Points(geometry, materials.qubit);
+    var newState = new THREE.Object3D();
+    newState.name = "graphstate";
+    newState.add(particles);
+    newState.add(edges);
+    scene.add(newState);
+    render();
+}