Callback to sage from javascript?

[Reinhard Oldenburg]

Hi all, I wonder if it is possible to have a a Javascript/HTML5 canvas inside a sage notebook such that javascript can handle mouse motion events by calling back into sage. In particular, I want to have some objects that can be moved with the mouse and in reaction sage recalculates the coordinates of other objects.
I have done similar things in Mathematica and other combinations of software but a web based solution would b optimal for the educational purposes I have in mind.
Maybe jupyter is a good option too, but I got no repose so far on their mailing list.

Reinhard Oldenburg

[Harald Schilly]

Hi, in a sagews worksheet, you can have @interact decorated functions, which add handlers to a plot. This is quite generic, and the following example only shows you the basics:

@interact

def f0(fun=x*sin(x^2), mousemove='', click='(0,0)'):

    click = sage_eval(click)

    g = plot(fun, (x,0,5), zorder=0) + point(click, color='red', pointsize=100, zorder=10)

    ymax = g.ymax(); ymin = g.ymin()

    m = fun.derivative(x)(x=click[0])

    b =  fun(x=click[0]) - m*click[0]

    g += plot(m*x + b, (click[0]-1,click[0]+1), color='red', zorder=10)

    def h(p):

        f0.mousemove = p

    def c(p):

        f0(click=p)

    show(g, events={'click':c, 'mousemove':h}, svg=True, gridlines='major', ymin=ymin, ymax=ymax)

​I'm pretty certain, something similar is possible for ipython notebooks, although you might have to look at various 3rd party ​libraries. Maybe bokeh?

http://bokeh.pydata.org/en/latest/docs/user_guide/notebook.html

In contrast to sagews, this bokeh gives you drag & zoomable plot areas. 

Maybe this:

http://bokeh.pydata.org/en/latest/docs/reference/models/sources.html#bokeh.models.sources.ColumnDataSource.push_notebook

(just a guess, I've never done something sophisticated with bokeh so far, just those plots)

-- harald

Reinhard Oldenburg

--
You received this message because you are subscribed to the Google Groups "sage-notebook" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sage-noteboo...@googlegroups.com.
Visit this group at http://groups.google.com/group/sage-notebook.
For more options, visit https://groups.google.com/d/optout.

[kcrisman]

Hi, in a sagews worksheet, you can have @interact decorated functions, which add handlers to a plot. This is quite generic, and the following example only shows you the basics:

Note this is in the Sage Math Cloud, not in the Sage notebook.  I don't think this is quite implemented there. 

[Harald Schilly]

On Mon, Sep 28, 2015 at 11:50 AM, kcrisman <kcri...@gmail.com> wrote:

Note this is in the Sage Math Cloud, not in the Sage notebook.  

​oh, you are right, I mixed up all these support emails :-)

-- h

[Andrey Novoseltsev]

SageMathCell also supports it (not sure how different are details from
the cloud)

>
> -- h

[Reinhard Oldenburg]

Thanks a lot for the help. Somehow, however, I did not manage to get Haralds code to work under sage6.8 and chrome.
First, the option svg=True caused an error message. After removing it, notheing at all happened. No error message, just nothing - but the computation ran forever.
Seems not to be so easy.
Reinhard 

[Andrey Novoseltsev]

Here is a working example that uses clicks on the plot:
http://interact.math.ualberta.ca/DifferentialEquations/First_Order_ODE_Plotter.html

[kcrisman]

Here is a working example that uses clicks on the plot:
http://interact.math.ualberta.ca/DifferentialEquations/First_Order_ODE_Plotter.html

YOU ARE MY HERO

But I assume this wouldn't be easy/possible with the current sagenb?   William, does this sort of thing work more or less the same in SMC or is there a different syntax needed?

[William Stein]

No.

William


--
William (http://wstein.org)

[Norbert Domes]

Very cool!
Is there any documentation?
What kind of events are implemented?

My example: https://sagecell.sagemath.org/?q=vvxuej

Norbert

[Andrey Novoseltsev]

On Tuesday, 6 October 2015 16:26:08 UTC-6, Norbert Domes wrote:

Very cool!
Is there any documentation?

 

Unfortunately no, if was Jason's experimental stuff which is still "experimental", I guess, but it works ;-)

What kind of events are implemented?

Not sure, but perhaps whatever you can have in JavaScript? I think I only used onclick, but onmove works as well, perhaps others. Feel free to experiment and report!