On Aug 8, 2016, at 8:20 PM, Joshua Horowitz wrote:

I've (finally) put together a library for embedding Apparatus diagrams into webpages. It's called "apparatus-viewer.js" or something like that.

Here is the live demo.

<Screen Shot 2016-08-08 at 6.34.56 PM.png>

The first example shows how diagrams can affect their surroundings and the second example shows how surroundings can affect diagrams. I am really curious to see if people use these connections to make documents which break out of the "isolated Java applet" model.

Here are the files needed to make the demo run. Everything is self-sufficient: if you include "apparatus-viewer.js" and "apparatus-viewer.css" in your HTML, you should be able to embed your own diagrams. See "index.html" for an example of how to make that happen.

Here is the git branch storing the code for all of this.

I would like to play with this set-up a bit more, and then merge it into momma Apparatus sooner rather than later. (I am not worried about backwards-compatibility, since users of this system should be downloading the version of "apparatus-viewer.js" which loads their diagrams correctly to their own host anyway.)

Quick notes:

• The only elements you can drag in the viewer are the ones which have been explicitly set to be "controllers" (by clicking some little red circles in the editor). AFAIK, this is what the "controller" concept has been meant for all along, so it is satisfying to see it in action.
  
  As a reminder, here's what it looks like when a slider's "Circle" is set as a controller for its "value":
  <Screen Shot 2016-08-08 at 8.15.26 PM.png>
  
  
• I kept the red highlight-on-hover for controllers.:
  <Untitled.png>
  In the long run, this should be removed – diagram editors should be able to define their own hover behaviors using Apparatus itself. But that's not possible yet, so for now, it's very useful to have feedback about what is controllable.
  
  
• When embedding a diagram, you have to specify a "region of interest" in diagram coordinates. The library will then scale the diagram to fit the DOM element you give it, while showing the entire region of interest. Really, you should be able to specify a region of interest ("canvas"?) directly in the editor:
  <Screen Shot 2016-08-08 at 8.12.23 PM.png>
  
  
• There should definitely be a "Load in Apparatus Editor" button in the corner of embeds!
  
  
• Once some thought is put into the Firebase-backed project-saving feature, the library should support loading diagrams from "the cloud" ⛅.
  
  
• When hooking up the second example, I first told the link to set the value of "number of circles", a top-level variable. But it turned out I had built this diagram by setting "number of circles" to the slider's "value", so setting "number of circles" from outside the diagram had the effect of disconnecting the slider!
  <Screen Shot 2016-08-08 at 7.07.13 PM.png>
  This suggests that, usually, what you REALLY want to do from outside a diagram is "drag" an attribute to a value – that is, use Apparatus's constraint-solving system to try to get an attribute to a value without changing its symbolic expression. This is not possible now, but it feels very natural to me and I should make it possible.
  
  
• The viewer Javascript is no smaller than the editor Javascript because of how the application's code is structured. It also includes React, which feels a little silly since React is so underused in the viewer. But I don't really care – it's more important to me that as the editor evolves, the viewer can easily go along with the ride, and this suggests sharing as much code as possible (even React code).
  
  
• "apparatus-viewer.css" is a pain and I think I'll get rid of it.

P.S. Thanks Chaim, for helping me get off my Apparatus-embedding butt.