Javascript

JavaScript

Whenever you use Cinderella as an applet in an internet browser you can link Cinderella and your HTML page via JavaScript. The communication is bidirectional. The Cinderella construction can notify the HTML page of events that occur, and the construction can react to events on the HTML page like a button being pressed.

There are many possible scenarios in which one would like to use the JavaScript extensions. Here are a few of them.

Control by HTML buttons: In many demonstration applets it may be good style to trigger a demonstration by pressing a button in the explanatory text. Such a button could move a construction to a special configuration, for example.

Explain parts of the construction: The mouseover functionality of JavaScript may be used to link certain explanations in the HTML text to events in the applet.

Notification: It may be useful to notify your HTML text of events happening in Cinderella. Thus you may display alert windows or change the text on your HTML page in order to explain something.

Calling Cinderella from JavaScript

Basically, you can perform CindyScript commands from JavaScript. By these operations it is for instance possible to

call functions in CindyScript,
change the values of variables in CindyScript,
move elements of your construction, or
change the appearance of elements.

To that end it is important that your Cinderella applet has an associated name that is used as handle for JavaScript commands. The name is given in the applet tag of your HTML code using the name parameter, for instance with name="CindyJSDemo". Using this handle, JavaScript can call an arbitrary CindyScript statement via the function doCindyScript(<statement>). The statement is given as a string. This string will be parsed and executed whenever the function doCindyScript is called. The following piece of code exemplifies this procedure. It shows how to provide four buttons in the HTML text that manage to place a point D in various geometrically interesting positions with respect to A, B and C.

⟨script language="JavaScript" type="text/javascript"⟩
   function doScript(c) { document.CindyJSDemo.doCindyScript(c);};
   
⟨/script⟩


⟨input type="button" value="Middle of AB" 
       onclick="doScript('D.xy=(A+B)/2');" /⟩
⟨input type="button" value="Middle of AC" 
       onclick="doScript('D.xy=(A+C)/2');" /⟩
⟨input type="button" value="Middle of BC"
       onclick="doScript('D.xy=(B+C)/2');" /⟩
⟨input type="button" value="Middle of ABC"
       onclick="doScript('D.xy=(A+B+C)/3');" /⟩
⟨br⟩

⟨applet   name="CindyJSDemo"
          code     = "de.cinderella.CindyApplet"
          archive = "cindyrun2.jar"
          width    = 680
          height   = 336⟩

... applet specifications ...

⟨/applet⟩

In the Cinderella construction only the four points A,...,D are needed to use this JavaScript code.

Since the CindyScript calls may be arbitrarily complex this technique may be used for many different purposes. By using a repaint statement within the call one can even trigger smooth transitions of a construction from one position to a new one. Unfortunately, in JavaScript, a string is not allowed to contain a usual newline character. So it may be the case that complicated script calls look a bit cluttered. One can bypass this problem by subdividing a script into smaller strings. The following piece of code shows the code for a button that smoothly moves the points A, B and C to the positions [0,0], [4,0] and [2,3].

⟨input type="button" value="Smooth move of ABC" onclick="doScript(
'oldpos=[A.xy,B.xy,C.xy];'+
'newpos=[[0,0],[4,0],[2,3]];'+
'n=40;'+
'repeat(n,i,'+
'  l=i/n;'+
'  pos=l*newpos+(1-l)*oldpos;'+
'  A.xy=pos_1;'+
'  B.xy=pos_2;'+
'  C.xy=pos_3;'+
'  repaint();'+
'  wait(10);'+
');'
);" /⟩

Calling JavaScript from Cinderella: `javascript(<string>)`

Conversely, it is also possible to call JavaScript from CindyScript. This can simply be done by using the CindyScript function javascript(...). The following piece of code shows how to raise a JavaScript alert whenever point A gets to close to the origin (a rather useless piece of code, by the way).

if(|A,[0,0]|<1,
  javascript("alert('A is too close to the origin')");
);

Contributors to this page: Kortenkamp , Richter and Lembach .
Page last modified on Tuesday 30 of August, 2011 [09:28:41 UTC] by Kortenkamp.

The content on this page is licensed under the terms of the License.

similar

Home

[-] Wiki [+]

Javascript

JavaScript

Calling Cinderella from JavaScript

Calling JavaScript from Cinderella: javascript(<string>)

Calling JavaScript from Cinderella: `javascript(<string>)`