From 8bf12a2ac7083862e4becf20983519a724bc5795 Mon Sep 17 00:00:00 2001 From: Pete Shadbolt Date: Tue, 17 May 2016 03:44:21 +0100 Subject: [PATCH] Great - we have 2-way comms working properly now --- abp/visiblegraphstate.py | 34 ++++++------------------ profiling/profile_viz.py | 10 ++++--- server/anders_briegel.js | 13 +++++++++ server/api.js | 7 +++-- server/curve.js | 6 +++-- server/graph.js | 30 +++++++++++---------- server/main.js | 57 +++++++++++++++++++++++++--------------- server/materials.js | 4 +-- server/poll.js | 8 +++--- 9 files changed, 94 insertions(+), 75 deletions(-) diff --git a/abp/visiblegraphstate.py b/abp/visiblegraphstate.py index 3b2a16e..a19fd9e 100644 --- a/abp/visiblegraphstate.py +++ b/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 = [] + diff --git a/profiling/profile_viz.py b/profiling/profile_viz.py index 1ff1242..87fb0bd 100644 --- a/profiling/profile_viz.py +++ b/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() diff --git a/server/anders_briegel.js b/server/anders_briegel.js index e83f87e..bff4d91 100644 --- a/server/anders_briegel.js +++ b/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)); diff --git a/server/api.js b/server/api.js index 50a900f..7e3f154 100644 --- a/server/api.js +++ b/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() diff --git a/server/curve.js b/server/curve.js index 015c677..ce9ac9a 100644 --- a/server/curve.js +++ b/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); diff --git a/server/graph.js b/server/graph.js index 0b21245..fc723c7 100644 --- a/server/graph.js +++ b/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); } diff --git a/server/main.js b/server/main.js index 597b6b0..5be3f23 100644 --- a/server/main.js +++ b/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(); } diff --git a/server/materials.js b/server/materials.js index 72cbecd..4751cd2 100644 --- a/server/materials.js +++ b/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); diff --git a/server/poll.js b/server/poll.js index 83f4779..2dc8c6c 100644 --- a/server/poll.js +++ b/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; -