上次的nodejs操作arduino入門篇中實現了如何連接arduino。這次我們來實現通過arduino測量室內溫度並在瀏覽器上顯示出來。
【所需材料】
硬件:LM35溫度傳感器,arduino uno板,面包板,若干導線。
軟件:socket.io , cylonJs , express等
【准備-硬件部分】
1、首先當然是連接電路板:
注意這個ANALOG IN是傳感器的輸入,就是讀取溫度的入口。
看看我連的:
2、然后按照 nodejs操作arduino入門篇先連接上arduino試試吧。
【准備-軟件部分】
1、安裝socket.io,express,package.json中這樣寫:
{ "name": "robot", "version": "1.0.0", "description": "robot", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "yourname", "license": "ISC", "devDependencies": { "cheerio": "^0.22.0", "cylon-firmata": "*" }, "dependencies": { "cylon-firmata": "^0.24.0", "cylon-gpio": "^0.29.0", "cylon-i2c": "^0.26.1", "express": "^4.14.0", "socket.io": "^1.5.0" } }
執行npm install安裝依賴包
2、編寫主文件,就是讀取溫度,在main.js中寫入:
var Cylon = require('cylon'); var express = require('express'); var http = require('http'); var app = express(); var server = http.Server(app); var io = require('socket.io')(server); var port = 3000; app.use(express.static(__dirname+'/'));//設置靜態文件目錄 app.get('/',function(req,res){ res.sendFile('index.html');//渲染一個html文件,在這個html文件中來展示溫度 }); server.listen(port,function(){ console.log("正在監聽%d端口...",port); }); Cylon.api('http'); Cylon.robot({ connections: { arduino: { adaptor: 'firmata', port: '/dev/cu.wchusbserial1420' } }, devices: { sensor: { driver: 'analog-sensor', pin: 2, lowerLimit: 100, upperLimit: 900 }//2號analog in口,后面是最低和最高讀取值 }, work: function(my) { var analogValue = 0; io.on('connection', function(socket){ every((1).second(), function() {//頻率是1Hz,就是1秒讀取一次溫度 analogValue = my.sensor.analogRead();//讀取傳感器數值 io.emit('news', (analogValue*500/1023).toFixed(1));//analogValue*500/1023是將傳感器數值轉換成攝氏度。取一位小數 //用socket.io把數值綁定在news這個名字上,前端也會用這個名字來讀取這個值 }); console.log('a user connected'); socket.on('disconnect', function(){ console.log('user disconnected'); }); }); } }).start();
3、前端代碼--index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>溫度</title> <script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script> <link rel="stylesheet" href="./css/index.css"> </head> <body> <div class="temperature"> <div class="t-val"> 當前溫度是:<span id="t">--</span> </div> </div> </body> <script src="./lib/socket.io.js"></script> <script> var socket = io(); socket.on('news',function(msg){ $('#t').text(msg+'\'C'); }); </script> </html>
抱歉上面花屏了:
var socket = io(); socket.on('news',function(msg){ $('#t').text(msg+'\'C'); });
然后執行node main.js,在瀏覽器中輸入localhost:3000應該就能看到效果,再貼上css代碼:
html,body{ margin: 0; padding: 0; background-color: #242424; } .temperature{ color: white; width: 400px; height: 400px; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; text-align: center; line-height: 400px; } .t-val { font-size: 40px; font-family: KaiTi; }
然后看執行效果:頁面刷新之后我就用手指捏住傳感器,所以溫度上升,松開又下降了。
然后我去看了看公司的空調設置溫度是25.5(傳感器一開始顯示的是25.4),有圖為證:
目前只是實現了在本地,之后我再研究研究怎么連接到服務器,初步的思路有:
1、使用樹莓派,將arduino連接樹莓派,再在樹莓派上搭建服務器,再用花生棒或者其他端口映射的方法連接到公網,這樣就能在公網上看到數據。
2、通過Ethernet擴展板實現網絡遠程訪問
3、使用 wifi模塊,再連接路由器實現網絡訪問(網上說的是推薦 esp8266模塊,經濟實惠)
4、GPRS模塊,這個可以讓arduino移動到任何地方,但是感覺如果要做到一直測的話,電話卡的流量得很多啊,這個我也只是瞎猜,沒用過。
恩,差不多就這些了,過程很簡單,目前我需要做的就是慢慢上手,爭取用做一些有意思的東西出來。
最后說一下硬件的大概價格吧(沒仔細記價格):
arduino30多塊,面包板好像5塊吧,線2塊錢足夠了,LM35傳感器2塊5好像,也就是說加起來一共不到50塊,感興趣的可以買來玩玩。
有問題或建議歡迎留言。