CHAPTER 9 - Extension Components (Hardware Control Components)

Since this is about developing applications, hardware control is a key part of the technology for all development tools. EZoApp provides some components that can be used to control hardware, thus enabling us to easily control the hardware devices of cellphones.

EZoApp currently provides the following hardware control components:

1. capture-photo

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=5142257644601344 )

This component can control the camera on a cellphone. After dragging-and-dropping it onto the design screen, you will see a preview image and a button. The button is the click-button for taking pictures; the image is the thumbnail of the picture taken. In addition, some JS code will be generated, which supports the function of saving the images in a database in the cloud.

/*** 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

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=6210200725880832 )

This is a component that can obtain latitude and longitude data through a cellphone's GPS function. It also generates a section of JS code after being added to the design screen.

/*** 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

( Example: http://jqmdesigner.appspot.com/designer.html#&ref=6296742437847040 )

This is a component that can acquire the positioning of the three axes of a cellphone. You can see three parameters for the x, y, and z directions in the JS code.

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

Continue reading CHAPTER 10 - Polymer Components (deprecated)
Or Return to Table of Contents