Problem while generating SVG with C2

[Romain]

Hi C2 users,

This is a repost of a question on Stackoverflow (http://stackoverflow.com/questions/11901410/generating-svg-with-c2). I suppose that this list is a better channel.

I have the following code, meant to represent a set of devices as SVG:

(ns foo.core
  (:use [c2.core :only [unify]]
        [c2.dom :only [replace! append!]]
        [c2.svg :only [translate]]))

(def conf 
  { :devices [{:alias "OSC Sender",
               :name "OSC Sender",
               :ins []},
              {:alias "const2", :name "const",
               :outs []}],
    :layout [{:alias "const2",
              :x 72.12447405329594,
              :y 99.88499298737729},
             {:alias "tick",
              :x 82.5732819074334,
              :y 133.91374474053296},
             {:alias "OSC Sender",
              :x 185.17741935483872,
              :y 113.90322580645162}]})

(def render-config
  [:svg {:viewBox "0 0 900 400"}
   [:rect {:id "frame" :x "1" :y "1" :width "600" :height "300" :fill "none" :stroke "blue"}]
   (unify (:layout conf)
          (fn [{alias :alias x :x y :y}]
            [:g {:transform (translate [x y])}
              [:text alias]]))])

(append! "#main" render-config)

Trying to evaluate render-config in the REPL, I get:

[:svg {:viewBox "0 0 900 400"} [:rect {:width "600", :y "1", :x "1", :fill "none", :stroke "blue", :id "frame", :height "300"}] ([:g {:transform "translate(72,99)"} [:text "const2"]] [:g {:transform "translate(82,133)"} [:text "tick"]] [:g {:transform "translate(185,113)"} [:text "OSC Sender"]])]

which looks like a proper Hiccup representation to me (certainly unify did its magic).

Yet when evaluating render-config in the context of a web page (using singult), I only get an error. Generating a very simple SVG (basically only the enclosing "frame" rectangle) works in the browser.

Any hints/tips?

Cheers!

Note: rendering render-config using Hiccup, then spitting out the results in a file gives a SVG image that is readable by Inkscape.

[Kevin Lynagh]

The problem is that your unify is not an only child.

In ClojureScript unify has the semantics of "make sure all of the children here are these data through this template fn", and what's happening is that Singult is trying to turn the rect into a g (to match the template).

This is nonsensical, which is why it's blowing up.

If you wrap the unify so it looks like

    [:g.devices (unify ...)]

you should be fine.

--
You received this message because you are subscribed to the Google Groups "C2-cljs" group.
To unsubscribe from this group, send email to c2-cljs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Kevin Lynagh
Keming Labs
http://keminglabs.com
888.502.1042

[Romain]

Great, that did it!
I did not entirely grok your answer though; are the semantics of unify explained somewhere?

Thanks ,

Romain

[Kevin Lynagh]

I did not entirely grok your answer though; are the semantics of unify explained somewhere?

Not quite, no.

You're not the first person that has had this issue with unify fighting with its siblings either, so it sounds like some additional docs (or descriptive error messages) are in order.

If you always wrap unify with a div or g (so that it's an only child) you'll be fine.