Family Circles

Access

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.

Interface

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.

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.