Jump to content
TNG Community

Vertical descendant chart


fluffy82

Recommended Posts

I love the new vertical descendant chart. It is more akin to the way I am used to see and work with family trees.

But...

The boxes are weirdly long. I realise that they are supposed to accommodate pictures in them, but I voluntarily commented those out as 90% or more of my tree doesn't have a picture anyway, and I don't want those blue/pink placeholders. But even with the placeholders, I find the boxes way too long (in attachment an example of how it is on my site, and on someone else's site with the placeholders).

I am able to make the boxes smaller, but of course the lines don't follow.

Can anyone point me towards the easiest way of modifying this so the boxes are smaller, and the lines (and boxes) are repositioned to fit?
In short: as they become les long, everything can be moved upwards quite a bit, depending on the number of generations.

my site.PNG

someone else s site.PNG

Link to comment
Share on other sites

Did you use the Admin > Setup > Chart Settings to change the box sizes for the Descendants section  - Vertical Chart

I used

Box Width:
Box Height:
Box Name Size:
Link to comment
Share on other sites

1 hour ago, Ken Roy said:

Did you use the Admin > Setup > Chart Settings to change the box sizes for the Descendants section  - Vertical Chart

I used

Box Width:
Box Height:
Box Name Size:

Now I feel stupid... I didn't know those settings existed.

Problem solved, thank you, as always!

Link to comment
Share on other sites

  • 2 weeks later...
On 10/2/2020 at 11:25 PM, manofmull said:

I thought that this vertical view chart would be much better with zoom (in/out) control and put the idea to Darrin

I have made a demo with zoom control for anyone who is interested.

Verticalchart - Demo

Cathrin Jegersberg 

Link to comment
Share on other sites

2 hours ago, cfj said:

I have made a demo with zoom control for anyone who is interested.

Very interested in your improvement. I don't see the boxed event info like below hovering. 

Hovered popup with extended information:

image.png

 

OK...never mind the concern...your tooltip popup gives the same information in your demo. (maybe I should have stayed in bed today).

Link to comment
Share on other sites

2 hours ago, cfj said:

I have made a demo with zoom control for anyone who is interested.

Verticalchart - Demo

Cathrin Jegersberg 

I was going to say "yes I'm interested", but apparently it's already going to be included in the base game 🎉

Link to comment
Share on other sites

Thank you for your positive feedback.

I don't have any coding or programming knowledge to create a mod. so I just copied the verticalchart.php and added the code in a demo page.

1. The source are from jQuery-Plugin-For-Panning-Zooming-Any-Elements-panzoom

2. In verticalchart-zoom.php I modified line 436  and added the class panzoom

<div id="vcontainer" style="overflow:visible">';
<div class="panzoom"id="vcontainer" style="overflow:visible">';

3. I need the buttons to zoom - reset and added them before the div id outer around line 434

<div class="buttons">
<button id="zoom-in">Zoom In</button>
<button id="reset">Reset</button>
</div>
<div align="left" style="position:relative;"" id="outer">

4. Now I need the zoom to work, so I inserted  the script after Darrin's grabbing script, before php tng_footer.

5 just a little bit CSS to color and place the buttons.

<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom/dist/panzoom.min.js"></script>
      <script>
const elem = document.getElementById('vcontainer');
        const zoomInButton = document.getElementById('zoom-in');
        const zoomOutButton = document.getElementById('zoom-out');
        const resetButton = document.getElementById('reset');
        const panzoom = Panzoom(elem);
        const parent = elem.parentElement
// No function bind needed
parent.addEventListener('wheel', panzoom.zoomWithWheel);
zoomInButton.addEventListener('click', panzoom.zoomIn)
/*zoomOutButton.addEventListener('click', panzoom.zoomOut)*/
resetButton.addEventListener('click', panzoom.reset)
      </script>
<style>
 .buttons {
 display: flex;
justify-content: center;
align-items: center;
height: 70px;
border: 1px solid rgb(0, 70, 128);
}
button{
font-size: 14px;
border: none;
padding:10px;
background-color: darkblue;
color:white;
}
</style>

Cathrin Jegersberg

verticalchart-zoom.php

Link to comment
Share on other sites

 In my testing, the code will also work with the other pedigree standard/compact and box charts as well, if the code is properly placed.  No other functionality is lost such as draggable boxes and left/right arrow links,etc.  I think this technique can be an option set for both the pedigree and descendant charts, if Darrin chooses to do so.

Many thanks for finding this code,  ...I wouldn't delete the post, since it may be quite a while if or when Darrin includes this chart enhancement.

Link to comment
Share on other sites

tngrlkrz, thank you for your positive feedback.

I'm very pleased to hear that the code will work with the other pedigree charts.

I will leave my post with the code and file as it is.

Link to comment
Share on other sites

I was so excited with the zooming capability that Cathrin posted that I couldn't wait for the likely integration by Darrin to appear in TNG.  So I cobbled together a mod which I am using.  It works with all 4 pedigree and 3 descendant charts, inserting the code into pedigree.php, descend.php, descendvert.php, and of course verticalchart.php.  I made a couple changes for my use.  I had no mod conflicts.

1) added the zoom out button, which was in the code, but commented out.

