Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    OOD Javascript Joystick

    This is a FF, Chrome, and IE Javascript Joystick Object.

    Note: The code requires the Javacript Joystick Plugin found here: link

    This OOD Javascript Joystick Object Singleton was refactored from the original source code by
    cwoffenden found at: http://code.google.com/p/javascript-joystick (joystick.js)
    shared under the GNU Lesser General Public License.


    The reson for the refactoring was to replace the original class with a singleton object that supported a single joystick
    and efectivly encapsulated the methods and properties of the original class.


    You should find the result to be as easy to use as the original code by cwoffenden.


    If you want to support other applications (Flash, etc) then please see the original source link
    for the registration code that was removed from this object.

    To use the Joystick object, just include the object code at startup and then utilize any of the following methods after the document has loaded:

    Joystick.getX() : returns the current Joystick X-Axis value.
    Joystick.getY() : returns the current Joystick Y-Axis value.
    Joystick.getZ() : returns the current Joystick Z-Axis AKA Throttle value.
    Joystick.getR() : returns the current Joystick R-Axis AKA Rudder value.
    Joystick.getX1() : returns the current Joystick X-Axis value mapped to the set (-1,0,1).
    Joystick.getY1() : returns the current Joystick Y-Axis value mapped to the set (-1,0,1).
    Joystick.getZ1() : returns the current Joystick Z-Axis value mapped to the set (-1,0,1).
    Joystick.getR1() : returns the current Joystick R-Axis value mapped to the set (-1,0,1).
    Joystick.getButtons() : returns the combined state of all Joystick buttons as a bit field.
    Joystick.isConnected() : returns true if the Joystick is connected, otherwise false.


    Code:
    var Joystick = (function(){ 
    	/* 
    	|  This OOD Joystick Singleton Object is refactored from the original source code by 
    	|  cwoffenden found at: http://code.google.com/p/javascript-joystick (joystick.js)
    	|  shared under the GNU Lesser General Public License. 
    	|  The original public property and method names now have an underscore prepended.
    	|  Eight methods were added including getX1 and getY1  which behave simmilar to getX and 
    	|  getY, except the new methods return values that are mapped onto the set (-1,0,1).
    	|  Finally, the additional application (flash etc) registration code has been 
    	|  removed from this object (see the original source for the removed code).
    	|  The Joystick plugin required to run this code can be found at the same location.
    	+------------------------------------------------------------------------------*/
    	_createPlugin = function() { 
    		var ctrlIE = document.createElement("object"); 
    		if (ctrlIE) { 
    			try { 
    				ctrlIE.classid = "CLSID:3AE9ED90-4B59-47A0-873B-7B71554B3C3E"; 
    			if (ctrlIE.setDevice(0) != null) { 
    					return ctrlIE; 
    				} 
    			} catch (e) { 
    			} 
    		} 
    		var ctrlFF = document.createElement("embed"); 
    		if (ctrlFF) { 
    			if (navigator && navigator.plugins) { 
    				var found = false; 
    				for (var n = 0; n < navigator.plugins.length; n++) { 
    					if (navigator.plugins[n].name.indexOf("Joystick") != -1) { 
    						found = true; 
    						break; 
    					} 
    				} 
    				if (!found) { 
    					return null; 
    				} 
    			} 
    			try { 
    				ctrlFF.type = "application/x-vnd.numfum-joystick"; 
    				ctrlFF.width  = 0; 
    				ctrlFF.height = 0; 
    				document.body.appendChild(ctrlFF, document.body); 
    				if (ctrlFF.setDevice(0) != null) { 
    					return ctrlFF; 
    				} 
    			} catch (e) {} 
    			document.body.removeChild(ctrlFF); 
    		} 
    		return null; 
    	};
    	_ctl = null; 
    	_CENTER = 32768; 
    	_init = function() {
    		_ctl = _createPlugin(); 
    	};
    	_getX = function( /* x-axis */ ) {
    		return (_ctl) ? _ctl.x : _CENTER; 
    	};
    	_getY = function( /* y-axis */ ) { 
    		return (_ctl) ? _ctl.y : _CENTER; 
    	};
    	_getZ = function( /* z-axis | Throttle */ ) { 
    		return (_ctl) ? _ctl.z : _CENTER; 
    	};
    	_getR = function( /* r-axis  | Rudder */ ) { 
    		return (_ctl) ? _ctl.r : _CENTER; 
    	};
    	_getX1 = function() {
    		var x = (_ctl) ? _ctl.x : _CENTER; 
    		return (x < 28672 || x > 36864)?(x < 28672)?-1:1:0;
    	};
    	_getY1 = function() { 
    		var y = (_ctl) ? _ctl.y : _CENTER; 
    		return (y < 28672 || y > 36864)?(y < 28672)?-1:1:0;		
    	};
    	_getZ1 = function() { 
    		var z = (_ctl) ? _ctl.z : _CENTER; 
    		return (z < 28672 || z > 36864)?(z < 28672)?-1:1:0;		
    	};
    	_getR1 = function() { 
    		var r = (_ctl) ? _ctl.r : _CENTER; 
    		return (r < 28672 || r > 36864)?(r < 28672)?-1:1:0;		
    	};
    	_getA = function( /* Button-A */ ) { 
    		return (_ctl) ? _ctl.a : false; 
    	};
    	_getB = function( /* Button-B */ ) { 
    		return (_ctl) ? _ctl.b : false; 
    	};
    	_getButtons = function( /* All-Buttons BitField */ ) { 
    		return (_ctl) ? _ctl.buttons : 0; 
    	};
    	_read = function(prop, off, len) { 
    		switch (arguments.length) { 
    			case 0: 
    				return null; 
    			case 1: 
    				off = 0; 
    			case 2: 
    				len = prop.length - off; 
    		} 
    		var ret = []; 
    		for (var n = 0; n < len; n++) { 
    			switch (prop[off + n]) { 
    				case "x": 
    					ret.push(_getX()); 
    					break; 
    				case "y": 
    					ret.push(_getY()); 
    					break; 
    				case "a": 
    					ret.push(_getA()); 
    					break; 
    				case "b": 
    					ret.push(_getB()); 
    					break; 
    				case "buttons": 
    					ret.push(_getButtons()); 
    					break; 
    				default: 
    					ret.push(0); 
    			} 
    		} 
    		return ret; 
    	};
    	_isConnected = function(){
    		return (_ctl) ? _ctl.isConnected() : false; 
    	};
    	return {
    		__init:function(){_init()},
    		getX:function(){return _getX()},
    		getY:function(){return _getY()},
    		getZ:function(){return _getZ()},
    		getR:function(){return _getR()},
    		getX1:function(){return _getX1()},
    		getY1:function(){return _getY1()},
    		getZ1:function(){return _getZ1()},
    		getR1:function(){return _getR1()},
    		getA:function(){return _getA()},
    		getB:function(){return _getB()},
    		getButtons:function(){return _getButtons()},
    		read:function(){return _read()},
    		isConnected:function(){return _isConnected()}
    	}
    })();
    
    /* 
    |  Just load the Joystick object into the page at startup and you're 
    |  ready to go.
    |
    |  You can remove this clunky initialzation, just remember to call
    |  Joystick.__init after the document body is avilable but before
    |  any other use of the Joystick object
    +------------------------------------------------------------------------------*/
    var clunkyload=(window.attachEvent)?window.attachEvent("onload",Joystick.__init):
    	(window.addEventListener)?window.addEventListener("load",Joystick.__init,true):
    	window.onload=Joystick.__init;
    delete clunkyload

    Here is an OOD proof of usgae for the Joystick object:

    Code:
    <html>
    <head>
    <title>
    Javascript Joystick Use Example (OOD)
    </title>
    <script type="text/javascript" src="Joystick.js"></script>
    <script type="text/javascript">
    //OOD Version
    var App=(function(){
    	/* 
    	|  This example code is refactored from the original source code found at:
    	|  http://code.google.com/p/javascript-joystick (joystick.html)
    	|  original public property and method names have an ubderscore prepended.
    	|  display method and Page object added.
    	+------------------------------------------------------------------------------*/
    	var _gameLoop = function(INTERVAL){
    		var con = Joystick.isConnected();
    		if(con==false){
    			setTimeout("App.gameLoop()", INTERVAL);
    			return ("Joystick is connected: "+con);
    		}
    		var btn=" ";
    		var a=false;
    		var A = Joystick.getA();
    		var x = Joystick.getX1();
    		var y = Joystick.getY1();
    		var z = Joystick.getZ();
    		var r = Joystick.getR();
    		var Btn = Joystick.getButtons();
    		if(A==true /* Button-A */){
    			//addYourCode
    			a=true;
    		}
    		if(Btn & 1 /* Button-1 (A) */){
    			//addYourCode
    		}
    		if(Btn & 2 /* Button-2 */){
    			//addYourCode
    		}
    		if(Btn & 4 /* Button-3 */){
    			//addYourCode
    		}
    		if(Btn & 8 /* Button-4 */){
    			//addYourCode
    		}
    		if(Btn & 16 /* Button-5 */){
    			//addYourCode
    		}
    		if(Btn & 32 /* Button-6 */){
    			//addYourCode
    		}
    		if(Btn & 64 /* Button-7 */){
    			//addCode
    		}
    		if(Btn & 128 /* Button-8 */){
    			//addYourCode
    		}
    		setTimeout("App.gameLoop()", INTERVAL);
    		return("Joystick is connected: "+con+"<br>X:"+x+"<br>Y:"+y+"<br>BTN:"+Btn);
    	}
    	var _display = function(txt){
    		document.getElementById("res").innerHTML=txt;
    	}
    	return{
    		gameLoop:function(){return _gameLoop(50 /*Milliseconds between each frame*/)},
    		display:function(txt){_display(txt)}
    	}
    })();
    var Page=(function(){
    	var _bind=function(a /*binding object*/, b  /*binding function*/, c  /*function bound to*/){	
    		var d = a[b];
    		a[b]=function(){
    			c(d(arguments));
    		}
    		return Page;
    	};
    	var _addEvent=function(el,ev,fnc){
    		if(el.attachEvent)
    			el.attachEvent("on"+ev,fnc);
    		else if(el.addEventListener)
    			el.addEventListener(ev,fnc,true);
    		else
    			el[ev]=fnc;
    		return Page;
    	};
    	return {
    		bind:function(a,b,c){return _bind(a,b,c);},
    		addEvent:function(el,ev,fnc){return _addEvent(el,ev,fnc);}
    	};
    })();
    Page.addEvent(window,"load",App.gameLoop).bind(App,"gameLoop",App.display);
    </script>
    </head>
    <body>
    <div id="res"></div>
    <div id="res2"></div>
    </body>
    </html>
    original code by cwoffenden link
    refactoring provided by rdspoons
    Last edited by rdspoons; 08-29-2010 at 07:56 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •