This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
Elm Library for gamepads and game controllers
version 1.1.1
license BSD3
native-modules False
elm-version 0.18.0 <= v < 0.19.0
Tag 1.1.1
Committed At 2018-05-18 16:05:11 UTC
elm-lang/core 5.1.1 <= v < 6.0.0 5.1.1


Elm Gamepad Travis build Status

This library allows you to use game controller aka gamepads in your Elm web app.

Since pure Elm cannot access the Navigator.getGamepads() Web API that this library uses, you will need to manually add a port. You can use the one provided in port/.

Gamepad support is very inconsistent and varies wildly with the browser, the browser version, the operative system and the installed gamepad drivers.

If you are lucky, the browser will recognize your gamepad(s) as a "Standard Gamepad" which means that you can use it with no remapping or configuration.

Often times however, the browser does not recognise the gamepad: in this case you can still use it, but you will need to remap it: the Gamepad.Remap module will help you with that. If you want everyone to be able to use your app, including gamepad remapping is super important.

import Gamepad exposing (Gamepad)
import GamepadPort
import Time exposing (Time)

type alias PlayerControl =
    { playerId : Int
    , isFiring : Bool
    , speed : Float

type alias Model =
    { gamepadDatabase : Gamepad.Database
    , playerControls : List PlayerControl

type Msg
    = OnGamepad ( Time, Gamepad.Blob )

gamepadToPlayerControl : Gamepad -> PlayerControl
gamepadToPlayerControl gamepad =
    { playerId = Gamepad.getIndex gamepad
    , isFiring = Gamepad.rightTriggerIsPressed gamepad
    , speed = Gamepad.leftX gamepad

update : Msg -> Model -> Model
update msg model =
    case msg of
        OnGamepad ( timeSinceLastFrameUpdate, blob ) ->
                gamepads =
                    Gamepad.getGamepads model.gamepadDatabase blob

                playerControls =
           gamepadToPlayerControl gamepads
                { model | playerControls = playerControls }

subscriptions : Model -> Sub Msg
subscriptions model =
    GamepadPort.gamepad OnGamepad


Gamepad polling should be synchronised with the browser's animation frame.

If you are using elm-lang/animation-frame you should remove it, and instead use the Time provided by the gamepad port, which works like the value provided by AnimationFrame.diffs.

Adding ports

The ports required by elm-gamepad are no different than any other Elm port.

You can see how they are wired in in the example's index.html.

You can get ready-to-use port code from port/; you will need to:

  • Manually copy GamepadPort.elm in your Elm sources directory, so that you can import it as GamepadPort

  • Import gamepadPort.js in your app JavaScript:

<script type="text/javascript" src="gamepadPort.js"></script>
  • Register the port with the Elm app:
  var elmApp = Elm.Main.fullscreen();

If you do not have another way to persist the gamepad database, you will want to add also the local storage port, the procedure is exactly the same.