APS Excellence in Physics Education Award
November 2019

Education Prize Logo
Science SPORE Prize
November 2011

NSF Logo
The Open Source Physics Project is supported by NSF DUE-0442581.

Reading and setting variables through javascript post and replies

Return to the Reading and setting variables through javascript thread
Login to post to this thread

How to get and set variables from the html page
George Barouxis
6 Posts

I have just completed the conversion of a java simulation to javascript. However, I cannot find a way to read and set values of variables and elements from the html page. In the old java flavour we used

NameOfApplet._setVariables('variable=x')

and

NameOfApplet._getVariable('variable')

With ejss I cannot do this. I found the pdf with the instruction for using e.g.

_view.plottingPanel.setProperty("Display","none");

but it does not work when used in the head of the document, gives error "_view is not defined".

What is the correct way to do this, get and set variables of the simulation from the html page?

Thanks in advance

George


Replies to How to get and set variables from the html page

Re: How to get and set variables from the html page -
John Val
13 Posts

Hi George,
I experiences somtething similar.
Calling a custom function ( e.g. compute_solution_from_field() ) in the java version was done
_model.compute_solution_from_field();
I could not do the same in the javascript version.

In the javascript file generate for your model get a _model object is
generated with which you can acces functionality predefined.

I managed to add the custom function to _model in the following way:
In the custom section you might define something like

function shout()
{
   alert("Can you hear me?");
}

// to "export" this function to the _model object you than add to the custom section

_model._shout = function() { shout() };

In a script you now can call
<script language="JavaScript" type="text/javascript">
_model._shout();

May your problem is solved if you add to the custom section of your model

_model.getView = function() { return _view;}

Then in you script hopefully the following will work.
<script language="JavaScript" type="text/javascript">
_model.getView().plottingPanel.setProperty("Display","none");

Succes,
John



Re: Re: How to get and set variables from the html page -
Francisco Esquembre
228 Posts

> In the custom
> section you might define something like
>
> function shout(
>
> {
>    alert("Can you hear me?");
> }
>
> // to "export"
> this function to the _model object you than add to
> the custom section
>
> _model._shout = function() { shout()
> };
>
> In a script you now can call
> <script language="JavaScript"<br />> type="text/javascript">
> _model._shout();
> </script<br />>
>

This sounds to me like a good solution, yes.

Paco



Re: Re: Re: How to get and set variables from the html page -
George Barouxis
6 Posts

Thank you for your suggestion, IT WORKS!!!

Specifically,

_model.getView().plottingPanel.setProperty("Display","none");

indeed makes the plotting panel disappear.

However, this does not work

_model.getView().Flag.setProperty("Value",1);

where Flag is a variable that controls the movement of a view element (every time it is set to 1, the view element advances by a certain distance). This formulation give the error

_model.getView(...).Flag is undefined

So I need your help in two more points.

1) How do I set the value of such a variable. Perhaps I should add to the custom page this:

_model.setValue = function() { ... ;};

but I cannot even guess what should be in the place of the fullstops.

2) How do I read the value of a variable which may or may not be a property of a view element (for instance, read the value of "Display" for the plotting panel, or the value of the variable that controls the movement of a view element).

Would adding this to custom work?

_model.getValue = function() { return _value;};

Any ideas?



Re: Re: Re: Re: How to get and set variables from the html page -
John Val
13 Posts

Dear George Barouxis
If Flag is one of your model variables than this is a sultion I found for setting the values from a javascript command.
// start
var ejsjson='{"model":{"xmin":'+
xmin+',"xmax":'+
xmax+',"functionString":"'+
mathexpression + '","analyticFunctionString":"'+
solutionstring + '","tmin":'+
tmin+',"tmax":'+
tmax+',"vmin":'+
vmin+',"vmax":'+
vmax+',"t0":'+
t0+',"v0":'+
v0+',"t":'+
0+',"xf":'+
x0+',"xb":'+
x0+',"x0":'+
x0+',"a_isdrawn":false}}';
_modelOrde2.pause();// stop the animation
    _modelOrde2.reset();// reset the animation
_modelOrde2.unserialize(ejsjson);
// end

You could probaby also do the following:
In custom define

_model.setFlag=function(flagstatus){ Flag=flagstatus; }

in the script you can than call

_model.setFlag(1);



Re: Re: Re: Re: Re: How to get and set variables from the html page -
George Barouxis
6 Posts

John, thank you very much for your help.

I wouldn't dare mess with json as I am completely ignorant on this front, but your second suggestion with the function seems fine. However, I have a lot of such flags in my simulation, and so I tried for a more general solution of the form

_model.setValue = function (vrblName, vrblValue) {         _model.vrblName = vrblValue;     };

which would theoretically give me a functionality similar to _setVariables('variable=x') of the Java version.

