Monday, 2 October 2017

More on SVG Family Trees

 

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 faint 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.

 

One of the features I especially want to present is the Pan-Zoom feature. This uses open-source Javascript code to allow a user to navigate around a specific SVG tree image. It eliminates the need for both clunky scrollbars and the standard browser zoom support, which affects the whole page.

 

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.

 

Generated by Parallax View's SVG Family-Tree Generator V5.1.4. See https://parallax-viewpoint.blogspot.com/2018/09/svg-family-tree-generator-v50.html Married 2 Oct 1858 at Nottingham St Nicholas. married 21 Nov 1872 at Gloucester St Catharine. Married 29 Nov 1891 at Nottingham Emmanuel. b. 1833 in Nottingham; Bpt: 20 Jan 1833 at St. Mary's, Nottingham. d. 1910 in Nottingham aged 77. Bur: Church Cemetery, Nottingham., common grave 8123 in St Ann's Valley, on 24 May 1910. Henry Proctor b. 1833 in Nottingham; Bpt: 20 Jan 1833 at St. Mary's, Nottingham. d. 1910 in Nottingham aged 77. Bur: Church Cemetery, Nottingham., common grave 8123 in St Ann's Valley, on 24 May 1910. b. 1834 in Maidstone, Kent. d. 1905 in Nottingham. Elizabeth Turton b. 1834 in Maidstone, Kent. d. 1905 in Nottingham. b. c1833 in Bishops Cleeve, Gloucestershire. Licensed victualler at Worcester Arms, Worcester St, Cheltenham. d. 1883 in Cheltenham. William Stanton b. c1833 in Bishops Cleeve, Gloucestershire. Licensed victualler at Worcester Arms, Worcester St, Cheltenham. d. 1883 in Cheltenham. b. 1834 in Tetbury, Gloucestershire. d. 22 Apr 1924 at 59 Norland Rd, Nottingham. Emma J. Ashbee b. 1834 in Tetbury, Gloucestershire. d. 22 Apr 1924 at 59 Norland Rd, Nottingham. b. 21 Apr 1870 in Nottingham. d. 12 Dec 1950 aged 80. Addr: 33 Young St. Bur: 15 Dec 1950 at Wilford Hill. Gr: G34/51. William H. Proctor b. 21 Apr 1870 in Nottingham. d. 12 Dec 1950 aged 80. Addr: 33 Young St. Bur: 15 Dec 1950 at Wilford Hill. Gr: G34/51. b. 1873 in Cheltenham, Gloucestershire. d. 10 Jun 1956 in Nottingham. Bur: 13 Jun 1956 at Wilford Hill. Gr: G34/51. Annie E. I. Stanton b. 1873 in Cheltenham, Gloucestershire. d. 10 Jun 1956 in Nottingham. Bur: 13 Jun 1956 at Wilford Hill. Gr: G34/51.

 

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.

 

Generated by Parallax View's SVG Family-Tree Generator V5.1.4. See https://parallax-viewpoint.blogspot.com/2018/09/svg-family-tree-generator-v50.html William Ashbee (1803–1870) Ann Hayward (1801–1869) Thomas Ashbee (1826–1891) John Ashbee (1831–1912) Emma Jane Ashbee (1834–1924) William Stanton (1833–?) Mary Sandford (1834–1871) William Ashbee (1836–1907) Mary Ann Hale (1844–1890) Annie Emma Isabel Stanton (1873–1956) William Henry Proctor (1870–1950) Helenor Gertrude Norton (1868–1902) William Henry Ashbee (1866–1922) Evelyn A. Graham (1884–1918) Mary Phyllis Ashbee (1905–1984) Evelyn Ashbee (1909–1997) Patricia Ann Ashbee (1910–1973)


 

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 tool to generate these trees is now freely shared with the genealogy blogging community. Since the time of writing, it has undergone many improvements, including thumbnail images and searchable photos. See SVG-FTG Summary.

