How can I mix html and svg in elm presentation?

Question

I am trying to add a control to enable and disable the subscription in the elm time example. . The problem is that I cannot force html and svg to coexist in the view.

So far I have this for presentation:

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 overlap:

 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 add Html to all html elements? e.g. Html.div as opposed to a regular div .

Answer 1

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

As the compiler tells you, you need to have an Html element inside your view . This should be enough to pass Model to the clock function, for example

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

To be able to use the div directly instead of Html.div , you can import your definition using

 import Html exposing (Html, div, p) 

etc, or if you want to import the whole Html package

 import Html exposing (..)