Ebben a bejegyzésben szintén Arduinoról és a Node.js-ről lesz szó. Ha már a Node.js egy szerveroldali JavaScriptnek van kikiáltva, akkor annak megfelelően az előző bejegyzésem folytatásaként az Arduinora bekötött ledet fogom egy weboldalról szabályozni.

Természetesen csúnya dolog ha valaki másol, de még csúnyább ha nem vallja be 🙂 Én ennek a cikknek az alapjait/előzményét a codetutorialról szereztem. Abban a bejegyzésben távolról egy ledet kapcsolgatnak ki/be. Én a fényerejét fogom szabályozni, és kétirányú lesz a kommunikáció. A webről is lehet irányítani a led fényerejét, de a két gombunk segítségével továbbra is állíthatjuk a fényerőt és a weboldalon kijelezzük az aktuális értéket.

Kezdjünk is bele a beállításokba. Az előző bejegyzésben már létrehoztuk az áramkört, így azzal nincs további dolgunk. Azonban jóval több Node.js csomagra lesz szükségünk. Kezdjünk bele a csomagok telepítésébe
[sourcecode language=”bash”]
npm install johnny-five –save // ha tiszta lappal indulnánk…
npm install socket.io –save
npm install express –save
[/sourcecode]
Eddig egyszerű dolgunk volt, azonban a következőknél szükségünk lesz a bower csomagra, amihez kell a Git is. Ubuntun nagyon egyszerű dolgunk lenne, fel kellene tenni a Git kezelőt az apt-get csomagkezelővel. Hát, Windowson ilyen nincs, de le tudjuk tölteni a Git Windowsos telepítőjét és akkor kapunk egy shell ablakot, ahol fel tudjuk telepíteni a bower csomagkezelőt az npm csomagkezelővel. Én ezt nem bonyolítanám tovább, remélem sikerül megoldani önállóan 🙂 Ha felkerült a gépre a bower, akkor hozzunk létre egy public mappát a publikus fájloknak, majd abba egy lib mappát, ebbe kerülnek majd bele a bower komponensek. Ehhez hozzunk létre egy .bowerrc fájlt és tegyük bele:
[sourcecode language=”javascript”]
{
"directory": "public/lib"
}
[/sourcecode]
Utána lehet folytatni a Git shellből (honnan máshonnan?):
[sourcecode language=”bash”]
bower init # töltsük ki kedvünk szerint…
bower install angularjs –save
bower install socket.io-client –save
bower install angular-socket-io –save
[/sourcecode]

Ezzel létrehoztuk a node_modules mappánkat és a public/lib mappába kerültek a bower által a telepített komponensek.

És akkor jöhet a programozás, hozzunk létre egy server.js filet, amibe másoljuk be a következőket:
[sourcecode language=”javascript”]
// server.js
var express = require(‘express’);
var app = express();
var httpServer = require("http").createServer(app);
var five = require("johnny-five");
var io=require(‘socket.io’)(httpServer);

var port = 3000;

// server root
app.use(express.static(__dirname + ‘/public’));

// default index
app.get(‘/’, function(req, res) {
res.sendFile(__dirname + ‘/public/index.html’);
});

httpServer.listen(port);

