©2019 Compass Learning TechnologiesLive Mathematics on the WebCreate your own Web Page

Lua and JavaScript

W3Schools.com: Taking your Web Page Skills to the Next Level

Introduction to HTML Graphics: Canvas

CompassTech Lua Scripting Tutorials

Texas Instruments TI-Nspire Scripting Support Page

The scripts shown here are collected in a TI-Nspire™ TNS document.

 

With thanks (and any necessary apologies) to Jim Bauwens

 
 

Some years ago, Jim Bauwens began the development of JavaScript libraries which supported running TI-Nspire Lua scripts within a web page. While limited to platform API Level 1.0 ("on.create" rather than "on.construction"), no shared Nspire variables ("var.store" or "var.recall"), or access to the Nspire mathematics engine, nothing fancy like the Physics engine, text boxes or images, and lacking in general font support (no resizing or styles), this impressive effort nonetheless makes a surprising amount possible, as can be seen from the range offered here.

Students of Lua may like to browse the scripts provided for each of the examples here, and are invited to explore the extensive Lua Scripting Tutorials available on this web site. The Lua Objects Gallery may prove particularly useful to jump to a quick start!

Students of HTML5 and JavaScript may wish to study the JS libraries listed at the end of this page, which make all the magic possible! You will also find sample code for the template HTML page used here, with instructions as to how you might run your own Lua scripts on the web! If you would like to know more about creating your own "Live" pages for Mathematics and STEM, then explore the step-by-step tutorials at My First Web Page: Create Your Own Live Mathematics and STEM Pages.

 
   

Back to Top

 

As well as all desktop platforms, these work well on iPad, iPhone and Android... You cannot grab and drag easily, but you can tap on buttons. To use sliders, tap ahead of the circle to move forward, behind the circle to move back. Be patient... they may take a while to load on mobile devices.

 
 

Back to Top

 

This one works fine on computer and will run on tablets, but relies on grabbing and dragging, so is not as much fun in touch environments.

 
 

...and maybe even try your own scripts?

 

Back to Top

 

Embed Your Own Scripts

Study the code in the text box which follows to understand how to embed a Lua script within a web page. Selecting one of the examples above will run that script in the canvas area above, and set up the web page code in this section. You will see that it calls the Lua script expressed as a JavaScript variable and displays it in the canvas area defined.

So how do I run my own Lua script?

The simplest way is to store the script as a string variable in a .js file and call it from your HTML page (the approach used here).

Suppose I have a script for a graphic pattern that I have designed. Copy the script and, in a new text file, type (for example) var patternCode = ` (yes, that is a backtick symbol there!) and then paste your code, followed by another backtick (`). NOTE the use of a backtick before and after your code: Like single and double quotes, the backtick is used to define a section of code as a string. The difference is that text between two backticks preserves any formatting, like line breaks, tabs, etc. Pasting your code without backticks would result in the text all running together and being unreadable!

Now save the file as, say, pattern.js and call it as a script src within your HTML page, along with the other luajs source files used here. Your variable patternCode will be defined and run as a Lua script, displayed on the canvas defined. Getting started you might just use the template page provided below as your HTML page, inserting your js page and code name, linked to wherever you have your js page hosted on the web.

Questions? Feel free to email me. (Remember, however, that the Lua code which will work using this method is quite limited and what you would like to try may not work! As demonstrated here, though, a surprising amount is possible...)

Back to Top

 

 

Back to Top

 

JavaScript Libraries

Download the collection to play with these yourself, or just link to those on my web site, as shown in the template page above!

 
 

Back to Top

©2019 Compass Learning Technologies TI-Nspire Lua Authoring Lua and JavaScript