制作室内温度计的过程，使用Arduino和Node.js，vol.02

2 年 ago

宇, 华

3 minutes

前一次

使用Arduino和Node.js制作室内温度计，第一部分
http://qiita.com/kenjiSpecial@github/items/5d18f7851613d6e05a6a

通过Arduino控制温度计，在node.js上实现了温度显示。

我做过的事情

mongoDBで保存したデータをAngular.jsを使って表として表示する。

仓库地址: https://github.com/kenjiSpecial/ArduinoTemperatureProject

将获得的数值保存到MongoDB中。

我使用mongoose作为与MongoDB进行访问的库。
http://mongoosejs.com/index.html

将mongoose设置为全局变量，这样可以在app.js以外的文件中直接使用，而无需每次进行定义。

var mongoose = require("mongoose");
var uri = 'mongodb://localhost/test-case1';
global.db = mongoose.createConnection(uri);

在 mongoose 中，通过 Schema 实例来定义 Model，可以使用 mongoose.model。

var Schema = require("mongoose").Schema;
var tempSchema = Schema({ temp : Number, date: Number });

module.exports = db.model('tem', tempSchema);

每当使用在vol.01中创建的温度测量模块进行温度测量时，将数值保存到MongoDB中。


// data from Serial port
sp.on('data', function(input) {

    var buffer = new Buffer(input, 'utf8');

    var jsonData;
    try {
        jsonData = JSON.parse(buffer);
        console.log("temp: " + jsonData.temp);
        console.log("date: " + +new Date());

        // 温度と時間をmongoDBに保存する。
        model.create({temp: jsonData.temp, date: + new Date()}, function(err, doc){
        })
    } catch(e) {
        //console.log("error");
        // データ受信がおかしい場合無視する
        return;
    }
});

使用Angular.js来显示通过MongoDB保存的数据，以表格的形式呈现。

首先，在node.js端，当收到/model目录的get方法时，将返回json。

router.route('/models').get(function(req, res){

    model.find(function (err, docs) {
        if (err) return next(err);
        res.send(docs);
    });

});

我会创建一个AngularJS应用程序。

我将创建一个AngularJS应用程序的index.ejs。
我将在app.js和controllers/main.js中实现前端部分。

<!DOCTYPE html>
<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/components/bootstrap/dist/css/bootstrap.css"/>

<script src="/components/angular/angular.min.js"></script>
<script src="/components/angular-resource/angular-resource.js"></script>
<script src="/components/angular-cookies/angular-cookies.js"></script>
<script src="/components/angular-sanitize/angular-sanitize.js"></script>
<script src="/components/angular-route/angular-route.js"></script>

<script src="/js/app.js"></script>
<script src="/js/controllers/main.js"></script>

<body ng-app="mainApp">
    <div class="container">
        <div class="row">
             <ng-view id="container"></ng-view>
        </div>
    </div>
</body>

</html>

在app.js中创建配置。
templateUrl使用模板的URL，controller使用MainCtrl。
我们在controllers/main.js中创建了名为MainCtrl的控制器。

(function () {
    'use strict';

    angular
        .module('mainApp', [
            'ngCookies',
            'ngResource',
            'ngSanitize',
            'ngRoute'
        ])
        .config(function ($routeProvider) {
            $routeProvider
                .when('/', {
                    templateUrl: '/templates/main.html',
                    controller: 'MainCtrl'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });

})();

控制器/main.js中使用$http服务，从保存在mongoDB中的数据接收JSON。将接收到的JSON保存为应用程序内的数据。

(function() {
    'use strict';

    angular.module('mainApp')
        .controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
            $scope.tempDatas = [];

            $http.get('/models').success(function (data) {
                $scope.tempDatas = data;
            });
        }]);
})();

将收到的数据以HTML形式显示。

<table class="table table-striped">
    <thead>
        <tr>
            <th>Date</th>
            <th>Temperature</th>
        </tr>
    </thead>

    <tbody>
        <tr ng-repeat="data in tempDatas">
            <th>
                {{ data.date | date:'yyyy-MM-dd HH:mm:ss' }}
            </th>
            <th>
                {{ data.temp }} &deg;C
            </th>
        </tr>
    </tbody>
</table>

结果 (jié guǒ)

Screen Shot 2014-09-21 at 6.52.35 PM.png

我这次写的代码在GitHub上可以找到。
https://github.com/kenjiSpecial/ArduinoTemperatureProject

走向未来

目前数据显示出来了，但只是文字信息的显示，今后我打算改为以视觉方式显示。