在web瀏覽器上顯示室內溫度（nodeJs+arduino+socket.io）

時間 2019-11-26

標籤 web 瀏覽器顯示室內溫度 nodejs+arduino+socket.io nodejs arduino socket 欄目 HTML 简体版

原文原文鏈接

上次的nodejs操做arduino入門篇中實現瞭如何鏈接arduino。此次咱們來實現經過arduino測量室內溫度並在瀏覽器上顯示出來。css

【所需材料】html

硬件：LM35溫度傳感器，arduino uno板，麪包板，若干導線。前端

軟件：socket.io , cylonJs , express等node

【準備-硬件部分】jquery

1、首先固然是鏈接電路板：express

注意這個ANALOG IN是傳感器的輸入，就是讀取溫度的入口。npm

看看我連的：json

二、而後按照 nodejs操做arduino入門篇先鏈接上arduino試試吧。api

【準備-軟件部分】瀏覽器

一、安裝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安裝依賴包

二、編寫主文件，就是讀取溫度，在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();

三、前端代碼--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: 0;
    padding: 0;
    background-color: #242424;
}
.temperature{
    color: white;
    width: 400px;
    height: 400px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-align: center;
    line-height: 400px;
}
.t-val {
    font-size: 40px;
    font-family: KaiTi;
}