Interfacing with JavaScript

Information

Are you looking to run JavaScript on your mbed microcontroller? Go to JavaScript on mbed.

The mbed HTTP Server makes it easy to get mbed up and running on a network. However a webserver on its own is only good for serving web pages, whereas mbed is great for interacting with the outside world through actuators and sensors. To make your web pages interactive you can make use of the RPC handler which allows you to use RPC to control the mbed using HTTP requests. This means you can use web pages to provide a GUI for your project which can be accessed from anywhere on your network. To make your webpages dynamic you could use Java or JavaScript. Here is a JavaScript library which makes it easy to send RPC requests over HTTP from your webpage and maps many of the mbed interface classes onto JavaScript classes. This means that for some projects you may not need to write any custom code for mbed.

HTTP Server

To use the JavaScript Library on this page your mbed needs to be running a HTTP Server program. A HTTP server program modified to fully support RPC can be found on the Interfacing Using RPC page. You can find more information about how to connect to a network here.

JavaScript mbedRPC Library

To use this library simply save it to mbed along side the bin and the HTML file which uses it.

Here is an example HTML file which flashes LED1, fades LED3 and prints the analog input at p20 to the screen once a second.

<html>
	<head>
		<script src="mbedRPC.js" language="javascript"></script>
		<script type="text/javascript">
			mbed = new HTTPRPC();
			led1 = new DigitalOut(mbed, LED1);
			ain = new AnalogIn(mbed, p20);	
			led2 = new PwmOut(mbed, LED3);
			function print(str){
  				document.getElementById("t").innerHTML = str;
			}
		</script>
	</head>
	<body>
		<p>mbedRPC javascript example! Using the mbedRPC javascript library to control mbed over http;
		<a href="http://mbed.org/cookbook/Interfacing-using-JavaScript"> for more information goto the cookbook </a>
		<br>
		This script will flash LED1 and read the value of AnalogIn p20 every second
		</p>
		<div id="t"><br/>
		</div>
		<script language="javascript">
			var i = 1;
			var x = 0;
			function tick(){
				led1.write(i);
				if(i == 0){i = 1;
				}else{i = 0;}
				led2.write(x);
				x = x + 0.1;
				if(x >= 1) x = 0;
				f = ain.read();
				print(f);
			}
			setInterval("tick()",1000);			
		</script>
	</body>
</html>

To try this out extract the contents of this zip jsRPCdemo.zip (html file, .bin and javascript library) directly onto mbed, reset and then navigate to http://<address of mbed>/RPCdemo.htm. The example HTTP server programs print out the assigned address over the serial port.

Using the Library

To use the library in your html pages you must first load it in

<script src="mbedRPC.js" language="javascript"></script>

You then need to create an mbed object. You can only create a HTTPRPC connection and only on the mbed that is hosting the javascript.

<script type="text/javascript">
    mbed = new HTTPRPC();
</script>

You can now create objects or tie to existing objects on mbed.

<script type="text/javascript">
    led1 = new DigitalOut(mbed, LED1);
    ain = new AnalogIn(mbed, p20);	
    led2 = new PwmOut(mbed, LED3);
    led3 = new DigitalOut(mbed, "myled");
</script>

Finally you can execute the methods for each of the objects

    led1.write(i);
    f = ain.read();

If your project needs to use more than just Digital and Analog I/O then you can use the RPC Interface Library which is supported by this JavaScript library. This means you can use RPCFunctions or RPCVariables depending on which is most suitable for your application.

RangeFinder = new RPCFunction(mbed, "RangeFinder");
Range = RangeFinder.run("  ");