Family Circles
  1. Access
  2. Video
  3. What is the Viewer?
  4. How to use the Viewer
    1. Tools Panel
  5. Actions
  6. Viewer Data

Access

In the left menu, the Viewer application is accessed by clicking on this icon:

Run Viewer

any place you see this icon you can click on it to go directly to the viewer. If you hold the mouse over the icon it will show a reminder of what it does.

Video

Watch this video to talk you through the information on this page and more.

What is the Viewer?

The viewer is a 3D rendering of genealogical data in the form of family trees. It allows a person to easily understand family relationships at a glance. The viewer is a lot like looking at a read only file of a word document: you can see all the content contained within the page, but none of it can be edited.

How to use the Viewer

The video at the top of this page gives a more visual depiction of how the viewer works, and there’s also a table below this text that gives alternate methods of doing these things with different mouse set ups. In any case, for those who prefer text this is an explanation of how to navigate around the viewer.

Looking Around
Zoom
To zoom in and out you use the scroll wheel on your mouse. To zoom in you scroll up, to zoom out you scroll down.
Pan
To pan the model you right click and drag in the direction that you want the model to move. For instance, if you want the model to move to the right, you would right click and drag the mouse to the right.
Rotate
To rotate the display, all you have to do is left click on a blank area of the screen and drag to the right or left. This will allow you to see things in the family circles from a different angle. The axis you’re spinning around will always be whatever is in the dead center of your screen at the moment, and the point you’re spinning around can be changed by either panning or selecting a name, which is explained below.
Centering the Display on an Object
An easy way to center the screen aside from panning to your destination is by double clicking on any of the dots for the names that are displayed in the family circle. Both family names and person names can be selected and centered on this way.
Accessing Details of an Individual
Some family circles, when they’re built, have links for some of the people that open up to a webpage that has more information on them. If a person has a link to more information, their name will show up as blue on the display. To view this information, all you have to do is single left mouse click on the dot that the person is associated with and the webpage they’re linked to will open up in a new tab.
Tools Panel

Tools Panel:

The black arrow:
The tool panel can be minimized or pulled out by clicking the arrow.
? About/Help icon:
The question mark button will pull up a little screen with a link to the Family Circles home page and also this viewer instructional page.

Actions

The following table shows all the default supported functions and actions to perform them. If the Tools Panel is used to adjust the default click/tap then the function that is swapped can be done using the action that was swapped.

Function Action
1 Button Mouse 3 Button Mouse Touch
Open Related Page
Titles are different color (Blue) if available
Mouse Click Left Mouse Click Single Finger Tap
Look at/Center on Item Double Mouse Click Double Left Mouse Click Double Single Finger Tap
Rotate Model Mouse Drag Left Mouse Drag Single Finger Drag
Zoom In/Out Model CTRL Mouse Drag Middle Mouse Drag/Scroll Wheel 2 Finger Spread/Pinch
Pan Model Shift Mouse Drag
Meta/Command Mouse Drag
Arrow Keys
Right Mouse Drag Double Finger Drag

Viewer Data

The URL for the viewer is:

http://fc.jenika.com/code/current/viewer

The viewer supports passing a "data" parameter that can be a full URL or some path from the server that the viewer is on. So for example fc.jenika.com has a data directory with a number of Family Circles JSON files. You can open any of them in the viewer by using something like:


http://fc.jenika.com/code/current/viewer?data=/data/family.json

Any web service that provides access to files in a raw form and that accepts CORS can be used as the data URL.

I have found that Dropbox can be used to store JSON files for sharing with others without too much headache.

  1. Upload your json file to Dropbox.
  2. Select the uploaded json file and click the share button.
  3. Click "Create a Link"
  4. Click "Copy Link"
  5. You should get something like:
    
    https://www.dropbox.com/s/69hschlo4qi6d6v/test.json?dl=0
    
    
  6. That link is great for sharing with another person but loading it into the viewer is a little different: what you want for this is replace the www.dropbox.com with dl.dropbox.com (See: direct link). So the above example becomes:
    
    https://dl.dropbox.com/s/69hschlo4qi6d6v/test.json?dl=0
    
    
  7. You can then take the above url and pass to viewer:
    
    http://fc.jenika.com/code/current/viewer?data=https://dl.dropbox.com/s/69hschlo4qi6d6v/test.json?dl=0
    
    
  8. The above URL will then open a page with the passed Family Circles JSON rendered as a model.

I also tried to use Google Drive as JSON file storage however the only way I could work this out was through the Google Drive API which is way more work for something that should be as simple as the dropbox example. If someone knows of a simple URL that will return the raw content in google drive with proper CORS headers let me know so I can update this.

Microsoft OneDrive I had no luck with outside of using Microsoft Graph OneDrive REST API.

Apple iCloud Drive I had no luck with outside of using CloudKit

Just some personal commentary about all this: it seems sad that the above is not easy for this case. It is easy to provide files from a web server and it is also easy to deal with CORS for a tech person, however both of these things are more effort than the average Joe wants to deal with.