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"; - }; -} - -