Limitations of Manipulate in interactive HTML.

[kkoudas01]

Good evening!

I'm writing this Manipulate[a^2, {a, 0, 1}] with the intention of using it in an interactive HTML. It works perfectly fine in the WLJS notebook, but the problem arises when I try to convert it into dynamic HTML. It does get converted into HTML, but afterwards, when I change the value of the slider, nothing happens. The value of a^2 remains exactly where it was the last time I moved the slider in the WLJS notebook.

I've seen the InputRange (https://wljs.io/frontend/Reference/GUI/InputRange), but I haven't quite understood how it works—especially when I try to create something more complex, like:
Manipulate[ArcCos[Sqrt[(b^2 + c^2 - a^2)/(2*b*c)]], {a, 0, 1}, {b, 0, 1}, {c, 0, 1}].

Thank you in advance!

[JerryI]

Good evening!

Did it track it? When you click to export it start to spy on all events and records them. Then you need to move it in the full range, so that everything will be recorded (system does not know the ranges, it just sees some events and updates and records them)

For your example I would reduce the steps to get less combinations (no it is ~200)

Manipulate[ArcCos[Sqrt[(b^2 + c^2 - a^2)/(2*b*c)]], {a, 0, 1, 0.2}, {b, 0, 1,0.2}, {c, 0, 1, 0.2}]

ManipualteExp1-ezgif.com-gif-maker.mp4

[kkoudas01]

Thank you very much for your response!!!

1. Admittedly, I hadn't done what you mentioned. I just tried it now (or at least I think I did), but it still doesn’t come out interactive (see image).

2. Let's suppose I manage to do it the way you suggest. What happens if I have many frames? For example, if I have 1000 frames, do I need to move the slider 1000 times so that all 1000 results get recorded?

[JerryI]

It is a problem of accuracy. When you drag a slider with 0.0001 step, you might not land exactly to that number which was recorded. This is the reason why I used quite large steps.

A sniffer program is stupid and it only sees values -> changes and has no idea about if it a slider, continuous range or something else.

With Manipulate values change after user's action, which might be cumbersome to "scan" manually.

Here is a low-level version of Manipulate, where you can just drag a slider without releasing the focus

Module[{
  output = ""
},
 {
  EventHandler[InputRange[0,1,0.001, 0.5, "Label"->"a"], Function[v,
    output = ToString[
      v^2
    , StandardForm]
  ]],

  EditorView[output // Offload]
 } // Column 
]

Then "scanning" the full range will be easier. You should always keep in mind, that there is no magic in this export. HTML document cannot reproduce the calculation, only "play" prerecorded data.

2. With Manipulate - Yes. For automatic animations you don't have to. For example

start = InputButton["Start"]

Animate[Row[{Sin[x], "==", Series[Sin[x], {x,0,n}], Invisible[1/2]}], {n, 1, 10, 1}, AnimationRate->3, AnimationRepetitions->1, "TriggerEvent"->start]

[JerryI]

Another example with 100 values sampled automatically

start = InputButton["Start"]

Animate[Column[{n, n^2}], {n, 1, 100, 1}, AnimationRate->30, AnimationRepetitions->1, "TriggerEvent"->start]

Example.with.Animate.mp4

[JerryI]

I added video tutorials to that section

https://wljs.io/frontend/Exporting/Dynamic%20HTML#what-else-can-be-exported

[kkoudas01]

I see... I had the impression that, somehow, the input/output values would be automatically stored and would just work in the HTML.

P.S.: Animate works perfectly. The reason I chose Manipulate is because a friend of mine—a metalworker—asked me to help him solve some geometric problems (hence the Manipulate[ArcCosDegrees[(b^2 + c^2 - a^2)/(2*b*c)], {a, 0, 1}, {b, 0, 1}, {c, 0, 1}]), so I just wanted to send him an HTML file where he could enter the numbers he needs and get his job done.

Thanks a lot anyway!!! Really appreciate it!!!

[JerryI]

I see... I had the impression that, somehow, the input/output values would be automatically stored and would just work in the HTML.

P.S.: Animate works perfectly. The reason I chose Manipulate is because a friend of mine—a metalworker—asked me to help him solve some geometric problems (hence the Manipulate[ArcCosDegrees[(b^2 + c^2 - a^2)/(2*b*c)], {a, 0, 1}, {b, 0, 1}, {c, 0, 1}]), so I just wanted to send him an HTML file where he could enter the numbers he needs and get his job done.

Thanks a lot anyway!!! Really appreciate it!!!

You are welcome!

I see... I had the impression that, somehow, the input/output values would be automatically stored and would just work in the HTML.

It was somewhat added recently :) We can still improve it, may be statistically guess by events generation that this is a slider and automatically scan all possible values. We also tried to replace it with a small CNN neural network, which is trained on input and output data and then loaded to Javascript, but the training was too long and not robust.

If you don't mind I would convert it to discussion, so that other people could see it on our forum.

[JerryI]

One day we may try a translation/compilation of WL to JS ;)

[kkoudas01]

I'd be happy to convert the issue to a discussion, but I can't seem to figure out how... This might sound silly, but I just can't find the "Convert to discussion" option anywhere. Could it be that I don't have the necessary permissions to do that?