From 9625e013942a91826aee97138596640d1c0ebf1d Mon Sep 17 00:00:00 2001
From: Pete Shadbolt <pete.shadbolt@gmail.com>
Date: Thu, 19 May 2016 00:09:54 +0100
Subject: [PATCH] Momentum

---
 static/main.css                 |  7 ++++---
 static/scripts/graph.js         |  4 ++--
 static/scripts/gui.js           |  5 +++--
 static/scripts/main.js          |  1 +
 static/scripts/materials.js     |  2 +-
 static/scripts/orbitcontrols.js | 10 +++++++---
 static/scripts/websocket.js     | 27 +++++++++++++--------------
 7 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/static/main.css b/static/main.css
index 2cfd742..4667beb 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,6 +1,6 @@
 html, body { margin: 0; padding: 0; overflow: hidden; font-size:  10pt; font-family:  "courier new"; }
 #node_info { 
-    background: black; 
+    background: rgba(0, 0, 0, .8); 
     color:white;
     padding: 5px;
     margin:0px;
@@ -9,9 +9,10 @@ html, body { margin: 0; padding: 0; overflow: hidden; font-size:  10pt; font-fam
     left:5px;
     font-family:"courier new";
     text-align: center;
-    font-size:10pt;
-    height:15px;
+    font-size:9pt;
+    /*height:15px;*/
     border-radius:3px;
+    pointer-events: none;
 }
 
 #server_info {
diff --git a/static/scripts/graph.js b/static/scripts/graph.js
index 1966a78..1b74fbf 100644
--- a/static/scripts/graph.js
+++ b/static/scripts/graph.js
@@ -1,5 +1,5 @@
 var graph = {};
-graph.colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];
+graph.colors = ["lightblue", "green", "yellow", "red", "pink", "orange", "purple"];
 
 graph.prepare = function() {
     materials.prepare();
@@ -44,6 +44,6 @@ graph.update = function(newState) {
 };
 
 graph.add_node = function(x, y, z) {
-    meta = {"position": new THREE.Vector3(x, y, z)};
+    meta = {position: new THREE.Vector3(x, y, z)};
     abj.add_node(abj.order(), meta);
 };
diff --git a/static/scripts/gui.js b/static/scripts/gui.js
index ed4640c..e0993cf 100644
--- a/static/scripts/gui.js
+++ b/static/scripts/gui.js
@@ -14,9 +14,10 @@ gui.prepare = function() {
     gui.controls = new THREE.OrbitControls(gui.camera);
     gui.controls.addEventListener("change", gui.render);
     gui.controls.center.set(0, 0, 0);
+    gui.controls.target.set(0, 0, 0);
     gui.controls.rotateSpeed = 0.2;
-    gui.controls.userPanSpeed = 0.3;
-    gui.camera.position.set(0, 0, 20);
+    gui.controls.userPanSpeed = 0.1;
+    gui.camera.position.set(4, 4, 10);
 };
 
 // Someone resized the window
diff --git a/static/scripts/main.js b/static/scripts/main.js
index 7b7dd96..5ecb87e 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -1,5 +1,6 @@
 function bootstrap(){
     graph.add_node(0, 0, 0);
+    graph.add_node(3, 0, 0);
     graph.update();
 }
 
diff --git a/static/scripts/materials.js b/static/scripts/materials.js
index 2b1a285..5e4f52e 100644
--- a/static/scripts/materials.js
+++ b/static/scripts/materials.js
@@ -23,7 +23,7 @@ materials.prepare = function() {
         color: "red"
     });
     materials.qubit = new THREE.PointsMaterial({
-        size: 0.3,
+        size: 0.7,
         map: ballSprite,
         alphaTest: 0.5,
         transparent: true,
diff --git a/static/scripts/orbitcontrols.js b/static/scripts/orbitcontrols.js
index b46c6ba..95616eb 100644
--- a/static/scripts/orbitcontrols.js
+++ b/static/scripts/orbitcontrols.js
@@ -18,6 +18,7 @@ THREE.OrbitControls = function ( object, domElement ) {
 	this.enabled = true;
 
 	this.center = new THREE.Vector3();
+	this.target = new THREE.Vector3();
 
 	this.userZoom = true;
 	this.userZoomSpeed = 1.0;
@@ -156,6 +157,9 @@ THREE.OrbitControls = function ( object, domElement ) {
 		var position = this.object.position;
 		var offset = position.clone().sub( this.center );
 
+		var diff = this.center.clone().sub( this.target ).multiplyScalar(0.2);
+        this.center.sub(diff);
+
 		// angle from z-axis around y-axis
 
 		var theta = Math.atan2( offset.x, offset.z );
@@ -192,11 +196,11 @@ THREE.OrbitControls = function ( object, domElement ) {
 
 		this.object.lookAt( this.center );
 
-		thetaDelta = 0;
-		phiDelta = 0;
+		thetaDelta /= 1.5;
+		phiDelta /= 1.5;
 		scale = 1;
 
-		if ( lastPosition.distanceTo( this.object.position ) > 0 ) {
+		if ( lastPosition.distanceTo( this.object.position ) > 0.01 ) {
 
 			this.dispatchEvent( changeEvent );
 
diff --git a/static/scripts/websocket.js b/static/scripts/websocket.js
index c44b054..caaaf2b 100644
--- a/static/scripts/websocket.js
+++ b/static/scripts/websocket.js
@@ -1,26 +1,25 @@
 var websocket = {};
 
-websocket.connect = function(update){
+websocket.connect = function(update) {
     var ws = new WebSocket("ws://localhost:5000");
-    ws.onopen = function(evt)
-    {
+    ws.onopen = function(evt) {
         gui.serverMessage("Connected to server.");
     };
 
-    ws.onerror = function(err)
-    {
+    ws.onerror = function(err) {
         gui.serverMessage("Could not connect to server.");
     };
-     
-    ws.onmessage = function (evt) 
-    { 
-       update(JSON.parse(evt.data));
+
+    ws.onmessage = function(evt) {
+        json = JSON.parse(evt.data);
+        for (var i in json.meta) {
+            var pos = json.meta[i].position;
+            json.meta[i].position = new THREE.Vector3(pos.x, pos.y, pos.z);
+        }
+        update(json);
     };
-     
-    ws.onclose = function(evt)
-    { 
+
+    ws.onclose = function(evt) {
         gui.serverMessage("Connection to server lost. <a href='#' onclick='javascript:websocket.connect()'>Reconnect</a>.");
     };
 };
-
-