Family Historian User Group

Posted: **09 Dec 2021 14:49**

Next Monday at the latest, Mike. I'll send you a link when it's there. I want to test a bit more and update the PDF docs.

Was there anything I missed off the list?

Tony

Posted: **09 Dec 2021 17:16**

I've been experimenting with the Compendia application in conjunction with my proposed nuclear family tree.
That tree only shows the 4 direct line grandparents, the 2 parents, and their children, so its layout is quite simple.
Many of those people will often have several other close relatives such as other spouses, siblings, adoptive parents, etc.
The multiple references listed by Compendia can easily list all those other relatives for each person and a link to their details.
( That may work better in most cases than the FH Application you have just produced. )

I found that the Header setting for TooltipTL=Click to show close relatives works perfectly.
Also, the Header setting for IconTL could be used to choose a different icon.

However, the only way I could change the Choose References text above the list to say Choose relatives was for the plugin to post-edit the Tree.html file, or possibly the ApplicationsServices.xml file. I there a better way?

It would also be handy to choose which button or the box/circle can be clicked to invoke any particular application.
e.g. Move Compendia to key='Click' on='BR' button or on='box' or on='circle'
Currently, that seems to need another ApplicationsServices.xml file edit.
What about instead of Header setting Compendia=True it allowed Compendia=BR or Compendia=Box
That is not needed immediately, but sometime next year perhaps.

Is it possible to hide the button when there are no Compendia references?

Posted: **09 Dec 2021 17:51**

It has to be a different application, Mike. The JS, CSS, and registered data format are all specific to the documented functionality of Compendia.

This is why the framework is open. Everything that these apps use is documented in the "Program Notes" document.

I cannot support post-processing of the HTML, or changes to the core XML file.

What is the precise functionality that you need? I don't understand the correlation that you're trying to make between people.

P.S. Let me know what you might have customised or modified for testing because installing the beta will likely overwrite stuff that shouldn't be modified.

Tony

Posted: **09 Dec 2021 19:18**

Tony, I am confused!

If you really "cannot support post-processing of the HTML, or changes to the core XML file" then that rules out SVG-FTG for the purpose of embedding family trees in the FH generated HTML webpages.

My plugin takes the Tree.html file created by SVG-FTG and cuts out parts of its <head> section and <body> section, alters some of their content, and pastes them into the FH generated HTML webpages as illustrated here.

Also earlier, in the context of the FH Application you said:
"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."
i.e. You condoned "changes to the core XML file".

Or are you saying the post-processing restriction only applies to the Compendia application?

I have NOT customised or modified the SVG-FTG installation files themselves at all.
Remember, I said the plugin will be run by users of FH and I cannot expect them to customise SVG-FTG installed files.
In practice, if the plugin is run in a standard user account, those installation files have Security permissions that prevent them from being changed, so the plugin cannot (and does not) rely on changing them.

To understand the precise functionality of what I need, you need to understand the structure of the FH webpages.
So take a look at my TATE & SCOTT Family Tree at http://www.tatewise.co.uk/ancestry/index.html.
On that HOME page click on any of the top four links under the Contents.
That will display a report page for one person, with links to their close relatives.
Follow any of those relative's links and it displays their individual page.
Click on the INDEX tab on the top menu bar and every person is listed as a clickable link to their individual page.

What is missing from each individual page is a small family tree of their immediate relatives.
That family tree is what we are hoping SVG-FTG will provide, inserted near the top of each individual page.
The functionality I need is for each box in the SVG family tree to offer links to all their close relatives.
So by clicking on the box it offers a link to that person's individual page, their spouse's page, their siblings pages, their parents pages, etc. The list will be different for each box. Compendia comes close to that functionality where the title is the name of a relative and the link is the URL of their individual page, but instead of calling them References they need to be called Relatives.

To complicate matters further, FH can create other types of report page instead of Individual reports.
It can create a Family Group Sheet report for the husband, wife and children of a family group.
So in that case some of the links in the Family tree boxes are not needed because the family members are in the current report page.

Posted: **09 Dec 2021 20:42**

tatewise wrote: ↑
09 Dec 2021 19:18
Tony, I am confused!
If you really "cannot support post-processing of the HTML, or changes to the core XML file" then that rules out SVG-FTG for the purpose of embedding family trees in the FH generated HTML webpages.

My plugin takes the Tree.html file created by SVG-FTG and cuts out parts of its <head> section and <body> section, alters some of their content, and pastes them into the FH generated HTML webpages as illustrated here.

Also earlier, in the context of the FH Application you said:
"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."
i.e. You condoned "changes to the core XML file".

Or are you saying the post-processing restriction only applies to the Compendia application?

