Created
January 7, 2013 00:34
-
-
Save dugdaniels/4471350 to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "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" | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | |
| }); | |
| }); | |
| }); |
great!
Nice! great example. but now, 2018, the socket.io doesn't need put anymore the io.connect('localhost);
if someone try this example now with this code, just leave io.connect(); in the index.html
I copied your code and tried to run it. Somehow it is not working for me.
@Daphne98 Ill try to cover a few bases just in case you are new like me.
- Open a new terminal in something like VScode(this is by far my favorite lightweight Editor) with a folder for your project already open.
- Find out which COM port you are using from Device Manager or Arduino IDE(easiest) and insert it into
this line like thisboard = new five.Board({port: "COM5"});<<obviously your COM maybe different if you have lots of devices - Type in the terminal
npm install http socket.io fs johnny-fiveto get all the packages you need or if you are not sure you have them. - Then type in the terminal
node scripts.js<<this will establish the connection to the board and start the web page. - 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
Awesome :D