Finish radar UI

slyg · slyg · commit ea99ce4f7aa8 · 2017-08-15T01:47:45.000+01:00
diff --git a/radar/radar-ui/elm-package.json b/radar/radar-ui/elm-package.json
@@ -10,7 +10,8 @@
     "dependencies": {
         "elm-lang/core": "5.1.1 <= v < 6.0.0",
         "elm-lang/html": "2.0.0 <= v < 3.0.0",
-        "elm-lang/svg": "2.0.0 <= v < 3.0.0"
+        "elm-lang/svg": "2.0.0 <= v < 3.0.0",
+        "elm-lang/websocket": "1.0.2 <= v < 2.0.0"
     },
     "elm-version": "0.18.0 <= v < 0.19.0"
 }
diff --git a/radar/radar-ui/src/Main.elm b/radar/radar-ui/src/Main.elm
@@ -4,8 +4,11 @@ import Html exposing (Html, div, program)
 import Html.Attributes exposing (style)
 import Types exposing (..)
 import Dict exposing (Dict)
+import List
 import Svg exposing (svg, circle)
 import Svg.Attributes exposing (cx, cy, r, width, height, fill, viewBox)
+import WebSocket exposing (listen)
+import Json.Decode as Decode exposing (Decoder, field, float, decodeString)
 
 
 init =
@@ -16,33 +19,98 @@ update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
         Noop ->
-            init
+            model ! []
+
+        Frame msg ->
+            let
+                trigoPoint =
+                    msg
+                        |> decodeString trigoPointDecoder
+                        |> Result.withDefault { angle = 0, distance = 0 }
+
+                angle =
+                    trigoPoint.angle
+
+                point =
+                    trigoToCartesianPoint trigoPoint
+
+                _ =
+                    Debug.log "trigoPoint" point
+            in
+                { model | points = Dict.insert angle point model.points } ! []
+
+
+trigoPointDecoder : Decoder TrigoPoint
+trigoPointDecoder =
+    Decode.map2 TrigoPoint
+        (field "angle" float)
+        (field "distance" float)
+
+
+trigoToCartesianPoint : TrigoPoint -> Point
+trigoToCartesianPoint { distance, angle } =
+    let
+        zoom =
+            (*) 5
+
+        x =
+            distance
+                |> (*) (cos (degrees angle))
+                |> floor
+                |> zoom
+
+        y =
+            distance
+                |> (*) (sin (degrees (angle + 180)))
+                |> floor
+                |> zoom
+    in
+        ( x, y )
 
 
 subscriptions : Model -> Sub Msg
 subscriptions model =
-    Sub.none
+    listen "ws://localhost:9999" Frame
+
+
+viewPoint : Point -> Html Msg
+viewPoint ( x, y ) =
+    circle
+        [ cx (toString (250 + x))
+        , cy (toString (250 + y))
+        , r "5"
+        , fill "#aacc66"
+        ]
+        []
 
 
 view : Model -> Html Msg
 view model =
-    div
-        [ style
-            [ ( "width", "500px" )
-            , ( "display", "block" )
-            , ( "margin", "50px auto" )
-            ]
-        ]
-        [ svg [ width "500", height "250", viewBox "0 0 500 250" ]
-            [ circle
+    let
+        layout =
+            circle
                 [ cx "250"
                 , cy "250"
                 , r "250"
                 , fill "#efefef"
                 ]
                 []
+
+        circles =
+            model.points
+                |> Dict.values
+                |> List.map viewPoint
+    in
+        div
+            [ style
+                [ ( "width", "500px" )
+                , ( "display", "block" )
+                , ( "margin", "50px auto" )
+                ]
+            ]
+            [ svg [ width "500", height "250", viewBox "0 0 500 250" ]
+                (layout :: circles)
             ]
-        ]
 
 
 main =
diff --git a/radar/radar-ui/src/Types.elm b/radar/radar-ui/src/Types.elm
@@ -4,17 +4,26 @@ import Dict exposing (Dict)
 
 
 type alias Angle =
-    Int
+    Float
+
+
+type alias Distance =
+    Float
 
 
 type alias Point =
     ( Int, Int )
 
 
+type alias TrigoPoint =
+    { angle : Angle, distance : Float }
+
+
 type alias Model =
     { points : Dict Angle Point
     }
 
 
 type Msg
     = Noop
+    | Frame String
