Stevie-Ray
2/3/2013 - 6:04 PM

Web server controlled LED on Arduino using johnny-five and the dev version of NARF( https://github.com/divanvisagie/NARF/tree/Dev ) , Five m

Web server controlled LED on Arduino using johnny-five and the dev version of NARF( https://github.com/divanvisagie/NARF/tree/Dev ) , Five minute hack. LED is placed on pin 13.Once you get LED_Server running, the client at index.html can control the LED on your Arduino , you will have to change the GET urls in index.html if you are using it on a device other than the server.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>LED Controller</title>

		<style>

			body {
				width: 100%;
				float: left;
				margin: 0;
				padding: 0;
			}

			button.btn-success {
				color: #ffffff;
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
				background-color: #5bb75b;
				background-image: -moz-linear-gradient(top, #62c462, #51a351);
				background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
				background-image: -webkit-linear-gradient(top, #62c462, #51a351);
				background-image: -o-linear-gradient(top, #62c462, #51a351);
				background-image: linear-gradient(to bottom, #62c462, #51a351);
				background-repeat: repeat-x;
				border-color: #51a351 #51a351 #387038;
				border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
				filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
			}

			button.btn-danger {
				color: #ffffff;
				text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
				background-color: #da4f49;
				background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
				background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
				background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
				background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
				background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
				background-repeat: repeat-x;
				border-color: #bd362f #bd362f #802420;
				border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
				filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
			}

			.btn {
				display: inline-block;
				padding: 0.5em 0.7em;
				width: 46%;
				float: left;
				margin: 1em 2%;
				font-size: 20px;
				line-height: 30px;
				color: #333333;
				text-align: center;
				text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
				vertical-align: middle;
				cursor: pointer;
				background-color: #f5f5f5;
				background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
				background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
				background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
				background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
				background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
				background-repeat: repeat-x;
				border: 1px solid #bbbbbb;
				border-color: #e6e6e6 #e6e6e6 #bfbfbf;
				border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
				border-bottom-color: #a2a2a2;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
				filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
				-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
				-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
				box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
				box-sizing: border-box;
			}

		</style>
		
		<script> 

		
		    function httpGet( theUrl ){
 
			    var xmlHttp = null;
 
			    xmlHttp = new XMLHttpRequest();
			    xmlHttp.open( 'GET', theUrl, false );
			    xmlHttp.send( null );

			    
			    return xmlHttp.responseText;
		    }
		 </script>


	</head>
	<body>
		<button class="btn btn-success" onclick="httpGet('http://localhost:8080/?serverfunction=ledSwitch&value=1')" >On</button>
		<button class="btn btn-danger" onclick="httpGet('http://localhost:8080/?serverfunction=ledSwitch&value=0')" >Off</button>
	</body>
</html>
LED_Server.js
content_copyfile_download
var five = require( 'johnny-five' ),
    board,
    narf = require( 'narf' );
 
board = new five.Board();
 
/*
  Executes a command and fires event when done that
  will return the command output
*/

 
// The board's pins will not be accessible until
// the board has reported that it is ready
board.on("ready", function() {
  var val = 0;
 
  // Set pin 13 to OUTPUT mode
  this.pinMode( 13, 1 );
 
  // Mode Table
  // INPUT:   0
  // OUTPUT:  1
  // ANALOG:  2
  // PWM:     3
  // SERVO:   4
 this.digitalWrite( 13, 0 );
	/* Api functions */
 
	var self = this;
 
	var APIFunctions = {
 
		GET : {
			ledSwitch : function ( data, callback ){
 
				data.url.value = parseInt( data.url.value, 0 );
				if( data.url.value === 1 || data.url.value === 0){
				
					self.digitalWrite( 13, data.url.value );
				}
 
				callback( data.url.value );
			}
		},
		POST : {}
	};
 
	console.log( narf );
 
	var hs = new narf.HttpServer( { port : 8080 } ).start();
 
	hs.on( 'port', function( port ){
	
		hs.addAPI( { functions : APIFunctions } );
	} );
	
 
});

narf.setDebug( false );

narf.pageServer( {

    port : 8079,
    path :  __dirname + '/'
} );