for more information visit the package's GitHub page
Package contains the following modules:
Nice keyboard inputs in Elm.
Install with
elm install ohanhi/keyboard
You can use this package in two ways:
All of the examples are in the example
directory in the repository.
If you use the "Msg and Update" way, you will get the most help, such as:
Key
type, such as ArrowUp
, Character "A"
and Enter
Shift
is pressed down when any kind of a Msg
happens in your program{ x : Int, y : Int }
or as a union type (e.g. South
, NorthEast
)When using Keyboard like this, it follows The Elm Architecture. Its model is a list of keys, and it has an update
function and some subscriptions
. Below are the necessary parts to wire things up. Once that is done, you can use the list of keys in your program as you like. You can also get useful information using the helper functions such as arrows
and arrowsDirection
.
Include the list of keys in your program's model
import Keyboard exposing (Key(..))
import Keyboard.Arrows
type alias Model =
{ pressedKeys : List Key
-- ...
}
init : ( Model, Cmd Msg )
init =
( { pressedKeys = []
-- ...
}
, Cmd.none
)
Add the message type in your messages
type Msg
= KeyMsg Keyboard.Msg
-- ...
Include the subscriptions for the events to come through (remember to add them in your main
too)
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Sub.map KeyMsg Keyboard.subscriptions
-- ...
]
And finally, you can use update
to have the list of keys be up to date
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
KeyMsg keyMsg ->
( { model | pressedKeys = Keyboard.update keyMsg model.pressedKeys }
, 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.Arrows.arrows model.pressedKeys
in
model.currentSpeed + arrows.x
isShooting : Model -> Bool
isShooting model =
List.member Spacebar model.pressedKeys
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.
If the user presses a key combination that shifts focus, such as Alt-Tab
or Ctrl-L
,
some keys may get "stuck" in the keys list. One solution to this issue is to create a port subscription to the window blur
events and clearing the entire key list from your model:
JavaScript
window.onblur = function() { elmApp.ports.blurs.send({}) }
Elm
port blurs : (() -> msg) -> Sub msg
subscriptions : Sub Msg
subscriptions =
Sub.batch
[ Keyboard.subscriptions KeyboardMsg
, blurs Blur
]
-- update
...
Blur ->
{ model | pressedKeys = [] }
...
With the "plain subscriptions" way, you get the bare minimum:
Key
type, such as ArrowUp
, Character "A"
and Enter
Setting up is very straight-forward:
import Keyboard exposing (RawKey)
type Msg
= KeyDown RawKey
| KeyUp RawKey
-- ...
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.batch
[ Keyboard.downs KeyDown
, Keyboard.ups KeyUp
-- ...
]
Note that you will probably want to use one of the KeyParser
s (or many with oneOf
) in your update.
There's an example for this, too: Plain Subscriptions