Family Tree Builder (version 0.6): Help

Family Tree Builder (FTB) is a simple program that allows you to create, edit, display and save family trees in your browser.

Disclaimer: FTB is a freeware and you can use it, modify it, and share it as you please. I accept no responsibility for lost data, improper usage, etc.

Getting started

I hope that you will understand how the program works without reading this help (with the possible exception of saving data). Remember that all actions are triggered by clicking the nodes of the family tree.

So go ahead, open the main file ftb.html in your browser and start a new family tree!

Terminology

• the tree consists of nodes joined by connecting lines
• nodes are initially empty but persons can be added to them
• the tree grows on your screen from the left to the right
• nodes to the left of a given node are called its predecessors, nodes to the right are called its offspring (but this is just a convention and nothing prevents you from placing younger generations to the left of older generations)
• an immediate predecessor is called parent, an immediate ancestor is called child, etc.

Basic principles

You can work with the tree in two modes:

• edit mode which allows you to modify the tree, or
• view mode which allows you only to browse the tree.

You will learn below how to decide whether a tree should open in the edit mode or in the view mode.

Each node is in one of two states:

• collapsed, when only names of persons in the node are visible, or
• expanded, when additional information about persons in the node is displayed.

All user actions are initiated by clicking on a node in the tree. In the edit mode, a contextual menu will then be displayed, from which you can select a desired action.

You can perform four kinds of actions:

• changing the geometry of the tree (adding, deleting and moving nodes)
• expanding and collapsing nodes and subtrees
• editing information in the nodes (names of persons, personal data, link to a photograph, etc.)
• saving the tree

Changing the geometry of the tree

By clicking a node in the edit mode, you can:

• add a child to the node
• add a parent to the node (if the node already has a parent, a new node will be inserted in between the two, hence making the original parent a grandparent)
• delete a node (if the node has children, they will be inherited by the parent of the node)
• delete a node and all of its offspring
• move node up or down among its siblings, hence making it an "older child" or a "younger child"

Expanding and collapsing nodes and subtrees

In the View mode:

• click a node to expand/collapse it
• click a node while holding down the shift key to expand/collapse the node and all of its offsping

In the Edit mode:

• clicking a node will display menu of options
• click a node while holding down the shift key to expand/collapse the node
• you can expand/collapse the node and all of its offspring by clicking the node and selecting the relevant action from the menu

Editing information in the nodes

You can add a person by clicking on any other person in the node (or on the node itself if it is empty).

Upon clicking on a person, you can also delete it, edit its information, move it in the node, and add information common to all persons in the node (such as the date of marriage).

The information collected for each person is as follows (you can leave any of the fields blank):

• name (full name)
• url of a photograph
• gender (only used to color the background according to gender in the expanded node)
• date of birth
• date of death
• additional information

The provided information can be a plain text or HTML code. You can thus add links to other web pages inside the nodes, and so on, as long as you know the required HTML code.

The photograph will be scaled to a size 100 pixels high times 80 pixels wide. If you wish to prevent scaling and distortion, provide photographs in the above size.

Saving the tree

Saving the tree requires a bit of your assistance. This is because FTB is written in JavaScript, and JavaScript applications are not allowed to open or save files from the browser for security reasons.

To save the tree, click on a node and select "Save the family tree" from the displayed menu.

A dialog box will appear with detailed instructions how to proceed. In a nutshell, the HTML code of the file you need to save will be displayed. You must then copy it, paste it into a text editor (such as Notepad), and save it as plain text into the FTB folder. Don't forget to use the extension ".html", else the saved file will not be automatically recognized as a webpage by your operating system.

Once the file is saved, you can continue working.

You can later open the file via the main FTB page ftb.html by specifying the filename, or you can open the file directly in your browser.

Sharing your family tree with others in Edit mode or View mode

Let us assume that you have created and saved a family tree named mytree.html and that you saved it into the FTB folder. You would now like to share it with others. How to do it?

If you wish to share the tree in a View mode only, collect these files in the FTB folder:

• your file mytree.html
• the JavaScript file ftb.js
• the style sheet ftb.css
• connecting lines image ftb.gif
• background images male.jpg and female.jpg
• all photos and external documents you might have referred to from the family tree

Alternatively, you can post the files online in one folder with mytree.html as the main page.

If you wish to display the file in the Edit mode, proceed as in the View mode, but add the file ftbedit.js. The other party will then have the ability to edit the copy of your family tree.

For advanced users

You can modify the appearance of the tree by playing with the style sheet ftb.css.

If you are adventurous, you can even modify the JavaScript files ftb.js and ftbedit.js to add functionality to the program, or to render the tree differently on the screen. There is no high-level trickery used in the code, but positioning and displaying the tree on the screen is a delicate operation so you will probably not understand the code without studying it carefully.

Have fun!

Petr Vojtechovsky (May 2007, Denver)