Add mathcell scripts dynamically? about mathcell

[paulmasson]

If you have complete control of the web page, then you could load the library at the top of the page and return the scripts inside a <div> of class mathcell as indicated in the template of the documentation. That is how the library was written to be used and how I use it on my own website.

All of the JavaScript functions in MathCell are global for convenience of use, which is a bit nonstandard. If you want to avoid any possibility of overwriting existing functions, then you could wrap the script in an entire HTML document and return it inside an <iframe>. That's how the Three.js backend works for SageMath in a Jupyter notebook: I know well because I'm the main author of that functionality.

[axkr]

I have update the website:

• https://symjaweb.appspot.com/

I tried to insert a <div> element as suggested.
At least in Firefox I can see only the slider. Is it possible to set the width and height?

[paulmasson]

At least in Firefox I can see only the slider. Is it possible to set the width and height?

Sure, and make sure to include the class as well:

<div class="mathcell" style="width: 5in; height: 4in">

[paulmasson]

After updating the div settings in the Firefox console I can see and use the interactive graphic.

[axkr]

I'm not good at javascript.
I even didn't know that I can manipulate attributes in the browser console.

Do you have an example, how I can set width and height to 600x400 for example?

[paulmasson]

Do you have an example, how I can set width and height to 600x400 for example?

<div class="mathcell" style="width: 600px; height: 400px">

[axkr]

Ok I get a basic example running and deployed:
axkr/symja_web@9162ecc

[axkr]

Next problem is in this example: Manipulate(Plot3D(Sin(x + y^2), {x, -3, 3}, {y, -2, 2}))

I have an older three.js integrated in the website. Could this be the problem?

[paulmasson]

MathCell has its own links to the version of Three.js appropriate to its internal template, so your version won't be an issue. Although a lot has changed since r49...

Part of the problem could be that the website is currently using version 1.3.0 of MathCell and things have changed since then. First try updating to 1.7.0 and regenerating. If the problem persists then please post your generated script here so that I can see what you're actually feeding into the cell.

[axkr]

Updated only version to 1.7.0.

The log for a Plot3D:

>> three.min.js:177:216
THREE.WebGLRenderer 100 

>> srcdoc:147:3
TypeError: v is undefined
    <anonym> about:srcdoc:147

Also example Manipulate(Plot(Sin(x)*Cos(1 + a*x), {x, 0, 2*Pi}), {a,0,10}) gives an error:

>> mathcell.js:1350:14
TypeError: l.points.forEach is not a function

[paulmasson]

In order to help with this issue, I really need to see the generated script.

[axkr]

Can we chat about general questions for example this evening on Gitter Chat?
Have questions about math formula evaluation etc,...
https://gitter.im/symja_android_library/Lobby

[axkr]

With the JSForm() function you can now display the generated JavaScript function from Manipulate() in the online web interface.

  JSForm( Manipulate(Plot(Sin(x)*Cos(1 + a*x), {x, 0, 2*Pi}), {a,0,10}) )

It is wrapped by this JavaScript tags:

<script type="text/javascript">

var parent = document.getElementById("mathcell");

var id = generateId();
parent.id = id;
...

...
parent.update( id );

</script>

(see the question mark in the upper right corner and search for JSForm or Manipulate help)

[paulmasson]

Your generated code for Manipulate(Plot(Sin(x)*Cos(1 + a*x), {x, 0, 2*Pi}), {a,0,10}) is fine. If I copy it to a local file it displays properly.

What appears to be the problem (and which I don't understand) is that your function JSON.parse() returns a string instead of a JavaScript array containing objects. That's the source of the error l.points.forEach is not a function.

I thought you said you had this example working at one point. What else has changed that would affect the behavior of JSON?

[paulmasson]

Since it is now working inside an iframe this issue can be closed.