First the code:
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource,
destinationType
document.addEventListener("deviceready",loaded,false);
function loaded() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
function getPhoto(imageData) {
var smallImage = document.getElementById('smallImage');
smallImage.style.display = 'block';
smallImage.src = "data:image/jpeg;base64," + imageData;
}
function capturePhoto() {
navigator.camera.getPicture(getPhoto, onFail, { quality: 50 });
}
function onFail(message) {
alert('Failed because: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capture Photo</button> <br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
</body>
</html>
I use BuildTool in combination with phonegap (build.phonegap.com). I have zipped this file as index.zip and uploaded this file in BuildTool. BuildTool then creates an app for me and store this app on phonegap.
When I click the button, nothing happens. I won´t even see the failed alert.
Does someone know what I'm doing wrong here? Do I need to include some library or something?
Note: I am trying to get this to work for Android.
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
the above two line is not complete. it should be like these
pictureSource=navigator.camera.PictureSourceType.PHOTOLIBRARY;
destinationType=navigator.camera.DestinationType.FILE_URI;
after changing still not working then try these html its working...
<!DOCTYPE html>
<html>
<head>
<title>Submit form</title>
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function getPhoto() {
// Retrieve image file location from specified source
navigator.camera.getPicture(onPhotoURISuccess, onFailure, {
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
});
}
function onPhotoURISuccess(imageURI) {
$("#smallImage").attr('src',imageURI);
}
function onFailure()
{
alert('failed');
}
</script>
</head>
<body>
<br><br><br>
<button onclick="getPhoto();">Select Photo:</button><br>
<img style="width:200px;height:200px;" id="smallImage" />
</body>
</html>
Try adding the deviceready listener to a function that is called after the body loads, like this:
<body onload="onLoad()">
function onLoad() {
document.addEventListener("deviceready",loaded,false);
}
Related
I am buiding an app with Cordova 3.6.3 in netbeans and trying to emulate with Ripple 0.9.15.
Whenever I run the code I keep getting:
Uncaught TypeError: Cannot read property 'fire' of undefined ripple.js:40
deviceready has not fired after 5 seconds. cordova.js:1168
Channel not fired: onPluginsReady cordova.js:1161
Channel not fired: onCordovaReady
The code is supposed to access the file system, create some files and display them in
a listview. Here it is:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Directory Reader</title>
<meta name="viewport" content="user-scalable=no,
initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.3.min.css" />
<script type="text/javascript" src="js/libs/jquery/jquery-1.10.0.min.js"></script>
<script src="js/libs/jquery-mobile-1.4.3/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {navigator.alert('file access');
window.requestFileSystem(
LocalFileSystem.PERSISTENT,
0, onFileSystemSuccess, fail
); navigator.alert('file access');
}
function onFileSystemSuccess(fileSystem) {
// Create some test files
fileSystem.root.getDirectory("myDirectory",
{create: true, exclusive: false},
null, fail);
fileSystem.root.getFile("readthis.txt",
{create: true, exclusive: false},
null, fail);
var directoryReader = fileSystem.root.createReader();
// Get a list of all the entries in the directory
directoryReader.readEntries(success, fail);
}
function success(entries) {
var i;
var objectType;
for (i = 0; i < entries.length; i++) {
if (entries[i].isDirectory === true) {
objectType = 'Directory';
} else {
objectType = 'File';
}
$('#directoryList').append('<li><h3>' + entries[i].name + '</h3><p>' + entries[i].toURI() + '</p><p class="ui-li-aside">Type:<strong>' + objectType + '</strong></p></li>');
}
$('#directoryList').listview("refresh");
}
function fail(error) {
alert("Failed to list directory contents: " + error.code);
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Directory Reader</h2>
</div>
<div data-role="content">
<ul id="directoryList" data-role="listview"
data-inset="true">
</ul>
</div>
</div>
</body>
</html>
Please what can I do?
Please what could the problem be?
An API call
<script type="text/javascript"
src="http://api.ipayy.com/v001/c/dc/getjsbykey?gh="xyz">
</script>
returns
window.onload = function() {
callback_fn.call(new Object(), false);
}
This works perfectly fine with browser.
But the same doesn't work with Phonegap, the callback function isn't executed in Javascript in Phonegap
<!DOCTYPE HTML>
<html>
<head>
<script src="cordova.js"></script>
<script>
function callback_fn() {
navigator.notification.alert("new func");
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);
}
}
</script>
<script type="text/javascript" src="http://api.ipayy.com/v001/c/dc/getjsbykey?gh="+window.Encryption.encrypt()"></script>
</head>
<body>
</body>
</html>
Is there any equivalent of the following in Phonegap, which will call the function callback_fn()?
window.onload = function() {
callback_fn.call(new Object(), false);
}
I am trying to access a text file inside the www folder of one of my phonegap applications from the index.html. I don't think filereader works because it accesses the phone's file system and not the application's file system. Regardless, here's what I tried and it jumps to the error function when this line is called within gotFS:
fileSystem.root.getFile("version.txt", null, gotFileEntry, fail);
Here's my full index.html code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova-2.7.0.js"></script>
<script>
function test()
{
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
}
function gotFS(fileSystem) {
document.write("gotFSreached");
fileSystem.root.getFile("version.txt", null, gotFileEntry, fail); // this jumps to fail
}
function gotFileEntry(fileEntry) {
document.write("gotFileEntryreached");
fileEntry.file(gotFile, fail);
}
function gotFile(file){
document.write("gotFilereached");
readAsText(file);
}
function readAsText(file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
console.log("Read as text");
document.write(evt.target.result);
};
reader.readAsText(file);
}
function fail(evt) {
document.write("error");
}
</script>
<body>
<button type="button" onclick="test()">Print version.txt</button>
</body>
</html>
$.get("version.txt", function(data) {
// there u have version.txt data (in var data)
});
I am working on an application and i want that my notification should be opened in a webview please help.
or
I want that my application should respond to that notification.
just start intent calling an activity which will open your url in webView
Maybe the new InAppBrowser function in Cordova 2.3.0 (newest version) is something you looking for.
http://docs.phonegap.com/en/2.3.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
Example:
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.addEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for Cordova to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady() {
var ref = window.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function() { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function() { alert('stop: ' + event.url); });
ref.addEventListener('exit', function() { alert(event.type); });
}
</script>
</head>
<body>
</body>
</html>
Using Phonegap1.9.0 Camera app for android. Followed the steps as per the phonegap documentation. But when I launch the app and click on Capture phone nothing happens.
When I look into the logcat navigator.camera.getPicture is undefined
Development version specified below.
Phonegap version:1.9.0
Eclipse: 3.7.2
Android: https://dl-ssl.google.com/android/eclipse/
AVD: 4.1
Device: Samsung GT-S5830, OS- Android 2.3.6
Can someone suggest me the steps to follow and the specific version that should be used to support the Camera.
HTML Code below:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>PhoneGap WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen"
title="no title" charset="utf-8" />
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="javascript.js"></script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">
<h1>
VS Mag PhoneGap Photo Demo</h1>
<button onclick="capturePhoto();">Capture a Photo</button>
<br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Display from Library</button><br>
<img style="display: none; width: 200px; height: 200px;" alt="" id="capturedPhoto" src="" />
<img style="display: none; width: 200px; height: 200px;" alt="" id="selectedFromPhotoLibrary"
src="" />
</body>
</html>
Below is my JAVA SCRIPT code:
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;
}
function selectPhoto(useCamera)
{
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
if (useCamera)
{ // take picture
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, destinationType: destinationType.FILE_URI });
}
else
{
// select from library
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, sourceType: pictureSource.PHOTOLIBRARY, destinationType:
destinationType.FILE_URI });
}
}
//display image on the screen
function photoLoaded(imageData)
{
var temp_image=imageData;
document.getElementById("imageControl").src=temp_image;
}
// Called when a photo is successfully retrieved
function onPhotoDataSuccess(imageData) {
var capturedPhoto = document.getElementById('capturedPhoto');
capturedPhoto.style.display = 'block';
capturedPhoto.src = imageData;
navigator.notification.alert("Picture Successfully Captured!");
}
// Called when a photo is successfully retrieved
function onPhotoURISuccess(imageURI) {
var selectedFromPhotoLibrary = document.getElementById('selectedFromPhotoLibrary');
selectedFromPhotoLibrary.style.display = 'block';
selectedFromPhotoLibrary.src = imageURI;
navigator.notification.alert("Picture Imported Captured!");
}
function capturePhoto() {
// Take picture using device camera and retrieve image
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
// 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
});
}
// Error Handling
function onFail(message) {
alert('Failed because: ' + message);
}