上次的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）的更多相关文章

  1. WebDNN：Web浏览器上最快的DNN执行框架

    WebDNN:Web浏览器上最快的DNN执行框架 为什么需要WebDNN? 深层神经网络(DNN)在许多应用中受到越来越多的关注. 然而,它需要大量的计算资源,并且有许多巨大的过程来设置基于执行环境的 ...

  2. 后台启动weblogic成功后，在web浏览器上无法访问

    后台启动weblogic成功后,在web浏览器上无法访问,可尝试重启服务器.

  3. 使用 x3dom 框架及 WebGL 在浏览器上显示 3 维模型

    如果需要在浏览器上显示 3D 画面的话, 现在一般会使用 ​WebGL, 典型的例如 three.js(​http://mrdoob.github.com/three.js/), 但是 WebGL 对 ...

  4. flexpaper 开源轻量级的在浏览器上显示各种文档的组件

    FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件,被设计用来与PDF2SWF一起使用, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持.它可以被当做Flex的库 ...

  5. nodejs+express+socket.io

    其实官网文档清楚了  https://socket.io/get-started/chat/ 但是因为之前写的是nodejs+express, socket.io是后加的, 还是有小坑 服务器端: 官 ...

  6. nodejs之socket.io 聊天实现

    写在前面:最近很火的“996”话题,可谓是引起一片热议,马老师说:能够996应该是幸运的,996是对奋斗者的一种机遇(记得不是很清楚).996缺少的是自己的空闲时间了,当我是空闲的时候偶尔996挺好的 ...

  7. Storm 安装时 部分supervisor启动成功，并不在web ui上显示

    今天帮公司搭建集群时,发现启动了三个Supervisor 发现只有一个显示在Web UI 上. 于是我就简单地检查了下另外两台没有启动的 storm supervisor的日志, 发现没有报出什么异常 ...

  8. NodeJS+Express+Socket.io的一个简单例子

    关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...

  9. nodejs之socket.io模块——实现了websocket协议

    Nodejs实现websocket的4种方式:socket.io.WebSocket-Node.faye-websocket-node.node-websocket-server,主要使用的是sock ...

随机推荐

  1. 让kindeditor显示高亮代码

    kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: ...

  2. .NET Core的日志[1]:采用统一的模式记录日志

    记录各种级别的日志是所有应用不可或缺的功能.关于日志记录的实现,我们有太多第三方框架可供选择,比如Log4Net.NLog.Loggr和Serilog 等,当然我们还可以选择微软原生的诊断框架(相关A ...

  3. PHP与API讲解（一）

    了解API: 在使用与创建自己的API之前我们需要先了解什么是API! API代表应用程序编程接口,而接口指的是一个特定的服务.一个应用程序或者其他程序的公共模块. 理解SOA(面向服务的架构):SO ...

  4. zookeeper源码分析之六session机制

    zookeeper中session意味着一个物理连接,客户端连接服务器成功之后,会发送一个连接型请求,此时就会有session 产生. session由sessionTracker产生的,sessio ...

  5. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  6. ASP.NET MVC学习之母版页和自定义控件的使用

    一.母板页_Layout.cshtml类似于传统WebForm中的.master文件,起到页面整体框架重用的目地1.母板页代码预览 <!DOCTYPE html> <html> ...

  7. arcpy+PyQt+py2exe快速开发桌面端ArcGIS应用程序

    前段时间有一个项目,大体是要做一个GIS数据处理工具. 一般的方法是基于ArcObjects来进行开发,因为我对ArcObjects不太熟悉,所以就思考有没有其他简单快速的方法来做. 在查看ArcGI ...

  8. 关于asp.net利用mono部署到Linux上的一些说明

    linuxdot.net社区群:102732979(如果你认为你已经在.NET跨平台方面有足够的经验,请参加这个群:103810355). 其中有各种大神,嘿嘿,如果你有问题可以来咨询,完全无偿的免费 ...

  9. 搞了我一下午竟然是web.config少写了一个点

    Safari手机版居然有个这么愚蠢的bug,浪费了我整个下午,使尽浑身解数,国内国外网站搜索解决方案,每一行代码读了又想想了又读如此不知道多少遍,想破脑袋也想不通到底哪里出了问题,结果竟然是web.c ...

  10. .net垃圾回收机制编程调试试验

    1. 什么是CLR GC? 它是一个基于引用跟踪和代的垃圾回收器. 从本质上,它为系统中所有活跃对象都实现了一种引用跟踪模式,如果一个对象没有任何引用指向它,那么这个对象就被认为是垃圾对象,并且可以被 ...