However, it does not work. Debugging this, I see that vrblName and vrblValue in

function (vrblName, vrblValue)

have the correct values (vrblName="Flag1" and vrblValue = 1), but the value of vrblName is not used in  _model.vrblName, which the debugger shows that it is undefined.

I have tried various other solutions such as _model[vrblName], etc.

Would you know perhaps what is the problem?

Again thanks a lot for your time.

George



Re: Re: Re: Re: Re: Re: How to get and set variables from the html page -
John Val
13 Posts

You could try to call
_initialize() or _update()
after setting the vale



Re: Re: Re: Re: Re: Re: Re: How to get and set variables from the html page -
Francisco Esquembre
228 Posts

Hi,

Variables in EjsS JS models are NOT properties of the _model object. This is because we want the author to write code like this:
  myValue = 0;
instead of
  _model.myValue = 0;

Hence, you must modify them using similar constructions. If you want a "generic" setValue function, you can add this to your Custom page:

_model.setValue = function (variable, value) {
  console.log ("Setting value of "+variable +" to "+value);
  if (variable=="x") x = value;
  else if (variable=="y") y = value;
  _update();
}

Notice that I compare the name of the variable to Strings that I code with this name. Attached is an example that uses this function from the HTML in another panel.
Notice also that you must call _update() so that the possible Fixed relations pages are called AND the view is updated. Otherwise, the model variables will change but you will not see it in the view.

Hope this example helps.

Paco

Attached File: ejss_model_CallFunctionExample.zip



Re: Re: Re: Re: Re: Re: Re: Re: How to get and set variables from the html page -
George Barouxis
6 Posts

Hi,

So I guess this means there is no generic way of setting (or reading) the value of a variable from the HTML page, and so you woulld need a switch structure for all variables you will need to set from the page, and a similar structure for all variables you would need to read the values of.

You mention above that variables are not properties of the _model object. I tried with the window object, and again I could not access variables. Are they properties of any other object through which we could access them? Or is any other way to access them?

I insist on that becase I have two simulations to convert to EjsS which have a lot of variables, so after I read your answer I searched around and found out that a generic function for reading and setting values of variable can work if you use eval. Should I assume that it is too dangerous in this case and I shouldn't do it?



Re: Re: Re: Re: Re: Re: Re: Re: Re: How to get and set variables from the html page -
Francisco Esquembre
228 Posts

Hi,

There is no way of accessing the variables except from within the function that defines them. Which is the one that creates and returns the model.

Since you have access to the source code in EjsS, it is much better and simpler to add your own custom functions to add whatever control you want. Using eval would do basically the same thing...

Paco



Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: How to get and set variables from the html page -
George Barouxis
6 Posts

All right, thank you for your help.

I will use eval then.

On the other hand, out of curiosity, how could I add a custom function that would make all variables accessible? Perhaps add them as properties to an object? In that case I would need a way to enumerate the variables in a loop structure. Is there a way to do this?

George



Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: How to get and set variables from the html page -
John Val
13 Posts

Dear George,
As mentioned in my first reply there is a way to set all or some variables in one go without the necessity to write your own functions. There was an error which has been repaired in the latest release 10-10-2105

So in your javascript function you write something like

// generate this string for all the variables you would like to set
// for my model e.g. xmin,xmax ,...,isdrawn.

var ejsjson='{"model":{"xmin":'+
xmin +',"xmax":'+
xmax +',"step":'+
step +',"dxdt":"'+
dxdt  +'","dydt":"'+
dydt +'","ymin":'+
ymin +',"ymax":'+
ymax +',"tmax":'+
tmax +',"x0":'+
x0 +',"y0":'+
y0 + ',"a_isdrawn":false}}';

_model.pause();// stop the animation
_model.reset();// reset the animation
// with the unserialize function you now set the values (update is called)
_model.unserialize(ejsjson);

The other way around can be done in the following way

// catch all variables
var everything=_model.serialize();
// extract the model parameters
var modelpars= JSON.parse(everything).model;
//use one
alert( modelpars.xmin )



Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: Re: How to get and set variables from the html page -
George Barouxis
6 Posts

Hi John, I have made it work using eval with two functions that duplicate exactly the functionality of _getVariable() and _setVariables() of the Java version.

However, eval has its dangers, so I will try to implement your suggestion.

So, two questions.

First, I am not clear if the functions you give should go to the custom functions page of the simulation in EjsS, or in the javascript of the HTML page.

And second, would this work without using _model.reset(), as I am changing values in the middle of presentation, so it is not possible to reset the model each time returning it in its original state.

Thanks for your help,

George



OSP Projects:
Open Source Physics - EJS Modeling
Tracker
Physlet Physics
Physlet Quantum Physics
STP Book