Hi Theres,
Here are examples of JavaScript tutorials:
https://developer.mozilla.org/en-US/Lea ... ipt_basicshttp://htmldog.com/guides/javascript/http://www.w3schools.com/js/default.aspIt works fine to move the JavaScript code in for instance the TI SensorTag from index.html to a separate .js file.
Let's say we put the JavaScript code inside the script tag in index.html (this file:
https://github.com/evothings/evothings- ... index.html) in a file called app.js. The content of app.js would look like this:
Code: Select all
// Globals.
var sprite
var sensortag
function initialise()
{
initialiseSprite()
initialiseSensorTag()
}
function initialiseSprite()
{
sprite = SpriteManager.makeSprite()
sprite.setDOMElement(document.getElementById('sprite'))
}
function displaySprite()
{
sprite.whenLoaded(function()
{
sprite.show()
sprite.setCenterX(SpriteManager.getPlayfieldWidth() / 2)
sprite.setCenterY(SpriteManager.getPlayfieldHeight() / 2)
})
}
function moveSprite(dx, dy)
{
var x = sprite.getCenterX() + dx
var y = sprite.getCenterY() - dy
x = Math.min(x, SpriteManager.getPlayfieldWidth())
x = Math.max(x, 0)
y = Math.min(y, SpriteManager.getPlayfieldHeight())
y = Math.max(y, 0)
sprite.setCenterX(x)
sprite.setCenterY(y)
}
function initialiseSensorTag()
{
// Create SensorTag CC2650 instance.
sensortag = evothings.tisensortag.createInstance(
evothings.tisensortag.CC2650_BLUETOOTH_SMART)
// Uncomment to use SensorTag CC2541.
//sensortag = evothings.tisensortag.createInstance(
// evothings.tisensortag.CC2541_BLUETOOTH_SMART)
// Set up callbacks and sensors.
sensortag
.statusCallback(statusHandler)
.errorCallback(errorHandler)
.accelerometerCallback(accelerometerHandler, 100)
}
function connect()
{
sensortag.connectToNearestDevice()
}
function disconnect()
{
sensortag.disconnectDevice()
displayStatus('Disconnected')
sprite.hide()
}
function statusHandler(status)
{
displayStatus(status)
if (evothings.tisensortag.ble.status.SENSORTAG_ONLINE == status)
{
displaySprite()
}
}
function errorHandler(error)
{
if (evothings.easyble.error.DISCONNECTED == error)
{
displayStatus('Disconnected')
sprite.hide()
}
else
{
displayStatus('Error: ' + error)
}
}
function accelerometerHandler(data)
{
var values = sensortag.getAccelerometerValues(data)
var dx = values.x * 50
var dy = values.y * 50 * -1
moveSprite(dx, dy)
}
function displayStatus(status)
{
document.getElementById('status').innerHTML = status
}
document.addEventListener(
'deviceready',
function() { evothings.scriptsLoaded(initialise) },
false)
Note that script tags are not used in .js files, only in .html files.
In index.html add this script tag:
The script tags in index.html now look like this:
Code: Select all
<script src="cordova.js"></script>
<script src="libs/evothings/evothings.js"></script>
<script src="libs/evothings/tisensortag/tisensortag.js"></script>
<script src="SpriteManager.js"></script>
<script src="app.js"></script>One important part of the code to understand is the following snippet:
Code: Select all
document.addEventListener(
'deviceready',
function() { evothings.scriptsLoaded(initialise) },
false)
This delays the call to the function initialise until all parts of the SensorTag library have loaded.
If calling initialise directly, like this, the program may not work (do NOT do this):
Note the difference between putting parens after the function name and excluding them. Adding the parens calls the function immediately, stating the function name without parens passes a reference to the function so that it can be called later. This is what happens in the document.addEventListener code snippet.
Lets look at it again, this time with some comments to clarify:
Code: Select all
// We call the function "addEventListener" which is part of the object "document".
document.addEventListener(
// The event we want to listen for is "deviceready", which is specified as a string.
// In JavaScript you can use singe or double quote marks for specifying strings.
'deviceready',
// Here we pass in an anonymous function as a parameter (a function without a name).
// This function will be called later when the "deviceready" event happens. Some code
// in the JavaScript framework will call this, we don't have to bother about where this
// happens, JavasScript takes care of it.
function() { evothings.scriptsLoaded(initialise) },
// false indicates that the event should not "bubble", it not that important for this example.
false)
Let's have look at the function with no name (breaking it up on multiple lines for readability):
Code: Select all
// The function have no name, and this is called an "anonymous function" or "closure".
function()
{
// When the anonymous function is called the function "scriptsLoaded" which is
// defined on the object "evothings" is executed. The function "initialize" is passed
// as a parameter. The "scriptsLoaded" function will call the "initialize" function
// when all Evothings library have been loaded.
evothings.scriptsLoaded(initialise)
}
Hope this helps!
Best, Mikael
