Cordova

Stuff i spent some time finding on Apache Cordova.
camera | config.xml

Camera

Simple test of the camera for the browser
<html>
  <head>
    <script type="text/javascript" src="cordova.js"></script>
    <script>
      function onDeviceReady() {
          navigator.camera.getPicture(function cameraSuccess(imageUri) {
              // display the image:
              document.getElementById('myImage').src="data:image/jpeg;base64,"+imageUri;
          }, function cameraError(error) {
              console.debug("Unable to obtain picture: " + error, "app");
          }, {
              quality: 50,
              destinationType: Camera.DestinationType.FILE_URI,
              sourceType: Camera.PictureSourceType.CAMERA,
              encodingType: Camera.EncodingType.JPEG,
              mediaType: Camera.MediaType.PICTURE,
              allowEdit: true,
              correctOrientation: true  //Corrects Android orientation quirks
          });
      };
      document.addEventListener("deviceready", onDeviceReady, false);
    </script>
  </head>
  <body>
    <img id='myImage' src='img/logo.png'/>
  </body>
</html>
Camera version for the iPhone
<html>
  <head>
    <script type="text/javascript" src="cordova.js"></script>
    <script>
      function onDeviceReady() {
          navigator.camera.getPicture(function cameraSuccess(imageUri) {
              document.getElementById('myImage').src=imageUri;
              document.getElementById('mytext').innerHTML=imageUri;
          }, function cameraError(error) {
              console.debug("Unable to obtain picture: " + error, "app");
          }, {
              quality: 50,
              destinationType: Camera.DestinationType.FILE_URI,
              sourceType: Camera.PictureSourceType.CAMERA,
              encodingType: Camera.EncodingType.JPEG,
              mediaType: Camera.MediaType.PICTURE,
              allowEdit: true,
              correctOrientation: true  //Corrects Android orientation quirks
          });
      };
      document.addEventListener("deviceready", onDeviceReady, false);
    </script>
  </head>
  <body>
    <div id="mytext"></div>
    <img id='myImage' src='img/logo.png'/>
  </body>
</html>
Uploading the picture, ios version
Here is a script which takes a picture and uploads it to a web page: http://mywebsite.com/upload.php.
<html>
  <head>
    <script type="text/javascript" src="cordova.js"></script>
    <script>
      /* here is what the http://mywebsite.com/upload.php page can contain:
      <?php
	 print_r($_FILES);
	 $new_image_name = "namethisimage.jpg";
	 move_uploaded_file($_FILES["file"]["tmp_name"],"/path/on/server/".$new_image_name);
      ?>
      */

      function onDeviceReady() {
          navigator.camera.getPicture(function cameraSuccess(imageUri) {
              // display picture :
              document.getElementById('myImage').src=imageUri;
              // display file name :
              document.getElementById('mytext').innerHTML=imageUri;

              var win = function (r) {
                  console.log("Code = " + r.responseCode);
                  console.log("Response = " + r.response);
                  console.log("Sent = " + r.bytesSent);
              }

              var fail = function (error) {
                  alert("An error has occurred: Code = " + error.code);
                  console.log("upload error source " + error.source);
                  console.log("upload error target " + error.target);
              }

              var options = new FileUploadOptions();
              options.fileKey = "file";
              options.fileName = "foo.jpeg";
              options.mimeType = "images/jpeg";

              var params = {};
              params.value1 = "test";
              params.value2 = "param";

              options.params = params;
              var ft = new FileTransfer();
              ft.upload(imageUri, encodeURI("http://mywebsite.com/upload.php"), win, fail, options);
          }, function cameraError(error) {
              console.debug("Unable to obtain picture: " + error, "app");
          }, {
              quality: 50,
              destinationType: Camera.DestinationType.FILE_URI,
              sourceType: Camera.PictureSourceType.CAMERA,
              encodingType: Camera.EncodingType.JPEG,
              mediaType: Camera.MediaType.PICTURE,
              allowEdit: true,
              correctOrientation: true  //Corrects Android orientation quirks
          });
      };
      document.addEventListener("deviceready", onDeviceReady, false);
    </script>
  </head>
  <body>
    <div id="mytext"></div>
    <div id="lstatus"></div>
    <img id='myImage' src='img/logo.png'/>
    <input type="file" id="fileInput"/>
  </body>
</html>

Config.xml

Example of config.xml file i am using:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.domain" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>AppName</name>
    <description>App Description</description>
    <author email="myname@mydomain.com" href="http://mydomain.com">My Name</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <preference name="" value="true" />
        <preference name="DisallowOverscroll" value="true" />
        <preference name="FullScreen" value="true" />
        <preference name="KeyboardDisplayRequiresUserAction" value="true" />
        <preference name="BackgroundColor" value="0cfc" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <preference name="BackupWebStorage" value="local" />
        <preference name="DisallowOverscroll" value="true" />
        <preference name="BackgroundColor" value="0cfc" />
        <preference name="StatusBarOverlaysWebView" value="false" />
        <config-file parent="UIStatusBarHidden" platform="ios" target="*-Info.plist">
          <true/>
        </config-file>
        <config-file parent="UIViewControllerBasedStatusBarAppearance" platform="ios" target="*-Info.plist">
          <false/>
        </config-file>
    </platform>
    <engine name="android" spec="^6.2.3" />
    <engine name="ios" spec="^4.4.0" />  
</widget>
Back to my home page Last-Updated: ven. nov. 4 13:58:32 2011 (+0100)