2) moved the buttons to the left in a  gray default color which should look more neutral with all templates.

image.png

If there is significant interest, I could make this a published mod.  I don't have anything parameterized at this point.  Didn't know if it's proper protocol to post the mod here.

 

 

Link to comment
Share on other sites

Since a couple folks have tested the mod, and there is interest, I have put it on the TNG wiki as Zoom_Charts .  It is only English in this early release.  I hope it is only a temporary mod until Darrin incorporates this ability into TNG.  Again, thanks to Cathrin Jegersberg for making this possible.

Link to comment
Share on other sites

2 hours ago, tngrlkrz said:

Since a couple folks have tested the mod, and there is interest, I have put it on the TNG wiki as Zoom_Charts .  It is only English in this early release.  I hope it is only a temporary mod until Darrin incorporates this ability into TNG.  Again, thanks to Cathrin Jegersberg for making this possible.

I've just installed this on my testing site - it works great, but...

Is it possible to disable the zooming in and out that happens now when I try to scroll the page with my trackpad on my MacBook Pro? That is kind of annoying that instead of the page going up and down the chart zooms out and in.

Roger

Link to comment
Share on other sites

Not sure.  If you noticed, Cathrin's original demo has the same behavior.   Yes, would be nice to not have to go to the scroll bars to move up and down. Sort of a tradeoff even on the laptop. It might be possible to check is 'standard' device' or not to disable that behavior and only have the buttons for zooming.    

Link to comment
Share on other sites

17 hours ago, theKiwi said:

Is it possible to disable the zooming in and out that happens now when I try to scroll the page with my trackpad on my MacBook Pro?

Roger,  in testing, the wheel zoom can be disabled leaving just the buttons, restoring the normal screen scroll...I just have to figure out how to code a conditional based on a parameter, in the java script.   Will do more tests.

 

Link to comment
Share on other sites

Michel KIRSCH

Hi Ron,

tested your Mod with success. (but %fileoptional:% and $text['tng_reset'] )

Nice Idea from CFJ !

Thanks to all

Michel

Link to comment
Share on other sites

3 hours ago, tngrlkrz said:

Is it possible to disable the zooming in and out that happens now when I try to scroll the page with my trackpad on my MacBook Pro?

Roger, Can't you use the right scroll bars on the Mac Pro?  That's what I use in lieu of the mouse wheel scroll which is replaced by the zoom on the Windows10  laptop.

Link to comment
Share on other sites

7 hours ago, Michel KIRSCH said:

but %fileoptional:% and $text['tng_reset'] )

Thanks Michel,

%fileoptional for languages....and $text['reset'] will be added and fixed in v13.0.0.1a. Still having an issue with translation for verticalchart.php variables due to the code placement.

I am trying to understand when the %fileoptional is needed or not.  Is it recommended for all languages other than English?  

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...