How can I mix html and svg in an elm view?

Question

I'm attempting to add a control to turn the subscription on and off in the elm time example. The problem is that I can't get html and svg to coexist in the view.

So far, I have this for the view:

import Html exposing (Html)
import Html.App as Html
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)

-- MODEL, UPDATE and SUBSCRIPTION removed for brevity

-- VIEW


view : Model -> Html Msg
view model =
  Html.div []
    [ Html.p [] [ text "hello world" ]
    , clock
    ]

clock : Model -> Html msg
clock model =
  let
    angle =
      turns (Time.inMinutes model.time)

    handX =
      toString (50 + 40 * cos angle)

    handY =
      toString (50 + 40 * sin angle)
  in
    svg [ viewBox "0 0 100 100", Svg.Attributes.width "300px" ]
      [ circle [ cx "50", cy "50", r "45", fill "#0B79CE" ] []
      , line [ x1 "50", y1 "50", x2 handX, y2 handY, stroke "#023963" ] []
      ]

However, I get the following message when I try to transpile:

Detected errors in 1 module.
==================================== ERRORS ====================================



-- TYPE MISMATCH ------------------------------------------ examples/6-clock.elm

The 1st and 2nd elements are different types of values.

70|     [ Html.p [] [ text "hello world" ]
71|>    , clock
72|     ]

The 1st element has this type:

    VirtualDom.Node a

But the 2nd is:

    Model -> Html a

Hint: All elements should be the same type of value so that we can iterate
through the list without running into unexpected values.

In addition to fixing the error, is there a way to fix the problem of not having to prepend Html to all the html elements? e.g. Html.div as opposed to the usual div.

Answer 1

clock is a function that receives a Model and returns some Html.

As the compiler is telling you, you'll need to have an Html element inside your view. It should be enough to pass the model to the clock function, like

view model =
  Html.div []
    [ Html.p [] [ text "hello world" ]
    , clock model
    ]

To be able to use directly div instead of Html.div you could import their definition using

import Html exposing (Html, div, p)

and so on, or, if you want to import all the Html package

import Html exposing (..)