Following my previous post on Interactive Trees in Blogs Using SVG, a number of people have signed-up to try the free utility for designing and generating their SVG trees.
These people have explored the possibilities and made valuable suggestions, including some with developer experience, and including one person running it under the WINE compatibility layer on a Mac (it was designed to run under Windows).
With the release of v3.0, the utility became a proper product rather than just a POC, and a number of enhancements and fixes were applied during the sub-releases of v3.0. These culminated in thumbnail images being supported in the browser output, and by the Tree Designer’s Edit-Person form, in v3.2.0.
An installation kit, documentation, and samples were placed in a Dropbox folder from where they can be downloaded by people who sign-up (either by contacting me via email, or from the right-hand panel of my blog).
The main purpose of this post is to announce the release of v4.0 of the utility, and to demonstrate a couple of the new features. The following is a summary of the new features, in roughly chronological order:
- Implemented 'id=' attributes on person-boxes so that they can be referenced by URLs and scrolled into view. This allows narrative text to reference specific person boxes in an SVG tree.
- Support for images and captions together in the Tree Designer person boxes, as per the browser output.
- Implemented multiple-selection of persons via Ctrl+Click operations. Affects interpretation of Copy-Person and Delete-Person operations.
- Implemented menu options to copy and paste persons or families (e.g. between different sessions).
- Include optional pan-zoom support for browser from external source. This allows the contents of specific SVG images to be panned and zooomed (see user guide).
- Changed border and text of empty boxes to feint grey to avoid them being too obtrusive.
- The Tree Designer’s window size and position are now saved and restored. It is no longer always maximized.
- Implemented zoom control in Tree Designer via menu options, and Ctrl/+ or Ctrl/- keystrokes (very similar to Web browsers).
- Added simple HTML toolbar to help with editing person and family notes.
- Implemented a RootKey parameter to emphasise the direct-line of a particular person up through ancestral generations.
The first example is a tree that includes both images and captions in each of the boxes. Tooltips are enabled if you let the mouse hover over a box or a family circle. The +/Reset/- control in the bottom-right corner shows that the Pan-Zoom code is active, and so you can navigate around the tree and magnify/shrink it. Also, clicking on a box expands the picture into a separate tab.
The second example shows a tree in the vertical orientation. This has the information panels enabled so clicking on a box or family circle will pop-up a panel with historical or biographical details below the tree — Ctrl+Click or Shift+Click on the boxes or circles will dismiss those panels. This tree also incorporates the Pan-Zoom code.
Notice that the panel for Mary Ashbee includes links to blog articles that mention her, as well as an image of her. Because such content is HTML-based then it can also include footnotes, tables, document scans, and more.
A larger example of Pan-Zoom that also incorporates the new direct-line RootKey feature may be found at Fieg & Sheehan Family, courtesy of Robert Fieg.
The user guide now has a section on “Using SVG in the Real World” since many sites have deliberately or neglectfully placed obstacles in the path of people who seriously want to use SVG.
Come and join the Facebook group: “SVG Family-Tree Generator”. Also, have a glance at the Timeline Example to get a better feel for the power and scope of this tool.