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

Popups

master
Pete Shadbolt 8 years ago
parent
46df289aed
commit
f48e620c1a
5 changed files with 59 additions and 25 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -1
      static/index.html
  2. +5
    -4
      static/main.css
  3. +16
    -3
      static/scripts/gui.js
  4. +1
    -0
      static/scripts/main.js
  5. +35
    -17
      static/scripts/mouse.js

+ 2
- 1
static/index.html View File

@@ -14,6 +14,7 @@
<script src="scripts/materials.js"></script>
<script src="scripts/graph.js"></script>
<script src="scripts/gui.js"></script>
<script src="scripts/editor.js"></script>
<script src="scripts/websocket.js"></script>
<script src="scripts/main.js"></script>
</head>
@@ -21,7 +22,7 @@
<body>
<img id="ball" src="img/ball.png" style=display:none;>
<div id=node_info class=hidden> nothing </div>
<div id=message class=hidden> </div>
<div id=server_info class=hidden> </div>

<div id=pallette>
<ul>


+ 5
- 4
static/main.css View File

@@ -14,24 +14,25 @@ html, body { margin: 0; padding: 0; overflow: hidden; font-size: 10pt; font-fam
border-radius:3px;
}

#pallette {
#server_info {
background-color: black;
color:white;
padding: 10px;
font-family:"courier new";
position: absolute;
top: 10px;
bottom: 10px;
right: 10px;
font-size: 9pt;
}

#message {

#pallette {
background-color: black;
color:white;
padding: 10px;
font-family:"courier new";
position: absolute;
bottom: 10px;
top: 10px;
right: 10px;
font-size: 9pt;
}


+ 16
- 3
static/scripts/gui.js View File

@@ -46,8 +46,22 @@ gui.makeScene = function() {

// Put an HTML message to the screen
gui.serverMessage = function(msgtext) {
message.innerHTML = msgtext;
message.className = "visible";
if (msgtext) {
server_info.innerHTML = msgtext;
server_info.className = "visible";
} else {
server_info.innerHTML = "";
server_info.className = "hidden";
}
};

gui.nodeMessage = function(msgtext) {
node_info.innerHTML = msgtext;
node_info.className = "visible";
};

gui.hideNodeMessage = function(){
node_info.className = "hidden";
};

// Set the position of the info popup
@@ -56,7 +70,6 @@ gui.setInfoPosition = function(position){
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


+ 1
- 0
static/scripts/main.js View File

@@ -8,6 +8,7 @@ window.onload = function() {
materials.prepare();
gui.prepare();
mouse.prepare();
editor.prepare();
bootstrap();
gui.loop();
};

+ 35
- 17
static/scripts/mouse.js View File

@@ -3,46 +3,64 @@ 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.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(){
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.onDown = function(event) {
mouse.wasClick = true;
mouse.pressed = true;
};

mouse.onUp = function(event){
if (!mouse.wasClick){return;}
mouse.onUp = function(event) {
if (!mouse.wasClick) {
return;
}
mouse.pressed = false;
if (event.ctrlKey){mouse.onCtrlClick();}
else if (event.shiftKey){mouse.onShiftClick();}
else {
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};
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){
if (mouse.pressed) {
mouse.onDrag();
} else {
mouse.onFreeMove();
}
};


Write Preview
Loading…
Cancel
Save