-
-
Save aks/52c80d0f7804c6de66189e3a7bd1f0a8 to your computer and use it in GitHub Desktop.
SVG Clock with hands
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.0.0", | |
| "summary": "Tell the world about your project!", | |
| "repository": "https://github.com/user/project.git", | |
| "license": "BSD3", | |
| "source-directories": [ | |
| "." | |
| ], | |
| "exposed-modules": [], | |
| "dependencies": { | |
| "elm-lang/core": "5.1.1 <= v < 5.1.1", | |
| "elm-lang/html": "2.0.0 <= v < 2.0.0", | |
| "elm-lang/svg": "2.0.0 <= v < 2.0.0", | |
| "rtfeldman/hex": "1.0.0 <= v < 1.0.0" | |
| }, | |
| "elm-version": "0.18.0 <= v < 0.19.0" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| html { | |
| background: #F7F7F7; | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var app = Elm.Main.fullscreen() | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -- Read more about this program in the official Elm guide: | |
| -- https://guide.elm-lang.org/architecture/effects/time.html | |
| module Main exposing (..) | |
| import Html exposing (Html, div, br) | |
| import String exposing (padLeft, join) | |
| import Date | |
| import Color exposing (Color) | |
| import Hex | |
| import Svg exposing (..) | |
| import Svg.Attributes exposing (..) | |
| import Time exposing (Time, second) | |
| main : Program Never Model Msg | |
| main = | |
| Html.program | |
| { init = init | |
| , view = view | |
| , update = update | |
| , subscriptions = subscriptions | |
| } | |
| -- MODEL | |
| type alias Model = | |
| Time | |
| init : ( Model, Cmd Msg ) | |
| init = | |
| ( 0, Cmd.none ) | |
| -- UPDATE | |
| type Msg | |
| = Tick Time | |
| update : Msg -> Model -> ( Model, Cmd Msg ) | |
| update msg model = | |
| case msg of | |
| Tick newTime -> | |
| ( newTime, Cmd.none ) | |
| -- SUBSCRIPTIONS | |
| subscriptions : Model -> Sub Msg | |
| subscriptions model = | |
| Time.every second Tick | |
| -- VIEW | |
| view : Model -> Html Msg | |
| view model = | |
| let | |
| secs = | |
| ticksToSecs model | |
| mins = | |
| ticksToMins model | |
| hours = | |
| ticksToHours model | |
| sec_angle = | |
| secsToAngle secs | |
| min_angle = | |
| minsToAngle mins | |
| hour_angle = | |
| hoursToAngle hours | |
| sec_handX = | |
| toString (50 + 40 * cos sec_angle) | |
| sec_handY = | |
| toString (50 + 40 * sin sec_angle) | |
| min_handX = | |
| toString (50 + 35 * cos min_angle) | |
| min_handY = | |
| toString (50 + 35 * sin min_angle) | |
| hour_handX = | |
| toString (50 + 30 * cos hour_angle) | |
| hour_handY = | |
| toString (50 + 30 * sin hour_angle) | |
| in | |
| div [] | |
| [ svg [ viewBox "0 0 100 100", width "300px" ] | |
| [ circle [ cx "50", cy "50", r "45", fill (toColorStr Color.lightGreen) ] [] | |
| , line [ x1 "50", y1 "50", x2 sec_handX, y2 sec_handY, stroke (toColorStr Color.darkBlue), strokeWidth "1" ] [] | |
| , line [ x1 "50", y1 "50", x2 min_handX, y2 min_handY, stroke (toColorStr Color.blue), strokeWidth "1.5" ] [] | |
| , line [ x1 "50", y1 "50", x2 hour_handX, y2 hour_handY, stroke (toColorStr Color.blue), strokeWidth "2" ] [] | |
| ] | |
| , br [] [] | |
| , text ("Time " ++ (clockTime model)) | |
| ] | |
| -- Convert parts of an hour to angles of a clock | |
| secsToAngle : Int -> Float | |
| secsToAngle secs = | |
| turns (((toFloat secs) - 15) / 60.0) | |
| minsToAngle : Int -> Float | |
| minsToAngle mins = | |
| turns (((toFloat mins) - 15) / 60.0) | |
| hoursToAngle : Int -> Float | |
| hoursToAngle hours = | |
| turns (toFloat (rem 24 hours) / 12.0) | |
| -- Convert from time to parts of an hour | |
| ticksToSecs : Time -> Int | |
| ticksToSecs time = | |
| Date.fromTime time |> Date.second | |
| ticksToMins : Time -> Int | |
| ticksToMins time = | |
| Date.fromTime time |> Date.minute | |
| ticksToHours : Time -> Int | |
| ticksToHours time = | |
| Date.fromTime time |> Date.hour | |
| toColorStr : Color -> String | |
| toColorStr color = | |
| let | |
| rgb = | |
| Color.toRgb color | |
| in | |
| String.concat ("#" :: List.map numTo2h [ rgb.red, rgb.green, rgb.blue ]) | |
| type alias Coords = | |
| { x : String, y : String } | |
| toClockCoords : Int -> Float -> Coords | |
| toClockCoords size angle = | |
| let | |
| fsize = | |
| toFloat (size) | |
| x = | |
| 50 + fsize * cos angle | |
| y = | |
| 50 + fsize * sin angle | |
| in | |
| Coords (toString x) (toString y) | |
| clockTime : Time -> String | |
| clockTime time = | |
| let | |
| d = | |
| Date.fromTime time | |
| in | |
| String.join ":" (List.map numTo2d [ Date.hour d, Date.minute d, Date.second d ]) | |
| -- formatting functions | |
| twoDigits : String -> String | |
| twoDigits str = | |
| padLeft 2 '0' str | |
| numTo2d : Int -> String | |
| numTo2d num = | |
| twoDigits (toString num) | |
| numTo2h : Int -> String | |
| numTo2h num = | |
| twoDigits (Hex.toString num) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment