Skip to content

Instantly share code, notes, and snippets.

@divanvisagie

divanvisagie/LED_Server.js

Last active May 1, 2020 08:03
Show Gist options
  • Save divanvisagie/4702867 to your computer and use it in GitHub Desktop.
Save divanvisagie/4702867 to your computer and use it in GitHub Desktop.
Download ZIP
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…
Raw
index.html
<!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>
Raw
LED_Server.js
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 + '/'
} );
@ramazedep
Copy link

how to change the javascript port? i have problem when running LED_server.js
"
1434344369028 Device(s) COM4,COM3,COM1
1434344369048 Connected COM4
1434344379049 Device or Firmware Error A timeout occurred while connecting to th
e Board.

Please check that you've properly flashed the board with the correct firmware.
See: https://github.com/rwaldron/johnny-five/wiki/Getting-Started#trouble-shooti
ng
events.js:85
throw er; // Unhandled 'error' event
^
Error: A timeout occurred while connecting to the Board.
at Board. (D:\prokom\johnny-five\node_modules\johnny-five\lib\boa
rd.js:411:26)
at Timer.listOnTimeout (timers.js:110:15) "

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment