Nice keyboard inputs in Elm.
It is quite tedious to find out the currently pressed down keys with just the Keyboard
module, so this package aims to make it easier.
You can use Keyboard.Extra in two ways:
- The "Intelligent Helper" way, which has some setting up to do but has a bunch of ways to help you get the information you need.
- The "Plain Subscriptions" way, where you get subscriptions for keys' down and up events, and handle the rest on your own.
- Main example shows most of the basic usage
- Arrows Direction example shows how the
North
,NorthEast
, etc. directions work - Tracking Key Changes example uses
updateWithKeyChange
to show when a key is pressed down and when it is released - Plain Subscriptions example is for the more experienced Elm users, who wish to get more "down to the metal" with just subscribing to keyboard events
All of the examples are also in the example
directory in the repository.
If you use the "Intelligent Helper" way, you will get the most help, such as:
- All keyboard keys are named values of the
Key
type, such asArrowUp
,CharA
andEnter
- You can find out whether e.g.
Shift
is pressed down when any kind of aMsg
happens in your program - Arrow keys and WASD can be used as
{ x : Int, y : Int }
or as a union type (e.g.South
,NorthEast
) - You can also get a full list of keys that are pressed down
When using the library like this, it follows The Elm Architecture.
In essence, Keyboard.Extra
is just another component in your program. It has a model (called State
), an update
function and some subscriptions
. Below are the necessary parts to wire things up. Once that is done, you can get useful information using the numerous helper functions such as isPressed
, arrows
and arrowsDirection
.
Include the Keyboard.Extra state in your program's model
type alias Model =
{ keyboardState : Keyboard.Extra.State
, otherThing : Int
-- ...
}
init : ( Model, Cmd Msg )
init =
( { keyboardState = Keyboard.Extra.initialState
, otherThing = 0
-- ...
}
, Cmd.none
)
Add the message type in your messages
type Msg
= KeyboardExtraMsg Keyboard.Extra.Msg
-- ...
Include the subscriptions for the events to come through
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Sub.map KeyboardExtraMsg Keyboard.Extra.subscriptions
-- ...
]
And finally, let it update its model
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
KeyboardExtraMsg keyMsg ->
( { model | keyboardState = Keyboard.Extra.update keyMsg model.keyboardState }
, Cmd.none
)
-- ...
Now you can get all the information anywhere where you have access to the model, for example like so:
calculateSpeed : Model -> Float
calculateSpeed model =
let
arrows =
Keyboard.Extra.arrows model.keyboardState
in
model.currentSpeed + arrows.x
Have fun! :)
PS. The Tracking Key Changes example example shows how to use updateWithKeyChange
to find out exactly which key was pressed down / released on that update cycle.
With the "plain subscriptions" way, you get the bare minimum:
- All keyboard keys are named values of the
Key
type, such asArrowUp
,CharA
andEnter
Setting up is very straight-forward, though:
type Msg
= KeyDown Key
| KeyUp Key
-- ...
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Keyboard.Extra.downs KeyDown
, Keyboard.Extra.ups KeyUp
-- ...
]
There's an example for this, too: Plain Subscriptions