Project 1
summary: This project contains minimum codes to implement basic Camera functions using Intel XDK Camera Objects API
<!DOCTYPE html>
<html>
<head>
<title>XDK Camera</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"></script>
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
intel.xdk.device.hideSplashScreen();
}
/* Camera */
function xdkStartCamera() {
var onSuccess = function(event) {
if (event.success == true){
$('#xdk-camera-image').html("<img src="+intel.xdk.camera.getPictureURL(event.filename)+" width='250' />");
}
}
document.addEventListener("intel.xdk.camera.picture.add", onSuccess);
intel.xdk.camera.takePicture (70, true, "jpg");
}
</script>
<style>
body {font-family:arial;background-color:white}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<div class="panel" title="Camera" id="page1" data-footer="none" selected="true">
<a class="button icon camera" onclick="xdkStartCamera();" >Camera</a>
<div id="xdk-camera-image"></div>
</div>
</div>
</div>
</body>
</html>
|
Project 2
summary: This project demonstrates the use of Local Storage
<!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>
|
Project 3
summary: this project allows user to capture photo, get them displayed as catalogs and provides option to clear photo storage.
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
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);
document.addEventListener("intel.xdk.camera.picture.clear", loadPictures);
function capturePicture() {
intel.xdk.camera.takePicture(80, 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;
image.width = 100;
document.getElementById('pictures').appendChild(image);
}
}
function clearPictures(){
intel.xdk.camera.clearPictures();
// Also tried these just in case, but no success
intel.xdk.cache.clearMediaCache();
intel.xdk.cache.clearAllCookies();
}
function loadPictures(){
document.getElementById('pictures').innerHTML = "";
var arrPictureList = intel.xdk.camera.getPictureList();
for (var x=0;x<arrPictureList.length;x++)
{
// create image
var newImage = document.createElement('img');
newImage.src=intel.xdk.camera.getPictureURL(arrPictureList[x]);
newImage.width = 100;
newImage.id=document.getElementById("img_" + arrPictureList[x]);
document.getElementById('pictures').appendChild(newImage);
}
}
function onDeviceReady(){
intel.xdk.device.hideSplashScreen();
loadPictures();
}
</script>
</head>
<body>
<a href="#" id="capture-btn" onClick="capturePicture()">Capture Picture</a> |
<a href="#" id="clear-btn" onClick="clearPictures()">Clear Pictures</a>
<hr>
<h1>Pictures</h1>
<div id="pictures"></div>
</body>
</html>
|
No comments:
Post a Comment