在web浏览器上显示室内温度（nodeJs+arduino+socket.io）
上次的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:;
padding:;
background-color: #242424;
}
.temperature{
color: white;
width: 400px;
height: 400px;
position: absolute;
margin: auto;
left:;
right:;
top:;
bottom:;
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块，感兴趣的可以买来玩玩。
有问题或建议欢迎留言。
在web浏览器上显示室内温度（nodeJs+arduino+socket.io）的更多相关文章
- WebDNN：Web浏览器上最快的DNN执行框架
WebDNN:Web浏览器上最快的DNN执行框架 为什么需要WebDNN? 深层神经网络(DNN)在许多应用中受到越来越多的关注. 然而,它需要大量的计算资源,并且有许多巨大的过程来设置基于执行环境的 ...
- 后台启动weblogic成功后，在web浏览器上无法访问
后台启动weblogic成功后,在web浏览器上无法访问,可尝试重启服务器.
- 使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型
如果需要在浏览器上显示 3D 画面的话, 现在一般会使用 WebGL, 典型的例如 three.js(http://mrdoob.github.com/three.js/), 但是 WebGL 对 ...
- flexpaper 开源轻量级的在浏览器上显示各种文档的组件
FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件,被设计用来与PDF2SWF一起使用, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持.它可以被当做Flex的库 ...
- nodejs+express+socket.io
其实官网文档清楚了 https://socket.io/get-started/chat/ 但是因为之前写的是nodejs+express, socket.io是后加的, 还是有小坑 服务器端: 官 ...
- nodejs之socket.io 聊天实现
写在前面:最近很火的“996”话题,可谓是引起一片热议,马老师说:能够996应该是幸运的,996是对奋斗者的一种机遇(记得不是很清楚).996缺少的是自己的空闲时间了,当我是空闲的时候偶尔996挺好的 ...
- Storm 安装时 部分supervisor启动成功，并不在web ui上显示
今天帮公司搭建集群时,发现启动了三个Supervisor 发现只有一个显示在Web UI 上. 于是我就简单地检查了下另外两台没有启动的 storm supervisor的日志, 发现没有报出什么异常 ...
- NodeJS+Express+Socket.io的一个简单例子
关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...
- nodejs之socket.io模块——实现了websocket协议
Nodejs实现websocket的4种方式:socket.io.WebSocket-Node.faye-websocket-node.node-websocket-server,主要使用的是sock ...
随机推荐
- (JS+CSS)实现图片放大效果
代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...
- lua 学习笔记（1）
一.lua函数赋值与函数调用 在lua中函数名也是作为一种变量出现的,即函数和所有其他值一样都是匿名的,当要使用某个函数时,需要将该函数赋值给一个变量,这样在函数块的其他地方就可以通过 ...
- [C#] 简单的 Helper 封装 -- CookieHelper
using System; using System.Web; namespace ConsoleApplication5 { /// <summary> /// Cookie 助手 // ...
- BPM Domino集成解决方案
一.需求分析 Lotus Notes/Domino是IBM的协同办公平台,在国内有广泛的用户. 但由于推出年头较早.采用文档数据库等特点, 导致其流程集成能力弱.统计分析难.不支持移动办公等问题,很多 ...
- Win10提示没有权限使用网络资源问题解决
借鉴链接:http://www.cr173.com/html/67361_1.html Win10提示没有权限使用网络资源解决方法 1.打开控制面板; 2.在所有控制面板项中找到凭据管理器; 3.添加 ...
- ubuntu14.04redis安装以及扩展
redis 安装http://my.oschina.net/quanpower/blog/282546#OSC_h2_2redis扩展安装wget https://github.com/nicolas ...
- Linux下的C Socket编程 -- server端的继续研究
Linux下的C Socket编程(四) 延长server的生命周期 在前面的一个个例子中,server在处理完一个连接后便会立即结束掉自己,然而这种server并不科学啊,server应该是能够一直 ...
- [httpserver]如何解析HTTP请求报文
这个http server的实现源代码我放在了我的github上,有兴趣的话可以点击查看哦. 在上一篇文章中,讲述了如何编写一个最简单的server,但该程序只是接受到请求之后马上返回响应,实在不能更 ...
- Nova PhoneGap框架 总结
Nova PhoneGap Framework 是完全针对PhoneGap应用程序量身定做的,在这个框架下开发的应用程序很容易实现高质量的代码,很容易让程序拥有很好的性能和用户体验. 在经历了多个项目 ...
- 《AngularJS深度剖析与最佳实践》简介
由于年末将至,前阵子一直忙于工作的事务,不得已暂停了微信订阅号的更新,我将会在后续的时间里尽快的继续为大家推送更多的博文.毕竟一个人的力量微薄,精力有限,希望大家能理解,仍然能一如既往的关注和支持sh ...