Implemented touch controls

README.md

@@ -9,8 +9,10 @@ ObJS
 
 ### Features ###
 
-* Object rotation with the mouse.
-* Zoom control with the mousewheel.
+* Object rotation.
+* Zoom in and out.
+* Object movement.
+* Mouse and touch control.
 * Choose to draw (or not) vertizes, edges or faces.
 * Use mtl files for material color.
 * Change colors of background, vertizes, edges, and faces during runtime.
@@ -47,7 +49,7 @@ Note that the canvas is automatically cleared when a new object is loaded.
 
 ##### Rotate the object #####
 
-You can rotate the object by dragging it with the mouse. Also, you can apply rotation programatically:
+You can rotate the object by dragging it with the mouse or your finger in a touch screen. Also, you can apply rotation programatically:
 
 ```javascript
 myObJS.rotateX(-1); //Rotate along the X edge to the left
@@ -71,12 +73,12 @@ Note that the rotation speed can be set (see *Set movement speed*).
 
 ##### Zoom #####
 
-Zoom in and out can be achieven with the mouse wheel, or programatically:
+Zoom in and out can be achieven with the mouse wheel, by pinching the mode if you are using a touch screen, or programatically:
 
 ```javascript
-myObJS.zoom("+"); //Zoom in
-myObJS.zoom("-"); //Zoom out
+myObJS.zoom(value);
 ```
+*value* can be any float number, positive to zoom in, and negative to zoom out. *1* and *-1* are a one step zoom in or out. 
 Note that the zoom speed can be set (see *Set zoom speed*).
 
 

index.html

@@ -10,7 +10,7 @@
 		<table>
 			<tr>
 				<td>
-					<canvas id="ObJSCanvas" width="800" height="600">
+					<canvas id="ObJSCanvas" width="400" height="400">
 						Your browser does not support the HTML5 canvas tag.
 					</canvas>
 				</td>
@@ -42,13 +42,13 @@
 					Alpha:<br/>
 					0% <input type="range" min="0" max="100" step="1" value="60" onInput="objs.setAlpha(this.value);" onChange="objs.setAlpha(this.value);"/>100%
 					<br/><br/>
-					Rotation speed:<br/>&nbsp;&nbsp;(Drag the model with the mouse)<br/>
+					Rotation speed:<br/>
 					0% <input type="range" min="0" max="10" step="1" value="3" onInput="objs.setRotationSpeed(this.value);" onChange="objs.setRotationSpeed(this.value);"/>100%
 					<br/><br/>
-					Zoom speed:<br/>&nbsp;&nbsp;(Use the mousewheel to zoom in or out)<br/>
+					Zoom speed:<br/>
 					0% <input type="range" min="0" max="10" step="1" value="2" onInput="objs.setZoomSpeed(this.value);" onChange="objs.setZoomSpeed(this.value);"/>100%
 					<br/><br/>
-					Movement speed:<br/>&nbsp;&nbsp;(Drag the model while holding the shift key)<br/>
+					Movement speed:<br/>
 					0% <input type="range" min="0" max="10" step="1" value="5" onInput="objs.setMovementSpeed(this.value);" onChange="objs.setMovementSpeed(this.value);"/>100%
 				</td>
 			</tr>

script/ObJS.js

@@ -41,6 +41,8 @@ function ObJS(){
 	 * Variable to determine if the mouse button is being holded down.  *
 	 ********************************************************************/ 
 	var mDown = false;
+	var pinch = false;
+	var pinchScale = 0;
 	
 	/********************************************************************
 	 * Variables containing the canvas and its context.                 *
@@ -132,13 +134,67 @@ function ObJS(){
 				return false;
 			};
 			
-			canvas.addEventListener('mousewheel',function(event){
+			canvas.onmouseout = function(e){
+				if(mDown)
+					mDown = false;
+			}
+			
+			canvas.addEventListener('mousewheel',function(e){
+				e.preventDefault();
 				if (event.wheelDelta > 0)
-					thisObJS.zoom("-");
+					thisObJS.zoom(1);
 				else 
-					thisObJS.zoom("+");
+					thisObJS.zoom(-1);
 				return false;
 			}, false);
+			
+			canvas.addEventListener('touchstart',function(e){
+				if(e.touches.length == 2) {
+					pinch = true;
+					pinchScale = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX) * (e.touches[0].clientX-e.touches[1].clientX) + (e.touches[0].clientY-e.touches[1].clientY) * (e.touches[0].clientY-e.touches[1].clientY));
+				}
+				return false;
+			}, false);
+			
+			canvas.addEventListener('touchend',function(e){
+				if(pinch)
+					pinch = false;
+				return false;
+			}, false);
+			
+			canvas.addEventListener('touchcancel',function(e){
+				if(pinch)
+					pinch = false;
+				return false;
+			}, false);
+			
+			canvas.addEventListener('touchleave',function(e){
+				if(pinch)
+					pinch = false;
+				return false;
+			}, false);
+			
+			canvas.addEventListener('touchmove',function(e){
+				e.preventDefault();
+				if(pinch){
+					var dist = Math.sqrt((e.touches[0].clientX-e.touches[1].clientX) * (e.touches[0].clientX-e.touches[1].clientX) + (e.touches[0].clientY-e.touches[1].clientY) * (e.touches[0].clientY-e.touches[1].clientY));
+					if (dist > pinchScale)
+						thisObJS.zoom(1);
+					else if (dist < pinchScale)
+						thisObJS.zoom(-1);
+					pinchScale = dist;
+				}
+				else{
+					var x = e.touches[0].clientX
+					var y = e.touches[0].clientY;
+					thisObJS.rotateY(x - pX);
+					thisObJS.rotateX(y - pY);
+					pX = x;
+					pY = y;
+				}
+				return false;
+			}, false);
+			
 			canvasInitialized = true;
 		}
 	};
@@ -384,11 +440,8 @@ function ObJS(){
 	 * #return: nothing                                                 *
 	 * #scope: public                                                   *
 	 ********************************************************************/
-	this.zoom = function(dir){
-		if (dir == "-")
-			scale = Math.round(scale * (1 + zoomSpeed));
-		if (dir == "+")
-			scale = Math.round(scale * (1 - zoomSpeed));
+	this.zoom = function(val){
+		scale = scale + val * scale * zoomSpeed;
 		draw();
 	};
 	
@@ -434,10 +487,10 @@ function ObJS(){
 			return false;
 		if (code.length != 4 && code.length != 7)
 			return false
-					for (var i = 1; i < code.length; i ++)
-						if (code[i] < '0' || (code[i] > 9 && code[i] < 'A') || (code[i] > 'Z' && code[i] < 'a') || code[i] > 'z')
-							return false;
-						return true;	
+		for (var i = 1; i < code.length; i ++)
+			if (code[i] < '0' || (code[i] > 9 && code[i] < 'A') || (code[i] > 'Z' && code[i] < 'a') || code[i] > 'z')
+				return false;
+			return true;	
 	};
 	
 	/********************************************************************