diff --git a/static/index.html b/static/index.html
index 47d73c3..9fd080b 100644
--- a/static/index.html
+++ b/static/index.html
@@ -10,6 +10,7 @@
+
@@ -19,7 +20,7 @@
-
+ nothing
diff --git a/static/main.css b/static/main.css
index 074bbb6..096866d 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,5 +1,5 @@
html, body { margin: 0; padding: 0; overflow: hidden; font-size: 10pt; font-family: "courier new"; }
-#infoholder {
+#node_info {
background: black;
color:white;
padding: 5px;
diff --git a/static/scripts/.agignore b/static/scripts/.agignore
new file mode 100644
index 0000000..377db0e
--- /dev/null
+++ b/static/scripts/.agignore
@@ -0,0 +1,2 @@
+three.js
+orbitcontrols.js
diff --git a/static/scripts/anders_briegel.js b/static/scripts/anders_briegel.js
index 73a316f..c0525a1 100644
--- a/static/scripts/anders_briegel.js
+++ b/static/scripts/anders_briegel.js
@@ -1,4 +1,7 @@
var abj = {};
+abj.vops = {};
+abj.ngbh = {};
+abj.meta = {};
abj.add_node = function(node, m) {
abj.ngbh[node] = {};
@@ -118,3 +121,13 @@ abj.log_graph_state = function() {
console.log(JSON.stringify(abj.ngbh));
};
+abj.update = function(newState) {
+ abj.vops = newState.vops;
+ abj.ngbh = newState.ngbh;
+ abj.meta = newState.meta;
+};
+
+abj.order = function(){
+ return Object.keys(abj.vops).length;
+};
+
diff --git a/static/scripts/graph.js b/static/scripts/graph.js
index 5fc2866..1966a78 100644
--- a/static/scripts/graph.js
+++ b/static/scripts/graph.js
@@ -1,22 +1,16 @@
var graph = {};
graph.colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];
-graph.hook = function() {
- materials.load();
+graph.prepare = function() {
+ materials.prepare();
websocket.connect(graph.update);
};
-graph.update = function(json) {
- abj.vops = json.vops;
- abj.ngbh = json.ngbh;
- abj.meta = json.meta;
- graph.updateScene();
-};
+graph.update = function(newState) {
+ if (newState){abj.update(newState);}
-graph.updateScene = function() {
if (graph.object){gui.scene.remove(graph.object);}
graph.object = null;
- console.log("update");
var geometry = new THREE.Geometry();
geometry.colors = [];
@@ -48,3 +42,8 @@ graph.updateScene = function() {
gui.scene.add(graph.object);
gui.render();
};
+
+graph.add_node = function(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 70cbb48..6784fa7 100644
--- a/static/scripts/gui.js
+++ b/static/scripts/gui.js
@@ -1,5 +1,5 @@
var gui = {};
-gui.construct = function() {
+gui.prepare = function() {
gui.renderer = new THREE.WebGLRenderer({
"antialias": true
});
@@ -15,6 +15,7 @@ gui.construct = function() {
gui.controls.addEventListener("change", gui.render);
gui.controls.center.set(0, 0, 0);
gui.controls.rotateSpeed = 0.2;
+ gui.controls.userPanSpeed = 0.3;
gui.camera.position.set(0, 0, 20);
};
@@ -49,10 +50,20 @@ gui.serverMessage = function(msgtext) {
message.className = "visible";
};
+// Set the position of the info popup
+gui.setInfoPosition = function(position){
+ w = node_info.offsetWidth;
+ h = node_info.offsetHeight;
+ node_info.style.left = position.x - w/2 + "px";
+ node_info.style.top = position.y - h -10 + "px";
+ node_info.className = "visible";
+};
+
+// The main loop
gui.loop = function() {
gui.controls.update();
requestAnimationFrame(gui.loop);
-}
+};
// Try to add a qubit at the current mouse position
gui.addQubitAtMouse = function(event) {
@@ -63,6 +74,6 @@ gui.addQubitAtMouse = function(event) {
abj.add_node(Object.keys(vops).length, {
"position": intersection
});
- graph.updateScene();
-}
+ graph.update();
+};
diff --git a/static/scripts/main.js b/static/scripts/main.js
index 602f3e5..2ae78e8 100644
--- a/static/scripts/main.js
+++ b/static/scripts/main.js
@@ -1,6 +1,13 @@
+function bootstrap(){
+ graph.add_node(0, 0, 0);
+ graph.update();
+}
+
window.onload = function() {
- graph.hook();
- materials.load();
- gui.construct();
+ graph.prepare();
+ materials.prepare();
+ gui.prepare();
+ mouse.prepare();
+ bootstrap();
gui.loop();
};
diff --git a/static/scripts/materials.js b/static/scripts/materials.js
index 047dc79..f6102f4 100644
--- a/static/scripts/materials.js
+++ b/static/scripts/materials.js
@@ -5,7 +5,7 @@ var curveProperties = {
curvature: 20
};
-materials.load = function() {
+materials.prepare = function() {
var sprite = new THREE.Texture(document.getElementById("ball"));
sprite.needsUpdate = true;
materials.edge = new THREE.LineBasicMaterial({
diff --git a/static/scripts/mouse.js b/static/scripts/mouse.js
new file mode 100644
index 0000000..3f66220
--- /dev/null
+++ b/static/scripts/mouse.js
@@ -0,0 +1,48 @@
+var mouse = {};
+mouse.wasClick = true;
+
+mouse.raycaster = new THREE.Raycaster();
+
+mouse.onFreeMove = function(){console.log("Free move");};
+mouse.onDrag = function(){console.log("Drag");};
+mouse.onClick = function(){console.log("Click");};
+mouse.onCtrlClick = function(){console.log("Ctrl-click");};
+mouse.onShiftClick = function(){console.log("Shift-click");};
+
+mouse.prepare = function(){
+ var el = gui.renderer.domElement;
+ el.addEventListener("mousedown", mouse.onDown);
+ el.addEventListener("mouseup", mouse.onUp);
+ el.addEventListener("mousemove", mouse.onMove);
+};
+
+mouse.onDown = function(event){
+ mouse.wasClick = true;
+ mouse.pressed = true;
+};
+
+mouse.onUp = function(event){
+ if (!mouse.wasClick){return;}
+ mouse.pressed = false;
+ if (event.ctrlKey){mouse.onCtrlClick();}
+ else if (event.shiftKey){mouse.onShiftClick();}
+ else {
+ mouse.onClick();
+ }
+};
+
+mouse.onMove = function(event) {
+ mouse.wasClick = false;
+ mouse.position_absolute = {x: event.clientX, y:event.clientY};
+ mouse.position_relative = {x: (event.clientX / window.innerWidth) * 2 - 1,
+ y: -(event.clientY / window.innerHeight) * 2 + 1};
+ gui.setInfoPosition(mouse.position_absolute);
+ mouse.raycaster.setFromCamera(mouse.position_relative, gui.camera);
+ mouse.ray = mouse.raycaster.ray;
+ if (mouse.pressed){
+ mouse.onDrag();
+ } else {
+ mouse.onFreeMove();
+ }
+};
+