Making Ideas Shine with Johnny-Five!!
Get started w/ Johnny-Five on Arduino — #arduSerie 21
Meet Johnny-Five! It’s an open-source project with a user-friendly API that closely resembles jQuery, making it quite familiar to those already acquainted with web development.
To access the code, just head over to the GitHub repository.
I won’t delve into the specifics of getting started with Johnny-Five, as the official website provides clear and straightforward instructions.
Johnny-Five is the JavaScript Robotics & IoT Platform. Released by Bocoup in 2012, Johnny-Five is maintained by a community of passionate software developers and hardware engineers. Over 75 developers have contributed to building a robust, extensible, and composable ecosystem.
Let us jump straight to the code (it’s on Github too):
Before proceeding, make sure to upload the ‘StandardFirmata’ firmware onto your Arduino board. This step is straightforward and ensures that Firmata can facilitate seamless two-way serial communication between the Arduino and the computer, making the process much smoother.
You’ll need to install Node.js and get Johnny-Five lib:
Now the codes:
//helloBOARD_00.jsvar five = require("johnny-five");
var myBoard;//myBoard = new five.Board();
myBoard = new five.Board( { port: "COM10" } );myBoard.on("ready", function() {
console.log('Arduino is ready!');
});//helloLED_00.jsvar five = require('johnny-five');five.Board( { port: "COM10" } ).on("ready", function(){
console.log('Board ready');
five.Led(13).strobe(200);
})//helloLED_01.js// JavaScript Document
var five = require('johnny-five'),
board = new five.Board({ port: "COM10" }),
led,
toggleState = false;board.on("ready", function(){
console.log('Board ready!!!');
led=new five.Led(13);setInterval(toggleLED,400);function toggleLED(){
toggleState =! toggleState;
if (toggleState) led.on();
else led.off();
}});
console.log("\n Waiting for device to connect...");//helloSERVO_00var five = require("johnny-five");
var board = new five.Board({ port: "COM3" });board.on("ready", function() {var servo = new five.Servo(9);// Sweep from 0-180 and repeat.
servo.sweep();
});//helloSERVO_01.jsvar five = require("johnny-five");
var board = new five.Board({ port: "COM3" });board.on("ready", function() {var servo_tilt = new five.Servo(10);
servo_tilt .sweep({
range: [45, 135]
});// servo_tilt .sweep({
// range: [0, 30],
// interval: 100,
// });// servo_tilt .sweep({
// range: [0, 60],
// interval: 100,
// step: 10
// });// var servo_pan = new five.Servo(9);
// servo_pan.sweep({
// range: [0, 180],
// interval: 10000,
// });});//helloSERVO_02.jsvar five = require("johnny-five");
var board = new five.Board({ port: "COM3" });board.on("ready", function() {var servo = new five.Servo({
pin: 9,
startAt: 1
});// Set the horn to 0degrees
//servo.to(180);// Angle change takes 1000ms to complete
//servo.to(180, 10000);// Angle change takes 10000ms to complete over 100 steps
//servo.to(180, 10000, 10);
servo.to(180,10000,1000);});//helloSERVO_03.jsvar five = require("johnny-five");
var board = new five.Board( { port: "COM3" } );board.on("ready", function() {
var range = [10, 180];// Servo to control panning
var pan = new five.Servo({
pin: 9,
range: range,
center: true
});// Servo to control tilt
var tilt = new five.Servo({
pin: 10,
range: range,
center: true
});// Joystick to control pan/tilt
// Read Analog 0, 1
// Limit events to every 50ms
var joystick = new five.Joystick({
pins: ["A0", "A1"],
freq: 100
});joystick.on("change", function() {
tilt.to(five.Fn.scale(this.y, -1, 1, 0, 170));
pan.to(five.Fn.scale(this.x, -1, 1, 0, 170));
});
});
Note: NodeBots and Johnny-five are very fashionable words on the internet. It makes programming hardware circuitry very similar to how one would program a modern web page.
The possibility of using the power of JavaScript (and by extension the power of the web!) allows you to think more creatively, especially if you come from a web development background.
Now I’ll show you how I’ve learned to cope with Johnny-Five!!!!
Let’s dissect the RGB code:
The Server side:
// JavaScript SERVER
1)five.Board().on('ready', func() {
...
});2)five.Board().on('ready', func() {
console.log('Arduino is ready.');
....
});3)five.Board().on('ready', func() {
console.log('Arduino is ready.');
io.on('connection', func(client) {
...
});
});4)five.Board().on('ready', func() {
console.log('Arduino is ready.');
io.on('connection', func(client) {
client.on('join', function(handshake) {
});
...
});
});5)five.Board().on('ready', func() {
console.log('Arduino is ready.');
io.on('connection', func(client) {
client.on('join', function(handshake) {
});
client.on('action', func(data) {
....
});
});
});6)five.Board().on('ready', func() {
console.log('Arduino is ready.');
io.on('connection', func(client) {
client.on('join', function(handshake) {
});
client.on('action', func(data) {
client.emit('action', data);
client.broadcast.emit('action', data);
});
});
});
Now The Client side:
// JavaScript CLIENT
1)(function() {
...
}());2)(function() {
var socket = io.connect(window.location.hostname + ':' + 3000);
var var1 = document.getElementById('var1');
...
...}());3)(function() {
var socket = io.connect(window.location.hostname + ':' + 3000);
var var1 = document.getElementById('var1');
...function emitValue(arg, e) {
socket.emit('action', {
arg: action,
value: e.target.value
});
}
...}());4)(function() {
var socket = io.connect(window.location.hostname + ':' + 3000);
var var1 = document.getElementById('var1');
...function emitValue(color, e) {
socket.emit('action', {
arg: action,
value: e.target.value
});
}var1.addEventListener('action', emitValue.bind(null, 'var1'));
......
}());5)(function() {
var socket = io.connect(window.location.hostname + ':' + 3000);
var var1 = document.getElementById('var1');
...function emitValue(color, e) {
socket.emit('action', {
arg: action,
value: e.target.value
});
}var1.addEventListener('action', emitValue.bind(null, 'var1'));
...socket.on('connect', function(data) {
socket.emit('join', 'Client is connected!');
});...
}());6)(function() {
var socket = io.connect(window.location.hostname + ':' + 3000);
var var1 = document.getElementById('var1');
...function emitValue(color, e) {
socket.emit('action', {
arg: action,
value: e.target.value
});
}var1.addEventListener('action', emitValue.bind(null, 'var1'));
...
socket.on('connect', function(data) {
socket.emit('join', 'Client is connected!');
});socket.on('var1', function(data) {
var var1 = data.var1;
document.getElementById(var1).value = data.value;
});
}());
What you can make with it:
This page of hackster.io is dedicated to projects aiming at j5. Visit and check it out for yourself !!!
Download All Archives of this Project
Johnny-Five Mantra:
“Be as simple and obvious as possible” — RickWaldron rwaldron
Links:
javascript-arduino-servo-control-tutorial
Arduino Experimentr’s Guide for NodeJS
Related Post:
Socket-io Intro — Project#1 — Socket_series — Episode #0
edited @set2023 — minor text fixes
