From 63c6de30ae0e16ad1d1d8942e7f9d6febdcb53b9 Mon Sep 17 00:00:00 2001 From: Pete Shadbolt Date: Sun, 8 May 2016 15:34:35 +0100 Subject: [PATCH] Now we can render to the browser --- abp/graphstate.py | 9 ++++++--- abp/server.py | 1 + static/curve.js | 10 +++++----- static/grid.js | 3 ++- static/main.js | 16 ++++++++++++++-- static/materials.js | 2 +- static/poll.js | 41 +++++++++++++++++++++++++++++++++++++---- 7 files changed, 66 insertions(+), 16 deletions(-) diff --git a/abp/graphstate.py b/abp/graphstate.py index 6d2484a..8e5ba5f 100644 --- a/abp/graphstate.py +++ b/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)} diff --git a/abp/server.py b/abp/server.py index 0335ddb..57ffc2e 100644 --- a/abp/server.py +++ b/abp/server.py @@ -83,6 +83,7 @@ if __name__ == '__main__': server.start() g = demograph() + g.layout() while True: server.update(g) diff --git a/static/curve.js b/static/curve.js index 661c4e3..015c677 100644 --- a/static/curve.js +++ b/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); diff --git a/static/grid.js b/static/grid.js index 26412d7..a857b95 100644 --- a/static/grid.js +++ b/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; } diff --git a/static/main.js b/static/main.js index 74a7dd7..51446c4 100644 --- a/static/main.js +++ b/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); diff --git a/static/materials.js b/static/materials.js index 5d1db1d..72cbecd 100644 --- a/static/materials.js +++ b/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, diff --git a/static/poll.js b/static/poll.js index b0a337e..141d1bd 100644 --- a/static/poll.js +++ b/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(); +}