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
Unified 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/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>
<script src="scripts/editor.js"></script>
<script src="scripts/websocket.js"></script> <script src="scripts/websocket.js"></script>
<script src="scripts/main.js"></script> <script src="scripts/main.js"></script>
</head> </head>
@@ -21,7 +22,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> nothing </div> <div id=node_info class=hidden> nothing </div>
<div id=message class=hidden> </div>
<div id=server_info class=hidden> </div>


<div id=pallette> <div id=pallette>
<ul> <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; border-radius:3px;
} }


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


#message {

#pallette {
background-color: black; background-color: black;
color:white; color:white;
padding: 10px; padding: 10px;
font-family:"courier new"; font-family:"courier new";
position: absolute; position: absolute;
bottom: 10px;
top: 10px;
right: 10px; right: 10px;
font-size: 9pt; 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 // Put an HTML message to the screen
gui.serverMessage = function(msgtext) { 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 // Set the position of the info popup
@@ -56,7 +70,6 @@ gui.setInfoPosition = function(position){
h = node_info.offsetHeight; h = node_info.offsetHeight;
node_info.style.left = position.x - w/2 + "px"; node_info.style.left = position.x - w/2 + "px";
node_info.style.top = position.y - h -10 + "px"; node_info.style.top = position.y - h -10 + "px";
node_info.className = "visible";
}; };


// The main loop // The main loop


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

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

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

@@ -3,46 +3,64 @@ mouse.wasClick = true;


mouse.raycaster = new THREE.Raycaster(); 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; var el = gui.renderer.domElement;
el.addEventListener("mousedown", mouse.onDown); el.addEventListener("mousedown", mouse.onDown);
el.addEventListener("mouseup", mouse.onUp); el.addEventListener("mouseup", mouse.onUp);
el.addEventListener("mousemove", mouse.onMove); el.addEventListener("mousemove", mouse.onMove);
}; };


mouse.onDown = function(event){
mouse.onDown = function(event) {
mouse.wasClick = true; mouse.wasClick = true;
mouse.pressed = true; mouse.pressed = true;
}; };


mouse.onUp = function(event){
if (!mouse.wasClick){return;}
mouse.onUp = function(event) {
if (!mouse.wasClick) {
return;
}
mouse.pressed = false; 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.onClick();
} }
}; };


mouse.onMove = function(event) { mouse.onMove = function(event) {
mouse.wasClick = false; 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); gui.setInfoPosition(mouse.position_absolute);
mouse.raycaster.setFromCamera(mouse.position_relative, gui.camera); mouse.raycaster.setFromCamera(mouse.position_relative, gui.camera);
mouse.ray = mouse.raycaster.ray; mouse.ray = mouse.raycaster.ray;
if (mouse.pressed){
if (mouse.pressed) {
mouse.onDrag(); mouse.onDrag();
} else { } else {
mouse.onFreeMove(); mouse.onFreeMove();
} }
}; };


Write Preview
Loading…
Cancel
Save