当地温度 (Local Temperature) Node.js IoT 和 HTML5 Companion 应用

关于这些模板的源代码，请访问： https://github.com/gomobile/iotapp-local-temperature，或下载Intel® XDK IoT Edition以查看所有 node.js IoT 应用模板、示例以及 HTML5 companion 应用。

IoT Projects Panel September 2014

简介

Temperature Sensor Galileo Setup September 2014

Intel® XDK IoT Edition 是一种 HTML5 混合与 node.js 应用开发环境，支持用户部署、运行和调试不同物联网平台（比如运行IoT 开发套件 Linux 映像的英特尔® Galileo 和 Edison 开发板），并使用 Grover 入门套件附加工具包 – IoT Intel® Edition安装入门套件和 Linux* 映像后，您的开发平台将能够连接 Intel® XDK IoT Editon 并运行 node.js 应用。除具备开发功能之外，这种开发环境还可提供不同的 node.js 模板和示例（基于英特尔物联网平台运行）。如欲了解关于入门的更多信息，请访问：https://software.intel.com/zh-cn/node/531733。

目的

Local Temperature IoT Project Panel September 2014

IoT with Node.js Projects 项目创建选项下方的 Intel® XDK IoT Edition 中带有 Local Temperature Node.js 范例应用，展示如何通过 WebSocket 从Grover 入门套件附加工具包 – IoT Intel® Edition温度传感器读取模拟数据、启动 web 服务器并进行无线通信。为实现与传感器之间的通信，示例使用 MRAA Sensor Communication Library。该通用库旨在帮助开发人员和传感器制造商以更简单的方法在所支持的硬件上映射其传感器和制动器，并通过高级语言和结构控制下层通信协议。

Local Temperature HTML5 Companion Project Panel September 2014

Work with a Demo项目创建选项的下方也提供了 Local Temperature 示例 HTML5 companion 应用。该应用借助 WebSockets API 与 node.js IoT 应用通信，并采用 D3 JavaScript Library以散点图的形式对接收到的温度数据进行可视化处理。

设计注意事项

示例使用需在开发板上安装 mraa 库和 xdk_daemon。这两点要求包含在 IoT 开发套件 Linux 映像之中，该映像支持开发板与 Intel® XDK IoT Edition 之间的通信，以及对 IO pin 的访问。需采用以太网电缆或无线卡（比如 Intel 135N PCI Express WiFi/蓝牙卡）有源连接至本地网络，从而实现开发板与移动设备之间的 WebSockets 通信。 node.js 应用读取温度传感器的数据后，将数值转换成华氏度 (F)。收集的温度数据将通过 WebSocket 发送至联网（移动）客户端。

[image of node.js application source & development board with sensors connected]

Node.js IoT 应用

所需 npm 软件包：

express
socket.io

这些软件包位于 package.json 文件之中，将构建或安装至联网开发板。点击底部工具栏中的安装/构建按钮即可。安装节点模块后，使用 Intel XDK IoT Edition 上传（点击上传 (Upload) 按钮）并运行（点击运行 (Run ) 按钮）该项目即可评估开发板和移动应用之间的通信。

注：您需要等待上传结束后才能运行项目。

Web 服务器

//Create Web Server
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function (req, res) {'use strict';
   res.send('

Intel Galileo 的 Hello world

');
}); http.listen(1337, function () {
'use strict';
console.log('listening on *:1337');
});

模拟读取

var mraa = require("mraa");
//GROVE Kit A0 --> Aio(0)
var myAnalogPin = new mraa.Aio(0);
//Shift Temperature Sensor Value bitwise to the right
var a = myAnalogPin.read() >> 2;

WebSocket

//Create Socket.io object with http server
var io = require('socket.io')(http);
//Attach a 'connection' event handler to the server
io.on('connection', function (socket) {'use strict';
   console.log('a user connected');
   //Emits an event along with a message
   socket.emit('connected', 'Welcome');

   //Start watching Sensors connected to Galileo board
   startSensorWatch(socket);

   //Attach a 'disconnect' event handler to the socket
   socket.on('disconnect', function () {
       console.log('user disconnected');
   });
});

localTempHTML5InputAddr.png September 2014 localTempHTML5Active.png September 2014

HTML5 移动应用需要输入开发板的 IP 地址以连接必要的 WebSocket，从而在连接至开发板的移动设备上实现温度数据的可视化。

HTML5 Companion 应用

WebSocket

    try {
        //Connect to Server
        socket = io.connect("http://" + ip_addr + ":" + port);

        //Attach a 'connected' event handler to the socket
        socket.on("connected", function (message) {
            //Apache Cordova Notification - Include under the Projects Panel
            navigator.notification.alert("Great Job!",  // message"",                     // callback'You are Connected!',            // title'Ok'                  // buttonName
            );

            //Set all Back button to not show
            $.ui.showBackButton = false;
            //Load page with transition
            $.ui.loadContent("#main", false, false, "fade");
        });

        socket.on("message", function (message) {
            chart_data.push(message);
            plot();
            //Update log
            $("#feedback_log").text("Last Updated at " + Date().substr(0, 21));
        });
    } catch (e) {
        navigator.notification.alert("Server Not Available!",
            // message "",                     // callback'Connection Error!',            // title'Ok'                  // buttonName
        );
    }

D3.js 散点图

//Scatter plot-Selects the specified DOM element for appending the svg
var chart_svg = d3.select("#chart").append("svg").attr("id", "container1").attr("width", window.innerWidth).attr("height", 0.6 * height).append("g");

chart_svg.attr("transform", "translate(25," + margin.top + ")");

var x1 = d3.scale.linear().domain([0, 5000]).range([0, 100000]);

var y1 = d3.scale.linear().domain([0, 200]).range([0.5 * height, 0]);

//Add X Axis grid lines
chart_svg.selectAll("line.y1")
    .data(y1.ticks(10))
    .enter().append("line")
    .attr("class", "y")
    .attr("x1", 0)
    .attr("x2", 100000)
    .attr("y1", y1)
    .attr("y2", y1)
    .style("stroke", "rgba(8, 16, 115, 0.2)");

//This is for the Scatterplot X axis label
chart_svg.append("text").attr("fill", "red").attr("text-anchor", "end").attr("x", 0.5 * window.innerWidth).attr("y", 0.55 * height).text("Periods");

var x1Axis = d3.svg.axis().scale(x1).orient("top").tickPadding(0).ticks(1000);
var y1Axis = d3.svg.axis().scale(y1).orient("left").tickPadding(0);

chart_svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + y1.range()[0] + ")").call(x1Axis);

chart_svg.append("g").attr("class", "y axis").call(y1Axis);

var dottedline = d3.svg.line().x(function (d, i) {
    'use strict';
    return x1(i);
}).y(function (d, i) {
    'use strict';
    return y1(d);
});
......