本地温度 Node.js 物联网 & HTML5 伴侣应用

这些模板的源代码可以在这里找到：https://github.com/gomobile/iotapp-local-temperature 或下载 Intel® XDK IoT Edition 以查看所有 node.js 物联网应用程序模板和示例以及 HTML5 伴侣应用程序。

引言

Intel® XDK IoT Edition 是一个 HTML5 混合和 node.js 应用程序开发环境，允许用户在各种物联网平台（如 Intel® Galileo 和 Edison 开发板，运行 物联网开发套件 Linux 镜像）上部署、运行和调试，并利用 Grover Starter Kit Plus – IoT Intel® Edition。安装了入门套件和 Linux* 镜像后，您的开发平台已准备好连接到 Intel® XDK IoT Editon 并运行您的 node.js 应用程序。除了开发功能外，此开发环境还提供了各种 node.js 模板和示例，旨在在 Intel 物联网平台上运行。有关入门的更多信息，请访问 https://software.intel.com/en-us/html5/documentation/getting-started-with-intel-xdk-iot-edition。

目的

本地温度 Node.js 示例应用程序在 Intel® XDK IoT Edition 中的“使用 Node.js 的物联网项目”项目创建选项下分发，展示了如何从 Grover Starter Kit Plus – IoT Intel® Edition 温度传感器读取模拟数据，启动 Web 服务器并通过 WebSockets 进行无线通信。为了与传感器通信，此示例使用 MRAA 传感器通信库。该库的目的是使开发人员和传感器制造商更容易将其传感器和执行器映射到受支持的硬件之上，并允许通过高级语言和结构控制低级通信协议。

本地温度示例 HTML5 伴侣应用程序也在“使用演示项目”创建选项下分发。此应用程序使用 WebSockets API 与 node.js 物联网应用程序通信，并使用 D3 JavaScript 库 在散点图中可视化接收到的温度数据。

设计考虑因素

此示例需要将 mraa 库和 xdk_daemon 安装在您的开发板上。这两个需求都包含在物联网开发套件 Linux 镜像中，该镜像使您的开发板和 Intel® XDK IoT Edition 之间能够进行通信，并访问 IO 引脚。开发板和移动设备之间的 WebSockets 通信需要使用以太网电缆或无线网卡（例如 Intel 135N PCI Express WiFi/Bluetooth 网卡）与您的本地网络建立活动连接。 node.js 应用程序从温度传感器读取数据，然后将该值转换为华氏度。收集到的温度数据使用 WebSockets 发送到已连接的（移动）客户端。

[node.js 应用程序源代码和连接了传感器的开发板的图像]

Node.js 物联网应用程序

所需的 npm 包

• express
• socket.io

这些包列在 package.json 文件中，以便在连接的开发板上构建和安装。这可以通过单击底部工具栏中的“安装/构建”按钮来完成。安装 node 模块、上传（单击“上传”按钮）并使用 Intel XDK IoT Edition 运行（单击“运行”按钮）此项目后，将允许评估开发板和移动应用程序之间的通信。

注意： 您需要等待上传过程完成才能运行您的项目。

Web 服务器

//Create Web Server
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function (req, res) {
    'use strict';
    res.send('<h1>Hello world from Intel Galileo</h1>');
});
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;

WebSockets

//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');
    });
});

     

HTML5 移动应用程序需要输入您的开发板的 IP 地址，以便连接到必要的 WebSockets 连接，以便在移动设备上可视化由您的开发板收集的温度数据。

HTML5 伴侣应用程序

WebSockets

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);
});
......

开发/测试

每个模板都已在 Intel® Galileo Generation 1 和 2 开发板以及 Intel® Edison 开发板上进行了测试。