Family Circles Forum

Using Family Circles on my page without iframe

#1

I am trying to use FC directly on the page, so I would control the content.

I added this ti header
script src=“https://fc.jenika.com/code/current/three/three.min.js” /script
script src=“https://fc.jenika.com/code/current/three/OrbitControls.js” /script
script src=“https://fc.jenika.com/code/current/fc-min.js” /script
and prepared a canvas, but have some problems with adding JSON data to be drawn.

Do you have a simple example on how to do that.

And do I have to link to your site for Copyright and how.

#2

Take a look at the file https://fc.jenika.com/code/current/viewer .

Inside is:

 document.addEventListener("DOMContentLoaded",function() {
   var url = new URLSearchParams(window.location.search);
   var page=new FamilyCircles.canvas({url:url.get('data'),
                     data : report,
                     target: document.getElementById("fc")});
 });
 function report() {
   console.log(this.toString());
 };

The above is not the cleanest example.

But it highlights three things:

  1. target - what you want to render the model in defaults to the document body if not specified.

  2. url - specify any url that will return Family Circles JSON.

  3. data - this can either be a Family Circles JSON or it can be a function call that will return a Family Circles JSON.

If you link to my site for the scripts I’m fine with that. A copyright will get included in the fc-min.js it self soon.

#3

Usually you would only use either the url argument or the data one. Not really positive what happens if you used both. But hopefully it would include both in that case.

#4

in the meantime I managed to do this from another example, but I get 404 error due to different domain on font load.

GET https://wikitree.sdms.si/code/0.0.7/three/fonts/helvetiker_regular.typeface.json 404 (File not found.)
load @ three.min.js:706
load @ three.min.js:793
e.canvas @ fc-min.js:320
(anonymous) @ wikitree.js:218
fire @ jquery-2.2.3.js:3187
fireWith @ jquery-2.2.3.js:3317
done @ jquery-2.2.3.js:8785
(anonymous) @ jquery-2.2.3.js:9151
load (async)
send @ jquery-2.2.3.js:9170
ajax @ jquery-2.2.3.js:8684
jQuery.(anonymous function) @ jquery-2.2.3.js:8835
getJSON @ jquery-2.2.3.js:8816
WikiTree.getSrchFamillyCircle @ wikitree.js:201
dispatch @ jquery-2.2.3.js:4737
elemData.handle @ jquery-2.2.3.js:4549

#5

I am trying it here.

https://wikitree.sdms.si/default.htm?report=srch9&WikiTreeID=Trtnik-2&Generations=2&OnlyBlood=1

#6

Yep that is a problem will have to resolve in the next release for now you would have to copy the font file to the indicated location on your server.

#7

Already done that and it works.

How do I set the camera target?

I tried
var fcf=new FamilyCircles.canvas({
data:json,
config:{camera: {target:10816946}},
target:document.getElementById(“circles”)
});
but has no effect.

#8

I got it working. Any suggestions to improve?
https://wikitree.sdms.si/default.htm?report=srch9&WikiTreeID=Trtnik-2&Generations=2&OnlyBlood=1

#9

I think model looks good, hope someone at wikitree addresses the image issue so we can include photos but I consider that out of our hands.

Not real fond of the double scroll bars on the right. But it is a minor issue.

Nice work!

#10

Is it possible to wrap the text in multiple lines? I tried /n, br but was not successful. I would like to include years to the graph.

#11

Certainly possible from inside the FamilyGroup and PersonGroup class. Not real clear on what “years” you want to display. Probably not something I will focus on any time soon.

But, at some point it wouldn’t take that much to allow the Name to include “\n” or some other chars to specify a new line, or even potentially allow for some configurable notion of fields to show in addition to name. For the Presidents data set I have wanted to show Occupation in the models so its easy to see who actually was the President and what number they were. Similarly for the English Royal Family data set I wanted to include who was the King/Queen in the model.

For the direction I’m heading for time, what I want is to have a notion of a time line. As a slider above the model that has years and moving back and forth would shift the avatars to show people appropriately based on the year selected in the slider. This assumes you have a yearly avatar of the people displayed. Not likely to work for the past very well but could be done for the future. Some day I will put together as many pictures as I can for my family to get close to a yearly photo and make a prototype to see if I like it as much as I think I will. What I really want for avatars is full 3D models not just photos but thats a hole different set of issue that is possible but probably not real practical yet for many reasons.

#12

I included it into production, visible to all.
https://wikitree.sdms.si/default.htm?report=disp1

#13

I tried with Satterwhite-2503 and I think you may have data issues still with not always including something. That shows dangling people.

image
image.png1372×358 20.5 KB

#14

I announced it in Data Doctors google group and they loved it.

There were immediately 2 complaints.

One for Unicode
https://wikitree.sdms.si/default.htm?report=disp1&WikiTreeID=Індутний-2&Generations=2&OnlyBlood=1

And another for overlapping circles. No example, but I noticed it as well once you have a few generations. I found this example in my family.
https://wikitree.sdms.si/default.htm?report=disp1&WikiTreeID=Trtnik-2&Generations=3&OnlyBlood=1

I fixed your case. The unconnected persons were the children without appropriate circle.
https://wikitree.sdms.si/default.htm?report=disp1&WikiTreeID=Satterwhite-2503&Generations=2&OnlyBlood=1

#15

Ya currently my code is not real good at positioning bottom up centric data. Improving positioning is on my list of things to do but I expect it will always be on my improvement list. But will get better over time.

#16

One for Unicode

I believe because of my font issues you have placed a copy of the font file on your server.

Given that if you replace your files contents with the contents of this http://threejs.org/examples/fonts/gentilis_regular.typeface.json I believe that will support a lot more unicode chars. Not sure if it covers them all but hopefully will get you closer.

#17

Font file works great for europe characters. It still doesn’t support cyrillic.

I had to put it on my server, since JS wanted to load it from there.
three.min.js:706 GET https://wikitree.sdms.si/code/0.0.7/three/fonts/helvetiker_regular.typeface.json 404 (File not found.)
load @ three.min.js:706
load @ three.min.js:793
e.canvas @ fc-min.js:320
(anonymous) @ wikitree.js:220
fire @ jquery-2.2.3.js:3187
fireWith @ jquery-2.2.3.js:3317
done @ jquery-2.2.3.js:8785
(anonymous) @ jquery-2.2.3.js:9151
load (async)
send @ jquery-2.2.3.js:9170
ajax @ jquery-2.2.3.js:8684
jQuery.(anonymous function) @ jquery-2.2.3.js:8835
getJSON @ jquery-2.2.3.js:8816
WikiTree.getDispFamilyCircle @ wikitree.js:201
dispatch @ jquery-2.2.3.js:4737
elemData.handle @ jquery-2.2.3.js:4549

#18

Another thing I noticed and got suggested is when viewing from the top, fonts and images don’t face the camera. You change the horizontal angle but not the vertical.

#19

I have tried different ways of rotating up and down but never really found any thing that I liked stuff overlapped too much . But, in the past I only focused on rotating the names and avatars. Perhaps if rotated the combination I would like it better. Have to give it a try some day.

For cyrillic do you know what common or open source font includes those characters?

#20

No. I never used non system fonts.