souplesse

commit 6ddd374a94796c1fc01e31aa3deeb6e75719e641
parent cfef807bf6e39dc5a5004e795016958b484a073d
Author: Daniel Barlow <dan@telent.net>
Date:   Tue, 12 Nov 2024 23:50:19 +0000

convert to flexbox, add power and elevation views

they all look iffy, elevation especially. we may have got the scale
all wrong

Diffstat:
M
frontend/src/Main.elm
 | 
65
++++++++++++++++++++++++++++++++++++++++-------------------------

1 file changed, 40 insertions(+), 25 deletions(-)
diff --git a/frontend/src/Main.elm b/frontend/src/Main.elm
@@ -221,24 +221,21 @@ tileImg zoom tilenumber = img [ width 256,
                                 src (tileUrl tilenumber zoom) ] []
 
 
-cadenceView : List Point -> Svg Msg
-cadenceView allPoints =
-    let filteredPoints = Point.downsample 100 allPoints
+measureView : (Point -> Maybe Float) -> List Point -> Svg Msg
+measureView fn allPoints =
+    let filteredPoints = Point.downsample 300 allPoints
         startTime = case allPoints of
                         (p::_) -> p.time
                         _ -> 0
-        coords p = case p.cadence of
+        coords p = case (fn p) of
                        Just c ->
                            (String.fromFloat (p.time - startTime)) ++ "," ++
-                           (String.fromInt c) ++ ", "
+                           (String.fromFloat c) ++ ", "
                        Nothing -> ""
         string = String.concat (List.map coords filteredPoints)
     in
         svg
-        [ H.style "width" "100%"
-        , H.style "height" "100%"
-        , H.style "position" "absolute"
-        ]
+        [ ]
         [ g
           [ fill "none"
           , stroke "red"
@@ -252,6 +249,15 @@ cadenceView allPoints =
           ]
         ]
 
+cadenceView : List Point -> Svg Msg
+cadenceView =
+    measureView (.cadence >> Maybe.map toFloat)
+
+powerView = measureView (.power >> Maybe.map toFloat)
+
+eleView =
+    measureView (.pos >> .ele)
+
 
 trackView : Int -> Int -> Zoom -> List Point -> Svg Msg
 trackView leftedge topedge zoom points =
@@ -331,22 +337,31 @@ viewDiv : Model -> Html Msg
 viewDiv model =
     let coord = translate model.centre (pixelsToCoord model.zoom (dragDelta model.drag))
         canvasV = canvas coord model.zoom portalWidth portalHeight model.track
-    in div [ style "display" "inline-block" ]
-        [ (div [ style "width" (px portalWidth)
-               , style "height" (px portalHeight)
-               , style "display" "inline-block"
-               , style "position" "relative"
-               , style "overflow" "hidden"]
-               [canvasV])
-        , div [ style "width" (px portalWidth), style "height" "150"]
-            [ ifTrack model.track cadenceView ]
-        , div [] [ text ("Zoom level " ++ (String.fromInt model.zoom)) ]
-        , button [ onClick ZoomOut ] [ text "-" ]
-        , button [ onClick ZoomIn ] [ text "+" ]
-        , button [ onClick (Scroll 0 -10) ] [ text "^" ]
-        , button [ onClick (Scroll 0 10) ] [ text "V" ]
-        , button [ onClick (Scroll -10 0) ] [ text "<" ]
-        , button [ onClick (Scroll 10 0) ] [ text ">" ]
+    in div [ style "display" "flex" ]
+        [ div [ style "display" "flex"
+              , style "flex-direction" "column"]
+              [ div [ style "width" (px portalWidth)
+                    , style "height" (px portalHeight)
+                    , style "display" "inline-block"
+                    , style "position" "relative"
+                    , style "overflow" "hidden"]
+                    [canvasV]
+              , text ("Zoom level " ++ (String.fromInt model.zoom))
+              , span []
+                  [ button [ onClick ZoomOut ] [ text "-" ]
+                  , button [ onClick ZoomIn ] [ text "+" ]
+                  , button [ onClick (Scroll 0 -10) ] [ text "^" ]
+                  , button [ onClick (Scroll 0 10) ] [ text "V" ]
+                  , button [ onClick (Scroll -10 0) ] [ text "<" ]
+                  , button [ onClick (Scroll 10 0) ] [ text ">" ]
+                  ]
+              ]
+        , div [ style "display" "flex"
+              , style "flex-direction" "column"]
+            [ div [] [ ifTrack model.track cadenceView ]
+            , div [] [ ifTrack model.track powerView ]
+            , div [] [ ifTrack model.track eleView ]
+            ]
         ]
 
 view : Model -> Browser.Document Msg