* Website Tree Diagrams with Hyperlinks

Writing and using plugins for Version 5 and above.
User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 06 Dec 2021 19:13

Tony, remember the Plugin is run by end-users who will have no idea how to manipulate CSS files at all.
So any changes to CSS will have to be performed by the Plugin or via an option in SVG-FTG.
I'm not sure where the 'installed' files that you mention are located.
Is that in the C:\Program Files (x86)\SVG installation folder?
If so, then that is not accessible to standard users accounts, because it is an Administrator protected folder, and thus the Plugin cannot necessarily change anything there.
If it is the SVG Family-Tree Generator folder where the ZIP file is unpacked, then that could be anywhere and difficult for the Plugin to locate in order to make changes even if access were allowed.

The Plugin guarantees all settings are the same for all the SVG family trees so does that mean all the defs will be identical?

One feature I found missing from SVG-FTG was the ability to choose the text font in the boxes.
It would be neat if the Plugin could make it match the FH web page fonts.
Is that something that could be added to the Tree.txt file Header options?
See the recent screenshot where the FH webpage uses 80% regular Verdana whereas SVG uses 10px bold Times New Roman.

Tony, did you see the problem I raised with -L not being the same as Auto Layout?
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 06 Dec 2021 20:01

The files in the working directory (not the EXE location) can be configured. The actual code generated (CSS, Defs, and JS for click handlers) depends on the options selected and the presence of further XML files. There is no further code that I can (or would like to) package up and place elsewhere, Mike.

If users want to add specific applications to their tree, which previous comments here have suggested will be the case, then code is generated dynamically to accommodate them.

As for the -L then I cannot reproduce this. The -L simply runs the same operation as the menu option.

Tony

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 06 Dec 2021 20:56

Tony, have you any comment on the ability to choose the text font in the boxes?

The attached Tree_1_SVG.txt file illustrates the difference between -L and Auto Layout.
I realize it is a bit unusual in that four boxes all have col, row = 1, 1 and the other two have col, row = 2, 2 but I have seen plenty of other examples.

If you apply the command line 'Tree_1_SVG.txt -L -P' and View the result then the boxes have not been adjusted.

CommandLine-L-P.png
CommandLine-L-P.png (10.81 KiB) Viewed 949 times

Use the Design > View > Auto Layout and Process and View that and they are tidyly arranged.

CommandAutoLayout.png
CommandAutoLayout.png (15.4 KiB) Viewed 949 times
Attachments
Tree_1_SVG.txt
(1.16 KiB) Downloaded 14 times
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 06 Dec 2021 21:05

Thanks Mike, I'll see if I can reproduce that.

Regarding fonts, I haven't looked at that because it's quite messy. I had to do all the sizing and line wrapping myself for the existing font as SVG does almost nothing for you -- very different to HTML divs. I've noted it but it's low down on my priority list at the moment. I would first need to determine whether this route is practical for both of us, or whether the other scheme (where some script duplicated the basic SVG-FTG processing of a tree definition file) might be better, or of course that you might have to pick a different tool altogether.

Tony

User avatar
ColeValleyGirl
Megastar
Posts: 3412
Joined: 28 Dec 2005 22:02
Family Historian: V7
Location: Cirencester, Gloucestershire
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ColeValleyGirl » 07 Dec 2021 10:01

tatewise wrote:
06 Dec 2021 19:13
Tony, remember the Plugin is run by end-users who will have no idea how to manipulate CSS files at all.
That's not entirely true, Mike. Yes, some users will have no idea, some users will follow simple instructions (like the tips that I suspect you wrote in the KnowledgeBase -- and while I remember, when you have time, can you review those for V7 compatibility please?), and some users will be very competent with css. I don't think insist on catering only for the least skilled.

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 07 Dec 2021 12:30

In the context of that statement, the plugin should let users choose such fundamental things as text font, box colours, etc, without resorting to adjusting CSS. Currently with SVG, font and colour selection is not possible except via CSS. Earlier you wanted such settings to be integrated such that the FH webpages and embedded trees used consistent features such as fonts and colours.

