Access
In the left menu, the Viewer application is accessed by clicking on this icon:
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:
- 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.
- Upload your json file to Dropbox.
- Select the uploaded json file and click the share button.
- Click "Create a Link"
- Click "Copy Link"
- You should get something like:
https://www.dropbox.com/s/69hschlo4qi6d6v/test.json?dl=0
- 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
- 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
- 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.