new interact system

136 views
Skip to first unread message

Jason Grout

unread,
Dec 28, 2012, 3:17:33 PM12/28/12
to sage-notebook
Hi everyone,

I've been working on a new interact system, inspired by a discussion
with William from this summer. I have a very rough proof-of-concept now
live on aleph.sagemath.org. Here is an example of a few sliders and
areas which update in real-time as expressions change:

http://aleph.sagemath.org/?q=a8f94b77-6a95-4bb9-8d79-55578799704f&lang=sage

It is relatively easy to create new controls too. Here is an example of
a 2d point picker/dragger (drag the little box around in the big box).
It's not working perfectly, presumably because of some jqueryui/css
issues I haven't figured out yet, but you get the idea.

http://aleph.sagemath.org/?q=a52345e0-930e-4578-b444-7e1f823ca6c4&lang=sage

Basically, you need a python class that inherits from Control that has:
- __init__() method: that sets self.ns to an InteractiveNamespace
object (usually passed in at creation). An InteractiveNamespace is
basically a dictionary that will notify the front end whenever a key is
assigned a new value (i.e., when a variable is assigned)

- create() method: that sends a message to the javascript side to
create the control. The message has the format:

sys._sage_.display_message({'text/plain': '<short text description>',
'application/sage-interact-control': {'control_id': self.id,
'control_type': '<javascript control identifier>',
'variable': [<list of variable names in namespace this control depends on],
'namespace': self.ns.id}})

- variable_update() method: receives a dictionary from the javascript
side about variable names (keys) to update in self.ns
- control_update() method: sends the javascript control whatever
information it needs to update itself

On the javascript side, create a new object like thus:

mynewcontrol = sagecell.InteractControls.InteractControl();

then add:
- create() method: creates the javascript control and sets up a
handler to send messages about changes back to the python side

- update() method: when a variable this control depends on is
changed, this method is called to update the control. This usually will
involve sending a message back to the python side to get whatever
information is needed, then updating the html or javascript somehow

- register the control with the javascript identifier you used in the
create message from the python side.

Anyways, play with it if you want. It's still really rough, method
names probably will change, etc. But I think the foundation is there.

Thanks,

Jason

--
Jason Grout

Harald Schilly

unread,
Dec 28, 2012, 4:05:52 PM12/28/12
to sage-notebook
nice, definitely an evolutionary step worth including in the future!
it works, and i think i get the idea of communicating instances. the
2D selector is also neat, better than the huge sliders.
in general, it just looks a bit more complicated than the existing
solution with a decorator ... but my guess is, this is already in the
pipeline?

h
> --
> You received this message because you are subscribed to the Google Groups
> "sage-notebook" group.
> Visit this group at http://groups.google.com/group/sage-notebook?hl=en-US.
>
>

Jason Grout

unread,
Dec 28, 2012, 6:13:24 PM12/28/12
to sage-n...@googlegroups.com
On 12/28/12 2:05 PM, Harald Schilly wrote:
> nice, definitely an evolutionary step worth including in the future!
> it works, and i think i get the idea of communicating instances. the
> 2D selector is also neat, better than the huge sliders.
> in general, it just looks a bit more complicated than the existing
> solution with a decorator ... but my guess is, this is already in the
> pipeline?
>

The framework is way more flexible, so it is a bit more complicated
because you have to do the layout, etc., yourself. You can see the
very, very start of a decorator-based solution here:

https://github.com/jasongrout/sagecell/blob/interact-messages/contrib/interact/interact_namespace.py#L174

Thanks,

Jason

Andrea Lazzarotto

unread,
Dec 28, 2012, 6:58:05 PM12/28/12
to sage-n...@googlegroups.com


2012/12/28 Jason Grout <jason...@creativetrax.com>

Here is an example of a few sliders and areas which update in real-time as expressions change:

I'm not sure I understand correctly. Is the plot also supposed to change istantly? Or just the sliders?

--
Andrea Lazzarotto - http://andrealazzarotto.com

Jason Grout

unread,
Dec 28, 2012, 7:11:32 PM12/28/12
to sage-n...@googlegroups.com
On 12/28/12 4:58 PM, Andrea Lazzarotto wrote:
>
>
> 2012/12/28 Jason Grout <jason...@creativetrax.com
> <mailto:jason...@creativetrax.com>>
>
> Here is an example of a few sliders and areas which update in
> real-time as expressions change:
>
>
> I'm not sure I understand correctly. Is the plot also supposed to change
> istantly? Or just the sliders?

