Full Version: Writing dynamic UI for Moi's command

From: mkdm [#1]
 2 Oct 2017

Hi Michael and everyone.

I have a general question about usage of Javascript in Moi's commands.

I'm trying to improve one of my latest script and I need to make it more "dynamic" and "clever".

For example, let's talk about the command "FilterCurvesByLength" that I have written some days ago (you can find it here http://moi3d.com/forum/index.php?webtag=MOI&msg=8608.4)

The command's UI, inter alia, has two sliders.

Now, I would like that the "max" attribute of these sliders could be set in runtime by Javascript.

I need to do that because is totally useless to have a slider with "max=200" that should specify the upper limit of the range, regarding the curve length,
when, for example, the longest curve is only 100 units.

So, I need to set the "max" attributes assigning to it the value of a Javascript variable.

For example, into the HTML code of the "FilterCurvesByLength" command's page I have this code :

    <td colspan=3 id="maxlensliderContainer"><moi:Slider id="maxlenslider" min="0" max="200" style="width:100%" onmousemovevaluechange="doFilter();"/></td>
    <td colspan=3 id="maxlenInputContainer"><moi:DistanceInput id="maxlen" style="width:6em;" default="1" binding="maxlenslider.value = this.value"/></td>

Well. Now I need to dynamycally change the max="200" to assign it a value that I calculated inside the "function init() {...}".

I have tried many ways but nothing worked.

For example I tried something like this :

		function renderPage() {
			maxLengthValue = 20; // I put here this statements only for example. maxLengthValue is calculated inside function init() {...}
			document.getElementById("maxlensliderContainer").innerHTML =
				"<moi:Slider id=\"maxlenslider\" min=\"0\" max=\"" + maxLengthValue + "\" style=\"width:100%\" onmousemovevaluechange=\"doFilter();\"/>";			
			return true;
<body onload="renderPage();" class="commandbody">

It seems that after executing that code the binding between the slider and the numeric input field (id="maxlen") doesn't work anymore.
(Assuming that my code at least changes in the correct way the "max=200" attribute of the slider...)

How can I do ?

Thanks for help!

Marco (mkdm)


From: Max Smirnov (SMIRNOV) [#2]
 2 Oct 2017

Hi Marco,

I'm not sure, but try change outerHTML preperty. Also you can try .replaceChild function.


From: Michael Gibson [#3]
 2 Oct 2017

Hi Marco, I think you asked this question also on your other thread: http://moi3d.com/forum/index.php?webtag=MOI&msg=8608.5

I happened to see that other one first so I answered it there.

- Michael


Reply to All

Back to thread list | Login

© 2018 Project Beehive Forum