Giter VIP home page Giter VIP logo

keyboard's Introduction

Keyboard Build Status

Nice keyboard inputs in Elm.

Install with

elm install ohanhi/keyboard

Upgrading from 1.x to 2.x?

Read this

Usage

You can use this package in two ways:

  1. The "Msg and Update" way, which has some setting up to do but has a bunch of ways to help you get the information you need.
  2. The "Plain Subscriptions" way, where you get subscriptions for keys' down and up events, and handle the rest on your own.

Full examples

All of the examples are in the example directory in the repository.

Msg and Update

If you use the "Msg and Update" way, you will get the most help, such as:

  • All keyboard keys are named values of the Key type, such as ArrowUp, Character "A" and Enter
  • You can find out whether e.g. Shift is pressed down when any kind of a Msg 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 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.

Plain Subscriptions

With the "plain subscriptions" way, you get the bare minimum:

  • All keyboard keys are named values of the 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
    | ClearKeys
    -- ...


subscriptions : Model -> Sub Msg
subscriptions model =
    Sub.batch
        [ Keyboard.downs KeyDown
        , Keyboard.ups KeyUp
        , Keyboard.clears ClearKeys
        -- ...
        ]

Note that you will probably want to use one of the KeyParsers (or many with oneOf) in your update.

There's an example for this, too: Plain Subscriptions

keyboard's People

Contributors

ohanhi avatar robinheghan avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.