dan/souplesse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

convert to flexbox, add power and elevation views

Browse Source 
they all look iffy, elevation especially. we may have got the scale
all wrong
This commit is contained in:
Daniel Barlow 2024-11-12 23:50:19 +00:00
parent cfef807bf6
commit 6ddd374a94
1 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
frontend/src/Main.elm
View File

@ -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