*Tree display html / website

The place to chat and put the world to rights
Post Reply
User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Tree display html / website

Post by Valkrider » 17 Dec 2017 17:38

I have been experimenting with an app from Tony Proctor that generates an SVG (Scalable Vector Graphic) image of a tree. The output from the app is available as a raw SVG file to be displayed on a web page / blog post or as an HTML file that can be incorporated into a website direct.

This is what a tree looks like from his app displayed on a webpage:
Screen Shot 2017-12-17 at 18.06.40.png
Screen Shot 2017-12-17 at 18.06.40.png (63.45 KiB) Viewed 5555 times
You can pan and zoom around the tree using your wheel mouse or the buttons shown. It is possible to have tooltips display on hovering over an individual or their marriage. Clicking on a person pops a new window up and that displays any notes (in a box below the tree) that you have put against that person .

You enter your data manually into the app to create a tree. Bearing in mind that we have this information already in our Family Historian project I have written a little online utility that takes a gedcom file and puts the first 15 people from the file into an output file suitable for loading straight in to the SVG app. I am working to extend this utility to allow more people / whole families to be imported. Needless to say it is best to work with a subset of your complete tree which is easily created as an export gedcom from Family Historian.

You can get the download details (free) from Tony by joining the SVG Family-Tree Generator Group on Facebook or by visiting his blog here and using the contact us link. The app is free.

You can convert a gedcom on my website here. Again the conversion is free.

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 17 Dec 2017 19:01

Colin, I have moved this to the General Forum as it is not pertinent to the User Group Forum that is about this website.

It looks interesting, could the converter be a Plugin?
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Re: Tree display html / website

Post by Valkrider » 17 Dec 2017 19:48

Sorry that is where I meant to put it I must have clicked the wrong one.

I doubt that it could be turned into a plugin unfortunately. Generating the input file probably could be BUT I don't have the LUA skills. My converter is written in php.

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 17 Dec 2017 20:06

Yes Colin, I was only thinking of converting a GEDCOM to the input file.
I've asked Tony Proctor for access to the Dropbox folder to view the documentation.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 18 Dec 2017 18:42

I had a very quick look at the SVG Utility.pdf and each Personal record appears to need (Col,Row) coordinates.
e.g. P JH=m(1,1):John Hammond (1791-1838)

It don't understand how those are easily created from a GEDCOM file.
How are you composing those Colin?
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Re: Tree display html / website

Post by Valkrider » 18 Dec 2017 21:13

Mike

I am using the FH record ID as the reference.

My utility is an early version that I am evolving and so I put all the entries in one row and just increment the column number and then rely on the user to move the individual into each row appropriately. I intend ultimately, when I sort out the Family record import, to create the row from the family number. So to put all individuals from one family on a row.

I can send you a copy of my php file if it would help.

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 18 Dec 2017 22:44

Yes, I can see how that would work if only a simple Ancestor Gedcom/Tree.
Although getting the column numbers in the right order for siblings might be challenging, and getting the row numbers correct for each generation is not straightforward, unless you build a tree data structure before allocating rows & columns.
All that would be much easier with a Plugin working on the FH tree data structures, because the family relationships are well defined, unlike the 'flat' Gedcom file.

Even a simple Descendants Gedcom/Tree gets quite complex if most siblings at most generations have spouses and children.

BUT what about the general case of something like an All Relatives Diagram?

I had expected that the SVG package would have designed the tree layout itself.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Re: Tree display html / website

Post by Valkrider » 19 Dec 2017 07:46

Mike

My understanding is that this app was designed for putting small segments of trees in blog posts / websites rather than something like the All Relatives Diagram.

Tony has been extending the functionality to include links to other 'trees' so each tree could be a couple of generations and link to other trees with ancestors / descendants in it.

It is not an automated process and relies on typing all the data in. Tony is not a family history programme user. I wanted to make the process easier for those of us who do use family history programmes. I think that it may be useful for people like me who do a surname study with lots of unconnected families in their database as it will allow the generation of a tree for each family island. It may be less useful for people only research their ancestors.

