[Caml-list] js_of_ocaml and <svg>

[Caml-list] js_of_ocaml and <svg>

[rixed]

Hello!

It seems that it's currently imposible due to typing restrictions to create an
SVG element into an HTML document.
I'm thinking about using js_of_ocaml without tyxml, calling unsafe JS to
generate whatever element I want.  Is there a better workaround?

Re: [Caml-list] js_of_ocaml and <svg>

[Philippe Veber]

[-- Attachment #1: Type: text/plain, Size: 870 bytes --]

Hi!

What makes you think that? How about this:

$ rlwrap ocaml
        OCaml version 4.02.3

# #use "topfind";;
- : unit = ()
[...]
# #require "tyxml";;
[...]
# open Html5.M;;
# html (head (title (pcdata "")) []) (body [svg [Svg.M.rect []]]);;
- : [> `Html ] Html5.M.elt = <abstr>


Hope this helps,
  ph.

2016-01-02 18:43 GMT+01:00 <rixed@happyleptic.org>:

> Hello!
>
> It seems that it's currently imposible due to typing restrictions to
> create an
> SVG element into an HTML document.
> I'm thinking about using js_of_ocaml without tyxml, calling unsafe JS to
> generate whatever element I want.  Is there a better workaround?
>
>
> --
> Caml-list mailing list.  Subscription management and archives:
> https://sympa.inria.fr/sympa/arc/caml-list
> Beginner's list: http://groups.yahoo.com/group/ocaml_beginners
> Bug reports: http://caml.inria.fr/bin/caml-bugs
>

[-- Attachment #2: Type: text/html, Size: 1690 bytes --]

Re: [Caml-list] js_of_ocaml and <svg>

[rixed]

Indeed TyXML can generate XHTML trees with svg elements.
But how to use that to update the DOM from JS generated by js_of_ocaml?

# echo > toto.ml <<EOF
let svg = Dom_svg.createSvg Dom_html.window##document
EOF
# ocamlfind ocamlc -syntax camlp4o -package "js_of_ocaml js_of_ocaml.syntax" -c toto.ml
Error: This expression has type Dom_html.document Js.t
       but an expression was expected of type Dom_svg.document Js.t
       Type
         Dom_html.document = (... yanked for sanity ...)
       is not compatible with type
         Dom_svg.document = (... yum yum ...)
       The second object type has no method anchors

Apparently that's a known issue of js_of_ocaml:
https://github.com/ocsigen/js_of_ocaml/issues/276

that I don't know how to work around nicely, may be because I have no idea how
js_of_ocaml interacts with tyxml. I guess you are the pveber of that discussion
so probably you can shed some light on this?

Re: [Caml-list] js_of_ocaml and <svg>

[Spiros Eliopoulos]

[-- Attachment #1: Type: text/plain, Size: 246 bytes --]

Inserting a cast solves the type error:

$ echo > toto.ml <<EOF
let svg = Dom_svg.createSvg (Dom_html.window##document :> Dom_svg.document)
> EOF
$ ocamlfind ocamlc -syntax camlp4o -package "js_of_ocaml
js_of_ocaml.syntax" -c toto.ml
$ echo $?
0

[-- Attachment #2: Type: text/html, Size: 633 bytes --]

Re: [Caml-list] js_of_ocaml and <svg>

[Spiros Eliopoulos]

[-- Attachment #1: Type: text/plain, Size: 656 bytes --]

Scratch that, had the wrong code in the file.

Another way to get around all this is to use ocaml-d3:

  https://github.com/seliopou/ocaml-d3

This will give you a nice (and type-safe) API to make data-driven
interfaces, D3.s setups up all the basic xml namespaces for you so you
don't have to fight with that.

On Sat, Jan 2, 2016 at 3:53 PM, Spiros Eliopoulos <seliopou@gmail.com>
wrote:

> Inserting a cast solves the type error:
>
> $ echo > toto.ml <<EOF
> let svg = Dom_svg.createSvg (Dom_html.window##document :> Dom_svg.document)
> > EOF
> $ ocamlfind ocamlc -syntax camlp4o -package "js_of_ocaml
> js_of_ocaml.syntax" -c toto.ml
> $ echo $?
> 0
>

[-- Attachment #2: Type: text/html, Size: 1478 bytes --]

Re: [Caml-list] js_of_ocaml and <svg>

[Drup]

Indeed, It seems we are missing a Dom_svg.document function. Could you 
please open a bug report ?

However, in this case, you should use Tyxml_js. The code is going to be 
exactly the same as the one with normal tyxml, except the module is 
Tyxml_js.Html5.
You can see a complete example here: 
https://github.com/talex5/js-skeleton/blob/master/main.ml

Le 02/01/2016 21:42, rixed@happyleptic.org a écrit :
> Indeed TyXML can generate XHTML trees with svg elements.
> But how to use that to update the DOM from JS generated by js_of_ocaml?
>
> # echo > toto.ml <<EOF
> let svg = Dom_svg.createSvg Dom_html.window##document
> EOF
> # ocamlfind ocamlc -syntax camlp4o -package "js_of_ocaml js_of_ocaml.syntax" -c toto.ml
> Error: This expression has type Dom_html.document Js.t
>         but an expression was expected of type Dom_svg.document Js.t
>         Type
>           Dom_html.document = (... yanked for sanity ...)
>         is not compatible with type
>           Dom_svg.document = (... yum yum ...)
>         The second object type has no method anchors
>
> Apparently that's a known issue of js_of_ocaml:
> https://github.com/ocsigen/js_of_ocaml/issues/276
>
> that I don't know how to work around nicely, may be because I have no idea how
> js_of_ocaml interacts with tyxml. I guess you are the pveber of that discussion
> so probably you can shed some light on this?
>

Re: [Caml-list] js_of_ocaml and <svg>

[Philippe Veber]

[-- Attachment #1: Type: text/plain, Size: 1399 bytes --]

Drup provided the easiest answer, that is using Tyxml_js. In particular it
provides a functional (reactive) API to update the DOM, which is a lot
better than using the [createElement] functions. Also, using
[Dom_svg.document] here is not appropriate since you want the SVG fragment
to be embedded in HTML. This function should be used when the whole
document is an SVG.

2016-01-02 21:42 GMT+01:00 <rixed@happyleptic.org>:

> Indeed TyXML can generate XHTML trees with svg elements.
> But how to use that to update the DOM from JS generated by js_of_ocaml?
>
> # echo > toto.ml <<EOF
> let svg = Dom_svg.createSvg Dom_html.window##document
> EOF
> # ocamlfind ocamlc -syntax camlp4o -package "js_of_ocaml
> js_of_ocaml.syntax" -c toto.ml
> Error: This expression has type Dom_html.document Js.t
>        but an expression was expected of type Dom_svg.document Js.t
>        Type
>          Dom_html.document = (... yanked for sanity ...)
>        is not compatible with type
>          Dom_svg.document = (... yum yum ...)
>        The second object type has no method anchors
>
> Apparently that's a known issue of js_of_ocaml:
> https://github.com/ocsigen/js_of_ocaml/issues/276
>
> that I don't know how to work around nicely, may be because I have no idea
> how
> js_of_ocaml interacts with tyxml. I guess you are the pveber of that
> discussion
> so probably you can shed some light on this?
>

[-- Attachment #2: Type: text/html, Size: 2032 bytes --]