Welcome to Genesjs

Genesjs

This web-application is a simple interactive viewer of genealogy trees, stored in original open format based on JavaScript or JSON. There are no editing tools for the trees in the application. The files can be created and edited in any text editor with utf-8 support.

The name comes from slighly modified word Genesis, where the letter 'i' is substituted by 'j' for making an allusion to underlying js (JavaScript) technology.

Installation

Visit the main branch in Genesjs repository and grab all files. Copy them in any local folder and use as is (no web-server required).

Contents

• genesjs.html - main page
• /js - folder with required scripts
• /css - folder with external styles
• /personal - folder for the file family.js, which is loaded automatically (it's empty by default); you may create and edit other tree files in this folder; 2 example files are provided: example.js and example.json.

Tree file format

JavaScript file should contain root object 'family' or other object named in accordance to the filename. For example, the file abc.js should start with the line:

var abc =

Only English letter and digits are allowed in the name.

In the object, all persons are listed as nested objects with unique identifiers and predefined set of properties (most of them are optional).

var family =
{
  id1: // unique identifier
  {
    firstname: 'name',
    middlename: 'surname',
    lastname: 'family name',
    maidenname: 'maiden name',
    sex: 'f', // woman, or...
    sex: 'm', // man
    birth: '2000-01-01', // birth date in the format YYYY-MM-DD or YYYY
    death: '2000-01-01', // date of death in the format YYYY-MM-DD or YYYY
    spouse: 'spouse identifier', // or...
    spouse: ['spouse 1 identifier', 'spouse 2 identifier'], // many spouses delimited by comma,
            // in reverse chronological order, most recent goes first, or...
    spouse: [{person_id1: [startdate, enddate]}, // where person_id1 - spouse 1 identifier without quotes, startdate and enddate - dates in the format YYYY-MM-DD
             {person_id2: [startdate]}, // the same as above, but if the marriage is still in action
             {person_id3: [startdate, enddate, startdate]}] // the same as above, but if the marriage was followed by divorce and then again restarted (with the same partner)
    mother: 'identifier',
    father: 'identifier',
    stepfather: 'identifier',
    stepmother: 'identifier',
    text: 'any text', // for example, place of birth or current contacts
  },
  id2:
  {
    //...
  }
};

The link to a spouse can be made only in one direction - the back reference will be created automatically during file loading. If multiple marriages of a man/woman are registered in records of his/her spouses, and the links do not contain dates, they will be shown in the order of appearance of the spouses' records in the file.

Children of one marriage are shown in the order of their appearance in the file.

In case of JSON format, the declaration of root variable at the beginning of the file is skipped, i.e. the file starts with opening curly brace. At the end of JSON file there should not be ';'. In addition, all identifiers and field names (properties) preceding ':', should be embraced in quotation marks.

Both JavaScript and JSON have their own pros and cons for choosing.

For example, JavaScript allows you to use comments /* */, whereas JSON does not. On the other hand, JavaScript files should be loaded exclusively from the subfolder 'personal', and JSON doesn't impose this limitation. Error logging works different for these 2 formats.

User guide

To start the app load genesjs.html in your browser.

Open required genealogic tree by clicking the button in the left upper corner of the page and using the system Open File dialog, or simply drag and drop the file into the marked area. If an error occurs, it's shown on the page and highlighted in red. More details can be found in console window of web-developer tools (it's accessible through a command, which is specific for browser and browser's version, for example Ctrl+Shift+I for Chrome and similar ones).

The page displays a genealogy graph. Initially, most "ancient" family is shown. Every person is denoted by rectangle with details. Blood relatives for selected family are drawn with thick borders (family names may differ).

Marriages are denoted by larger rectangles, which embrace rectangles of spouses (can be more than 2). The number of marriages is shown in the left bottom corner of personal rectangle. If a date is specified for current marriage, it's shown at bottom edge of the marriage.

The graph may contain many interconnected trees - each for its own family. To switch between the trees one should click a personal rectangle for a person, marked with upward arrow in yellow circle.

If some descendants are not common, and number of children in a subtree does not equal to number of children of specific parent, then the number of this parent's children is shown in red in the bottom right corner of its rectangle. In such cases you can switch to the adjacent branch (and discover more children) by clicking on the parent rectangle.

Children of mixed marriages and corresponding parents are maked with asterisks.

If an additional text information is avaiable for a person, a sign 'i' in white circle is shown in the upper right corner of personal rectangle. On mouse hover the information is displayed in a popup block.

The genealogy tree can use 2 views, selected by buttons 'Graph' and 'Tree' in the upper top corner of the page.

'Graph' shows the tree expanded from top to bottom (flipped over). In this mode an additional option is available - 'Wrap': if it's enabled, too long horizontal links break off on the right side and continue below from the left side of the page. This eliminates horizontal scroll bar.

The second mode - 'Tree' - displays nodes expanding from the left to the right.

The 'Table' mode provides a table with all persons sortable by any column. In addition, you may select one of families form the dropdown list to apply it as a filter. The filter does also work with the 'Graph' and 'Tree'.

The button with camera image allows you to take a screenshot of the page, suitable for sharing or printing. This function opens new browser window with the image. Most of browsers block popups by default, so you need to allow popups on the page. This feature is implemented through a 3-d party library html2canvas.js - if you have problems with it try to print the scheme to PDF using standard command of your browser.

Screenshots

Graph view of Smith's branch:

Graph view of Brooks' branch:

Tree view of Smith's branch:

Tree view of Brooks' branch: