Four Js Development Tools Forum

Discussions by product => Genero BDL => Topic started by: Snorri B. on October 03, 2018, 06:28:52 pm


Title: SVG title
Post by: Snorri B. on October 03, 2018, 06:28:52 pm
Hi.
I'm playing a bit with the SVG library. i'm trying to add hovering text when the mouse is over an element. Google tells me I need to add the title element to my object, something like
Code
  1. <rect x="0" y="0" width="20" height="20">
  2. <title> Mytitle </title>
  3. </rect>
  4.  

How can I achieve this? I seems there is no helper function for adding this particular DOM element.

Regards,
-Snorri

Title: Re: SVG title
Post by: Sebastien F. on October 04, 2018, 09:25:21 am
Hi Snorry,

You are right we are missing a title() function in fglsvgcanvas.4gl library.

We will review this, thanks for the suggestion!

Quick workaround:

You need om.DomDocument.createChars() to create the text element for the title node, but the om.DomDocument object used by fglsvgcanvas is not exposed so you have to add this function in the lib:
Code
  1. FUNCTION getDocument()
  2.     CALL _check_canvas_id(current_canvas)
  3.     RETURN canvases[current_canvas].document
  4. END FUNCTION
  5.  

Then you can build the title node as follows:

Code
  1.     DEFINE doc om.DomDocument
  2.     DEFINE g, t, tt om.DomNode
  3.     ...
  4.     LET g = fglsvgcanvas.g( "clock" )
  5.     LET t = fglsvgcanvas.createElement("title",101)
  6.     LET doc = fglsvgcanvas.getDocument()
  7.     LET tt = doc.createChars("The text to be displayed")
  8.     CALL t.appendChild( tt )
  9.     CALL g.appendChild( t )
  10.     ...
  11.  

Seb

Title: Re: SVG title
Post by: Snorri B. on October 04, 2018, 01:04:23 pm
Thanks Seb.

The problem is that the rect object is a DomNode, not DomDocument. There is no CreateElement on DomNode. I need the title on the rect, is that possible?

Snorri.

Title: Re: SVG title
Post by: Snorri B. on October 04, 2018, 01:42:00 pm
Sorry Seb, I have this working now so please ignore my last post.

Thanks a lot for your help!

Regards,
-Snorri

Title: Re: SVG title
Post by: Reuben B. on October 05, 2018, 01:46:28 am
I think you can also do it without having to expose the DomDocument by using the @chars keyword for both node and attribute name of the text node

Code
  1. DEFINE n,tn,tc omDomNode
  2.  
  3.     LET tn = n.createChild("title")
  4.     LET tc = tn.createChild("@chars")
  5.     CALL tc.setAttribute("@chars", "Hover Text")

Title: Re: SVG title
Post by: Snorri B. on October 05, 2018, 11:27:31 am
Thanks Seb. This works like a charm. No need to hack the library :)

Cheers,
-Snorri

Title: Re: SVG title
Post by: Sebastien F. on October 05, 2018, 11:36:08 am
Last suggestion was from Reuben ;-)
Seb

Title: Re: SVG title
Post by: Snorri B. on October 05, 2018, 11:39:39 am
Thanks Reuben!

And have a nice weekend y'all.


Regards,
-Snorri

Title: Re: SVG title
Post by: Sebastien F. on October 05, 2018, 12:13:44 pm
Snorri,

You may also want to take a look at the demos we have on our Github:

https://github.com/FourjsGenero/fgl_svg_chart

Seb