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.
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.
William Ashbee was born c1803 in Hillsley, Gloucestershire, England,
and died 14 Jan 1870 at 2 York Cottages, Grosvenor Terrace, Cheltenham, of 'Disease of the heart'.
William was originally a baker and grocer but tried to get into publishing. In 1868, he fell foul of a copyright
case that proved to be important for later digital data and databases. This case bankrupted him and he died
shortly after.
Ann, or "Annie", was born c1801 in Westonbirt, Gloucestershire, England,
and died 29 Nov 1869 at 30 Smith Terrace, Chelsea, of 'Asthma, disease of the heart, many years'.
Thomas Ashbee was born c1826 in Tetbury, Gloucestershire, and died 1891 in the same county. He was a tin worker and
this contributed to a dementia causing him to be described as an 'imbecile' in the 1891 census. He was married twice
during his life.
John Ashbee was born c1831 in Westonbirt, Tetbury, and died 22 Apr 1912 at 67 Ringford Road, Wansworth, London.
Emma Jane Ashbee (later Stanton) was born c1834 in Tetbury, Gloucestershire, and died 22 Apr 1924 (same date as her father) at 59
Norland Road, Nottingham.
William Stanton was born c1833 in Bishops Cleeve, Gloucestershire. Death uncertain. Possibly in Bicester, Oxfordshire, in 1924.
Mary Sandford was born c1834 in Berkeley, Gloucestershire, and died 1871 in Cheltenham, Gloucestershire.
William Ashbee was born 29 Nov 1836 in Tetbury, Gloucestershire, and died 24 Jan 1907 at 48 Cannon Street, Glasshoughton, West Yorkshire.
Mary Ann Hale was born c1844 in Middlesex, and died c1890 in Islington, London.
Annie Emma Isabel Stanton was born in 1873 in Cheltenham, Gloucestershire, and died 1956 in Nottingham.
William Henry Proctor was born 21 Apr 1870 in Nottingham, and died 12 Dec 1950 in Nottingham.
Helenor Gertrude Norton was born c1868 in Leeds, and died 7 Dec 1902 at 55 Pemberton Street, Shelford, Barton-upon-Irwell, Lancashire, aged 35,
of 'pulmonary tuberculosis 10 months, exhaustion'.
Following the reading of the banns on 18 Jun 1825, William Ashbee married Ann Hayward in the parish of Westonbirt,
Gloucestershire, England.
William Stanton married Mary Sandford in c1856 in Cheltenham. They had three children.
After the death of his first wife, William Stanton married Emma Jane Ashbee on 21 Nov 1872 at Gloucester St. Catharine.
They had three children.
William Ashbee married Mary Ann Hale in Holborn, London, in c1866.
They had eight children.
William Henry Proctor married Annie Emma Isabel Stanton at Nottingham Emmanuel on 29 Nov 1891.
They had eleven children.
William Henry Ashbee married Helenor Gertrude Norton in Chorlton, Lancashire, in 1893. There were no children.
After the death of his first wife, William Henry Ashbee married Evelyn A. Graham at Sale St. Anne, Chester, on 1 Aug 1904.
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.
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.
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.
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.
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 :-)
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.
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.
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?
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. :-)
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
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.
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/
Hi Tony,
ReplyDeleteI 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
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.
DeleteThere 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)
Hi Tony,
DeleteThanks 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)
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.
DeleteP.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 :-)
Wonderful! Then I will get busy and learn all about it. Thanks again - Pat.
DeleteHi Tony,
DeleteI 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
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.
ReplyDeleteThe 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.
DeleteThanks 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?
ReplyDeleteI 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. :-)
DeleteHi, Tony.
ReplyDeleteI 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
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.
DeleteI 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.
ReplyDeleteLet 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