CODEWITHSUNDEEP
androidjquery-mobilecordovaphoto
Devin Prejean
Devin Prejean

Reputation: 105

Android app reverts back to index page after taking a picture

So i have this app i'm building and i'm a newbie to android apps. I am using phonegap to assist in making things easier. i used their example they have posted and when take the picture the app reverts back to the index page of my app instead of going to the page i want.

what i would like to know is where do i modify the code to go to another page and display the picture i just took?

here is some of my code:

    <script src="phonegap-1.1.0.js" type="text/javascript"></script>
</head>
<script type="text/javascript" charset="utf-8">

    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value 

    // Wait for PhoneGap to connect with the device
    //
    document.addEventListener("deviceready",onDeviceReady,false);

    // PhoneGap is ready to be used!
    //
    function onDeviceReady() {
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64 encoded image data
      // console.log(imageData);

      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');

      // Unhide image elements
      //
      smallImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }

    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI 
      // console.log(imageURI);

      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');

      // Unhide image elements
      //
      largeImage.style.display = 'block';

      // Show the captured photo
      // The inline CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }

    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
    }

    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string  
      navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true }); 
    }

    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50, 
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }

    // Called if something bad happens.
    // 
    function onFail(message) {
      alert('Failed because: ' + message);
    }

    </script>
<body>




<div data-role="page" id="option" data-theme="e">
<div data-role="header" data-theme="e">
<h2 class="longHeader ui-title">Wedding Registry Scanner</h2>
</div>
<div data-role="controlgroup">
<div data-role="content" data-theme="d">
<a href="http://zxing.appspot.com/scan" data-role="button"><img src="images/upc.png"></a>
<a href="#" onclick="capturePhoto();" data-role="button"><img src="images/camera.png"></a>
<a href="manage.html" data-role="button"><img src="images/list.png"></a>

</div>
</div>

</div>
<div data-role="footer" data-theme="e">
        <h4 class="smallFont">Prejean IT Solutions 2011&copy;</h4>
</div>


<div data-role="page" id="capture" data-theme="e">
<div data-role="header" data-theme="e">
<h2 class="longHeader ui-title">Capture Photo</h2></div>
<div data-role="content" data-theme="d">
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
    <img style="display:none;" id="largeImage" src="" />
</div>
</div>

EDIT: this is in my android manifest file.

<activity android:name="reg.scanner.DroidGap" 
        android:label="@string/app_name" 
        android:configChanges="orientation|keyboardHidden"> 
        <intent-filter> </intent-filter> 
        </activity>

Upvotes: 1

Views: 1386

Answers (3)

user782863
user782863

Reputation: 11

Its not your code.

The error is caused by poorly written Camera application.

Try installing a different Camera App - I use Go Camera 360

Upvotes: 1

Simon MacDonald
Simon MacDonald

Reputation: 23273

Please make sure you have the following attribute in your main activity tag in your AndroidManifest.xml

android:configChanges="orientation|keyboardHidden"

without it the orientation change will force the WebView to reload.

Upvotes: 0

Yevgeny Simkin
Yevgeny Simkin

Reputation: 28349

I haven't used this, but I suspect that what you're seeing is a result of this line:

<a href="#" onclick="capturePhoto();" data-role="button">

(this has nothing to do with Android, obviously, since they're doing this via the web browser's connection to the underlying Android system).

href="#" will always go to the same page it's currently in. Presumably it has taken you through some steps (that looks like "pages" but in fact are just divs being hidden and displayed in some sequence) and it reloads the page, giving you the impression that you're "going" to the index page (when in fact you never left).

Try putting the location of your destination page in that href to see what happens.

And welcome to Stack. Don't forget to mark answers as correct, and upvote the ones that are the most useful.

-Cheers.

Upvotes: 0

Related Questions