Elm Clock

clock.elm

import Html exposing (..)
import Html.App exposing (program)
import Svg exposing (circle, line, svg)
import Svg.Attributes exposing (..)
import Time exposing (Time, minute, second)


main =
  program { init = init, view = view, update = update, subscriptions = subs }


-- MODEL

type alias Model = Time


-- VIEW

view : Model -> Html X
view model =
  let
    ang i =
      (toFloat i - 90) / 180 * pi 
    hxy t len =
      let
        angle =
          ang t
        handX =
          toString (50 + len * cos angle)
        handY =
          toString (50 + len * sin angle)
      in
        (handX, handY)
  in
  let
    sec = floor (Time.inSeconds model) % 60
    min = floor (Time.inMinutes (model - 30 * second)) % 60
    hrs = floor (Time.inHours (model + 30 * minute)) % 12
    (shX, shY) = hxy (sec * 6) 40
    (mhX, mhY) = hxy (min * 6) 30
    (hhX, hhY) = hxy (hrs * 30 + min // 2) 25
  in
    div [] 
      [ div [] 
        [ text (toString hrs)
        , text " ("
        , text (toString ((hrs * 30) + (min // 2)) ++ "°")
        , text ") : "
        , text (toString min)
        , text " ("
        , text (toString (min * 6) ++ "°")
        , text ") : "
        , text (toString sec)
        , text " ("
        , text (toString ((sec * 6)) ++ "°")
        , text ")"
        ]
      , Svg.svg [ viewBox "0 0 100 100", width "300px" ]
        [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
        , line [ x1 "50", y1 "50", x2 shX, y2 shY, stroke "#ff0000" ] []
        , line [ x1 "50", y1 "50", x2 mhX, y2 mhY, stroke "#034a74" ] []
        , line [ x1 "50", y1 "50", x2 hhX, y2 hhY, stroke "#03ff74" ] []
        ]
      ]


-- UPDATE

type X
  = Tick Time


update : X -> Model -> (Model, Cmd X)
update action model =
  case action of
    Tick newTime ->
      (newTime, Cmd.none)


init : (Model, Cmd X)
init =
  (0, Cmd.none)


subs : Model -> Sub X
subs model =
  Time.every second Tick