pete
/
abp
1
1
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Better mouse handling

master
Pete Shadbolt 8 years ago
parent
37913a4b2c
commit
46df289aed
9 changed files with 101 additions and 20 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      static/index.html
  2. +1
    -1
      static/main.css
  3. +2
    -0
      static/scripts/.agignore
  4. +13
    -0
      static/scripts/anders_briegel.js
  5. +9
    -10
      static/scripts/graph.js
  6. +15
    -4
      static/scripts/gui.js
  7. +10
    -3
      static/scripts/main.js
  8. +1
    -1
      static/scripts/materials.js
  9. +48
    -0
      static/scripts/mouse.js

+ 2
- 1
static/index.html View File

@@ -10,6 +10,7 @@
<script src="scripts/orbitcontrols.js"></script> <script src="scripts/orbitcontrols.js"></script>
<script src="scripts/tables.js"></script> <script src="scripts/tables.js"></script>
<script src="scripts/anders_briegel.js"></script> <script src="scripts/anders_briegel.js"></script>
<script src="scripts/mouse.js"></script>
<script src="scripts/materials.js"></script> <script src="scripts/materials.js"></script>
<script src="scripts/graph.js"></script> <script src="scripts/graph.js"></script>
<script src="scripts/gui.js"></script> <script src="scripts/gui.js"></script>
@@ -19,7 +20,7 @@


<body> <body>
<img id="ball" src="img/ball.png" style=display:none;> <img id="ball" src="img/ball.png" style=display:none;>
<div id=node_info class=hidden> </div>
<div id=node_info class=hidden> nothing </div>
<div id=message class=hidden> </div> <div id=message class=hidden> </div>


<div id=pallette> <div id=pallette>


+ 1
- 1
static/main.css View File

@@ -1,5 +1,5 @@
html, body { margin: 0; padding: 0; overflow: hidden; font-size: 10pt; font-family: "courier new"; } html, body { margin: 0; padding: 0; overflow: hidden; font-size: 10pt; font-family: "courier new"; }
#infoholder {
#node_info {
background: black; background: black;
color:white; color:white;
padding: 5px; padding: 5px;


+ 2
- 0
static/scripts/.agignore View File

@@ -0,0 +1,2 @@
three.js
orbitcontrols.js

+ 13
- 0
static/scripts/anders_briegel.js View File

@@ -1,4 +1,7 @@
var abj = {}; var abj = {};
abj.vops = {};
abj.ngbh = {};
abj.meta = {};


abj.add_node = function(node, m) { abj.add_node = function(node, m) {
abj.ngbh[node] = {}; abj.ngbh[node] = {};
@@ -118,3 +121,13 @@ abj.log_graph_state = function() {
console.log(JSON.stringify(abj.ngbh)); 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;
};


+ 9
- 10
static/scripts/graph.js View File

@@ -1,22 +1,16 @@
var graph = {}; var graph = {};
graph.colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"]; graph.colors = ["red", "green", "yellow", "blue", "pink", "orange", "purple"];


graph.hook = function() {
materials.load();
graph.prepare = function() {
materials.prepare();
websocket.connect(graph.update); 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);} if (graph.object){gui.scene.remove(graph.object);}
graph.object = null; graph.object = null;
console.log("update");


var geometry = new THREE.Geometry(); var geometry = new THREE.Geometry();
geometry.colors = []; geometry.colors = [];
@@ -48,3 +42,8 @@ graph.updateScene = function() {
gui.scene.add(graph.object); gui.scene.add(graph.object);
gui.render(); gui.render();
}; };

graph.add_node = function(x, y, z) {
meta = {"position": new THREE.Vector3(x, y, z)};
abj.add_node(abj.order(), meta);
};

+ 15
- 4
static/scripts/gui.js View File

@@ -1,5 +1,5 @@
var gui = {}; var gui = {};
gui.construct = function() {
gui.prepare = function() {
gui.renderer = new THREE.WebGLRenderer({ gui.renderer = new THREE.WebGLRenderer({
"antialias": true "antialias": true
}); });
@@ -15,6 +15,7 @@ gui.construct = function() {
gui.controls.addEventListener("change", gui.render); gui.controls.addEventListener("change", gui.render);
gui.controls.center.set(0, 0, 0); gui.controls.center.set(0, 0, 0);
gui.controls.rotateSpeed = 0.2; gui.controls.rotateSpeed = 0.2;
gui.controls.userPanSpeed = 0.3;
gui.camera.position.set(0, 0, 20); gui.camera.position.set(0, 0, 20);
}; };


@@ -49,10 +50,20 @@ gui.serverMessage = function(msgtext) {
message.className = "visible"; 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.loop = function() {
gui.controls.update(); gui.controls.update();
requestAnimationFrame(gui.loop); requestAnimationFrame(gui.loop);
}
};


// Try to add a qubit at the current mouse position // Try to add a qubit at the current mouse position
gui.addQubitAtMouse = function(event) { gui.addQubitAtMouse = function(event) {
@@ -63,6 +74,6 @@ gui.addQubitAtMouse = function(event) {
abj.add_node(Object.keys(vops).length, { abj.add_node(Object.keys(vops).length, {
"position": intersection "position": intersection
}); });
graph.updateScene();
}
graph.update();
};



+ 10
- 3
static/scripts/main.js View File

@@ -1,6 +1,13 @@
function bootstrap(){
graph.add_node(0, 0, 0);
graph.update();
}

window.onload = function() { window.onload = function() {
graph.hook();
materials.load();
gui.construct();
graph.prepare();
materials.prepare();
gui.prepare();
mouse.prepare();
bootstrap();
gui.loop(); gui.loop();
}; };

+ 1
- 1
static/scripts/materials.js View File

@@ -5,7 +5,7 @@ var curveProperties = {
curvature: 20 curvature: 20
}; };


materials.load = function() {
materials.prepare = function() {
var sprite = new THREE.Texture(document.getElementById("ball")); var sprite = new THREE.Texture(document.getElementById("ball"));
sprite.needsUpdate = true; sprite.needsUpdate = true;
materials.edge = new THREE.LineBasicMaterial({ materials.edge = new THREE.LineBasicMaterial({


+ 48
- 0
static/scripts/mouse.js View File

@@ -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();
}
};


Write Preview
Loading…
Cancel
Save