Create the Cordova Camera HTML5 app on the Ubuntu platform

In this article, we'll explain in detail how to use the Cordova Camera HTML5 app. For more information on Cordova development guidelines, developers can refer to the article "The Cordova Guide". With this routine, we can learn how to use the Cordova API on the Ubuntu platform to accomplish a camera function that we need. For a simple application of how to create a Cordova architecture, developers can refer to the article "How to develop Cordova HTML5 apps in Ubuntu mobile platforms". In that article, it describes how to set up your own environment. Developers are advised to read the article first.

Before we do the exercises, we can break into the following commands as we would like to create the app directory:

$ BZR Branch Lp:ubuntu-sdk-tutorials

In the above code, there is a completed camera code.

1) Create one of the most basic Cordova framework applications
For some reason, the Cordova development environment is not integrated into the QT creator, so we can only do it through the command line. We can refer to the article "How to develop a Cordova HTML5 app in the Ubuntu mobile platform" to create a simple app called Camera:

$ Cordova Create Cordovacam Cordovacam.mycompany "Cordovacam" $ cd Cordovacam

2) define the app's own icon

We can design an icon ourselves for the app we want to create. For convenience, we can directly copy the icons we need directly from the Ubuntu-sdk-tutorials/html5/html5-tutorial-cordova-camera directory of the application we have downloaded:

$ CP.. /ubuntu-sdk-tutorials/html5/html5-tutorial-cordova-camera/www/icon.png./www/img/logo.png

Then we need to modify our config. ins file to add the following entry to it:

<icon src= "Www/img/logo.png"/>

Of course, we also need to modify the author's own e-mail address. When you have finished modifying, the following is shown in config:

<?xml version='1.0' encoding='utf-8'?>
<widget id="cordovacam.mycompany" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>CordovaCam</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" version="1" />
    <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:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <icon src="www/img/logo.png" />
</widget>

Note: This step is necessary, otherwise our application will not pass the package validation.

3) Add Ubuntu Platform support code to the project
We can use the following command to add our Ubuntu support code:

$ Cordova Platform Add Ubuntu

You will now have the following directories in your project:

• platforms/ubuntu/

Since we need to use the camera feature, all we need to add the camera security policy to the following files:

Cordovacam/platforms/ubuntu/apparmor.json

{
 "policy_groups": ["networking", "camera”, "audio"],
  "policy_version":1
}

Otherwise our camera function will not work in the phone.
4) Add Camera API support
Use the following command:

$ Cordova Plugin Add Org.apache.cordova.camera

To add the Cordova runtime to your project.

5) Run our application

$ Cordova Run--device--debug

As described in our previous article, "How to develop Cordova HTML5 applications in Ubuntu mobile platforms", this command is run with the default platform (currently 14.10). On other platforms, you need to add the platform parameters to it:

$ Cordova Build--device----Framework ubuntu-sdk-15.04--verbose  

If there is no problem, you will see the following screen:




At this point, we've created our most basic Cordova Camera framework app, but we're still not making any calls to the interface and camera functions.

6) Defining the HTML 5 user interface

In this section, we will design our HTML user interface. We modified the index.html (cordovacam/www/index.html) file as follows：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>An Ubuntu HTML5 application</title>
    <meta name="description" content="An Ubuntu HTML5 application">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <!-- Ubuntu UI Style imports - Ambiance theme -->
    <link href="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

    <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

    <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <script src="cordova.js"></script>

    <!-- Application script and css -->
    <script src="js/app.js"></script>
    <link href="css/app.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div data-role="mainview">
      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="camera">Camera</li>
        </ul>
      </header>

      <div data-role="content">
        <div data-role="tab" id="camera">
            <div id="loading">
                <header>Loading...</header>
                <progress class="bigger">Loading...</progress>
            </div>
            <div id="loaded">
                <button data-role="button" class="ubuntu" id="click">Take Picture</button>
                <img id="image" src="" />
            </div>
        </div> <!-- tab: camera -->
      </div> <!-- content -->
    </div> <!-- mainview -->
  </body>
</html>

The interface here is very simple, a progress and a button that can be pressed for photography. Note the code here:

 <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <script src="cordova.js"></script>

    <!-- Application script and css -->
    <script src="js/app.js"></script>
    <link href="css/app.css" rel="stylesheet" type="text/css" />

Here is an app.css file, an app.js file. We need to replace the original index.css and index.js files with them.
App.css

#loading {
  position: absolute;
  left:45%;
}
#loaded {
  display: none;
}

app.js

/**
 * Wait before the DOM has been loaded before initializing the Ubuntu UI layer
 */
