Skip to content

Instantly share code, notes, and snippets.

@dugdaniels

dugdaniels/index.html

Created January 7, 2013 00:34
Show Gist options
  • Save dugdaniels/4471350 to your computer and use it in GitHub Desktop.
Save dugdaniels/4471350 to your computer and use it in GitHub Desktop.
Download ZIP
An example of a browser-based input for Johnny-Five. Clicking the button in index.html turns on and off an LED installed on the Arduino board.
Raw
index.html
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(document).ready(function() {
var socket = io.connect('http://localhost');
$('#button').click(function(e){
socket.emit('click');
e.preventDefault();
});
});
</script>
</head>
<body>
<button id="button" href="#">LED ON/OFF</button>
</body>
</html>
Raw
package.json
{
"name": "johnny-five-io",
"version": "0.0.0",
"description": "Browser interface for Johnny-Five",
"main": "script.js",
"dependencies": {
"johnny-five": "~0.5.14",
"socket.io": "~0.9.13"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": "",
"author": "Corey Daniels",
"license": "BSD"
}
Raw
script.js
var app = require('http').createServer(handler),
io = require('socket.io').listen(app),
fs = require('fs'),
five = require('johnny-five');
app.listen(8080);
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
board = new five.Board();
board.on("ready", function() {
led = new five.Led(13);
io.sockets.on('connection', function (socket) {
socket.on('click', function () {
led.toggle();
});
});
});
@fredklanIII
Copy link

@Daphne98 Ill try to cover a few bases just in case you are new like me.

  1. Open a new terminal in something like VScode(this is by far my favorite lightweight Editor) with a folder for your project already open.
  2. Find out which COM port you are using from Device Manager or Arduino IDE(easiest) and insert it into
    this line like this board = new five.Board({port: "COM5"}); <<obviously your COM maybe different if you have lots of devices
  3. Type in the terminal npm install http socket.io fs johnny-five to get all the packages you need or if you are not sure you have them.
  4. Then type in the terminal node scripts.js <<this will establish the connection to the board and start the web page.
  5. You can navigate to http://localhost:8080/

Hopefully this helped

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