diff --git a/static/scripts/graph.js b/static/scripts/graph.js
index 99d593c..d0ab0f7 100644
--- a/static/scripts/graph.js
+++ b/static/scripts/graph.js
@@ -1,69 +1,52 @@
-var colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];
-var ws;
+define(["three", "anders_briegel", "websocket"], function(three, websocket) {
+ return {
-function connectToServer() {
- ws = new WebSocket("ws://localhost:5000");
- ws.onopen = function()
- {
- message.innerHTML = "Connected to server.";
- message.className = "visible";
- };
+ colors: ["red", "green", "yellow", "blue", "pink", "orange", "purple"],
- ws.onerror = function(err)
- {
- message.innerHTML = "Could not connect to server.";
- message.className = "visible";
- };
-
- ws.onmessage = function (evt)
- {
- console.log("Received update");
- var new_state = JSON.parse(evt.data);
- vops = new_state.vops;
- ngbh = new_state.ngbh;
- meta = new_state.meta;
- updateScene();
- };
-
- ws.onclose = function()
- {
- message.innerHTML = "Connection to server lost. Reconnect.";
- message.className = "visible";
- };
-}
+ hookEvents: function() {
+ websocket.connect(this.update);
+ },
+
+ update : function(json){
+ anders_briegel.vops = json.vops;
+ anders_briegel.ngbh = json.ngbh;
+ anders_briegel.meta = json.meta;
+ this.updateScene();
+ },
-function updateScene() {
- var oldState = scene.getObjectByName("graphstate");
- scene.remove(oldState);
- oldState = null;
-
- var geometry = new THREE.Geometry();
- for (var i in abj.vops) {
- var vop = abj.vops[i];
- var pos = abj.meta[i].position;
- var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
- geometry.vertices.push(vertex);
- geometry.colors[i] = new THREE.Color(colors[abj.vops[i] % colors.length]);
- }
+ updateScene: function() {
+ var oldState = scene.getObjectByName("graphstate");
+ scene.remove(oldState);
+ oldState = null;
- var edges = new THREE.Object3D();
- var my_edges = abj.edgelist();
- for (i=0; i < my_edges.length; ++i) {
- var edge = my_edges[i];
- var start = abj.meta[edge[0]].position;
- var startpos = new THREE.Vector3(start[0], start[1], start[2]);
- var end = abj.meta[edge[1]].position;
- var endpos = new THREE.Vector3(end[0], end[1], end[2]);
- var newEdge = makeCurve(startpos, endpos);
- edges.add(newEdge);
- }
+ var geometry = new THREE.Geometry();
+ for (var i in abj.vops) {
+ var vop = abj.vops[i];
+ var pos = abj.meta[i].position;
+ var vertex = new THREE.Vector3(pos.x, pos.y, pos.z);
+ geometry.vertices.push(vertex);
+ geometry.colors[i] = new THREE.Color(colors[abj.vops[i] % colors.length]);
+ }
- 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();
-}
+ var edges = new THREE.Object3D();
+ var my_edges = abj.edgelist();
+ for (i = 0; i < my_edges.length; ++i) {
+ var edge = my_edges[i];
+ var start = abj.meta[edge[0]].position;
+ var startpos = new THREE.Vector3(start[0], start[1], start[2]);
+ var end = abj.meta[edge[1]].position;
+ var endpos = new THREE.Vector3(end[0], end[1], end[2]);
+ var newEdge = makeCurve(startpos, endpos);
+ 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();
+ }
+ };
+});
diff --git a/static/scripts/main.js b/static/scripts/main.js
index 016e577..77fe2de 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -1,11 +1,7 @@
// Import modules
-requirejs(["anders_briegel"]);
+requirejs(["anders_briegel", "three", "orbitcontrols", "graph"], init);
var controls, renderer, raycaster, scene, selection, camera;
-// Run on startup
-window.onload = init;
-
-
// Clear the whole scene
function makeScene() {
var myScene = new THREE.Scene();
@@ -32,21 +28,14 @@ function onWindowResize(evt) {
render();
}
-
-// Called on startup
-function init() {
+function constructDisplay(){
// Renderer
- renderer = new THREE.WebGLRenderer({
- "antialias": true
- });
+ renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.querySelector("body").appendChild(renderer.domElement);
window.addEventListener("resize", onWindowResize, false);
- // Time to load the materials
- loadMaterials();
-
// Camera, controls, raycaster
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.3, 1000);
controls = new THREE.OrbitControls(camera);
@@ -54,8 +43,12 @@ function init() {
controls.rotateSpeed = 0.2;
camera.position.set(0, 0, 20);
controls.addEventListener("change", render);
+}
+
- // Run
+// Called on startup
+function init() {
+ constructDisplay();
scene = makeScene();
connectToServer();
render();
diff --git a/static/scripts/websocket_interface.js b/static/scripts/websocket_interface.js
deleted file mode 100644
index 843a09c..0000000
--- a/static/scripts/websocket_interface.js
+++ /dev/null
@@ -1,34 +0,0 @@
-var ws;
-
-function connect_to_server() {
- ws = new WebSocket("ws://localhost:5000");
- ws.onopen = function()
- {
- message.innerHTML = "Connected to server.";
- message.className = "visible";
- };
-
- ws.onerror = function(err)
- {
- message.innerHTML = "Could not connect to server.";
- message.className = "visible";
- };
-
- ws.onmessage = function (evt)
- {
- console.log("Received update");
- var new_state = JSON.parse(evt.data);
- vops = new_state.vops;
- ngbh = new_state.ngbh;
- meta = new_state.meta;
- updateScene();
- };
-
- ws.onclose = function()
- {
- message.innerHTML = "Connection to server lost. Reconnect.";
- message.className = "visible";
- };
-}
-
-