Taking pictures and showing them on another page with Intel XDK

StackOverflow https://stackoverflow.com/questions/22628401

Pergunta

I'm very new with Intel-XDK.

Building a new App using the AppStarter framework.

I'm trying to make a very basic App that takes pictures on one "page", and then allows me to view the image(s) on another page, where I also want to capture details about each image.

I get the idea so far that you only really build one page with XDK, ie, everything is in index.html, and your "pages" are just div's.

I succesfully got the first page to envoke the camera, but I cannot get the image to "save" and be available for view on my "second page" yet. On my iPhone, when testing this app, I can take a picture, but it isn't saved anywhere, on my Android device, it saves the image, but names it "test.jpg" and it saves to the root of the sdcard, and not to the usual DCIM folder.

I tried using the onclick events to kick-off the functions.

Any pointers welcome!

<!DOCTYPE html>
<html><!--HTML5 doctype-->

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
    // This event handler is fired once the intel libraries are ready
    function onDeviceReady() {
        //hide splash screen now that our app is ready to run
        intel.xdk.device.hideSplashScreen();
        setTimeout(function () {
            $.ui.launch();
        }, 50);
    }
    //initial event handler to detect when intel is ready to roll
    document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
    document.addEventListener("intel.xdk.camera.picture.add",onSuccess); 
    document.addEventListener("intel.xdk.camera.picture.busy",onSuccess); 
    document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess); 

    function capturePhoto() {
      intel.xdk.camera.takePicture(50,true,"jpg");
    }

    function onSuccess(evt) {

      if (evt.success == true)
      {
        // create image 
        var image = document.createElement('img');
        image.src=intel.xdk.camera.getPictureURL(evt.filename);
        image.id=evt.filename;
        document.body.appendChild(image);
      }
      else
      {
        if (evt.message != undefined)
        {
            alert(evt.message);
        }
        else
        {
            alert("error capturing picture");
        }
      }
    }

    function showImages() {
    var arrPictureList = intel.xdk.camera.getPictureList();
        for (var x=0;x<arrPictureList.length;x++)
        {
           // create image 
           var newImage = document.createElement('img2');
           newImage.src=intel.xdk.camera.getPictureURL(arrPictureList[x]);
           newImage.setAttribute("style","width:100px;height:100px;");
           newImage.id=document.getElementById("img_" + arrPictureList[x]);
           document.body.appendChild(newImage);
        }
    }

</script>
<script src="js/appframework.ui.min.js"></script>
<script>
    $.ui.autoLaunch = false;
    $.ui.useOSThemes = true; //Change this to false to force a device theme
    $.ui.blockPageScroll();
    $(document).ready(function () {
        if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
            $("#afui").removeClass("ios");
    });
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>

<div id="afui" class="ios">
    <div id="header"></div>
    <div id="content" style="">
        <div class="panel" title="PhotoTag" data-nav="nav_0" id="main" selected="selected"
        style="" data-appbuilder-object="page">

            <ul class="list" data-appbuilder-object="list" style="">
                <li><a href="#page_1">Take Picture</a>
                </li>
                <li><a href="#page_2">View Pictures</a>
                </li>
                <li><a href="#page_3">Help</a>
                </li>
            </ul>
        </div>
        <div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
        style="">

            <a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
            onclick="capturePhoto();">Take Picture</a>
        </div>
        <div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
        style="">
            <a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
            onclick="showImages();">Show Pictures</a>

        </div>
        <div class="panel" title="Help" data-nav="nav_0" id="page_3" data-appbuilder-object="page"
        style=""></div>
    </div>
    <div id="navbar">
        <a href="#main" class="icon home">Home</a>
    </div>
    <header id="header_0" data-appbuilder-object="header">
        <a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
        <h1 id="pageTitle" class="">test</h1> 
    </header>
    <nav id="nav_0" data-appbuilder-object="nav">
        <h1>Side Menu</h1>
    </nav>
</div>
</html>
Foi útil?

Solução

OK, I managed to come right.

This code does what I need so far wrt taking the picture on one "page" and then displaying it on another.

Having issues with the use of the localStorage now - posted a new question.

<!DOCTYPE html>
<html><!--HTML5 doctype-->

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
    // This event handler is fired once the intel libraries are ready
    function onDeviceReady() {
        //hide splash screen now that our app is ready to run
        intel.xdk.device.hideSplashScreen();
        setTimeout(function () {
            $.ui.launch();
        }, 50);
    }
    //initial event handler to detect when intel is ready to roll
    document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
    document.addEventListener("intel.xdk.camera.picture.add",onSuccess); 
    document.addEventListener("intel.xdk.camera.picture.busy",onSuccess); 
    document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess); 

function capturePhoto() {
      intel.xdk.camera.takePicture(50,true,"jpg");
    }