console.log(‘Server available at http://localhost:’ + port);

var led, brightness = 0;

function ledDown(step){
step = typeof step !== ‘undefined’ && step!=null ? step : 1;
brightness = parseInt(brightness)-parseInt(step)
if (brightness<0) brightness = 0;
led.brightness(brightness);
io.sockets.emit(‘led:value’, brightness);
console.log(‘LED value:’+brightness);
}
function ledUp(step){
step = typeof step !== ‘undefined’ && step!=null ? step : 1;
brightness = parseInt(brightness)+parseInt(step)
if (brightness>255) brightness = 255;
led.brightness(brightness);
io.sockets.emit(‘led:value’, brightness);
console.log(‘LED value:’+brightness);
}

//Arduino board connection

var board = new five.Board();
board.on("ready", function() {
console.log(‘Arduino connected’);
led = new five.Led(11);

button1 = new five.Button({
board: board,
pin: 2,
holdtime: 50,
invert: false // Default: "false". Set to "true" if button is Active-Low
});

button2 = new five.Button({
board: board,
pin: 3,
holdtime: 50,
invert: false // Default: "false". Set to "true" if button is Active-Low
});
button1.on("hold", ledDown);
button2.on("hold", ledUp);
});

//Socket connection handler
io.on(‘connection’, function (socket) {
console.log(socket.id);
io.sockets.emit(‘led:value’, brightness); //case of refresh
socket.on(‘led:up’, function(){ledUp(10)});
socket.on(‘led:down’, function(){ledDown(10)});
});

console.log(‘Waiting for connection’);
[/sourcecode]

Az express.js lesz felelős a weboldalunk megjelenítéséért, a public mappában lesznek a statikus fájlok és onnan tölti be az index.html fájlt is.

[sourcecode language=”html”]
<!DOCTYPE html>
<html lang="en" ng-app="myApp" class="no-js"> <!–<![endif]–>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ArduinoController</title>
</head>
<body>
<h1>{{"Led controller"}}</h1>
<div ng-controller="ArduinoController">
<button ng-click="ledDown()">-</button>
<input type="input" value="" ng-model="led" ng-disabled = "true" />
<button ng-click="ledUp()">+</button>
</div>

<script src="lib/socket.io-client/socket.io.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-socket-io/socket.js"></script>
<script type="text/javascript">
var app = angular.module(‘myApp’, [‘btford.socket-io’]).
factory(‘arduinoSocket’, function (socketFactory) {
return socketFactory();
}).
controller(‘ArduinoController’, function ($scope, arduinoSocket) {
$scope.led = 0;
$scope.ledUp = function () {
arduinoSocket.emit(‘led:up’);
};
$scope.ledDown = function () {
arduinoSocket.emit(‘led:down’);
};
arduinoSocket.on(‘led:value’, function (data) {
$scope.led = data;
});
});
</script>
</body>
</html>
[/sourcecode]
indítsuk el a programot
[sourcecode language=”bash”]
node server.js
[/sourcecode]
A weboldalon (http://localhost:3000) lesz 2 gombunk, amikkel le/fel szabályozhatjuk a fényerőt. A szerver oldalon beállított 10-es lépésközökkel. És akár az arduinon található gombokkal, akár ezzel a két gombbal állítjuk a fényerőt, kiírjuk annak értékét (0-255). A gombokat érzékenyebbé tettem az előző projekthez képest, most 50ms időközönként lép 1-et fel vagy le a fényerő értéke. Így folyamatosabb és megoldódott a kattintásra való reagálás is.

Még kicsit tovább kell mennünk ebben a bejegyzésben. Sokkal szebb lenne, ha egy csúszkán tudnánk állítani az értéket/illetve a fényerőt, és akár a panelen lévő gombokkal is tudnánk mozgatni a csúszkát. Pontosan megfelel erre nekünk egy HTML5 range input. Esetleg ha ragaszkodunk hozzá, hogy ne csak HTML5 böngészőben működjön, akkor ez egy viszonylagosan jó slider. De maradjunk a HTML5-nél. Azért ehhez kelleni fog némi css is, mert alapjában véve a range input nem a legszebb (range.css):
[sourcecode language=”css”]
input[type=range] {
-webkit-appearance: none;
width: 600px;
margin: 20px 0;

}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 11.4px;
cursor: pointer;
box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
background: rgba(48, 113, 169, 0.78);
border-radius: 1.3px;
border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0.9px 0.9px 1px #000031, 0px 0px 0.9px #00004b;
border: 1.8px solid #00001e;
height: 26px;
width: 26px;
border-radius: 15px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -7.5px;
}

input[type=range]::-moz-range-track {
width: 100%;
height: 11.4px;
cursor: pointer;
box-shadow: 0px 0px 1px #000000, 0px 0px 0px #0d0d0d;
background: rgba(48, 113, 169, 0.78);
border-radius: 1.3px;
border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
width: 100%;
height: 11.4px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
[/sourcecode]
A header részbe helyezzük el a hivatkozást
[sourcecode language=”html”]
<link rel="stylesheet" type="text/css" href="range.css"/>
[/sourcecode]
Illetve , tegyük be a csúszkát az ArduinoController dobozába:
[sourcecode language=”html”]
<input type="range" min="0" max="255" ng-model="led" ng-change="onSliderChange()" />
[/sourcecode]
hozzuk létre a kliens oldali socket.io kérést (a controller függvényen belül)
[sourcecode language=”javascript”]
$scope.onSliderChange = function(){
arduinoSocket.emit(‘led:value.from.client’, $scope.led);
}
[/sourcecode]
hozzuk létre a szerveroldali részen a socket választ (connection részen belül)
[sourcecode language=”javascript”]
socket.on(‘led:value.from.client’, function (data) {
brightness = data;
if (brightness>255) brightness = 255;
if (brightness<0) brightness = 0;
led.brightness(brightness);
console.log(‘LED value:’+brightness);
});
[/sourcecode]
Ez elég is ahhoz, hogy az angular elvégezze a maradék munkát helyettünk. Vagyis mindent szinkronban tartson. Így most már folyamatosan szabályozható a LED fényereje a netről.

Ez a projekt is letölthető a githubról:
https://github.com/nova76/ArduinoTwoButtonLEDBrightnessOnWeb