Are you talking about the Create Family Tree CD/DVD or Website Content in general, and the Tips and Tricks section and its associated pages in particular?
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 07 Dec 2021 12:39

It might be worth looking at the "Header=file" setting, Mike. If you're worried about configuring a consistent set of box shapes/sizes/colours with a plug-in then that's the documented way.

Different subject: I checked that -L issue you reported: Because the option is emulating the menu click then it only actually worked in conjunction with -D (i.e launching the Tree Designer), which is probably not what you want. The documentation didn't really emphasise this. But anyway, even I don't like that implementation so I have now changed it to always work as expected.

Tony

User avatar
ColeValleyGirl
Megastar
Posts: 3412
Joined: 28 Dec 2005 22:02
Family Historian: V7
Location: Cirencester, Gloucestershire
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ColeValleyGirl » 07 Dec 2021 12:55

tatewise wrote:
07 Dec 2021 12:30
In the context of that statement, the plugin should let users choose such fundamental things as text font, box colours, etc, without resorting to adjusting CSS. Currently with SVG, font and colour selection is not possible except via CSS. Earlier you wanted such settings to be integrated such that the FH webpages and embedded trees used consistent features such as fonts and colours.
In my ideal solution, yes, that's what I'd like to see (except of course FH doesn't have any settings for tree diagrams within the web page for things to be consistent with...). If you're going to provide a UI to do that (for all the possible ways of constructing a tree) fine -- but the key point I was making is that your blanker statement "end-users who will have no idea how to manipulate CSS files at all" is inaccurate and should be "some end-users who will have no idea how to manipulate CSS files at all."
Are you talking about the Create Family Tree CD/DVD or Website Content in general, and the Tips and Tricks section and its associated pages in particular?
Yes, both, if you're willing to do so. They definitely need updating for V7.

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 07 Dec 2021 13:45

Helen, 'some' was implied in my original statement. I'll have a look at that KB section.

Tony, I have run into another issue with the text in boxes and how it is wrapped onto multiple lines to fit the box.
The general rule seems to be to wrap onto a new line at any available space character.
It is very common to include lifetime dates after the name of a Person such as (1801-1876).
However, if either date is unknown it is replaced with a space, or it can have a space in such as c. 1801.
So the lifetime dates may be (c. 1801-1876) or (1987- ) or even ( - ) when no dates are known.
Sometimes the new line wrap occurs at one or other of those space characters resulting in an unusual layout such as:
John James SMITH (c.
1801-1876)

or
John James SMITH ( -
)

Currently, the plugin has a workaround that strips out spaces from the lifetime dates, but I'm surprised nobody else has raised this problem.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 07 Dec 2021 13:56

Ah, SVG-FTG is quite fussy about the format of date range because it uses the information. The docs say (date-date), where 'date' could be c1800, or ? for don't know. The second date has to be absent for living persons.

For instance, (c1800-?), (?-1901), and (1976-)

The '\' character can be used as an explicit line-break in captions.

Tony

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 07 Dec 2021 14:45

Ah, I missed that because it is tucked away in chapter 4 Tree Designer just before 4.1 Edit Person.
I had to use a PDF text search to find it!

I was expecting it to be specified in 14.2 Person Records where it mentions backslash characters ("\") for line breaks.

The format c1800 does not appear to be mentioned anywhere! Would c.1800 be acceptable?

Are other formats for baptism, christening, burial, or cremation dates allowed?
e.g. bap.1800 or chr.1800 or bur.1800 or crem.1800

The question marks are displayed in the lifedates in the tree boxes, which is a different format to that used in FH report web pages so looks inconsistent.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 07 Dec 2021 15:52

You can actually put anything in the caption, Mike, but only those specific formats are recognised by SVG-FTG, and this might impact interactive applications added later.

Biographical and historical details would go in the Notes section, and would be displayed by the 'Informal Panels' or 'Expand Notes' applications.

Vital events like your examples would normally be placed in the Tooltips section, and appear as "hover text" for the person or family in the tree.

There are two other tabs for Edit-Person and Edit-Family: 'Local Settings' (which is a small set of name=value settings applying only to that entity, as opposed to global ones in the two Settings forms) and 'Program Data' (which is a set of data recognised by different interactive applications).

The latter is where your hyperlinks can be added. There is a registration scheme for the data formats (i.e. as accepted by the different applications), and the Edit menu uses those registrations to allow a user to modify data for a given application. The TreeAshbee.txt sample file can demonstrate this for the Compendia app. I have a working version, here, of the configuration needed to support your hyperlinks. These will also support place-keys, which might make maintenance easier for you.

Tony

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 07 Dec 2021 16:56

OK, that is generally understood and I've explored the TreeAshbee.txt sample of using Compendia.
We may not need Info Panels and Tooltips, because as you can see from my posting yesterday, the FH web page has all the biographical details in report format.

Instead of using the Edit-Person Program data tab, the plugin would automatically add the necessary References to the Tree.txt file Person record and also enable Compendia in the Header record.

The trick I'm missing is how to make the click handler for anywhere in a box, or perhaps one corner button, invoke a hyperlink directly without having to choose a reference option in Compendia first. Presumably, that involves some alteration to the way the CSS is created but I'm not clear how.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 07 Dec 2021 17:26

tatewise wrote:
07 Dec 2021 16:56
OK, that is generally understood and I've explored the TreeAshbee.txt sample of using Compendia.
We may not need Info Panels and Tooltips, because as you can see from my posting yesterday, the FH web page has all the biographical details in report format.

Instead of using the Edit-Person Program data tab, the plugin would automatically add the necessary References to the Tree.txt file Person record and also enable Compendia in the Header record.

The trick I'm missing is how to make the click handler for anywhere in a box, or perhaps one corner button, invoke a hyperlink directly without having to choose a reference option in Compendia first. Presumably, that involves some alteration to the way the CSS is created but I'm not clear how.
No, not quite, Mike.

I agree that your plug-in would generate the Program Data, and that the Edit-Person/Edit-Family would not be involved -- that's pretty obvious, and I was simply mentioning those tabs to emphasise the 4 types of data.

However, you would not be generating references for the Compendia application as that has specific functionality that is not what you want. I have registered a different application and associated data for your purpose, although the principle is very similar. This already works and I will release the configuration later.

As for FH reports, I would claim that the hover-text would still be useful as it means the end-user does not have to follow a hyperlink just to get those brief details -- images and full notes, of course, should go back to FH.

Tony

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 07 Dec 2021 17:41

OK, that all sounds good.

Have you made any discoveries regarding the -L -P command-line and the Auto Layout discrepancy?

It would be useful to get some feedback from other interested parties in this thread before going too far too fast.
Particularly of interest is how the SVG trees play on small screen devices in both Horizontal and Vertical modes.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 07 Dec 2021 18:14

The auto-layout issue was mentioned in one of my first posts of today, Mike

Tony

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 07 Dec 2021 18:29

Here, try this, Mike. It demonstrates the new FH application, and "hover text" too.

Place the XML file in the same directory as the EXE, next to the standard XML file. Load-up the tree definition file and generate code for it.

By default, clicking on a box or image launches the hyperlink (my blog post, just for testing) in a different tab. But changing the last parameter of exi_show() in the XML file will do it in the same tab.

Tony
Attachments
TreeTest.txt
(792 Bytes) Downloaded 11 times
ApplicationsServicesFH.xml
FH Application Registration
(1.13 KiB) Downloaded 14 times

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 07 Dec 2021 19:37

Sorry, I somehow missed your Auto Layout explanation. I presume the change will be in your beta SVG version.

I will give the FH application a try tomorrow. Thank you.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 07 Dec 2021 21:47

I found some time tonight to give the FH application a try.
After several attempts that got the tooltip popups but no active hyperlinks, I discovered a typo in your scripts:-

ApplicationsServicesFH.xml invokes the on click JavaScript function exi_show

https://parallaxviewpoint.com/SVGcode/extinfo6.js defines JavaScript function ei_show

When I changed the TreeTest.html to use ei_show the active hyperlinks worked :D
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

User avatar
ississi
Gold
Posts: 26
Joined: 15 Feb 2021 14:47
Family Historian: V7

Re: Website Tree Diagrams with Hyperlinks

Post by ississi » 08 Dec 2021 10:39

Jane wrote:
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.
Yes, if the web server allows you to upload SVG files.

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 08 Dec 2021 11:02

I may be mistaken, but if you choose the non-SVG option then it seems only HTML, CSS and JS files are involved. No SVG files.
Why not try the Plugin I attached on Monday and you can satisfy yourself with what files get created.
Then it ceases to be a theoretical discussion and becomes a practical demonstration.
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 09 Dec 2021 13:22

tatewise wrote:
07 Dec 2021 21:47
I found some time tonight to give the FH application a try.
After several attempts that got the tooltip popups but no active hyperlinks, I discovered a typo in your scripts:-

ApplicationsServicesFH.xml invokes the on click JavaScript function exi_show

https://parallaxviewpoint.com/SVGcode/extinfo6.js defines JavaScript function ei_show

When I changed the TreeTest.html to use ei_show the active hyperlinks worked :D

Oops! The exi_ prefix was actually the right one, Mike, otherwise it clashed with the 'Expand Image' application. Sorry about that. I've made sure that the latest file is published because it also contains the "same tab" option.

Tony
Last edited by ACProctor on 09 Dec 2021 13:29, edited 1 time in total.

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 09 Dec 2021 13:28

tatewise wrote:
08 Dec 2021 11:02
I may be mistaken, but if you choose the non-SVG option then it seems only HTML, CSS and JS files are involved. No SVG files.
Why not try the Plugin I attached on Monday and you can satisfy yourself with what files get created.
Then it ceases to be a theoretical discussion and becomes a practical demonstration.
No, the "Generate SVG File" option generates an SVG document that uses JS/CSS. The default, with that checkbox clear, uses all of HTML/SVG/JS/CSS.

This illustrates the difference between "SVG Files" (which web hosts are paranoid about) and "Inline SVG" (which is my preferred option).

Did you read https://parallax-viewpoint.blogspot.com ... s-svg.html? It explains the source of this paranoia. Basically, much of the world seems to think that "SVG Files" are image files, but they're not -- they're document files and can host JS/CSS. You take this for granted with HTML files, but a malicious person could deploy an SVG file as an image (e.g. in a gallery or as a background) and wreak havoc!

Tony

avatar
ACProctor
Diamond
Posts: 88
Joined: 15 Jan 2018 12:51
Family Historian: V6
Location: UK/Ireland
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by ACProctor » 09 Dec 2021 13:37

Despite internet and power outages here, I have made some progress with V6.2 bits for you, Mike (see below). I have to do some work for my publisher during next week so I will not be working as much on this.

1) Image-loading errors now use a custom error marker

2) Relative image file specifications in GEDCOM files are expanded first

3) New command-line options:
-O file (open log file, capturing all progress messages)
-G file (load and convert GEDCOM file)
-X (save and close)
-M Run minimised

4) -L option now independent of -D

5) extinfo6.js application code published

Tony

User avatar
tatewise
Megastar
Posts: 23222
Joined: 25 May 2010 11:00
Family Historian: V7
Location: Torbay, Devon, UK
Contact:

Re: Website Tree Diagrams with Hyperlinks

Post by tatewise » 09 Dec 2021 14:05

That sounds good Tony. When and where might it become available for me to try?
Mike Tate ~ researching the Tate and Scott family history ~ tatewise ancestry

Post Reply