Apache Velocity for SVG

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

In our experiment on using Bluemix, we’ve created a crowd sourced knowledge repository of concept maps at conceptmaps.info.

One of the feature that was designed from the beginning was the ability to have automatically generated image from third party knowledge sources, as Wikipedia.

As proof of concept we’ve created a simple mechanism working off Wikipedia. The description of a page as returned from their API is very complex especially as we were more interested to the relationship of the page with other content, not just the knowledge contained by itself. As proof of concept we’ve created a simple mechanism:

  1. using the Wikipedia API we get the content of the page
  2. we extract the “see also” links
  3. we follow each link and get an abstract of the page
  4. we create a dynamic map containing the links and the extract as description of each topic

The result is a simpler version of the more complex Wikipedia knowledge, and while basic is easy to understand and easier to navigate. We used a Wikipedia-like palette for the colours and added a modified version of our logo in which one part of it is replaced by the wiki logo to make clear where the content comes from – including the appropriate sourcing link on the bottom on the page, as required form the Wikipedia guidelines on using their content.

Auto generated map on concept map.


To create such a dynamic map, we started creating a base version of the above sample image in SVG, with empty content. Since an SVG is also XML it was easy to modify and convert into a Velocity template: we used this generic empty image as our template, adding some logic in it to handle variable number of boxes and then adding all the necessary placeholders to hold the content.

Again logic implemented is very basic, the dynamic parts are:

  • number of topic and related content
  • size of the font of the text in the boxes
  • number of boxes and arrows ( 1 – 6 )

Since in conceptmaps.info the navigation and user interaction on a map is governed by JavaScript using a json descriptor, we had to generate that descriptor as well.

Dynamic logic in the templates

Font size

The size of the font is calculated to maintain the readability and the format of the image, without having to modify the boxes. Changing the size is needed because, being generated from an outside source, we had to handle some very long text, as in this map about naturally processed languages.

Here is the control logic we used:

#define( $fontsize )
#if ( $linksize >= 15 && $linksize < 20 )
#elseif ($linksize >= 20)

The linksize var is set at the beginning of the template like so:

#set ($linksize = $wiki.getLink(0).length())

Then the fontsize “function” is called like a normal variable:

<div xmlns="http://www.w3.org/1999/xhtml" style="display: inline-block; font-size: $fontsize; ">
 <div xmlns="http://www.w3.org/1999/xhtml" style="display:inline-block;text-align:inherit;text-decoration:inherit;">$wiki.getLink(0)</div>

With this simple trick the image looks good even if the link is quite long and wouldn’t fit nicely in the box.

Dynamic adapt number of boxes and arrows

The map contains multiple boxes, one each topic, so we had to cull out from the image the boxes and link that weren’t in use. We do this in a specific order, so that the map looks ‘balanced’ visually.

Again the logic behind this is quite simple, just an if statement based on the number of links contained in the object passed in the context that guards each and every box:

#if ($wiki.getLinksSize() > 1 || $debug)

An interesting strategy we needed was to use a $debug variable, used to have them all displayed… Because at easy as it seems, it was quite difficult to correlate arrows and boxes from the SVG transformation alone, as when it got out of the editor we used the shapes were all over the xml in random order: we had to restructure the SVG into separate part, ordering and grouping together arrows and boxes.

Final thoughts

In this article we’ve briefly described how to use the velocity template engine, to create dynamic images, using the svg format, which is a very powerful and flexible image format.

To learn more about svg why not look at the svg map itself, dynamically generated on conceptmap.info using the tools described in this article 🙂


Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *