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 ;)

[JerryI]

Initial tests on a multilinear interpolation were successful!

LinrarInterp.mp4

Here we have a canvas with technically infinite number of positions. However, we sample only ~100 and the rest is interpolated in exported HTML file live.

[JerryI]

Another test (much more complex)

holeCow.mp4

[JerryI]

Here are some tech demos

https://megastore.rz.uni-augsburg.de/get/Z_3EG8Rr0q/

and @kkoudas01 special calculator. One can enter any number directly to the number field, the result will be linearly interpolated from the existing points sampled

https://megastore.rz.uni-augsburg.de/get/5IX4AQld43/

PS: I added unnecessary contour plot 3D, but that was can be removed ;)

[kkoudas01]

Thank you very much for your interest in my search!

I'm not quite sure how the "special calculator" code ends up working. I tried it, and it's still not interactive. I suppose what you mentioned in a previous comment still applies regarding the recording of events during the conversion to dynamic HTML.

I think I’ll need to look a bit more into EventHandler. As far as I can see from here, there are some references. Are there any others elsewhere?

[JerryI]

That was a tech demo, and update might not arrived yet.

We will roll out it properly on the next release

[JerryI]

This can help you to make widgets using low level elements

https://wljs.io/frontend/Dynamics#automatic-tracking-of-held-symbols

https://wljs.io/frontend/Reference/GUI/InputRange#applications

This text view can be used to display strings or numbers

https://wljs.io/frontend/Reference/GUI/TextView

[kkoudas01]

Great! Thank you very much! I will study them!!!

[JerryI]

Great! Thank you very much! I will study them!!!

You are welcome!
Don't hesitate to ask any questions here in the discussions. It will help others too :)

[JerryI]

We have rolled out a new release! 2.7.6
And now the section on dynamic html exports is expanded with video tutorials

https://wljs.io/frontend/Exporting/Dynamic%20HTML#state-machine-1