上次的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. 史上最详细git教程

    题外话 虽然这个标题很惊悚,不过还是把你骗进来了,哈哈-各位看官不要着急,耐心往下看 Git是什么 Git是目前世界上最先进的分布式版本控制系统. SVN与Git的最主要的区别 SVN是集中式版本控制 ...

  2. CentOS 7配置LNMP开发环境及配置文件管理

    安装并配置MySQL 5.6 从CentOS从7.x开始默认使用MariaDB.MariaDB完全兼容MySQL,包括API和命令行.但是很多时候我们还是会想要安装MySQL,所以不能直接通过yum命 ...

  3. Power BI官方视频(3) Power BI Desktop 8月份更新功能概述

    Power BI Desktop 8月24日发布了更新版本.现将更新内容翻译整理如下,可以根据后面提供的链接下载最新版本使用. 1.主要功能更新 1.1 数据钻取支持在线版 以前的desktop中进行 ...

  4. 展望未来：使用 PostCSS 和 cssnext 书写 CSS

    原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一 ...

  5. 一篇文章看懂TPCx-BB（大数据基准测试工具）源码

    TPCx-BB是大数据基准测试工具,它通过模拟零售商的30个应用场景,执行30个查询来衡量基于Hadoop的大数据系统的包括硬件和软件的性能.其中一些场景还用到了机器学习算法(聚类.线性回归等).为了 ...

  6. iOS开发 适配iOS10

    2016年9月7日,苹果发布iOS 10.2016年9月14日,全新的操作系统iOS 10将正式上线. 作为开发者,如何适配iOS10呢? 1.Notification(通知) 自从Notificat ...

  7. Win10提示没有权限使用网络资源问题解决

    借鉴链接:http://www.cr173.com/html/67361_1.html Win10提示没有权限使用网络资源解决方法 1.打开控制面板; 2.在所有控制面板项中找到凭据管理器; 3.添加 ...

  8. SQL Server存储过程

    创建于2016-12-24 16:12:19 存储过程 概念: 1.存储过程是在数据库管理系统中保存的.预先编译的.能实现某种功能的SQL程序,它是数据库应用中运用比较广泛的 一种数据对象. 2.存储 ...

  9. SqlServer之数据库三大范式

    分析: 数据库设计应遵循三大范式分别为: 第一范式:确保表中每列的原子性(不可拆分): 第二范式:确保表中每列与主键相关,而不能只与主键的某部分相关(主要针对联合主键),主键列与非主键列遵循完全函数依 ...

  10. VisualStudio 2015 开启IIS Express可以调试X64项目

    现在项目开发时总有时需要在X64下开发,这样我们就需要IIS Express中调试.不要总是放在IIS中,在Attach这样好慢.   如果不设置直接调试X64的程序,我们有可能会受到以下类似的错误 ...