function onSuccess(event) 
{
    if (event.success === true)
    {
        var imagesrc = intel.xdk.camera.getPictureURL(event.filename);
        var pic1 = document.getElementById("pic1");
        pic1.src = imagesrc;
        localStorage.imagesrc = imagesrc;

   }
    else
    {
        if (event.message !== undefined)
        {
            alert(event.message);
        }
        else
        {
            alert("error capturing picture");
        }
    }
}

function showPicture()
{
    var picture = document.getElementById("pic2");
    var pic1src = localStorage.imagesrc;
    picture.src = pic1src;
    document.form2.locationview.value = localStorage.location;
    document.form2.titleview.value = localStorage.title;
    document.form2.metadataview.value = localStorage.metadata;
}

function saveForm()
    {
    localStorage.location = document.form1.location.value;
    localStorage.title = document.form1.title.value;
    localStorage.metadata = document.form1.metadata.value;    

    }

function updateForm()
    {
    localStorage.location = document.form2.locationview.value;
    localStorage.title = document.form2.titleview.value;
    localStorage.metadata = document.form2.metadataview.value;      
    }

function showStorage()
    {
    document.getElementById("page_3").innerHTML = localStorage.location;
    }
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
    $.ui.autoLaunch = false;
    $.ui.useOSThemes = true; //Change this to false to force a device theme
    $.ui.blockPageScroll();
    $(document).ready(function () {
        if ($.ui.useOSThemes && !$.os.ios && $("#afui").get(0).className !== "ios")
            $("#afui").removeClass("ios");
    });
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>

<div id="afui" class="ios">
    <div id="header"></div>
    <div id="content" style="">
        <div class="panel" title="PhotoTagger" data-nav="nav_0" id="main" selected="selected"
        style="background-image: url(images/splash.jpg);"
        data-appbuilder-object="page" data-footer="footer_1">
            <div class="centerbutton">
                <a class="button" href="#page_1" data-appbuilder-object="button" data-transition="slide"
                id="button_1" onclick="capturePhoto();">Store data in EXIF</a>
            </div>
        </div>
        <div class="panel" title="Take Picture" data-nav="nav_0" id="page_1" data-appbuilder-object="page"
        style="" data-footer="footer_1">
            <form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
            id="form1" name="form1">
                <img src="images/EmptyBox-Phone.png" id="pic1" width="150px" height="200px">
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Location</label>
                    <input type="text" style="float:left;" id="location" placeholder="">
                </div>
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Title</label>
                    <input type="text" style="float:left;" id="title" placeholder="">
                </div>
                <div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
                    <label for="">MetaData</label>
                    <textarea id="metadata"></textarea>
                </div>
                <a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
                id="" onclick="saveForm();">Save</a>
            </form>

        </div>
        <div class="panel" title="View Picture" data-nav="nav_0" id="page_2" data-appbuilder-object="page"
        style="" data-footer="footer_1">
            <form style="width: 100%;min-height: 50px;" data-appbuilder-object="form" class=""
            id="form2" name="form2">
                <img src="images/EmptyBox-Phone.png" id="pic2" width="150px" height="200px" style=""
                class="">
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Location</label>
                    <input type="text" style="float:left;" id="locationview" placeholder="">
                </div>
                <div class="input_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="input">
                    <label for="">Title</label>
                    <input type="text" style="float:left;" id="titleview" placeholder="">
                </div>
                <div class="textarea_element form_element" style="width:100%;overflow:hidden" data-appbuilder-object="textarea">
                    <label for="">MetaData</label>
                    <textarea id="metadataview"></textarea>
                </div>
                <a class="button" href="#" style="" data-appbuilder-object="button" data-transition="slide"
                id="" onclick="updateForm();">Update</a>
            </form>
        </div>


        <div class="panel" title="Test Local Storage" data-footer="footer_1" data-nav="nav_0"
        id="page_3" data-appbuilder-object="page" style=""></div>
    </div>
    <div id="navbar"> <a href="#main" class="icon home">Home</a> 
    </div>
    <header id="header_0" data-appbuilder-object="header">
        <a id="backButton" href="#" class="button back" style="visibility: visible; ">Back</a>
        <h1 id="pageTitle" class="">PhotoTagger</h1> 
    </header>
    <nav id="nav_0" data-appbuilder-object="nav">
        <h1>Side Menu</h1>
    </nav>
    <footer id="footer_1" data-appbuilder-object="footer"><a href="#main" class="icon home">Home</a><a href="#page_1" class="icon camera"
        onclick="capturePhoto();">Take Picture</a>
        <a href="#page_2" class="icon picture" onclick="showPicture();">View Pictures</a>
        <a href="#page_3" class="icon database" onclick="showStorage();">Local Storage</a>
    </footer>
</div>




</html>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top