var UI = new UbuntuUI();
window.onload = function () {
    UI.init();

    document.addEventListener("deviceready", function() {
        if (console && console.log)
            console.log('Platform layer API ready');

        //hide the loading div and display the loaded div
        document.getElementById("loading").style.display = "none";
        document.getElementById("loaded").style.display = "block";

        // event listener to take picture
        UI.button("click").click( function() {
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 100,
                targetWidth: 400,
                targetHeight: 400,
                destinationType: Camera.DestinationType.DATA_URL,
                correctOrientation: true
             });
           console.log("Take Picture button clicked");
        }); // "click" button event handler

      }, false); // deviceready event handler

}; // window.onload event handler

// show new picture in html and log
function onSuccess(imageData) {
    var image = document.getElementById('image');
    image.src = "data:image/jpeg;base64," + imageData;
    image.style.margin = "10px";<img src="http://img.blog.csdn.net/20150727112433223?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="" />
    image.style.display = "block";
}

// log failure message
function onFail(message) {
    console.log("Picture failure: " + message);
}

The design here is very simple. I am not talking about it. We chose to try to run our app on the phone. The display of the operation is as follows:



Obviously, it has no results we hope to see. why?

Let's go back and look at our UI design:

 <body>
    <div data-role="mainview">
      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="camera">Camera</li>
        </ul>
      </header>

      <div data-role="content">
        <div data-role="tab" id="camera">
            <div id="loading">
                <header>Loading...</header>
                <progress class="bigger">Loading...</progress>
            </div>
            <div id="loaded">
                <button data-role="button" class="ubuntu" id="click">Take Picture</button>
                <img id="image" src="" />
            </div>
        </div> <!-- tab: camera -->
      </div> <!-- content -->
    </div> <!-- mainview -->
  </body>

The HTML5 UI Toolkit on the Ubuntu platform is used here. And in our index.html head section:

  <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/fast-buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/core.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/buttons.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/dialogs.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/page.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/pagestacks.js"></script>
    <script src="/usr/share/ubuntu-html5-ui-toolkit/0.1/ambiance/js/tabs.js"></script>

It relies on the ambiance provided by the mobile phone system. This may cause our UI and the current latest ambiance not to match exactly. In order to solve this problem, we refer to the connection https://code.launchpad.net/~dbarth/ubuntu-html5-theme/cmdline-tool/+merge/253498

To solve this problem. I also gave a detailed introduction to "Creating a platform-independent theme for HTML5 applications" in my blog post.
We do the following steps:

$ ubuntu-html5-theme install 14.10

$ ubuntu-html5-theme convert

After running, let's revisit our index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>An Ubuntu HTML5 application</title>
    <meta name="description" content="An Ubuntu HTML5 application">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <!-- Ubuntu UI Style imports - Ambiance theme -->
    <link href="ambiance/css/appTemplate.css" rel="stylesheet" type="text/css" />

    <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="ambiance/js/fast-buttons.js"></script>
    <script src="ambiance/js/core.js"></script>
    <script src="ambiance/js/buttons.js"></script>
    <script src="ambiance/js/dialogs.js"></script>
    <script src="ambiance/js/page.js"></script>
    <script src="ambiance/js/pagestacks.js"></script>
    <script src="ambiance/js/tabs.js"></script>

    <!-- Cordova platform API access - Uncomment this to have access to the Javascript APIs -->
    <script src="cordova.js"></script>

    <!-- Application script and css -->
    <script src="js/app.js"></script>
    <link href="app.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div data-role="mainview">
      <header data-role="header">
        <ul data-role="tabs">
          <li data-role="tabitem" data-page="camera">Camera</li>
        </ul>
      </header>

      <div data-role="content">
        <div data-role="tab" id="camera">
            <div id="loading">
                <header>Loading...</header>
                <progress class="bigger">Loading...</progress>
            </div>
            <div id="loaded">
                <button data-role="button" class="ubuntu" id="click">Take Picture</button>
                <img id="image" src="" />
            </div>
        </div> <!-- tab: camera -->
      </div> <!-- content -->
    </div> <!-- mainview -->
  </body>
</html>

And in the current cordovacam/www directory, there is a directory called "ambiance". This application no longer depends on the ambiance provided by the system.
The special support is: If your interface does not need to use the HTML5 UI Toolkit, you can not do the above steps.
Re-run our app:

 <!-- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="ambiance/js/fast-buttons.js"></script>
    <script src="ambiance/js/core.js"></script>
    <script src="ambiance/js/buttons.js"></script>
    <script src="ambiance/js/dialogs.js"></script>
    <script src="ambiance/js/page.js"></script>
    <script src="ambiance/js/pagestacks.js"></script>
    <script src="ambiance/js/tabs.js"></script>