上次的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. 清空Github上某个文件的历史版本

    title: 清空Github上某个文件的历史版本 author: 青南 date: 2015-01-08 16:04:53 categories: [经验] tags: [Github,histor ...

  2. PHP 获取 特定时间范围 类

    目录  前序 用途 功能及事项 使用方法 代码及注释 前序: 总体来说,我更应该是一个 android 移动开发者,而不是一个 phper,如果说只做移动端的 APP ,我也不会学这么多,这 2年来, ...

  3. MySQL 系列（三）你不知道的 视图、触发器、存储过程、函数、事务、索引、语句

    第一篇:MySQL 系列(一) 生产标准线上环境安装配置案例及棘手问题解决 第二篇:MySQL 系列(二) 你不知道的数据库操作 第三篇:MySQL 系列(三)你不知道的 视图.触发器.存储过程.函数 ...

  4. 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频

    目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...

  5. JavaWeb——ServletContext

    一.基本概念 说起ServletContext,一些人会产生误解,以为一个servlet对应一个ServletContext.其实不是这样的,事实是一个web应用对应一个ServletContext, ...

  6. C# 对象实例化 用json保存 泛型类 可以很方便的保存程序设置

    参考页面: http://www.yuanjiaocheng.net/webapi/test-webapi.html http://www.yuanjiaocheng.net/webapi/web-a ...

  7. 敏捷测试模式之Scrum及其实践

    一.    敏捷开发模式简介 敏捷是近年来软件研发领域很火的一个词,采用敏捷开发模式的研发团队是越来越多了,尤其是敏捷模式中的Scrum更是佼佼者大行其道,这表明敏捷模式确有其好处,能给企业带来效率的 ...

  8. Linux基础介绍【第七篇】

    linux用户分类 超级用户:UID=0,root 普通用户:UID 500起,由超级用户或具有超级用户权限的用户创建的用户. 虚拟用户:UID 1-499,为了满足文件或服务启动的需要而存在,一般都 ...

  9. xamarin绑定原生库的一些坑

    最近一个项目涉及到较多的第三方库的绑定技术,中间遇到了几个坑,记录下来与大家分享 绑定Jar库 monoandroid对原生库的调用都通过Android.Runtime.JNIEnv进行调入(http ...

  10. ABP源码分析三十二：ABP.SignalR

    Realtime Realtime是ABP底层模块提供的功能,用于管理在线用户.它是使用SignalR实现给在线用户发送通知的功能的前提 IOnlineClient/OnlineClient: 封装在 ...