Exporting JavaScript Files

Exporting JavaScript Files

Top  Previous  Next

Select File / Export / [HTML5 / JavaScript App] - to export a Geometry Expressions model as a JavaScript application (.html file), within an html page.  This can then run within a web browser (so long as the browser supports HTML 5).

Fill out the details in the JavaScript Applet Generator dialog.

JavaScript dialog 

Output directory - tells Gx where to put the files.  It will create a file: name.html in the specified directory.  You should be able to bring name.html up in a browser to see the applet.

Applet Name - is the name of the html file.

Auto-scale - when set to True, the JavaScript applet automatically rescales the  drawing when the user changes the value of one of the inputs; when set to False, you click-and-drag a rectangle around the drawing after you click Ok.

Width and Height specify the size of the drawing on the html page.

Webpage Title, Webpage Header Text, and Webpage Footer Text - enter your text for these sections of the applet.

Since header and footer text may be several lines long, You can go back and change these text boxes before you close  the dialog:

  • select the text entry box
  • click the dots  to display the dialog
  • enter or edit  text, then click Ok.

Note:  you can insert html code into the header and footer text, e.g. to make a word in the footer text bold:

JS textbox 

Inputs - lets you choose which variables the user will be able to change, what text Label identifies variable and what type of control to use.

Any variables in your Gx model may be selected as input variables in the JavaScript model.  You can choose whether to use an edit field or a slider to control the variable. warning  Please note not all browsers support sliders.

Any points in the Geometry Expressions model constrained by variable Coordinates or a variable parameter for the Point Proportional constraint can be set as draggable points in the JavaScript model.  These variables, however, cannot be functions or negative; only positive variables are allowed for defining draggable points. I.e., the value of the variable may very well be negative, but using -t as the point proportional parameter or (x, 3*x) as a point's  coordinates will not work.

js inupt field 

Input functions can be modified in the Text Box field with single or multi-line JavaScript notation. Remember to use return in multi-line JavaScript statements.

js input multilint 

warning  Note:  when defining variables or functions in the edit field, remember that JavaScript does not use "^" to denote a power. xsq  must be written: pow(X,2) .

Outputs - lets you choose which outputs will appear in the applet, and their text Label.

Any measurements which are present in the Geometry Expressions model may be chosen as outputs for the JavaScript model.  Select True from the Show in Export line.

See the example.