I have NOT customised or modified the SVG-FTG installation files themselves at all.
Remember, I said the plugin will be run by users of FH and I cannot expect them to customise SVG-FTG installed files.
In practice, if the plugin is run in a standard user account, those installation files have Security permissions that prevent them from being changed, so the plugin cannot (and does not) rely on changing them.

To understand the precise functionality of what I need, you need to understand the structure of the FH webpages.
So take a look at my TATE & SCOTT Family Tree at http://www.tatewise.co.uk/ancestry/index.html.
On that HOME page click on any of the top four links under the Contents.
That will display a report page for one person, with links to their close relatives.
Follow any of those relative's links and it displays their individual page.
Click on the INDEX tab on the top menu bar and every person is listed as a clickable link to their individual page.

What is missing from each individual page is a small family tree of their immediate relatives.
That family tree is what we are hoping SVG-FTG will provide, inserted near the top of each individual page.
The functionality I need is for each box in the SVG family tree to offer links to all their close relatives.
So by clicking on the box it offers a link to that person's individual page, their spouse's page, their siblings pages, their parents pages, etc. The list will be different for each box. Compendia comes close to that functionality where the title is the name of a relative and the link is the URL of their individual page, but instead of calling them References they need to be called Relatives.

To complicate matters further, FH can create other types of report page instead of Individual reports.
It can create a Family Group Sheet report for the husband, wife and children of a family group.
So in that case some of the links in the Family tree boxes are not needed because the family members are in the current report page.

There can be no post-processing. That is not the way customisation has been designed. I advised you to look at the Header=file setting the other day. That would be a way to change the header safely.

As for the XML file: the standard one should never be changed. The "Program Notes" section explains how you can place other XML files next to the standard one, just as I explained in my email with the two attachments.

If it cannot be done within the documented rules then it looks like you'll have to check another product, Mike.

Tony

Posted: **09 Dec 2021 22:50**

That is a pity, because it was looking very promising, but if we cannot somehow embed the SVG generated trees into the FH generated pages then that line of development is closed. The only alternative would be to add a hyperlink into each FH generated page that opens a free-standing unadulterated SVG tree, either a nuclear family tree or perhaps a larger family group of several generations. The disadvantage being that the FH report and the SVG tree diagram cannot be viewed in the same web page. What do others think?

Posted: **10 Dec 2021 09:27**

@Mike

As I said right at the start of this discussion it is not difficult to construct a small tree purely in html and css (it doesn't have all the bells and whistles of Tony's SVG trees) but would deliver what you want. The code I offered is a starting point and should be, for someone of your LUA experience, easy to convert from PHP to LUA, the PHP just gets the individuals from the database which LUA can do and the html does the display.

Posted: **10 Dec 2021 09:49**

Tony, whatever Mike decides to do, I'm still interested in the changes you're doing. I do a bunch of post processing of the website that FH generates and host the results within Drupal -- I can include a 'block' on the website for the relevant SVG-FGT output without needing to do any post processing on the SVG content (and it gives me some extra options for designing my tree pages.

Posted: **10 Dec 2021 09:55**

Mike, have you considered embedding the SVG-FGT output in an iFrame? And using

Code: Select all

<a href="page" target="_top">Replace parent url!</a>

or

Code: Select all

<a href="page" target="_parent">Replace parent url!</a>

for the links

Posted: **10 Dec 2021 11:29**

For such a "light" usage of SVG then another possibility -- which may have been discussed right at the start of this thread -- is to get SVG-FTG to generate SVG files. SVG is actually an XML-based syntax, and it can exist in standalone files or be embedded/linked to HTML.

We have been discussing the "embedded" route, and specifically where the svg element is inline inside the HTML document. But separate SVG files can also be linked via img or embed, and there is some mention of this in the docs. Such files could be persisted wherever your FH pages reside, or even on your local computer (using file:/// instead of http://).

The choice of applications is more limited but the 'External Information' one would still work.

I may have come across as being a bit blunt yesterday (it was a bad day here) so let me explain:

1) I cannot support post-processing of the output since it changes version-to-version, and is rarely fixed even in the same version. V6.2 will have HTML/SVG changes.

2) Trying to bend Compendia to suite your requirement would impact us both as neither of us would be free to add our own bells-and-whistles. Hence, Compendia should be independent of your work, but you're free to develop a similar app and register it in the correct way (which admittedly requires a small installation package if you think permissions would be insurmountable for some users).

3) There are several ways to customise the top-and-tail of the output, including the Header=file setting, and the new (V6.2) Header and Trailer elements in the XML registration files. Custom applications can also include their own JS/CSS files and include explicit preamble/postamble elements or code.

Tony

Posted: **10 Dec 2021 16:39**

