iT邦幫忙

DAY 14
1

使用 EZoApp 開發 App 好好玩系列 第 14

Day 14 - EZoApp Extension 元件介紹 ( 硬體控制元件 )

  • 分享至 

  • xImage
  •  

畢竟是開發 App,因此能否控制硬體也就變成了開發工具的關鍵技術,然而 EZoApp 提供了一些可以控制硬體的元件,讓我們可以輕鬆的控制手機的硬體裝置,不過很可惜的,因為我自己使用的是 iphone 和 ipad,而 EZoApp 目前免費的版本只提供 export APK,付費版的才能 export iPA,所以以下就只列出硬體元件,實際的測試就交給大家了。

1. capture-photo

( 範例:http://jqmdesigner.appspot.com/designer.html#&ref=5165392674684928 )
從名稱和 icon 看起來應該是可以控制手機相機的元件,拖拉進入設計畫面之後可以看到一張預覽的圖片和一個按鈕,按鈕應該點選就可以拍照,然後圖片除了是縮圖,應該也是拍完照之後的照片預覽,除此之外,拖拉進入設計畫面後,會長出一些 JS code,看起來好像也支援存到雲端的資料庫,很可惜自己的手機不能測試,有 Android 的人就玩玩看吧!

/*** code gen by capture-photo  ***/
$(document).on("gkComponentsReady", function () {
  $("#gk-10134JQs-btn").on("click", function () {
    if (navigator.camera) {
      navigator.camera.getPicture(
        // Called when a photo is successfully retrieved
        function (imgURI) {
          // Set image
          $("#gk-10134JQs-img").attr("src", imgURI);
        },
        // Called if something bad happens
        function (msg) {
          alert("Failed because: " + msg);
        },
        // Camera options
        {
          quality: 100,
          destinationType: navigator.camera.DestinationType.FILE_URI,
          sourceType: Camera.PictureSourceType.CAMERA,
          encodingType: Camera.EncodingType.JPEG,
          saveToPhotoAlbum: true
        });
    }
  });
});

2. gk-position

( 範例:http://jqmdesigner.appspot.com/designer.html#&ref=5112931125559296 )
藉由手機的 GPS 獲取經緯度的元件,拖拉到設計畫面後,也會長出一段 JS code

/*** code gen by gk-position  ***/
;
$(document).on("gkComponentsReady", function () {
  function onSuccess(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    $("#gk-1013XzQG").html("Latitude: " + latitude + "<br /> Longitude: " + longitude);
  }

  function onError(error) {
    // onError Callback receives a PositionError object  
  }
  if (navigator.geolocation) {
    var watchID = navigator.geolocation.watchPosition(onSuccess, onError, {
      timeout: 10000
    });
  }
});

3. gk-device-motion

( 範例:http://jqmdesigner.appspot.com/designer.html#&ref=5768267301912576 )
應該是可以獲取手機三軸定位的元件,從 JS code 中可以看到有 xyz 三個方向的參數,不過仍然很可惜我的手機是 iphone 不能測試...哭哭~ ( 來付費玩玩看吧 )

/*** code gen by gk-device-motion  ***/
$(document).on("gkComponentsReady", function () {
  function onSuccess(acceleration) {
    var x = acceleration.x;
    var y = acceleration.y;
    var z = acceleration.z;
    var times = acceleration.timestamp;
    $("#gk-1013EglY").html("Acceleration X: " + x + "<br /> Acceleration Y: " + y + "<br /> Acceleration Z: " + z + "<br /> Timestamp: " + times + "<br />");
  }

  function onError(error) {
    console.log("onError!");
  }
  if (navigator.accelerometer) {
    var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, {
      frequency: 1000
    });
  }
});


上一篇
Day 13 - EZoApp Extension 元件介紹 ( 圖表元件 )
下一篇
Day 15 - 使用 EZoApp 之前要注意的眉眉角角
系列文
使用 EZoApp 開發 App 好好玩30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言