Jump to content
TNG Community
fluffy82

Vertical descendant chart

Recommended Posts

fluffy82

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

Share this post


Link to post
Share on other sites
Ken Roy

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:

Share this post


Link to post
Share on other sites
manofmull

Ken

I went just a tad further and made height 120.

This hides the dates but these can be seen with mouse hover.

Image2.jpg

Share this post


Link to post
Share on other sites
Ken Roy

well that is exactly why we pushed for settings options during beta testing   :)

Share this post


Link to post
Share on other sites
fluffy82
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!

Share this post


Link to post
Share on other sites
Ken Roy

Glad you asked so others could also learn that there are Setup options

Share this post


Link to post
Share on other sites
manofmull

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

He agreed that would be a good enhancement, so fingers crossed!

Share this post


Link to post
Share on other sites
cfj
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 

Share this post


Link to post
Share on other sites
Katryne

Very much interested. I follow this thread.

Share this post


Link to post
Share on other sites
theKiwi

I like that! Well done!!

Roger

Share this post


Link to post
Share on other sites
tngrlkrz
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).

Share this post


Link to post
Share on other sites
manofmull
2 hours ago, cfj said:

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

Verticalchart - Demo

Cathrin Jegersberg 

I like it too, good job!

I also like the re-design of the placeholders (pink/blue).

All we need now is a mod.

EDIT:

Stop-the-press news!

Darrin has just informed me that he has plans to include zoom control for the chart.

My suggestion has paid off = yay 😀

He thought the demo was cool.

Share this post


Link to post
Share on other sites
fluffy82
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 🎉

Share this post


Link to post
Share on other sites
cfj

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

Share this post


Link to post
Share on other sites
manofmull

Cathrin

Hope you don't mind, but I "borrowed" your pink/blue placeholders.

Much better looking than the existing clunky images!

malefemale.jpg

Share this post


Link to post
Share on other sites
cfj

I don't mind at all manofmull. 

I agree much better with clear blue and pink placeholders

Share this post


Link to post
Share on other sites
manofmull

Cathrin

Thanks.

You will have seen from my post above that Darrin has plans to include zoom control for the chart.

When I first suggested this to him, he thought it was a good idea and he liked your later demo.

Share this post


Link to post
Share on other sites
cfj

I saw it and it's good news. I wonder if i should delete my previous post, regarding the code and the file I added!!!

Share this post


Link to post
Share on other sites
tngrlkrz

 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.

Share this post


Link to post
Share on other sites
cfj

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.

Share this post


Link to post
Share on other sites
tngrlkrz

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.

 

 

Share this post


Link to post
Share on other sites
MichaelM

Super !

Share this post


Link to post
Share on other sites
manofmull

Ron

Super-cool, love it. Great job!

Share this post


Link to post
Share on other sites
Chris Lloyd

Very cool Ron

Share this post


Link to post
Share on other sites
tngrlkrz

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×