Website Tree Diagrams with Hyperlinks

ississi · Post by **ississi** » 07 Nov 2021 09:54

Thanks, Colin, good to know.

Post by **tatewise** » 15 Nov 2021 13:02

I've continued to review the options with this topic and my Improve Website or CD DVD HTML plugin.

The GEDmill Settings... tab for Tree Diagrams offers 'Conserve tree width' that reduces the width of trees by about 30%.
I realise that is still not ideal for small screens but it helps.

I believe we are focussing on the Publish > Websites & Family Tree CD/DVDs... command wizard.
The options provided by that dialogue pose a challenge to any tree diagram construction process...
In Step 1: Choose Privacy Options, details such as Life Dates and even entire Individual records can be excluded.
In Step 2: Select Featured Individuals, entire Individual records can also be excluded.
Any tree diagram construction process must honour those options that are held in the Settings.fha file.
However, I have failed to read that file from within a plugin and its format is private to CP.
So it seems the only solution is similar to Exporting a Family Tree with/without Media using the Export > GEDCOM File... command or creating a Project Copy and applying the Split Tree Helper and Clean Living Persons plugin before using the Publish > Websites & Family Tree CD/DVDs... command wizard without any Step 1 or Step 2 filtering. Then the tree diagram construction process can operate on the customised GEDCOM knowing that it is compatible with the generated HTML files.

Post by **ColeValleyGirl** » 15 Nov 2021 13:23

Yes, my outline process when I was stitching GedMill diagrams into FH pages (using JavaScript) was:

