Re: Greetings, contributing to lab-interactives

[Daniel Damelin]

Hi Peter, 

It sounds like you are doing things correctly, but it’s hard for me to tell without specific files. I also wouldn’t fully trust the playing with the JSON on the lab.concord.org page. I’ve had some issues occur with using the “update from JSON” button. If you are going to do any significant work you should use your code editor and run a local copy of the site for the most consistent results.

If you send me the .mml file you were using to convert, I can take a look both in Classic MW and in the new system to see if there is something odd about the model you are trying to use.

If you send me the entire interactive JSON as well, I can also see if there were any issues with it. 

-Dan

On Aug 27, 2015, at 10:47 PM, Peter Malcolm <peter.t...@gmail.com> wrote:

Hi Dan,

I could use some pointers -- I've realized the quickest way to get up and running with the Interactives / Models is to just play with the JSON on the page, local or live.

Interesting things happen when I build a model in MW and then put the MML through the online converter and then drop them into the editor.

But there are some basic things that still have me stumped.  I set a VX and VY value in MW (Java editor), and these show up in the JSON.  But even though the atom is bouncing around in the Java interface, it does not move in the JavaScript version.  I can't seem to set any kind of velocity vector that actually produces movement when i click the play button in the JS.  So those are my issues on the model / MML side.

