HTML5 Canvas Genogram

HTML5 Canvas Genogram

Cancelled

Job Description

I want an html5/css/js component created to use within another php application I am developing. It must work on a touch screen.

It is to create a Genogram (like a family tree) eg:
http://goo.gl/fK5zx

This is the process.
1. Blank screen shown except for a single 1cm diameter circle

2. Click on the circle and a menu appears with these options:
- Edit Person
- Add Parent
- Add Partner
- Add Sibling
- Add Child

The same options appear when clicking on any subsequent square or circle that is added to the screen (each one represents a person).

When any of the options above are tapped/clicked on a form appears:
Edit Person
Name: Age: Sex: Alive: Illness Hx:

Add Parent
Name: Age: Sex: Alive: Illness Hx:

Add Partner
Name: Age: Sex: Alive: Illness Hx:

Add Sibling
Name: Age: Sex: Alive: Illness Hx:

Add Child
Name: Age: Sex: Alive: Illness Hx:

If a Parent is added it appears above the Primary individual, If a Partner it appears beside and if a child it appears below.

If a male then a square is shown, if a female the a circle is shown. Just google genogram and you'll understand.

When the genogram is saved it needs to save an array of data that describes all of the individuals and their relationships. This data should be able to be used to redraw the genogram.