iT邦幫忙

DAY 8
0

x86 android 設備與外部硬體溝通研究系列 第 8

x86 android 設備與外部硬體溝通研究 - Cordova Sensor (8/30)

  • 分享至 

  • xImage
  •  

介紹了如何在 eclipse 調用sensor , 今天簡單介紹如何在 cordova 中使用sensor ,一樣先拿加速度計來示範

在開使看 code 之前,我們需要在 coedova 中加入註冊我們需要使用裝置的感應器:

$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin ls

接下來,請編輯你 app 專案資料夾下 ./config.xml 這個檔案,

這邊要注意不是 .\platforms\android\res\xml/config.xml 這個檔案 ! phonegape doc 這邊要求我們編輯這個檔案是有問題的 ref

./config.xml 加入下面幾行:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
	
<!-- 添加以下資訊 -->
	<feature name="Accelerometer">
		<param name="android-package" value="org.apache.cordova.devicemotion.AccelListener" />
	</feature>
	<plugin name="Accelerometer" value="org.apache.cordova.AccelListener" />

</widget>

在 index.html 中簡單添加要讓加速度計資訊顯示的欄位

<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->

    
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    
    
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready 你好!</p>
            </div>
   <div id="Accelerometer">   <!--- 這邊給加速度計 --->
   Waiting Accelerometer...
   </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    

最後是在 js 檔案中調用 感應器 API

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicitly call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
		var onSuccess = function(acceleration) {
			var AccelField = document.getElementById('Accelerometer');
			AccelField.innerHTML = '<p> x:'+acceleration.x +' </br> y:'+ acceleration.y +'</br>z:'+acceleration.z+'</br>Timestamp:'+acceleration.timestamp+'</p>';
		};
		var onError = function() {
			alert('onError!');
		};
		var options = { frequency: 200 };  // Update every 200 ms
		if(navigator.accelerometer == undefined){
			alert('navigator.accelerometer is UNDEFINED!'); // 如果先前的設定有成功宣告使用加度計,就不會跳出這行警告資訊
		};
		var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); // 使用  navigator.accelerometer API 
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

我們明天見


上一篇
x86 android 設備與外部硬體溝通研究 - JAR (7/30)
下一篇
x86 android 設備與外部硬體溝通研究 - Cordova Plugin (9/30)
系列文
x86 android 設備與外部硬體溝通研究30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言