In the left menu, the Viewer application is accessed by clicking on the 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.
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. There are still some controls on how to navigate the page which will be explained here. There’s a condensed version of this information in a table down below that accommodates for different computer set ups, and the video above also explains this information more visually.
- Looking Around
There are three primary ways of seeing all of a family circle and that is by zooming in and out, panning, and rotating the display.
- 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.
- To pan the model you right click and drag in the direction that you want the model to move. If you want the model to move to the right, you would right click and drag the mouse to the right. To move the model up you would right click and drag the mouse up.
- 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 Screen 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 in it 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.
|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
|Right Mouse Drag||Double Finger Drag|
The URL for the viewer is:
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:
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:
- 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:
- You can then take the above url and pass to viewer:
- 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.
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.