The plot will redraw occasionally (it only depends on y, so moving the x
slider won't trigger a redraw--the system is intelligent that way).

We don't have truly dynamic plots yet, but this provides the framework
for such things. What would be cool now is if someone wrote a
javascript plotting control, which actually *would* update continuously.

Thanks,

Jason

Jason Grout

unread,
Dec 29, 2012, 4:09:17 AM12/29/12
to sage-n...@googlegroups.com
On 12/28/12 1:17 PM, Jason Grout wrote:
> Hi everyone,
>
> I've been working on a new interact system, inspired by a discussion
> with William from this summer. I have a very rough proof-of-concept now
> live on aleph.sagemath.org. Here is an example of a few sliders and
> areas which update in real-time as expressions change:

I made some simplifying changes that broke some of the examples (like I
said, it's rough and a work-in-progress); here is a new example that works:

http://aleph.sagemath.org/?q=504efe00-85d4-4047-9315-1398ffb0efb9&lang=sage

In particular, I added a context manager, so you can do:

with interactive_namespace(x=4,y=20):
Point2D('x','y').create()
slider('x', (0,100)).create()
slider('y', (0,100)).create()
ExpressionBox('x').create()


Thanks,

Jason

Andrea Lazzarotto

unread,
Dec 29, 2012, 5:44:09 AM12/29/12
to sage-n...@googlegroups.com


2012/12/29 Jason Grout <jason...@creativetrax.com>

What would be cool now is if someone wrote a javascript plotting control, which actually *would* update continuously.

Do you mean something like these?

http://www.jqplot.com/
http://badassjs.com/post/13788484076/csg-js-constructive-solid-geometry-3d-modeling-in
http://jsxgraph.uni-bayreuth.de/

Jason Grout

unread,
Dec 29, 2012, 11:17:34 AM12/29/12
to sage-n...@googlegroups.com
On 12/29/12 3:44 AM, Andrea Lazzarotto wrote:
>
>
> 2012/12/29 Jason Grout <jason...@creativetrax.com
> <mailto:jason...@creativetrax.com>>
>
> What would be cool now is if someone wrote a javascript plotting
> control, which actually *would* update continuously.
>
>
> Do you mean something like these?
>
> http://www.jqplot.com/
> http://badassjs.com/post/13788484076/csg-js-constructive-solid-geometry-3d-modeling-in
> http://jsxgraph.uni-bayreuth.de/
>

Yep, or any number of other ones like a three.js renderer. Or we could
even work with jmol this way. Or use our recent experiments with
matplotlib at
http://mdboom.github.com/blog/2012/10/11/matplotlib-in-the-browser-its-coming/

Thanks,

Jason


Gutow, Jonathan H

unread,
Dec 29, 2012, 11:47:35 AM12/29/12
to sage-n...@googlegroups.com
Just to let you know where the Jmol pure javascript stuff stands. Bob Hanson and the people collaborating on it with him have almost completed a javascript equivalent for Jmol, that switches from the Java applet to the javascript version automatically. The javascript version is slower, but for a lot of the 3-D in Sage it should be OK. What they've done uses some of three.js. I am beginning to work on how it could integrate into the Sage Notebook.

Jonathan
> --
> You received this message because you are subscribed to the Google Groups "sage-notebook" group.
> Visit this group at http://groups.google.com/group/sage-notebook?hl=en-US.
>
>

Dr. Jonathan H. Gutow
Chemistry Department gu...@uwosh.edu
UW-Oshkosh Office:920-424-1326
800 Algoma Boulevard FAX:920-424-2042
Oshkosh, WI 54901
http://www.uwosh.edu/facstaff/gutow/

Jason Grout

unread,
Dec 29, 2012, 12:25:44 PM12/29/12
to sage-n...@googlegroups.com
On 12/29/12 9:47 AM, Gutow, Jonathan H wrote:
> Just to let you know where the Jmol pure javascript stuff stands. Bob
> Hanson and the people collaborating on it with him have almost
> completed a javascript equivalent for Jmol, that switches from the
> Java applet to the javascript version automatically. The javascript
> version is slower, but for a lot of the 3-D in Sage it should be OK.
> What they've done uses some of three.js. I am beginning to work on
> how it could integrate into the Sage Notebook.
>

With this experiment I'm doing, we finally have a way to send updates to
jmol without having to reinstantiate jmol (just send the data jmol
needs). It would be cool to also experiment with having jmol do live
updates.

Thanks,

Jason

kcrisman

unread,
Feb 5, 2013, 10:01:41 AM2/5/13
to sage-n...@googlegroups.com


On Friday, December 28, 2012 3:17:33 PM UTC-5, Jason Grout wrote:
Hi everyone,

I've been working on a new interact system, inspired by a discussion
with William from this summer.  I have a very rough proof-of-concept now
live on aleph.sagemath.org.  Here is an example of a few sliders and
areas which update in real-time as expressions change:

http://aleph.sagemath.org/?q=a8f94b77-6a95-4bb9-8d79-55578799704f&lang=sage


This one doesn't seem to work any more - as you said, it's a work in progress.   Can you provide an updated version of that particular one? 

Jason Grout

unread,
Feb 6, 2013, 1:32:24 AM2/6/13
to sage-n...@googlegroups.com
On 2/5/13 9:01 AM, kcrisman wrote:
>
>
> On Friday, December 28, 2012 3:17:33 PM UTC-5, Jason Grout wrote:
>
> Hi everyone,
>
> I've been working on a new interact system, inspired by a discussion
> with William from this summer. I have a very rough proof-of-concept
> now
> live on aleph.sagemath.org <http://aleph.sagemath.org>. Here is an
> example of a few sliders and
> areas which update in real-time as expressions change:
>
> http://aleph.sagemath.org/?q=a8f94b77-6a95-4bb9-8d79-55578799704f&lang=sage
> <http://aleph.sagemath.org/?q=a8f94b77-6a95-4bb9-8d79-55578799704f&lang=sage>
>
>
>
> This one doesn't seem to work any more - as you said, it's a work in
> progress. Can you provide an updated version of that particular one?


http://aleph.sagemath.org/?q=402009e6-b256-41ba-91fb-6b8a885b8510&lang=sage

Thanks,

Jason

kcrisman

unread,
Feb 6, 2013, 12:41:43 PM2/6/13
to sage-n...@googlegroups.com


On Wednesday, February 6, 2013 1:32:24 AM UTC-5, Jason Grout wrote:
On 2/5/13 9:01 AM, kcrisman wrote:
>
>
> On Friday, December 28, 2012 3:17:33 PM UTC-5, Jason Grout wrote:
>
>     Hi everyone,
>
>     I've been working on a new interact system, inspired by a discussion
>     with William from this summer.  I have a very rough proof-of-concept
>     now
>     live on aleph.sagemath.org <http://aleph.sagemath.org>.  Here is an
>     example of a few sliders and
>     areas which update in real-time as expressions change:
>
>     http://aleph.sagemath.org/?q=a8f94b77-6a95-4bb9-8d79-55578799704f&lang=sage
>     <http://aleph.sagemath.org/?q=a8f94b77-6a95-4bb9-8d79-55578799704f&lang=sage>
>
>
>
> This one doesn't seem to work any more - as you said, it's a work in
> progress.   Can you provide an updated version of that particular one?


You posted a different one.  I want an updated version of


Thanks! 

Jason Grout

unread,
Feb 6, 2013, 5:30:08 PM2/6/13
to sage-n...@googlegroups.com

Jason Grout

unread,
Feb 6, 2013, 5:32:09 PM2/6/13
to sage-n...@googlegroups.com
On 2/6/13 4:30 PM, Jason Grout wrote:
> Ah. here:
>
> http://aleph.sagemath.org/?q=c772b148-fac3-4f48-99cd-c1889a3b6872&lang=sage


Even better, cleaner, and simpler:

http://aleph.sagemath.org/?q=4b85b59a-dd54-41ed-8e38-d7af0d5732ca&lang=sage


Thanks,

Jason

kcrisman

unread,
Feb 6, 2013, 8:30:49 PM2/6/13
to sage-n...@googlegroups.com
Hmm, but you said 

Here is an example of a few sliders and 
areas which update in real-time as expressions change:

I don't see that real-time update, though I seem to recall it in the past...
 
Thanks,

Jason

Jason Grout

unread,
Feb 6, 2013, 9:50:35 PM2/6/13
to sage-n...@googlegroups.com
It should update in real-time, though the plot slows things down (it has
to generate an image and load the image in the browser). If you comment
out the plot, you should really see things fly.

Thanks,

Jason

kcrisman

unread,
Feb 6, 2013, 10:23:50 PM2/6/13
to sage-notebook

> > Here is an example of a few sliders and
> > areas which update in real-time as expressions change:
>
> > I don't see that real-time update, though I seem to recall it in the past...
>
> It should update in real-time, though the plot slows things down (it has
> to generate an image and load the image in the browser).  If you comment
> out the plot, you should really see things fly.
>

Well, my sense was that having the plot update "quickly" was sort of
the point... but maybe not? The problem is that we might want to be
as flashy as compiled things like Manipulate or Maplets (though
honestly I think the current interacts are already wonderful).

Jason Grout

unread,
Feb 6, 2013, 10:32:24 PM2/6/13
to sage-n...@googlegroups.com
On 2/6/13 9:23 PM, kcrisman wrote:
>
>>> Here is an example of a few sliders and
>>> areas which update in real-time as expressions change:
>>
>>> I don't see that real-time update, though I seem to recall it in the past...
>>
>> It should update in real-time, though the plot slows things down (it has
>> to generate an image and load the image in the browser). If you comment
>> out the plot, you should really see things fly.
>>
>
> Well, my sense was that having the plot update "quickly" was sort of
> the point... but maybe not?

We haven't rewritten the plotting system to be quicker than it is
currently. This interact implementation provides the framework for such
changes, but rewriting the plotting would probably be a much more
significant endeavor. Maybe this summer?

Thanks,

Jason

Reply all
Reply to author
Forward
0 new messages