a single svg element with reflex frp

Question

I am trying to write a single SVG element within reflex FRP

import Reflex.Dom
import qualified Data.Map as Map

main = mainWidget $ myDiv

myDiv = el "svg" $ do
  elAttr "circle"  $ Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill",  "yellow" )]

This does not compile. Hoping Data.Map is correct. I know from the quickref the type signature is:

elAttr     :: String ->          Map String String  -> m a -> m a

Slightly curious what monad m is associated with mainWidget but mainly just getting to work.

This is compiled using the sandbox that comes with reflex.

"This does not compile" - What's the error message? It's always important to post compiler errors in these cases. — bheklilr, Jul 08 '16 at 14:52
@bheklilr the errors were very long... I can take out some relevant parts — john mangual, Jul 08 '16 at 15:25

katychuang · Accepted Answer · 2016-08-15T22:52:13.903

There are two things to fix here.

First, you want to return something, often the basic return () will allow you to compile.

Second, the elAttr takes 2 input types, so after the "circle" you want to put the second argument in parenthesis rather than the $.

This is what it looks like:

import Reflex.Dom
import qualified Data.Map as Map

main = mainWidget $ myDiv

myDiv = el "svg" $ do
  elAttr "circle"  (Map.fromList [ ("cx" , "50") , ("cy", "50"), ("r" , "40"), ("stroke" , "green"), ("fill",  "yellow" )]) $ return ()

After compiling, you should be able to see this in your browser's element inspector.

<html>
  <head>
    <script language="javascript" src="rts.js"></script>
    <script language="javascript" src="lib.js"></script>
    <script language="javascript" src="out.js"></script>
  </head>
  <body>
    <svg>
     <circle cx="50" cy="50" fill="yellow" r="40" stroke="green"></circle>
    </svg>
  </body>
</html>

If you want to see it show up in the browser, make sure to define this attribute xmlns="http://www.w3.org/20000/svg" in your svg element like below with elDynAttrNS':

main = mainWidget $ myDiv

myDiv = do
  let attrs = constDyn $ fromList
               [ ("width" , "500")
               , ("height" , "250")
               ]
  let cAttrs = constDyn $ fromList
               [ ("cx", "50")
               , ("cy", "50")
               , ("r", "40")
               , ("stroke", "green")
               , ("stroke-width", "3")
               , ("fill",  "yellow" )
               ]

  s <- elSvg "svg" attrs (elSvg "circle" cAttrs (return ()))
  return ()

elSvg tag a1 a2 = do
  elDynAttrNS' ns tag a1 a2
  return ()

ns :: Maybe String
ns = Just "http://www.w3.org/2000/svg"

I observe that `elDynAttrNS` (for elements with namespaces?) is not on the [cheatsheet](https://github.com/reflex-frp/reflex-dom/blob/develop/Quickref.md). — john mangual, Feb 18 '17 at 19:55

a single svg element with reflex frp

1 Answers1