上次的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. iOS逆向工程之Hopper中的ARM指令

    虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学.现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少的实验,当时自我感觉ARM这门课学的还是 ...

  2. 深入浅出Redis-redis哨兵集群

    1.Sentinel 哨兵 Sentinel(哨兵)是Redis 的高可用性解决方案:由一个或多个Sentinel 实例 组成的Sentinel 系统可以监视任意多个主服务器,以及这些主服务器属下的所 ...

  3. go语言：多个[]byte数组合并成一个[]byte

    场景:在开发中,要将多个[]byte数组合并成一个[]byte,初步实现思路如下: 1.获取多个[]byte长度 2.构造一个二维码数组 3.循环将[]byte拷贝到二维数组中 package gst ...

  4. C#通过NPOI操作Excel

    参考页面: http://www.yuanjiaocheng.net/webapi/create-crud-api-1-post.html http://www.yuanjiaocheng.net/w ...

  5. ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  6. DDD领域驱动设计 - 设计文档模板

    设计文档模板: 系统背景和定位 业务需求描述 系统用例图 关键业务流程图 领域语言整理,主要是整理领域中的各种术语的定义,名词解释 领域划分(分析出子域.核心域.支撑域) 每个子域的领域模型设计(实体 ...

  7. java面向对象中的关键字

    1,super关键字 super:父类的意思 1. super.属性名 (调用父类的属性) 2. super.方法名 (调用父类的方法) 3. super([参数列表])(调用父类的构造方法) 注意: ...

  8. WEB安全隐患

    org.apache.commons.lang.StringEscapeUtils 进行输入框内容处理 [StringEscapeUtils.escapeSql(str);StringEscapeUt ...

  9. 用C++实现Linux中shell的ls功能

    实现输出当前目录下的文件名 ls功能: 方法一: #include <iostream> #include <algorithm> #include <stdio.h&g ...

  10. linux 如何对文件解压或打包压缩

    tar命令用与对文件打包压缩或解压,格式: tar [选项] [文件] 打包并压缩文件: tar -czvf  压缩包名 .tar.gz 解压并展开压缩包: tar -xzvf  压缩包名 .tar. ...