android - intel XDK camera view is not working -
i creating augmented reality application using intel xdk.when load app in "intel app preview" app, see red background , no camera view when hold device in vertical position. else seems work.why dont see camera view ?
this codes
<!doctype html> <html> <head> <title>nearby</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="copyright" content="© 2013, intel corporation. rights reserved." /> <meta name="author" content="nadeesha" /> <!-- * copyright (c) 2013, intel corporation. rights reserved. * please see http://software.intel.com/html5/license/samples * , included readme.md file license terms , conditions. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes" /> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="lib/jquery/jquery-1.8.2.min.js"></script> <script src="cordova.js"></script> <script src="intelxdk.js"></script> <script> var pin = [ {"name":"rusl", "lat":"8.3635595", "lng":"80.5042495"}, {"name":"mihinthale", "lat":"8.35059440", "lng":"80.5169444"}, {"name":"mihintale railway station", "lat":"8.3589425", "lng":"80.50174530"}, {"name":"mihintale forest reserve", "lat":"8.3783333", "lng":"80.47916669"}, {"name":"mihintale wewa", "lat":"8.3613889", "lng":"80.5052777"}, {"name":"mihintalekanda", "lat":"8.35000000", "lng":"80.500000"} ]; var markersarray = [], bounds; var mylat = 0, mylng = 0; var bearing, distance; var datastatus = 0; // setup map , listen deviceready $( document ).ready(function() { document.addeventlistener("deviceready", ondeviceready, false); }); // start device compass, accelerometer , geolocation after deviceready function ondeviceready() { navigator.splashscreen.hide(); setupmap(); // start cordova device sensors startaccelerometer(); startcompass(); startgeolocation(); } // start intel.xdk augmented reality mode, adds camera in background function xdkstartar(){ intel.xdk.display.startar(); $('#arview').css('background-color','transparent'); $('body').css('background-color','transparent'); document.getelementbyid('body').style.background = "transparent"; } // stop intel.xdk augmented reality mode function xdkstopar(){ intel.xdk.display.stopar(); } // setup google maps api function setupmap(){ $("#map").height($(window).height()-60); var mapoptions = { zoom: 13, maptypecontrol: false, streetviewcontrol: false, navigationcontrol: true, scrollwheel: false, navigationcontroloptions: {style: google.maps.navigationcontrolstyle.small}, maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid("map"), mapoptions); } // toggle between list view , map view function toggleview(){ if($(".listview").is(":visible")){ $(".listview").hide(); $("#map").height($(window).height()-60); $(".mapview").fadein(function(){google.maps.event.trigger(map, "resize");map.fitbounds(bounds);}); $("#viewbtn").html("list"); } else { $(".mapview").hide(); $(".listview").fadein(); $("#viewbtn").html("map"); } } // data api , store in array, add list view , create markers on map, calculate function loaddata(){ datastatus = "loading"; markersarray = []; bounds = new google.maps.latlngbounds(); // add blue gps marker var icon = new google.maps.markerimage('http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',new google.maps.size(30, 28),new google.maps.point(0,0),new google.maps.point(9, 28)); var gpsmarker = new google.maps.marker({position: new google.maps.latlng(mylat, mylng), map: map, title: "my position", icon:icon}); bounds.extend(new google.maps.latlng(mylat, mylng)); markersarray.push(gpsmarker); // add location markers map , list view , array for(var i=0; i< pin.length; i++){ $(".listitems").append("<div class='item'>"+pin[i].name+"</div>"); addmarker(i); relativeposition(i); } map.fitbounds(bounds); google.maps.event.trigger(map, "resize"); datastatus = "loaded"; } // add marker map , in array function addmarker(i){ var marker = new google.maps.marker({position: new google.maps.latlng(pin[i].lat, pin[i].lng), map: map, title: pin[i].name}); bounds.extend(new google.maps.latlng(pin[i].lat, pin[i].lng)); markersarray.push(marker); } // clear markers map , array function clearmarkers() { while (markersarray.length) { markersarray.pop().setmap(null); } } // calulate distance , bearing value each of points wrt gps lat/lng function relativeposition(i){ var pinlat = pin[i].lat; var pinlng = pin[i].lng; var dlat = (mylat-pinlat)* math.pi / 180; var dlon = (mylng-pinlng)* math.pi / 180; var lat1 = pinlat * math.pi / 180; var lat2 = mylat * math.pi / 180; var y = math.sin(dlon) * math.cos(lat2); var x = math.cos(lat1)*math.sin(lat2) - math.sin(lat1)*math.cos(lat2)*math.cos(dlon); bearing = math.atan2(y, x) * 180 / math.pi; bearing = bearing + 180; pin[i]['bearing'] = bearing; var = math.sin(dlat/2) * math.sin(dlat/2) + math.sin(dlon/2) * math.sin(dlon/2) * math.cos(lat1) * math.cos(lat2); var c = 2 * math.atan2(math.sqrt(a), math.sqrt(1-a)); distance = 3958.76 * c; pin[i]['distance'] = distance; } // calculate direction of points , display function calculatedirection(degree){ var detected = 0; $("#spot").html(""); for(var i=0;i<pin.length;i++){ if(math.abs(pin[i].bearing - degree) <= 20){ var away, fontsize, fontcolor; // varry font size based on distance gps location if(pin[i].distance>1500){ away = math.round(pin[i].distance); fontsize = "16"; fontcolor = "#ccc"; } else if(pin[i].distance>500){ away = math.round(pin[i].distance); fontsize = "24"; fontcolor = "#ddd"; } else { away = pin[i].distance.tofixed(2); fontsize = "30"; fontcolor = "#eee"; } $("#spot").append('<div class="name" data-id="'+i+'" style="margin-left:'+(((pin[i].bearing - degree) * 5)+50)+'px;width:'+($(window).width()-100)+'px;font-size:'+fontsize+'px;color:'+fontcolor+'">'+pin[i].name+'<div class="distance">'+ away +' miles away</div></div>'); detected = 1; } else { if(!detected){ $("#spot").html(""); } } } } // start watching geolocation function startgeolocation(){ var options = { timeout: 30000 }; watchgeoid = navigator.geolocation.watchposition(ongeosuccess, ongeoerror, options); } // stop watching geolocation function stopgeolocation() { if (watchgeoid) { navigator.geolocation.clearwatch(watchgeoid); watchgeoid = null; } } // onsuccess: current location function ongeosuccess(position) { document.getelementbyid('geolocation').innerhtml = 'latitude: ' + position.coords.latitude + '<br />' + 'longitude: ' + position.coords.longitude; mylat = position.coords.latitude; mylng = position.coords.longitude; if(!datastatus){ loaddata(); } } // onerror: failed location function ongeoerror() { document.getelementbyid('log').innerhtml += "onerror=."; } // start watching compass function startcompass() { var options = { frequency: 100 }; watchcompassid = navigator.compass.watchheading(oncompasssuccess, oncompasserror, options); } // stop watching compass function stopcompass() { if (watchcompassid) { navigator.compass.clearwatch(watchcompassid); watchcompassid = null; } } // onsuccess: current heading function oncompasssuccess(heading) { var directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw', 'n']; var direction = directions[math.abs(parseint((heading.magneticheading) / 45) + 0)]; document.getelementbyid('compass').innerhtml = heading.magneticheading + "<br>" + direction; document.getelementbyid('direction').innerhtml = direction; var degree = heading.magneticheading; if($("#arview").is(":visible") && datastatus != "loading"){ calculatedirection(degree); } } // onerror: failed heading function oncompasserror(compasserror) { document.getelementbyid('log').innerhtml += "onerror=."+compasserror.code; } // start checking accelerometer function startaccelerometer() { var options = { frequency: 100 }; watchaccelerometerid = navigator.accelerometer.watchacceleration(onaccelerometersuccess, onaccelerometererror, options); } // stop checking accelerometer function stopaccelerometer() { if (watchaccelerometerid) { navigator.accelerometer.clearwatch(watchaccelerometerid); watchaccelerometerid = null; } } // onsuccess: current accelerometer values function onaccelerometersuccess(acceleration) { // debug purpose print out accelerometer values var element = document.getelementbyid('accelerometer'); element.innerhtml = 'acceleration x: ' + acceleration.x + '<br />' + 'acceleration y: ' + acceleration.y + '<br />' + 'acceleration z: ' + acceleration.z ; if(acceleration.y > 7){ $("#arview").fadein(); $("#topview").hide(); document.getelementbyid('body').style.background = "#d22"; } else { $("#arview").hide(); $("#topview").fadein(); document.getelementbyid('body').style.background = "#fff"; } } // onerror: failed acceleration function onaccelerometererror() { document.getelementbyid('log').innerhtml += "onerror."; } </script> <style> body {background-color:#fff;font-family:arial;margin:0;overflow-x:hidden;-webkit-user-select: none;} .navbar {background-color:#222;height:40px;padding:10px;text-align:center;color:#fff;font-size:20px;font-weight:bold;line-height:40px;} .navtitle {text-align:center;margin:auto} .navbtn {background-color:#333;padding:5px 10px;height:30px;color:#fff;font-size:18px;font-weight:bold;line-height:30px;border-radius:4px;border:1px solid #666} #actionbtn {float:right;} #viewbtn {float:left;} .query {padding:10px;background-color:#aaa;border-bottom:1px solid #fff;font-size:14px;font-weight:bold;color:#222;} .item {padding:20px 10px; background-color:#eee;border-bottom:1px solid #fff;font-size:18px;color:#333;text-shadow:0 1px #fff} .searchbox {padding:5px;background-color:#eee;border-bottom:1px solid #fff;} #search {box-sizing: border-box;width:100%;height:40px;font-size:16px;border-radius:20px;border:1px solid #bbb} .mapview {display:none} #map {height:200px;} #arview, #topview {display:none;} #arview{padding:30px 0; height:70px;text-align:center} .armessage {color:#ddd;font-size:14px} #spot {text-align:center} .name, .distance {text-shadow:0 1px #666} .name {padding:15px;font-weight:bold;;background-color:#c22;border-radius:40px;margin-bottom:10px} #direction {color:#d55;font-size:20px;padding:15px;font-weight:bold;;background-color:#a22;border-radius:40px;display:inline-block;margin-bottom:10px;width:40px;line-height:40px} .distance {font-size:14px;font-weight:normal;} #debug {border:1px solid #999;display:none} .heading {background-color:#999;color:#eee;padding:5px;} #compass, #accelerometer, #geolocation {padding:5px} </style> </head> <body id="body"> <div id="arview"> <div class="armessage">↑<br>tilt down see places</div> <br> <div class="armessage">← move device around find spots →</div> <br> <div id="direction"></div> <br> <div id="spot"></div> </div> <div id="topview"> <div class="navbar"> <div id="actionbtn" class="navbtn"> ↵ </div> <div id="viewbtn" class="navbtn" onclick="toggleview()">map</div> <div class="navtitle">nearby</div> </div> <div class="listview"> <div class="listitems"></div> </div> <div class="mapview"> <div id="map"></div> </div> </div> <div id="debug"> <div class="heading">geolocation</div> <div id="geolocation"></div> <div class="heading">compass</div> <div id="compass"></div> <div class="heading">accelerometer</div> <div id="accelerometer"></div> <div class="heading">log</div> <div id="log"></div> </div> </body> </html>
you not calling xdkstartar() , xdkstopar() in function onaccelerometersuccess camera not initiating.
here correct onaccelerometersuccess:
function onaccelerometersuccess(acceleration) { // debug purpose print out accelerometer values var element = document.getelementbyid('accelerometer'); element.innerhtml = 'acceleration x: ' + acceleration.x + '<br />' + 'acceleration y: ' + acceleration.y + '<br />' + 'acceleration z: ' + acceleration.z ; if(acceleration.y > 7){ $("#arview").fadein(); $("#topview").hide(); document.getelementbyid('body').style.background = "#d22"; xdkstartar(); } else { $("#arview").hide(); $("#topview").fadein(); document.getelementbyid('body').style.background = "#fff"; xdkstopar(); } } also had include intelxdk.js first , cordova.js work in app preview:
<script src="intelxdk.js"></script> <script src="cordova.js"></script>
Comments
Post a Comment