User avatar
ColeValleyGirl
Megastar
Posts: 1197
Joined: 28 Dec 2005 22:02
Family Historian: V6.2
Location: Cirencester, Gloucestershire
Contact:

Re: Tree display html / website

Post by ColeValleyGirl » 19 Dec 2017 07:48

Mike, I believe the stated purpose of the SVG tree generator is to produce diagrams of a few generations only (and perhaps not even all individuals from each generation, unless they're relevant to the article bing illustrated).

Perhaps aim for a few generations for an individuals -- children, spouses, parents and maybe grandparents -- a better version of the GEdMill trees?

[Colin: Tony has written his own data model for Family/MicroHistory --
see http://www.familyhistorydata.parallaxview.co -- so I don't think you can characterise him as 'not a Family History Programme User' -- I think he has his own programme that utilises his data model.]

User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Re: Tree display html / website

Post by Valkrider » 19 Dec 2017 08:50

Helen

I should have said Tony does not use a traditional family history programme. His SVG app is part of his overall strategy and fits with his data model.

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 19 Dec 2017 18:45

If as you say SVG is only intended for such simple trees it is even more surprising that it does not arrange the tree boxes automatically.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Re: Tree display html / website

Post by Valkrider » 19 Dec 2017 20:23

Mike

It was never intended to take an input file. It was intended for the creation from scratch with typing in the information that you require. It was me (and several others) that wanted to short circuit it by automatically importing data that was stored elsewhere. Tony had never intended it to be used like this and so that was not built in, you create the tree in the SVG design window:
Screen Shot 2017-12-19 at 21.19.28.png
Screen Shot 2017-12-19 at 21.19.28.png (85.04 KiB) Viewed 5378 times
Clicking on one of the boxes opens a menu where you can add / edit a person:
Screen Shot 2017-12-19 at 21.20.43.png
Screen Shot 2017-12-19 at 21.20.43.png (66.54 KiB) Viewed 5378 times
What my gedcom converter is doing is to create this person entity and it just saves entering the information.

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 19 Dec 2017 20:36

That was not my impression from the SVG Utility.pdf documentation that seems to suggest that you can start with the text file to define Persons and Families.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Re: Tree display html / website

Post by Valkrider » 19 Dec 2017 21:24

Well you certainly could but you will have to enter the data into it manually. That is all I am doing automatically from the gedcom.

ACProctor
Gold
Posts: 19
Joined: 15 Jan 2018 12:51
Family Historian: V6

Re: Tree display html / website

Post by ACProctor » 15 Jan 2018 13:03

I have to add some comments here, just for the record. While it's true that the SVG Family-Tree Generator was originally designed to produce clean and crisp visualisations to accompany narrative reports, it's since evolved far beyond that. The number of individuals, generations, and families has increased dramatically.

With the addition of extra buttons, custom programmer data, and auto-generated navigational data (i.e. for code to find details of relationships and tree connections), the emphasis of this utility has shifted to that of SVG UIs for custom applications, such as the timeline example at https://parallaxview.neocities.org/SVGc ... ample.html.

The beauty of capturing the design and details of a tree in the textual definition file used by the utility is that its appearance and configuration can be changed with a few clicks.

As Colin stated, I have an independent data model (STEMMA) and so I'm not really a FH user, but this utility is independent of that model. More complete details of it, including instructional videos, can be found on the "SVG Family-Tree Generator" FB group.

Tony Proctor

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 15 Jan 2018 14:20

Thank you for that feedback Tony.
To be clear, nothing in this discussion is specifically related to FH.

What I intended was that a Plugin written for FH could automatically create the SVG txt file with Person Records and Family Records for a designated family group. The Plugin would simply take details from FH and create the SVG compatible txt file in accordance with the SVG Utily.pdf specification. So any FH specifics are excluded.

Since that defines the relationships between the individuals, I had hoped that SVG would be able to arrange the boxes into family generations automatically, but that seems not to be the case. That box organisation either has to be synthesised by my Plugin, or performed manually using the SVG editing features.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
Valkrider
Megastar
Posts: 1038
Joined: 04 Jun 2012 19:03
Family Historian: V6.2
Location: Spain
Contact:

Re: Tree display html / website

Post by Valkrider » 15 Jan 2018 14:42

@Mike

I create the SVG row and column settings in my converter. It is pretty easy to do programatically (in PHP for me). But the user can then shift them around if they want to in Tony's app.

I have extended the range of what my converter does and aim to extend it further in the near future.

ACProctor
Gold
Posts: 19
Joined: 15 Jan 2018 12:51
Family Historian: V6

Re: Tree display html / website

Post by ACProctor » 15 Jan 2018 15:30

Mike, I'm more than happy to help with the generation of the textual 'tree definition file'. When my utility copy-and-pastes families (either in the same same session or across different ones) then I have the same issue as you and Colin. I simply put the parents side-by-side at the paste point, and then all their direct children on the line below -- I think Colin will be doing something similar. This shortcut is based on the fact that users can drag boxes around with the mouse in the utility, and forge new parent-child links with the mouse also. Hence, I didn't want to spend too much effort in doing something that the end-user may be overriding.

Tony

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 15 Jan 2018 21:08

Tony, I understand where you are coming from, but when the user already has a family tree defined in their genealogy product (such as FH) then they won't usually be forging new parent-child links in SVG. The paradox is that with a simple one generation parents & children tree the allocation of rows & columns is trivial, but a sightly more complex tree becomes non-trivial very quickly, and that paradox is true whether done automatically or manually.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

ACProctor
Gold
Posts: 19
Joined: 15 Jan 2018 12:51
Family Historian: V6

Re: Tree display html / website

Post by ACProctor » 15 Jan 2018 21:56

Does the plug-in interface give you the current FH configuration, Mike?

Tony

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 15 Jan 2018 22:21

Yes, FH Plugins are fully programmable, can extract all data from the FH database, and can create files with virtually any format, so a textual 'tree definition file' is quite straightforward to create with Person Records and Family Records where each entry is derived from FH records for Individuals and Families. That is effectively what Colin is already doing but using PHP instead of a Plugin.

But I think a Plugin would be more acceptable to the FH user community, and had hoped SVG could fill a gap in the FH features and produce small family trees for inclusion in website pages. If so, then that could be built into an existing Plugin that adds features to standard FH created websites.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

ACProctor
Gold
Posts: 19
Joined: 15 Jan 2018 12:51
Family Historian: V6

Re: Tree display html / website

Post by ACProctor » 15 Jan 2018 22:33

We might be at cross-purposes here Mike. By "configuration", I mean the layout of the boxes in the tree. Colin is using PHP to import GEDCOM data, but that contains no tree "coordinates". Does the FH plug-in interface give any type of coordinates?

User avatar
tatewise
Megastar
Posts: 16192
Joined: 25 May 2010 11:00
Family Historian: V6.2
Location: Torbay, Devon, UK
Contact:

Re: Tree display html / website

Post by tatewise » 16 Jan 2018 09:50

No, the Plugin is effectively working from similar GEDCOM data as Colin.

In FH there are many ways of presenting family tree diagrams: Ancestors only, Descendants only, All Relatives, etc, and oriented top-down, left-right, etc, and with any person as the focus for the tree root. So there is no unique set of tree co-ordinates that applies to any family group, and Plugins do not have access to any of the tree building features. The missing feature is the ability to produce small family trees automatically for use in web pages, where each page is focussed on a small family group. FH produces the web pages, but not the mini-trees, and I had hoped SVG could fill that gap.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

ACProctor
Gold
Posts: 19
Joined: 15 Jan 2018 12:51
Family Historian: V6

Re: Tree display html / website

Post by ACProctor » 16 Jan 2018 10:02

I did think about adding a "layout" button to organise the boxes algorithmically, and most cases would be fairly straightforward, but if trees include in-laws or pedigree-collapse (and I have seen examples done with this utility) then it got a bit messy.

I'll have another think.

Tony

ACProctor
Gold
Posts: 19
Joined: 15 Jan 2018 12:51
Family Historian: V6

Re: Tree display html / website

Post by ACProctor » 26 Jan 2018 10:39

ACProctor wrote:I'll have another think.
OK, the next version have an auto-layout option, also accessible by a command-line option

Tony

Post Reply