Add example to display acceleration values

Here's a very simple example that renders small displays for
acceleration, acceleration including gravity, and angular velocity.

Author: sch

elm-package.json

@@ -7,6 +7,7 @@
         "src"
     ],
     "exposed-modules": [
+        "Device.Motion",
         "Device.Orientation"
     ],
     "dependencies": {

example/PlotAccelerationExample.elm

@@ -0,0 +1,111 @@
+module PlotAccelerationExample exposing (main)
+
+import Html exposing (Html)
+import Html.Attributes exposing (style)
+import Time
+import Device.Motion exposing (Motion)
+
+
+main =
+    Html.program
+        { init = init
+        , update = update
+        , view = view
+        , subscriptions = subscriptions
+        }
+
+
+type Msg
+    = Move Motion
+
+
+type alias Model =
+    Motion
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( Device.Motion.initial, Cmd.none )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg model =
+    case msg of
+        Move angles ->
+            ( angles, Cmd.none )
+
+
+subscriptions : Motion -> Sub Msg
+subscriptions _ =
+    Device.Motion.changes Move
+
+
+view : Model -> Html Msg
+view model =
+    let
+        styles =
+            [ ( "padding", "0.618em" )
+            , ( "font-family", "-apple-system, BlinkMacSystemFont, sans-serif" )
+            , ( "color", "white" )
+            , ( "background-color", "rgba(255, 255, 255, 0.1)" )
+            , ( "box-shadow", "0 1px 3px rgba(1, 1, 1, 0.1)" )
+            , ( "border-radius", "3px" )
+            , ( "min-width", "2.2em" )
+            , ( "text-align", "right" )
+            ]
+    in
+        center <|
+            Html.div
+                [ style styles ]
+                [ accelerationView "acceleration" model.acceleration
+                , accelerationView "including gravity" model.accelerationIncludingGravity
+                , rotationView "angular velocity" model.rotationRate
+                ]
+
+
+accelerationView title acceleration =
+    Html.div [ style [ ( "margin-bottom", "1em" ) ] ]
+        [ Html.div [ style [ ( "text-align", "center" ) ] ] [ Html.text title ]
+        , Html.div []
+            [ accelerationPartView "x" acceleration.x
+            , accelerationPartView "y" acceleration.y
+            , accelerationPartView "z" acceleration.z
+            ]
+        ]
+
+
+rotationView title velocity =
+    Html.div []
+        [ Html.text title
+        , Html.div []
+            [ accelerationPartView "alpha" velocity.alpha
+            , accelerationPartView "beta" velocity.beta
+            , accelerationPartView "gamma" velocity.gamma
+            ]
+        ]
+
+
+accelerationPartView part amount =
+    Html.div
+        [ style [ ( "display", "flex" ) ] ]
+        [ Html.span [] [ Html.text (part ++ ": ") ]
+        , Html.span [ style [ ( "flex", "1" ) ] ] [ Html.text (round amount |> toString) ]
+        ]
+
+
+center : Html Msg -> Html Msg
+center node =
+    let
+        styles =
+            [ ( "position", "absolute" )
+            , ( "top", "0" )
+            , ( "bottom", "0" )
+            , ( "left", "0" )
+            , ( "right", "0" )
+            , ( "display", "flex" )
+            , ( "align-items", "center" )
+            , ( "justify-content", "center" )
+            , ( "background-color", "#60B5CC" )
+            ]
+    in
+        Html.div [ style styles ] [ node ]

src/Device/Motion.elm

@@ -6,12 +6,11 @@ effect module Device.Motion
         , changes
         )
 
-{-| This library lets you listen to the acceleration of the device, if the
-device supports
-the [experimental device motion
-apis](https://w3c.github.io/deviceorientation/spec-source-orientation.html).
+{-| This library lets you listen to changes in acceleration of the device
+running the Elm program, if the device supports the [experimental device motion
+apis](https://w3c.github.io/deviceorientation/spec-source-orientation.html#devicemotion).
 
-@docs EulerRotation, initial, changes
+@docs Motion, initial, changes
 
 -}
 
@@ -20,7 +19,7 @@ import Dom.LowLevel as Dom
 import Json.Decode as Json
 import Process
 import Task exposing (Task)
-import Device.Orientation exposing (EulerRotation)
+import Device.Orientation exposing (EulerRotation, eulerRotation)
 
 
 -- ORIENTATION
@@ -43,20 +42,21 @@ type alias Acceleration =
 -}
 type alias Motion =
     { acceleration : Acceleration
-    , accelerationDueToGravity : Acceleration
+    , accelerationIncludingGravity : Acceleration
     , rotationRate : EulerRotation
-    , interval : Int
+    , interval : Float
     }
 
 
 {-| This is a default orientation, useful for representing initial orientation
 state.
 -}
-initial : EulerRotation
+initial : Motion
 initial =
-    { alpha = 0
-    , beta = 0
-    , gamma = 0
+    { acceleration = { x = 0, y = 0, z = 0 }
+    , accelerationIncludingGravity = { x = 0, y = 0, z = 0 }
+    , rotationRate = { alpha = 0, beta = 0, gamma = 0 }
+    , interval = 0.0
     }
 
 
@@ -69,13 +69,21 @@ changes tagger =
 
 {-| The decoder used to extract acceleration info from a motion event.
 -}
-motion : Json.Decoder motion
+motion : Json.Decoder Motion
 motion =
-    let
-        acceleration =
-            Json.field "acceleration" Json.object
-    in
-        Motion acceleration
+    Json.map4 Motion
+        (Json.field "acceleration" accelerationDecoder)
+        (Json.field "accelerationIncludingGravity" accelerationDecoder)
+        (Json.field "rotationRate" eulerRotation)
+        (Json.field "interval" Json.float)
+
+
+accelerationDecoder : Json.Decoder Acceleration
+accelerationDecoder =
+    Json.map3 Acceleration
+        (Json.field "x" Json.float)
+        (Json.field "y" Json.float)
+        (Json.field "z" Json.float)
 
 
 

src/Device/Orientation.elm

@@ -2,6 +2,7 @@ effect module Device.Orientation
     where { subscription = MySub }
     exposing
         ( EulerRotation
+        , eulerRotation
         , initial
         , changes
         )
@@ -10,7 +11,7 @@ effect module Device.Orientation
 so long as it supports the [experimental device orientation
 apis](https://w3c.github.io/deviceorientation/spec-source-orientation.html).
 
-@docs EulerRotation, initial, changes
+@docs EulerRotation, eulerRotation, initial, changes
 
 -}