angular-gamepad

Gamepad module for AngularJS

Added by: Sam Deering

GitHub

Repository

pcx360/angular-gamepad

Stats

Stars: 1

Watchers: 1

Forks: 1

Author

Pcx360
Pcx360

Module Description

angular-gamepad

License Language Bower

angular-gamepad is an AngularJS module written in TypeScript. It provides access to gamepad information using the Gamepad W3C API. It is designed to work like angular-hotkeys: configuration-centric gamepad shortcuts. There is also a small convenience controller that provides direct access to gamepad information.

Demo

The demo page provides examples of what can be done using the library.

Compatibility

The Gamepad API is not supported by all browsers.

The latest version of Chrome, Firefox or Opera is recommended.

Internet Explorer and Safari do not support the Gamepad API yet.

Installation

The module is not yet available through traditional package managers such as Bower, meaning the commands below will not work. Packages will start appearing once the library reaches a stable state.

Bower

bower install angular-gamepad --save

Then add a reference to angular-gamepad.min.js.

TypeScript Definition Manager

tsd install angular-gamepad --save

Then add a reference to angular-gamepad/angular-gamepad.d.ts.

Usage

Configuration

Reference the ngGamepad module and configure it.

angular.module('myModule', ['ngGamepad'])
  .config(['$gamepadProvider', function($gamepadProvider) {
    $gamepadProvider
      .manualPolling(false)
    ;
  }])
;

If manual polling is enabled, the application using this module is responsible for calling $gamepad.poll(), preferably from a requestAnimationFrame callback.

Controller

The module provides a simple controller named GamepadCtrl.

This controller provides access to gamepad properties and is automatically updated whenever a gamepad's state changes.

<div ng-controller="GamepadCtrl">
  <div ng-repeat="(index, gamepad) in gamepads">

    <h2>#{{gamepad.index}} is {{gamepad.id}} ({{gamepad.mapping}} mapping)</h2>

    <h3>D-Pad</h3>
    <div ng-repeat="(name, value) in gamepad.DPad">
      {{name}} = {{value}}
    </div>

    <h3>Buttons</h3>
    <div ng-repeat="(name, value) in gamepad.buttons">
      {{name}} = {{value}}
    </div>

    <h3>Left Stick</h3>
    {{gamepad.LS.X}},{{gamepad.LS.Y}}

    <h3>Right Stick</h3>
    {{gamepad.RS.X}},{{gamepad.RS.Y}}

  </div>
</div>

Routing

Warning: this feature is not available yet.

You can define gamepad shortcuts on routes. They will be (un)bound as you navigate the application.

angular.module('myModule', ['ngRoute', 'ngGamepad'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
      controller: 'MyController',
      templateUrl: 'views/myview.html',
      gamepad: [{
        combination: 'B',
        label: 'Go back to the previous screen',
        action: 'back()'
      }]
    });
  })
;

Directive

Warning: this feature is not available yet.

You can define gamepad shortcuts on directives.

<dialog-box title="My Dialog Box" gamepad="{B: close}">
</dialog-box>

Contribute

In order to work on this project, you need to first install its dependencies using npm, Bower and tsd.

npm install
bower install
tsd reinstall

Once all the dependencies are installed, Grunt can be used to automatically build the project whenever files change.

grunt livereload

Linking

In order to test the module directly, it is possible to link to it from another project.

cd angular-gamepad
bower link
cd ../other-project
bower link angular-gamepad

Packaging

Grunt can be used to generate the JavaScript file used for distribution. It gets created in the dist folder.

grunt

Module stats last updated: 2015-04-19 02:51:53

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!