In this article, we will take a closer look at how to use Cordova Camera HTML5 apps. For more information on how to develop Cordova, see “The Cordova Guide”. With this routine, you can learn how to use the Cordova API on the Ubuntu platform to implement a desired camera feature. For details on how to create a simple Cordova application, see the article “How to Develop Cordova HTML5 Applications for Ubuntu Mobile”. In that article, it describes how to set up your environment. Developers are advised to read this article first.

Before we do the exercise, we can type the following command under the directory where we want to create the application:

$ bzr branch lp:ubuntu-sdk-tutorials
Copy the code

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

1) Create a basic Cordova framework application

For some reason, the development environment for Cordova is not integrated into Qt Creator, so we have to use the command line to do this. See the article “How to Develop Cordova HTML5 Apps for Ubuntu Mobile” to create a simple application called Camera:

$ cordova create cordovacam cordovacam.mycompany "CordovaCam"
$ cd cordovacam
Copy the code

2) Define your app’s own icon

We can design an icon for the application we want to create. For convenience, we can just copy the ICONS we need from the ubuntu-sdK-tutorials /html5/html5-tutorial-cordova-camera directory that we already downloaded:

$ cp .. /ubuntu-sdk-tutorials/html5/html5-tutorial-cordova-camera/www/icon.png ./www/img/logo.pngCopy the code

Then, we need to modify our config. XML file and add the following items to it:

<icon src="www/img/logo.png" />
Copy the code

Of course, we also need to change the author’s own email address. After the modification, the config.xml is displayed as follows:


      
<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>
Copy the code

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

3) Add Ubuntu platform support code to the project

We can add our Ubuntu support code with the following command:

$ cordova platform add ubuntu
Copy the code

Your project will now have the following directories:

platforms/ubuntu/

Since we need to use the Camera function, we need to add the Camera security policy in the following file :\

cordovacam/platforms/ubuntu/apparmor.json\

{"policy_groups": ["networking", "camera ", "audio"], "policy_version":1}Copy the code

Otherwise our camera function won’t work on the phone.

4) Add Camera API support

Run the following command:

$ cordova plugin add org.apache.cordova.camera
Copy the code

Add the Cordova Runtime to your project.

5) Run our app

$ cordova run --device --debug
Copy the code

As mentioned in our previous article “How to Develop Cordova HTML5 Apps for Ubuntu Mobile”, this command runs on the default platform (currently 14.10). On other platforms, you need to add the platform parameters after it:

$cordova run -- Device -- -- Framework Ubuntu-SDK-15.04Copy the code

If there are no problems, you should see something like this:

So far, we have created the basic Cordova Camera framework application, but we haven’t done any interface and Camera function calls.

6) Define the HTML 5 user interface

In this section, we will design our HTML user interface. We modify the index. The HTML (cordovacam/WWW/index. The HTML file is as follows:

<! DOCTYPEhtml>
<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 - HTML 5 - the UI toolkit / 0.1 / ambiance/CSS/appTemplate CSS" rel="stylesheet" type="text/css" />

    <! -- Ubuntu UI javascript imports - Ambiance theme -->
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/fast - buttons. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/core. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/buttons. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/dialogs. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/page. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/pagestacks js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the 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>
Copy the code

The interface here is very simple, with a Progress and a button to press to take a picture. Notice the following 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" />
Copy the code

There is an app.css file and an app.js file. We need to replace the index.css and index.js files with these.

app.css

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

app.js

/** * Wait before the DOM has been loaded before initializing the Ubuntu UI layer */ window.onload = function () { var UI = new UbuntuUI(); // This must be called after window is loaded 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"; image.style.display = "block"; } // log failure message function onFail(message) { console.log("Picture failure: " + message); }Copy the code

Here, we must note:

var UI = new UbuntuUI(); // This must be called after window is loaded
Copy the code

It must be done inside window.onload, not in front of it. Otherwise we’re going to have a problem with our UI. \

The design here is very simple. I’m not going over it. We chose to try to run our app on the phone. The following output is displayed:

Obviously, it didn’t have the results we were hoping for. Why is that?

Let’s go back to 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>
Copy the code

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

    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/fast - buttons. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/core. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/buttons. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/dialogs. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/page. Js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/pagestacks js." "></script>
    <script src="/ usr/share/ubuntu - HTML 5 - the UI toolkit / 0.1 / ambiance/js/tabs. Js." "></script>
Copy the code

It relies on ambiance, which is provided by the phone system. This may cause our UI to not match the current ambiance. To solve this problem, we refer to the link code.launchpad.net/~dbarth/ubu… \

To solve this problem. I also covered this in detail in my blog post “Creating platform-independent themes for HTML5 Apps.”

We do the following steps:

$14.10 install ubuntu - HTML 5 - themeCopy the code

then

$ ubuntu-html5-theme convert
Copy the code

Once we’re done, let’s revisit our index.html file:

<! DOCTYPEhtml>
<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>
Copy the code

We can see that the following parts have changed:

 <! -- 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>
Copy the code

There is also an additional directory called “Ambiance” in the current Cordovacam/WWW directory. The application is no longer dependent on the ambiance provided by the system.

In particular, if your interface doesn’t need to use HTML5 UI Toolkit, you can skip this step.

Rerun our application:

$ cordova run --device --debug
Copy the code

All source code at: github.com/liu-xiao-gu…

Cordova Camera App Tutorial \

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Create a Cordova Camera HTML5 application on Ubuntu

1) Create a basic Cordova framework application

2) Define your app’s own icon

3) Add Ubuntu platform support code to the project

4) Add Camera API support

5) Run our app

6) Define the HTML 5 user interface

app.css

app.js

Create a Cordova Camera HTML5 application on Ubuntu

1) Create a basic Cordova framework application

2) Define your app’s own icon

3) Add Ubuntu platform support code to the project

4) Add Camera API support

5) Run our app

6) Define the HTML 5 user interface

app.css

app.js

Related Posts

No secrets under the source code – do the best Netty source analysis tutorial

Python Reload function – Python Reload function

Flask framework for the first time