14 comments:

  1. Hi Tony,

    I am hoping to create a tree on my website where I can transfer all the info I have accumulated in Ancestry.com as when I die my membership will die with me. I am looking at Google Charts and wonder if your solution would be better. I therefore need to decide which solution I should spend my (limited) time on.

    In any event I congratulate you on your wonderful achievement in this area and your willingness to share your vast knowledge. BTW I too live in rural Ireland, County Mayo and wonder where you might be.

    Many Thanks,

    Pat

    ReplyDelete
    Replies
    1. Hi Pat. Apologies for the delay -- I'm in UK visiting family at the moment. Have you read the latest article on this SVG tool: https://parallax-viewpoint.blogspot.com/2018/09/svg-family-tree-generator-v50.html ? It has some nice examples that demonstrate the scrolling/zoom features, and the Timeline support.

      There are pros-and-cons for using this:

      Pros:
      1) It's free
      2) It's not tied to anyone's database or proprietary technology
      3) It has a lot features that you can take advantage of later, e.g. visual tweaks and the Timeline support
      4) You don't even need to publish stuff online. I have one user who emails his files to his relatives and they can launch them on their own machines, without the world being able to see them
      Cons:
      1) You may need to manually split your tree into separate views

      With the online trees such as Ancestry, they show you a little at a time and you have to navigate from one person to another in order to see more. With my SVG trees, it will try and show all of what you've specified at once. This means that its layout tools have to jump through hoops to make a complex tree (e.g. with in-laws as well) look pretty.

      I may provide some help in this direction one day but at the moment it has to be manual. Any suggestions would be welcomed.

      Tony (Co. Waterford)

      Delete
    2. Hi Tony,

      Thanks for your prompt and thorough reply. I spent yesterday watching a Lynda.com tutorial on Javascript trying to understand the Google Charts JS code so that I can adapt it to my tree. Talk about TMI .... Today I am using W3 Schools web site to try to pick out the JS commands and functions I will need to customize the Google JS code.

      I will then turn to your solution and compare. The thing that drives me towards the Google Charts is the access to the code. I assume that your solution is compiled and that the code is not accessible, but maybe not as I have not yet spent time on it. I will keep you informed.

      With much appreciation,

      Pat (Co. Mayo)



      Delete
    3. No, the code is completely accessible, Pat. Once you have laid out your tree exactly as you want it, and added any notes and pictures, then the 'Process' button converts everything to a combination of standard HTML, SVG, JavaScript, and CSS (the precise combination depends on what options you selected). All that code is accessible, and you can email to people or publish it on your own Web site. It's then yours to do with as you wish. Of course, it's best to keep the saved *.txt file with your layout and options in because you can use that to make tweaks and re-generate new versions of all those files.

      P.S. There's a Facebook group for this with the same name as the product. Its main feature is a selection of videos with me droning on about how to use various parts of it :-)

      Delete
    4. Wonderful! Then I will get busy and learn all about it. Thanks again - Pat.

      Delete
    5. Hi Tony,

      I just viewed ALL 9 of your videos! I cant't wait to create my own tree and start learning what your fantastic program can do.

      Pat

      Delete
  2. Sorry to bug you but don't I need a Dropbox link to download and install? Also you invite us to contact you by email but I have not been able to find it. Thanks.

    ReplyDelete
    Replies
    1. The link is mentioned in the latest article about this program Pat (the one I mentioned above), and also in the announcement section of the Facebook group. Let me know if you still cannot see. The best way to reach me, if you don't want to put a public post in the Facebook group, is the 'Contact me' form in the right-hand side-panel of my blog. That will send me an email and we can carry on with email exchanges as necessary. When people have got a bit stuck, or found a problem, then I have accepted copies of their files to try and diagnose what's wrong, and even had screen-sharing sessions (usually with Skype) to help explain things better. So ... lots of options.

      Delete
  3. Thanks for the Dropbox link. It worked. I will now do the install. BTW I had already checked in the most recent article, it was named "Whitwick Historical Group", but did not find any Dropbox link, perhaps I missed it. I checked again same result. What am I missing here?

    ReplyDelete
    Replies
    1. I think you've misunderstood, Pat. What I said was "Have you read the latest article on this SVG tool: https://parallax-viewpoint.blogspot.com/2018/09/svg-family-tree-generator-v50.html ..." so I didn't mean just the very latest but the latest one specifically about the SVG tool, and gave the link to it. :-)

      Delete
  4. Hi, Tony.
    I really appreciate your archive. It's very helpful.
    But I'm a newbie to program, some word that are deeper than my thought and my practical. Do you have videos to introduce and conduct to implement and use library to create own chart??
    Thank you.
    DangNam

    ReplyDelete
    Replies
    1. Hello DangNam. There is a newer blog post that you should read, at https://parallax-viewpoint.blogspot.com/2018/09/svg-family-tree-generator-v50.html. It contains a link to a Dropbox folder containing code and PDF documentation. It also mentions a facebook group where there are helpful videos available. There is no "library". The code includes a Windows program that allows you to design your tree with a mouse. It also loads GEDCOM files. The output from the designer is the code to run in your browser (HTML, SVG, CSS, JavaScript). The output will work in all modern browsers, and on non-Windows machines. Let me know if I can help more.

      Delete
  5. I wanted to use it to make a academic tree and It failed, because It is really a family tree software demading two parents. Sorry, It was my fault.

    ReplyDelete
  6. Let me know if I can help. There's instructional videos, a support group on FB, and more blog posts. A summary page can be found at https://parallaxviewpoint.com/SVG-FTG/

    ReplyDelete