@Helen, I was contemplating investigating if it would be possible to embed the unaltered SVG HTML somehow.
So thank you for the iframe tip, but my first attempts were unsatisfactory because the SVG HTML does not play well.
First I tried a iframe src="TreeSVG.html" width="700" height="600" with this result:

: iframeA.png (62.81 KiB) Viewed 2340 times

Then tried a shorter iframe src="TreeSVG.html" width="700" height="300" with this result:

: iframeB.png (35.99 KiB) Viewed 2340 times

Only after some adjustments to the TreeSVG.html file did I get some success as shown below, but it still does not honour any iframe style options such as style="object-fit: contain; object-position: center center;"

: iframeC.png (58.06 KiB) Viewed 2340 times

@Tony, following up on your points:
1) I understand not supporting post-processing of the output due to changes version-to-version. See 3) below.

2) Since Compendia did 99% of what was needed I hoped that making one word customisable was an option.
I may develop a similar app and register it if that is the best way to go.

3) I had overlooked the Header=file setting and have used that to adjust the TreeSVG.html file and achieve the iframe success in the 3rd screenshot above.

@Colin, I had not forgotten your suggestion, but can only tackle a limited set of options at any one time.

Posted: **10 Dec 2021 18:14**

That's good to hear, Mike. Let me know the changes you had to make and I'll see if I can make things easier for you.

Tony

Posted: **10 Dec 2021 21:29**

I wasn't sure of the cause of the problem, but guessed it was in this first style section of the Header_pz.html file:

Code: Select all

<style>
div.tp-svg??inst?? {
    display: inline-block;
    background: #f0f0f0;
    border-style: solid;
    border-width: thin;
    margin: 0px;
    padding: 0px;
    width: ??width-div??;
    height: ??height-div??;
    max-width: ??width-max??;
    max-height: ??height-max??;
    min-width: 40vw;
    min-height: 40vh;
    overflow: hidden;
    position: relative;
}

After some trial and error, I found that simply removing the max-height: ??height-max??; line allowed the SVG tree to expand.

However, the SVG tree does not honour the iframe style="object-fit: contain; object-position: center center;" but remains a fixed size and positioned top left. So the iframe size must match the SVG tree size to avoid large margins or scroll bars.

Thus what my plugin script does is read the SVG Tree.html file to extract the width & height px values and then uses those to set the iframe width and height, but the height must be 22px greater than the SVG Tree to avoid a vertical scroll bar.
So, for example, if the SVG Tree.html file contains:

Code: Select all

    width: 738.00px;
    height: 440.00px;

then the iframe uses width='738' height='462'

If you know how to alter the settings such that the iframe style="object-fit: contain; object-position: center center;" are effective then that would be better.

BTW: Later on my customised Header.html file alters the text style as shown below:

Code: Select all

text {
    text-anchor: middle;
    font-size: 9px;
    font-weight: none;
    font-family: Verdana, Arial, sans-serif;
    pointer-events: none;
}

That matches the font used in the FH webpages and the names still fit the boxes because I've widened them to W=122 and forced all the (life-dates) to start a newline using backslash.

Posted: **11 Dec 2021 10:15**

Folks, I'm trying to post some code here but it won't allow me so I need some help.

If I put angle brackets (or event the equivalent character entities) in the message then I get an error 403 "Forbidden". It doesn't matter whether it's in a code block or not.

I cannot attach an HTML file because it's not a supported file type (and yet *.xml is!!), and even if I rename the file to *.txt then it won't load it because it looks at the content and believes it to be an "attack vector".

Tony

Posted: **11 Dec 2021 10:34**

Code: Select all

< xyz >

Posted: **11 Dec 2021 10:35**

Tony

Those are phpbb security settings. You should be able to use the code tags </> in the menu bar if not a zip of it as an attachment is one way to get around the issue.

Posted: **11 Dec 2021 10:36**

I've just done a test post as an ordinary user using the code block icon and it's working -- does the same test post work for you?

Posted: **11 Dec 2021 10:58**

Test code works but nothing proper

Code: Select all

< xyz >

Posted: **11 Dec 2021 11:03**

Ah, iframe is notoriously difficult to get right, Mike, and trying to make it responsive to change (like a small browser window is even harder). I don't believe that object-fit is honoured (or can be honoured) for HTML content.

Before I make some suggestions, can I rule out one further possibility: embedding your content inside the SVG-FTG generated content. There are lots of ways of doing this so it would be cleaner, but it might not be practical for what you're trying to set up.

Looking for the width= and height= is prone to the problems I mentioned before because unless your template Header file explicitly deposits them then they may not be there.

