Snap! API

Advanced Topics Development
1

Hello @jens. My name is Eric Stein. I am working with @richnguyen and Glen Bull at the University of Virginia. We are attempting to use the Snap! API to integrate Snap! with SoundScope and with SCALE (the adaptive learning system developed by Bill Ferster). Could you provide an example of an external JavaScript program communicating with Snap! via the API? The documentation on GitHub does not provide all of the details to allow us to implement two-way communication. An example would be helpful, if you could provide that. Thank you for the assistance.

2

@jens @richnguyen @ericstein As Eric mentioned, the faculty in the CS department are eager to begin working with the new Snap! API. However, the documentation for the API on GitHub does not appear to provide them with enough information to implement the API.

An example in which an external JavaScript program communicates with a Snap! program would give them a starting point. Thanks for developing the API, and thanks for the assistance with this.

3

Hi @ericstein and @glenbull,

Is not current docs helpful?
I think so.

There are two big ideas:

  • First, Snap! API are methods from IDE morph. So it's easy to reference that object (IDE) from outside:
    var ide = world.children[0];
  • Second, these functions allow you to do "Snap! normal actions" with your JS code. You can fire Snap! actions from outside (broadcast and setVariable) and you can get events or info from Snap! to do something outside (addMessageListener and getVar)

Example. If you build a WebServer, you can connect Snap! with your network.

Joan

4

Joan,

Thanks for the help; I will let you know if I have additional questions about Morphic.

5

Joan,

The link you provided states the following:

This experimental Snap! API is a set of methods for an IDE_Morph containing a Snap! project.

How would I embed a Snap! project in an IDE_Morph? Can the Snap! project be an iFrame inside of a canvas that was used to initialize a WorldMorph with the following js:

world = new Morphic.WorldMorph(document.getElementById('world'));

if the id of said canvas is 'world'?

Thank you.

6

@jens @ericstein The specific information that the faculty in the Department of Computer Science at UVA need is:

 "clarification on how a Snap! iFrame relates to the IDE object 
  that is needed to enable two-way communication"

Evidently they have not been able to locate this information in the API documentation that you created. They commented, "This information is the last bit that we need to finish the implementation."

If you could provide this information or point them to the point at which it is explained in the current API documentation, it would be a huge help. And, of course, an example would also be very welcome!

Thanks so much for the assistance,
-- Glen

7

Hi @ericstein,

Maybe I don't understand your context... but I think there are two main options:

  • If you want use iframes, you can do it, but you will still need your own snap distro (Snap! on your server) to avoid cross domain restrictions. Then, from your html code (the page with the iframe) you can do something like:
var snapFrame = document.getElementById("yourFrameId"),
    snapWorld = snapFrame.contentWindow.world,
    snapIde = snapWorld.children[0];

And with this snapIde defined, you can use Snap! API outside your iframe. Something like:

snapIde.broadcast("message");
  • But also you can "hack" your Snap! distro, loading your JS code, and then, world are directly available on your JS code.

Joan

8

I think the issue is not so much the Snap! API, but the security model of an iframe. True 2-way communication between a iframe and the parent document requires some extra work if the domains do not much. Hosting Snap! on your own server will remove some of those restrictions.

9

@jguille2 and @cycomachead,

Thank you very much for the assistance. We were able to use your advice to install a local copy of Snap! on our servers and implement two-way communication between our JavaScript code and the local instance of Snap!

We just have one more question: How can we load an existing Snap! project as a preset for the local instance of Snap! (as we did with an iFrame that ran a Snap! project being run on your servers)? Would this involve downloading the .xml file of the project and implementing it locally on our servers? If so, how would we go about doing this?

Thank you again for your time and patience.

10

Hi @ericstein,

Different options here.

If you run your own Snap! copy, you can load by URL Snap! project files (xml) easily.
You only need to call http://your_domain.extension/path/snap.html#open:relative_path/project.xml
That's all

Joan

11

That worked; thanks for all the help!