开源中文网

您的位置: 首页 > Arduino > 正文

在web浏览器上显示室内温度(nodeJs+arduino+socket.io)

来源: cnblogs  作者: 落花落雨不落叶

【准备-硬件部分】

1、首先当然是连接电路板:

 

注意这个ANALOG IN是传感器的输入,就是读取温度的入口。

看看我连的:

2、然后按照 nodejs操作arduino入门篇先连接上arduino试试吧。

【准备-软件部分】

1、安装socket.io,express,package.json中这样写:


  1. {
  2. "name": "robot",
  3. "version": "1.0.0",
  4. "description": "robot",
  5. "main": "main.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "author": "yourname",
  10. "license": "ISC",
  11. "devDependencies": {
  12. "cheerio": "^0.22.0",
  13. "cylon-firmata": "*"
  14. },
  15. "dependencies": {
  16. "cylon-firmata": "^0.24.0",
  17. "cylon-gpio": "^0.29.0",
  18. "cylon-i2c": "^0.26.1",
  19. "express": "^4.14.0",
  20. "socket.io": "^1.5.0"
  21. }
  22. }

执行npm install安装依赖包

2、编写主文件,就是读取温度,在main.js中写入:


  1. var Cylon = require('cylon');
  2. var express = require('express');
  3. var http = require('http');
  4. var app = express();
  5. var server = http.Server(app);
  6. var io = require('socket.io')(server);
  7. var port = 3000;
  8. app.use(express.static(__dirname+'/'));//设置静态文件目录
  9.  
  10. app.get('/',function(req,res){
  11. res.sendFile('index.html');//渲染一个html文件,在这个html文件中来展示温度
  12. });
  13.  
  14.  
  15. server.listen(port,function(){
  16. console.log("正在监听%d端口...",port);
  17. });
  18.  
  19. Cylon.api('http');
  20. Cylon.robot({
  21. connections: {
  22. arduino: { adaptor: 'firmata', port: '/dev/cu.wchusbserial1420' }
  23. },
  24.  
  25. devices: {
  26. sensor: { driver: 'analog-sensor', pin: 2, lowerLimit: 100, upperLimit: 900 }//2号analog in口,后面是最低和最高读取值
  27. },
  28.  
  29. work: function(my) {
  30. var analogValue = 0;
  31. io.on('connection', function(socket){
  32. every((1).second(), function() {//频率是1Hz,就是1秒读取一次温度
  33. analogValue = my.sensor.analogRead();//读取传感器数值
  34. io.emit('news', (analogValue*500/1023).toFixed(1));//analogValue*500/1023是将传感器数值转换成摄氏度。取一位小数
  35. //用socket.io把数值绑定在news这个名字上,前端也会用这个名字来读取这个值
  36. });
  37. console.log('a user connected');
  38. socket.on('disconnect', function(){
  39. console.log('user disconnected');
  40. });
  41. });
  42. }
  43. }).start();

3、前端代码--index.html:


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>温度</title>
  6. <script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
  7. <link rel="stylesheet" href="./css/index.css">
  8. </head>
  9. <body>
  10. <div class="temperature">
  11. <div class="t-val">
  12. 当前温度是:<span id="t">--</span>
  13. </div>
  14. </div>
  15. </body>
  16. <script src="./lib/socket.io.js"></script>
  17. <script>
  18. var socket = io();
  19. socket.on('news',function(msg){
  20. $('#t').text(msg+'\'C');
  21. });
  22. </script>
  23. </html>

抱歉上面花屏了:


  1. var socket = io();
  2. socket.on('news',function(msg){
  3. $('#t').text(msg+'\'C');
  4. });

然后执行node main.js,在浏览器中输入localhost:3000应该就能看到效果,再贴上css代码:


  1. html,body{
  2. margin: 0;
  3. padding: 0;
  4. background-color: #242424;
  5. }
  6. .temperature{
  7. color: white;
  8. width: 400px;
  9. height: 400px;
  10. position: absolute;
  11. margin: auto;
  12. left: 0;
  13. right: 0;
  14. top: 0;
  15. bottom: 0;
  16. text-align: center;
  17. line-height: 400px;
  18. }
  19. .t-val {
  20. font-size: 40px;
  21. font-family: KaiTi;
  22. }

 

然后看执行效果:页面刷新之后我就用手指捏住传感器,所以温度上升,松开又下降了。

然后我去看了看公司的空调设置温度是25.5(传感器一开始显示的是25.4),有图为证:

 

目前只是实现了在本地,之后我再研究研究怎么连接到服务器,初步的思路有:

1、使用树莓派,将arduino连接树莓派,再在树莓派上搭建服务器,再用花生棒或者其他端口映射的方法连接到公网,这样就能在公网上看到数据。

2、通过Ethernet扩展板实现网络远程访问

3、使用 wifi模块,再连接路由器实现网络访问(网上说的是推荐 esp8266模块,经济实惠)

4、GPRS模块,这个可以让arduino移动到任何地方,但是感觉如果要做到一直测的话,电话卡的流量得很多啊,这个我也只是瞎猜,没用过。

恩,差不多就这些了,过程很简单,目前我需要做的就是慢慢上手,争取用做一些有意思的东西出来。

最后说一下硬件的大概价格吧(没仔细记价格):

arduino30多块,面包板好像5块吧,线2块钱足够了,LM35传感器2块5好像,也就是说加起来一共不到50块,感兴趣的可以买来玩玩。

有问题或建议欢迎留言。

Tags:温度 浏览器
相关文章列表:
关于开源中文网 - 联系我们 - 广告服务 - 网站地图 - 版权声明