I tried an example last night, and eventually managed to find a combination that could be implemented using just iframe CSS, and without modifying the CSS inside the HTML (see attached -- had to zip file). I used a variation of the sample file TreeImage.txt, and selected the 'Expand Images', 'Information Panels', and 'Timeline Reports' applications, just to make sure all those dynamic scenarios worked OK. I also set the PanZoom option and (very important) the Scaled option. I then referenced the output HTML with the attached "outer" HTML file. Surprisingly, it worked as I wanted it so I may try other scenarios now.

How are you generating your *.txt file, Mike? Are you creating it programmatically or by converting a *.ged file? If the latter then there are some private GEDCOM records that you could find useful, e.g. _SVG_H for a header name=value setting. I am just documenting these now.

Tony

Posted: **11 Dec 2021 11:17**

Ah -- if you're trying to embed html, that's never going to work, as there's a very limited subset allowed.

ACProctor wrote: ↑
11 Dec 2021 11:03
Before I make some suggestions, can I rule out one further possibility: embedding your content inside the SVG-FTG generated content. There are lots of ways of doing this so it would be cleaner, but it might not be practical for what you're trying to set up.

That was a possibility that crossed my mind, and I'd be interested in hearing about it, but it might be a step too far for most users, depending on what the results look like.

Posted: **11 Dec 2021 11:39**

I was thinking that this approach would be easier to automate (if it needed any change at all) and so the users shouldn't see the difference. I've only a vague idea of what Mike's trying, though, and so my help will understandably be limited.

Tony

Posted: **11 Dec 2021 11:54**

As you can see from my screenshots of SVG Trees embedded in FH webpages, there is a great deal of FH created HTML script above and below the SVG Tree.
Does the technique you propose involve merging that FH created HTML into the SVG Header.html prior to running SVG-FTG?
I don't understand how it is possible to add anything after the SVG Tree because that is added after the <defs> that are the last thing in the Header.html file. Perhaps the proposed technique needs more detailed explanation and an example.

Posted: **11 Dec 2021 12:07**

tatewise wrote: ↑
11 Dec 2021 11:54
As you can see from my screenshots of SVG Trees embedded in FH webpages, there is a great deal of FH created HTML script above and below the SVG Tree.
Does the technique you propose involve merging that FH created HTML into the SVG Header.html prior to running SVG-FTG?
I don't understand how it is possible to add anything after the SVG Tree because that is added after the <defs> that are the last thing in the Header.html file. Perhaps the proposed technique needs more detailed explanation and an example.

I didn't suggest adding it "after" the Defs, Mike. There are several ways to add stuff in, as you can see from the place-markers in the header.

P.S. Did you see my question about how you currently generate the *.txt files?

Tony

Posted: **11 Dec 2021 12:22**

FYI: The SVG Tree.txt files are entirely generated by my plugin NOT using GEDCOM files.
That latter option is impractical as it would need a tiny GEDCOM for every nuclear family tree.

I have tried the TreeImage.rar technique and it suffers exactly the same problem as I reported yesterday.
With width: 700px; height: 600px; there is a large iframe blank/grey area below the SVG Tree.
With width: 700px; height: 300px; there is a similar but smaller blank/grey area below the SVG Tree which has shrunk to half the size so is almost unreadable.
i.e. It is just like the screenshots I posted yesterday, so I must be doing something wrong.
Would it help if I attached the HTML files involved?

Tony, can you explain how to arrange an SVG Tree to be displayed in a web page with lots of other HTML above and below.
Did you visit the FH generated HTML webpages as illustrated here?
My objective is to get a small SVG family tree displayed near the top of each individual web page.

Posted: **11 Dec 2021 12:45**

tatewise wrote: ↑
11 Dec 2021 12:22
FYI: The SVG Tree.txt files are entirely generated by my plugin NOT using GEDCOM files.
That latter option is impractical as it would need a tiny GEDCOM for every nuclear family tree.

OK, I thought as much. No bother, someone else will benefit from the new -G option.

tatewise wrote: ↑
11 Dec 2021 12:22
I have tried the TreeImage.rar technique and it suffers exactly the same problem as I reported yesterday.
With width: 700px; height: 600px; there is a large iframe blank/grey area below the SVG Tree.
With width: 700px; height: 300px; there is a similar but smaller blank/grey area below the SVG Tree which has shrunk to half the size so is almost unreadable.

The example ensures that the SVG frame will be shrunk to fit the viewport, and that the whole tree is shown. I understood that these snippets would be small. If you want to make sure that the iframe size is big enough to show the tree at a readable zoom level then you will need to extract the SVG frame size. However, I do not recommend searching through the generated elements for the size because they may not be there. If you are using a private Header=file then I would recommend putting an information marker in there, e.g. ??height?? and ??width?? inside an HTML comment that you can reliably spot.

Tony

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