How to convert Element into Form? - elm

Question

How can I convert Mouse.position into Form, so I can display it in a collage? The following code displays <Signal> instead of the actual mouse coordinates:
render (x, y) =
let mousePos = toForm (show Mouse.position)
in collage 400 400 [mousePos]
It's curious that in this example http://elm-lang.org/examples/mouse-position, the show function actually transforms Mouse.position into a string with coordinates, but that is because the show function is used to filter a Signal(Int, Int) into a tuple of Signal values.
So my question is, how do I convert a Signal(Int, Int) into a Form, so that it shows the tuple values?

Answer 1

You are looking for Graphics.Collage.toForm which has the type Element -> Form.
It also sounds like you don't quite understand what Signal.map is doing. It takes a function to be applied to each value of a Signal. I've tried to use it in several contexts in the following example.
import Graphics.Element exposing (..)
import Graphics.Collage
import Graphics.Collage exposing (Form)
import Mouse
--This is the function you are trying to construct.
--It takes in a position, converts it to an element,
--using show and then converts it to a Form.
formPosition : (Int, Int) -> Form
formPosition pos =
let element = show pos -- element : Element
in Graphics.Collage.toForm element
-- We now want to apply our formPosition function to the
-- Signal containing all mouse position changes.
-- So we use Signal.map to apply formPosition to all values
-- of Mouse.position
formSignal : Signal Form
formSignal = Signal.map formPosition Mouse.position
-- Eventually we want to render this on the screen and the
-- function to do this requires a List Form not just a single
-- Form. So we write a function which returns a Singleton list
-- and apply it to each value in our formSignal.
formListSignal : Signal (List Form)
formListSignal = Signal.map (\n -> [n]) formSignal
-- Finally, we must turn that into a Signal Element to render
-- on the screen. We partially apply Graphics.Collage.collage
-- to return an element of size 400x400 and apply it to the
-- values of formListSignal by using Signal.map again
elementSignal : Signal Element
elementSignal = Signal.map (Graphics.Collage.collage 400 400) formListSignal
-- Finally we hand this off to main and it renders
main : Signal Element
main = elementSignal
A simpler version would likely combine all of the conversions into a single function. I just wanted to emphasize how Signal.map worked. I hope this helps!