Anonymise a copy of my Project (remove individuals and/or details about individuals that I don't want to publish) -- as you say, using the Split Tree Helper and Clean Living Persons.
Generate web pages for all individuals from the copy Project/GEDCom using FH and GEDMill
Combine the output from FH and GEDmill

It was the only way I found to make sure I didn't inadvertently reveal Private/Living individuals in the minitrees, or have any mismatch between te individuals in the FH website and the individuals in the GedMill diagrams.

Even if we could read the .fha file, GEDMill couldn't, so there's always be a chance of a mistmatch that way.

Post by **tatewise** » 15 Nov 2021 13:33

I wasn't thinking specifically of GEDmill but any tree diagram construction process such as SVG that similarly are unlikely to be able to interpret the Settings.fha file. Therefore, the process will be similar to what you just described.

Post by **tatewise** » 18 Nov 2021 18:08

The Improve Website or CD DVD HTML plugin Version 3.2 Date 18 Nov 2021 is now in the Plugin Store and has the ability to add GEDmill family tree diagrams to web pages created by the Publish > Websites & Family Tree CD/DVDs… wizard.
I recognise it is not ideal but is better than nothing until an SVG/FTG solution is available!

ACProctor · Post by **ACProctor** » 03 Dec 2021 13:22

Heh folks! Just let me know if there's anything I can do to make SVG-FTG workable for your plug-ins. The output and the way the output works is already open, and well documented, but this is not the same as being able to convert an FH tree snippet to some SVG/HTML combination.

I am happy to engage in a conversation about this, and do some considerable work on my side to meet your requirements in the middle.

Tony

Post by **ColeValleyGirl** » 03 Dec 2021 13:35

Tony, Mike: I would love for this to happen!

ACProctor · Post by **ACProctor** » 03 Dec 2021 14:29

I need a clearer picture of how you both see this working. SVG-FTG is currently an interactive designer, the output of which is compiled into SVG, etc.

I suppose an email conversation would be best, unless I can find an RSS feed for this forum.

Post by **tatewise** » 03 Dec 2021 15:20

I think a Forum discussion here is best so that all interested parties can influence the direction of travel.

Earlier, Helen suggested her ideal solution:

Would not require the user to run two separate programs (and so require them to manually co-ordinate the selection of images, and colour settings, etc.)
Would cater for a variety of Primary page types (although clearly it isn't feasible to cater for them all).
Would not dominate the Primary pages (which might push us down the line of vertical trees and/or pop-over trees that appear when you click on an icon, as large families/horizontally oriented trees such as GedMill produces can result in very wide pages (or possibly scroll bars on the tree.)
Will produce trees that work on a wide variety of websites -- so html, css and js only.

IMO there is a need for vertical trees such as illustrated here as well as horizontal trees shown here.

There have been suggestions for small 3 generation family group trees for each personal report page as identified above, and much larger multi-generation trees acting as a kind of index. Both would have a hyperlink URL associated with each tree box that links to a report page for the associated person.

Assuming the SVG generator was invoked from a Plugin such as the Improve Website or CD DVD HTML plugin, then SVG needs some form of API or command line dialogue to supply filepath and option parameters entered by the user via the Plugin.

ACProctor · Post by **ACProctor** » 03 Dec 2021 15:32

Maybe I'm missing something, Mike. "html, css and js only" would mean no SVG.

The current SVG-FTG output is tested under Firefox, Chrome, Edge, and even IE11. I have been assured that it works on the Mac too.

Re: the scrollbar problem, although I can generate scrollable trees, the preferred output uses the PanZoom library, which means very big trees will always fit in the viewport and can be panned or zoomed in/out interactively. If you haven't used SVG-FTG then I may have to demonstrate some of this stuff so that we're speaking the same language.

Post by **ColeValleyGirl** » 03 Dec 2021 15:44

I'd be delighted with SVG as an option (my first preference)! My previous responses assumed that Mike could not provide it within his plugin. (If that remains the case, I can hope for instructions for a 2-stage solution).

Scrolling vertically is always easier than scrolling horizontally.

Perhaps Mike needs to familiarise himself with SVG-FTG before we continue this discussion.

Post by **tatewise** » 03 Dec 2021 16:34

I did install SVG-FTG V6.0 a while ago and tried running it again today.
As you say, it is very user interactive, so very different from GEDmill.
It would seem to need a great deal of effort to create a set of small 3 generation family trees for an entire Project.
Even creating one or two large trees for a Project and keeping them up-to-date is quite daunting.

I tried to find the SVG-FTG V6.1 download from your blog and facebook pages, but sorry I failed.
Had to revert to FHUG KB SVG Family-Tree Generator and use the Link there which took me to the Dropbox Download.
That did not identify the version until I investigated the Version.txt change log.

It tried creating a new SVG Tree.txt file in E:\Mike\OneDrive\Documents\Family Historian Projects\Family Historian Sample Project\Family Historian Sample Project.fh_data\ but get these errors:
I/O error: SetFilePointer failed: The handle is invalid. then click OK and get
Run time error '52':
Bad file name or number then click OK and the program closes.

So then tried E:\Mike\OneDrive\Documents\SVG\ instead and succeeded.
Then used the Family Historian Sample Project GEDCOM to populate the Tree.txt file and clicked the Design button.
That produced a 23 x 8 grid of boxes that needs extensive interactive editing to create a 'traditional' family tree.
The View > Auto Layout and Tools > Toggle Orientation options are helpful.
Then I tried the Process button and stuck with never-ending Unable to download file ... errors!
That was resolved by copying the Project Media folder to the SVG folder.

At present, I see no obvious way of incorporating SVG-FTG into any plugin and integrate with FH published webpages.
How would hyperlinks be added to each tree box?
IMO even the the relatively small Family Historian Sample Project is very challenging to produce a usable tree.

ACProctor · Post by **ACProctor** » 03 Dec 2021 17:12

V6.1 is in the same Dropbox folder as V6.0 was, Mike. There's only one "latest version" there.

Without seeing a log then I cannot diagnose the errors you were getting. Sounds like it could access your remote image files.

The points about two stages, interactive design effort, and so on, are red herrings. SVG-FTG works from a simple textual "tree definition file", which is what it compiles into HTML/SVG/JavaScript/CSS output, and also writes back to that file if you modify stuff. All of the interactive features of the final HTML/SVG tree can be turned off, and there are lots of options for different orientations, box sizes, scrolling versus scaling, etc., so let's start on a different path.

If your plug-in can generate data similar to this tree definition file (which i9ncludes the preferred box layout) then that could be compiled on-the-fly to generate a web-page. This could be done with a bit of script so that the page content appears dynamically. I like this idea because that content could be imported back into SVG-FTG if required. The different options and interactive applications can be added quite easily once the guts of the display are working.

You'll have to fill me in on how you normally deploy your plug-ins though, and whether this idea makes sense.

Post by **tatewise** » 03 Dec 2021 17:34

Sorry, but does not answer how to find the SVG-FTG V6.1 download from your blog and facebook pages.

Where is the log file saved? I've tried looking for it in all the obvious places.

When I have more time I'll investigate what is needed in the Tree.txt file to produce a basic family tree.

See FHUG KB Family Historian Plugins and Getting Started Writing Plugins for their deployment and development process.

ACProctor · Post by **ACProctor** » 03 Dec 2021 17:43

https://www.dropbox.com/sh/ohiikcl9yii6 ... 6ZzYa?dl=0

The program window on the main form is the log. There's a menu option to save it

ACProctor · Post by **ACProctor** » 03 Dec 2021 18:19

Sorry, I meant "progress window".

I might product a POC of this idea because I quite like it as a general mechanism

Post by **tatewise** » 03 Dec 2021 20:31

Sorry, but I think you are missing the point about finding the SVG dropbox download.
I now know where it is, but if somebody else discovers your blog or Facebook page, where does it link to the download?

As I said earlier, the program crashes, so there is no opportunity to Save Progress Messages.
Below is a screenshot just before SVG crashes by clicking the OK button and this is the partially obscured full file path:
E:\Mike\OneDrive\Documents\Family Historian Projects\Family Historian Sample Project\Family Historian Sample Project.fh_data
E:\Mike\OneDrive\Documents\Family Historian Projects\Family Historian Sample Project works OK, so I guess it is the Family Historian Sample Project.fh_data folder it does not like.

: SVGFileError.png (21.62 KiB) Viewed 2605 times

I have been able to experiment with a small 3 generation family group Tree.txt file.
Many of the SVG features have been disabled such that just a small family tree is produced.
The plugin can create the Individual and Family details, but designing the layout would be very challenging.
So the plugin would instruct SVG to perform a Design > View > Auto Layout function.
The layouts are quite different from the two posted earlier today.

: Horizontal Munro Family Tree; SVGHorizontal.png (55.53 KiB) Viewed 2581 times

: Vertical Munro Family Tree; SVGVertical.png (60.3 KiB) Viewed 2581 times

Post by **tatewise** » 03 Dec 2021 20:52

BTW: This is the Tree.txt file that was used for the family tree and could be created by a plugin:

Code: Select all

H Title=Family_Historian_Sample_Project,InfoPanels=False,Version=V6.0.0,Horiz=False,Stepped=False,SVGFile=False,Small=True
H Tooltips=False,Timeline=False,PanZoom=False,ImagePart=0.6,DesCols=5,DesRows=5,NavData=False,NotesData=False,Blog=False
H Rounded=True,Fanned=False,Opaque=False,Scaled=True,Viewpoints=False,ProgData=False,W=100,H=60,MW=20,MH=20,BW=12,BH=12
H ButtonTL=False,ButtonBL=False,ButtonTR=False,ButtonBR=False,ExpandImage=False,LinkedTrees=False

U GEDDIR1=|Media\

P I1($GEDDIR1:O10_Anthony_Munro.JPG)=m(2,1):Anthony E. DE MUNRO (1922-1998)|Anthony E. DE MUNRO (1922-1998)|Anthony Edward /DE MUNRO/|de
P I3($GEDDIR1:O4_Nigel_and_Susan_Dowling.jpg)=f(3,1):Susan I. Dowling (1925-2008)|Susan I. Dowling (1925-2008)|Susan Isabel /Dowling/
P I58($GEDDIR1:O18_Alan_Carrington.jpg)=m(4,1):Alan Carrington (1924-1979)|Alan Carrington (1924-1979)|Alan /Carrington/
P I59($GEDDIR1:O19_Elizabeth_Hodges.jpg)=f(5,1):Elizabeth Hodges (1936-)|Elizabeth Hodges (1936-)|Elizabeth /Hodges/
P I6($GEDDIR1:O12_Ian_and_Charlotte_and_family.JPG)=m(2,3):Ian S. Munro (1953-)|Ian S. Munro (1953-)|Ian Stephen /Munro/
P I7($GEDDIR1:O7_Nigel_s_Birthday.jpg)=f(3,2):Sally T. Munro (1954-)|Sally T. Munro (1954-)|Sally Theresa /Munro/
P I8($GEDDIR1:O5_Ian_and_Judy_in_the_garden_at_Nantwich.JPG)=f(1,2):Judy S. Munro (1951-)|Judy S. Munro (1951-)|Judy Susan /Munro/
P I25($GEDDIR1:O12_Ian_and_Charlotte_and_family.JPG)=f(4,3):Charlotte Carrington (1957-)|Charlotte Carrington (1957-)|Charlotte /Carrington/
P I116=m(5,3):Hugh Carrington (1960-)|Hugh Carrington (1960-)|Hugh /Carrington/
P I26($GEDDIR1:O12_Ian_and_Charlotte_and_family.JPG)=m(2,4):Christopher I. Munro (1987-)|Christopher I. Munro (1987-)|Christopher Ian /Munro/
P I49($GEDDIR1:O12_Ian_and_Charlotte_and_family.JPG)=f(3,4):Janet E. Munro (1989-)|Janet E. Munro (1989-)|Janet Elizabeth /Munro/
P I50($GEDDIR1:O12_Ian_and_Charlotte_and_family.JPG)=f(4,4):Paula C. Munro (1994-)|Paula C. Munro (1994-)|Paula Charlotte /Munro/

F F2=I1+I3:I8,I6,I7
F F26=I58+I59:I25,I116
F F10=I6+I25:I26,I49,I50

Having dug into the User Guide a bit further, it seems that the plugin could invoke SVG with a command line such as
C:\Program Files (x86)\SVG\SVG.exe Tree.txt -L -P
that would open the Tree.txt file, perform an Auto Layout, and generate the HTML/SVG output automatically.

If necessary, it might be possible for users to 'tweak' specific trees by using SVG-FTG manually.

ACProctor · Post by **ACProctor** » 03 Dec 2021 22:22

I'm still not getting you, Mike. You download everything from that Dropbox folder. That includes the installation kit, documentation, samples, and other files. There are also 13 instructional videos at https://www.youtube.com/c/TonyProctor, one which is for installation and one for getting started with SVG-FTG.

The command-line approach would work but I would have thought it was a bit clunky. Does FH not provide the plug-in with a layout?

I need some more details of the error, Mike, because I've never seen that error. It may be that the E: drive was not active but error messages should never be fatal. I can see that you're creating a new tree, and yet you showed me a valid Tree.txt file, so what was the procedure you used?

There was a problem with command-lines if the filename had spaces in but that was fixed in 6.1. This may be related to the image issues you had so I'd like to get to the bottom of it. I cannot produce anything like it here, whether the directory has spaces or dots in it or not.

P.S. There's a "Where is SVG-FTG?" section in https://parallax-viewpoint.blogspot.com ... r-v60.html. Is that what you mean, Mike?

Post by **tatewise** » 03 Dec 2021 22:58

OK, so somebody who finds https://parallax-viewpoint.blogspot.com ... r-v61.html has to follow the link to https://parallax-viewpoint.blogspot.com ... r-v60.html to find the how & where to download & install SVG-FTG v6.1.

No, FH does not provide plugins with any tree diagram layout tools. That is why we are so interested in GEDmill and SVG.

It is NOT an E: drive problem as E:\Mike\OneDrive\Documents\Family Historian Projects\Family Historian Sample Project works OK, and I am using E:\Mike\OneDrive\Documents\SVG for all my successful experiments.
As I said, I think the problem is the Family Historian Sample Project.fh_data folder that has a dot in its name.

I have not yet got as far as actually using the command line feature of SVG-FTG. Maybe tomorrow.

The image issue was finger trouble on my part, which as I said I was able to fix.
The problem was that the Tree.txt file created from the GEDCOM file had LOTS of relative file references that expected the files to be in a folder relative to the Tree.txt file. But because of the folder problem above that forced me to use a different folder the Media files were not available. However, once the error messages started there was no way to escape from SVG, so perhaps the error messages need a Cancel or Exit button as well as OK.

ACProctor · Post by **ACProctor** » 04 Dec 2021 09:10

Thanks for the update, Mike. I had just figured out, last night, that your relative file references in the GEDCOM file were causing the trouble. It's a trivial change because you can just change the definition of the auto-generated place-key (Tools->Place Management), but I can easily convert them to absolute ones so that there's no ambiguity with the base -- I've not actually seen a relative example before. I'll add that to my list.

I have tested here with dots in the directory path and no trouble at all. I'd be interested in whether 6.1 still does it because there was a change to way SetFilePointer was called.

Did my last post answer the question about Download links, or am I on the wrong track?

Tony

ississi · Post by **ississi** » 04 Dec 2021 09:33

As ACProctor said, " "html, css and js only" would mean no SVG" for many of us mere mortals who can't fork out for business subscriptions or run our own webservers.

Post by **ColeValleyGirl** » 04 Dec 2021 09:46

tatewise wrote: ↑
03 Dec 2021 20:31
Sorry, but I think you are missing the point about finding the SVG dropbox download.
I now know where it is, but if somebody else discovers your blog or Facebook page, where does it link to the download?

It's pretty easy to find on Facebook, Mike.

: Screenshot 2021-12-04 094119.jpg (188.36 KiB) Viewed 2551 times

YouTube · Post by **Jane** » 04 Dec 2021 09:51

ississi wrote: ↑
04 Dec 2021 09:33
As ACProctor said, " "html, css and js only" would mean no SVG" for many of us mere mortals who can't fork out for business subscriptions or run our own webservers.

My understanding, once generated SVG-FTG does not need anything more that a web page host, to hold the files, the magic is done by the javascript and SVG file display. You simply generate everything on the PC and then upload all the generated files to your web page host.

For example I can download and run the sample SVG provided in the download on my PC with no server etc.

Post by **ColeValleyGirl** » 04 Dec 2021 10:01

ississi wrote: ↑
04 Dec 2021 09:33
As ACProctor said, " "html, css and js only" would mean no SVG" for many of us mere mortals who can't fork out for business subscriptions or run our own webservers.

As a mere mortal myself, I don't fork out for "business subscriptions or run my own webserver." I can find a webhosting service for a single site for about $2 a month... plus VAT of course. However, I know that even that isn't an option for many people.

Family Historian User Group

* Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks

Re: Website Tree Diagrams with Hyperlinks