Likewise, I am having trouble getting a slider to show up.  I have grabbed code like the code below, dropped it into the Interactive editor, and hit update, but it does not seem to do anything.  No complaints from the parser (and I double checked it's valid JSON in JSONLInt) but just nothing.

Can you point me to some documentation on how to wire things together?  I'm excited to get to the API usage, but I've got a couple more basic hurdles to get across first.

Thanks!

-Peter

"components": [
	{
	"type": "slider",
	"id": "left-block-slider",
	"property": "left-block",
	"title": "Left block",
	"min": 0,
	"max": 50,
	"displayValue": "return format('.1f')(value)",
	"labels": [
	{
	"value": 0,
	"label": "0.0"
	},
	{
	"value": 50,
	"label": "50.0"
	}
	],
	"steps": 50,
	"width": "10em"
	}

On Wed, Jul 29, 2015 at 7:31 AM, Dan Damelin <ddam...@concord.org> wrote:

Yup. Sounds like you are on track. 

Dan

On Jul 28, 2015, at 10:42 PM, Peter Malcolm <peter.t...@gmail.com> wrote:

Hi Dan,

Thanks for the thorough overview.  I've got the lab-interactives-site cloned in GitHub and running on my machine.  I've pulled down and run the Intro to Modeling, and i've joined the lab-models group.  Next step, create an MML of the "bouncy ball" with a stub for the elasticity, and then convert the config to JSON.  Does that sound right?

Best,

-Peter

On Tue, Jul 28, 2015 at 10:10 AM, Daniel Damelin <ddam...@concord.org> wrote:

Hi Peter,

Here’s the info you will need to get started on authoring interactives.

The codebases are managed as Git repositories on Github. The codebase in which you will do most, if not all, of your work is the lab-interactives-site. This is where all the interactive definitions and model definitions are stored. To do work here, you should fork the repo and follow the directions in the Readme file (shown on the landing page of the repo) to set up a local clone of your fork of the repository, and then create a branch for doing work on a particular interactive. Once you have work you want to share you can submit a pull request for that branch and we can take a look at it to make sure it is running properly and the format is compliant with how we format other interactive files (mainly how things are indented and where line breaks are used). You can look at many other examples at the lab-interactives-site to see what is expected. 

The Lab framework is another repository. This contains the code for the molecular dynamics engine (as well as some other modeling engines) and has the code for rendering the view of the models and the surrounding interactives. If you wanted to create new modeling features, user interface widgets, or outputs, this is where those kinds of changes would be made, but this codebase is more complex than making new interactives using current features. There are a few parts of this repo that will be helpful to be familiar with even if you are not modifying it.

Generally you will look at other interactives for examples of how to do things you want to do in the one you are working on, but there are some formal definitions of the interactive and model JSON files. These will give you some sense of the parts that are possible to be present, and in some cases what they refer to. See:

Interactive JSON metadata definition: https://github.com/concord-consortium/lab/blob/master/src/lab/common/controllers/interactive-metadata.js 

Sometimes it is not clear what properties are allowable (or required) when authoring an interactive. This should be a comprehensive list. The comments in the code can also sometimes help you understand what the properties relate to.

Model JSON metatdata definition: https://github.com/concord-consortium/lab/blob/master/src/lab/models/md2d/models/metadata.js

The models have their own JSON definition. This file shows what properties are associated with the molecular dynamics models. Mostly you will not be hand coding these model JSON files. Instead you will likely create and modify them using the original Java-based version of our modeling tool—the Molecular Workbench. You should become familiar with how to make models in this tool. Please download it and take a look at the extensive user manual. You don’t need to become an expert, but you will use this tool to create the initial state of some models in the form of a .mml file. See below how we convert this to the model JSON format to use in the HTML5-based interactives you will make.

In the Interactive you will often have to write JavaScript that talks to the model via an API. The scripting API for the molecular dynamics model is here:

https://github.com/concord-consortium/lab/blob/master/src/lab/models/md2d/controllers/scripting-api.js 

We still generally create models (the initial number, position, and properties of atoms) using the Classic (Java) version of the Molecular Workbench. When you save a page you made using that application, the saved model files all have the .mml extension. This type of file can be converted to the new .json format by using the converter found here: http://lab-framework.concord.org/mml-converter.html  

I recommend you join the lab-models google group. That is the best place to ask questions while working on interactives.

https://groups.google.com/forum/#!forum/lab-models

I would love to start by working on the Intro to Modeling Activity  However, this would require adding a new feature to the modeling engine, in which a property of “elasticity” is added to obstacles. I’m not sure how comfortable you would feel jumping into the Lab framework and modifying the molecular dynamics engine. It’s a big first step. Perhaps the best way to get started would be to create the interactive on page 6 of this activity with a non-functioning elasticity slider that we could connect to the new elasticity property once that has been added to the engine. That way you can build a new interactive first and then we’ll see if it makes sense to dive into the modeling code.

Hope that is enough to get you started,

-Dan

P.S. The links to the Intro to Modeling Activity and page 6 above will download a .jnlp file. This may or may not get launched automatically by your browser. If on a Mac you may need to find the download, right-click on it, and approve opening it manually.

On Jul 27, 2015, at 10:33 PM, Peter Malcolm <peter.t...@gmail.com> wrote:

Hi Dan,

Working on the SAM materials sounds good.  Mind sending some links to source?  Does the project involve porting the CC Launcher from Java so that it'd work in-browser?  Backwards compatible with the CCLA files... ?

I work mostly in JavaScript nowadays - I have some experience with svg and canvas.  My Java's a little rusty, but I'd welcome the chance to get back into that to work on the port.  I'm not versed in Ruby - happy to learn what i need to to work on the framework.

Cheers,

-Peter

On Mon, Jul 27, 2015 at 10:10 AM, Daniel Damelin <ddam...@concord.org> wrote:

Hi Peter,

There are a number of interactives that we would like to create/convert from Java. I have a project with Joe Krajcik in which we are making a modeling-focused curriculum based on atomic level interactions as an explanatory framework for everyday phenomena.

We also have one of our most popular sets of curricular materials from a previous project (SAM) that we have made some progress in porting to HTML5, but have not yet completed this work. 

Depending on your comfort level with Javascript coding, there may also be some work in improving the Lab framework which is the underlying code for the modeling engine and interactive layout system.

Right now I have a Google Summer of Code intern working on the Interactions curriculum project, so perhaps, if you are interested, you might be interested in helping to work on the SAM materials?

-Dan Damelin

On Jul 26, 2015, at 11:02 PM, Jen Goree <jgo...@concord.org> wrote:

Do you want to respond?

---------- Forwarded message ----------
From: Peter Malcolm <peter.t...@gmail.com>
Date: Sun, Jul 26, 2015 at 1:22 PM
Subject: Greetings, contributing to lab-interactives
To: jgo...@concord.org

Hi Jen,

I received a doctorate at UVA in instructional technology in 2013 -- during my graduate work I worked on WISEngineering (a variant of Berkeley's WISE LMS), and got to meet some of the Concord developers through their work with WISE.  I'm currently looking for some cool development work to do in my free time.  I'd love to volunteer / contribute to the Concord lab-interactives. I've forked the main lab interactives repo to my own github account.  I'm still finessing the install -- nokogiri version 1.5.10 or 1.5.0 ... ?

Before i get too much further i figured i would reach out for some direction.  Are there new simulations you are working on that could use a hand?

Thanks,

-Peter

[Peter Malcolm]

Hi Dan,

Thanks.  I've started to retrace my steps, and i'm having much better luck this time -- using make and rackup to refresh everything instead of trying to update via the interactive editor.  I've got the bouncing ball and the 3 sliders now.  The interactive is as stripped-down as possible, and whose model is taken from the converted MML:

INTERACTIVE:

https://github.com/petermalcolm/lab-interactives-site/blob/atom-superball/src/interactives/samples/6-simple-single.json

MODEL:
https://github.com/petermalcolm/lab-interactives-site/blob/atom-superball/src/models-converted/atom-superball/6M-simple-single.json

I'll work on wiring up the friction slider next.

Best,

-Peter

[Daniel Damelin]

Hi Peter,

I’ve checked out your repo and the atom-superball branch so I can easily run these things locally on my own machine. Looks like you’ve got a good start. The one request I would make before you submit a pull request would be to move the interactive json to a new directory. This work will be for the Science of Atoms and Molecules (SAM) - Intro to Models activity, so you could copy the pattern for the other SAM activities, making the path: src/interactives/sam/intro-to-models for the 6-simple-single.json interactive.

Thanks for working on this!

-Dan

[Peter Malcolm]

Hi Dan,

My pleasure.  :-)

Per your request, i've moved the interactive definition JSON into a new directory called src/interactives/sam/intro-to-models.

I've added a graph on the right side to show the KE.  But i notice there is a graph halfway down the screen that already provides that.  Should I put the real-time graph inside the interactive as well?

Can you explain the API a little more?  It has some useful looking functions -- it looks like i can just feed lines of JavaScript in as array members in the interactive?  I'm tempted to try to wire the friction value in the model to the slider value, but I'm not sure if the model gets parsed and bound to named values.  How can i initialize that?

Thanks,

-Peter

[Dan Damelin]

Hi Peter,

You can wire up a model property directly to a slider using the slider's "action" field that makes an API call to set a property, or you can wire the model property directly to the slider using the slider's "property" field, but a better pattern would be to create your own parameter that sets the model property when changed and link the slider to this parameter via the slider's "property" field. You can see an example of this here: http://lab.concord.org/interactives.html#interactives/samples/3-100-atoms.json

By using this last pattern the user's slider settings are retained even when the model is reset. Of course one of the other patterns might make sense if this is not a desired effect. 

As for the graph we do want these embedded within the interactive itself. Generally we don't send people to lab.concord.org pages that include these developer oriented features. Instead one use one of the two methods found in the Share link on the upper right of the interactive when making this a public facing model. 

Dan

[Daniel Damelin]

Hi Peter,

Looks good. You may want to remove the number from the slider thumb, especially for friction which is in some unit that won’t make sense to folks.

The other thing you should update is this file to include the new grouping of interactives that you are working on:

https://github.com/concord-consortium/lab-interactives-site/blob/master/src/interactives/groups.yaml

Look for the pattern used by the other SAM groupings. That will make it appear in the the pull-down menu.

-Dan

On Sep 20, 2015, at 9:04 PM, Peter Malcolm <peter.t...@gmail.com> wrote:

Hi Dan,

Just checking in.  I've gotten pulled away from this project but am looking forward to getting the chance to finish the interactive.  I tried the custom variable using the technique you suggested and got friction working.

Best,

-Peter