My ( cordova ) app shall download an image from remote, store it persistent on local filesystem and display it. Downloading and storing is no problem. The images are created an the source attributes are set. But what type of URL I ever will use, the image is not displayed. I try to get this work for IOS in a native device.
index.html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<title>The App</title>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval' https://www.adomain.de; style-src 'self' 'unsafe-inline' https://www.adomain.de; media-src *; script-src 'self' 'unsafe-eval' https://adomain.de; connect-src 'self' https://www.adomain.de; font-src 'self' data: https://www.adomain.de; img-src * filesystem: data: cdvfile:">
</head>
<body>
<div id="links"></div>
<script type="text/javascript" src="public/js/test/test.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
test.js:
var oRessources = {
ressourcesDir:false,
init:function(){
function initFS(success){
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
window.requestFileSystem(window.PERSISTENT, 0, function (fs) {
success();
});
}
initFS(oRessources.createRessourcesDir);
},
createRessourcesDir:function(){
resolveLocalFileSystemURL(cordova.file.dataDirectory, function(dirEntry){
console.log('datadirectory');
console.log(dirEntry);
dirEntry.getDirectory(
'ressources/',
{create:true},
function(dirEntry){
oRessources.ressourcesDir = dirEntry;
oRessources.download();
},
function(error){
console.log('error');
console.log(error)
}
);
},
function(dirEntry){
console.log('error');
}
);
},
download:function(){
var target = "e44498f0b0964152632bd0c82342914b859c543e.jpeg"
oRessources.ressourcesDir.getFile(
target,
{ create: true, exclusive: false },
function (fileEntry) {
console.log('file created');
console.log(fileEntry);
var oReq = new XMLHttpRequest();
oReq.open("GET", "https://www.adomain.de/api/public/content_images/"+target, true);
oReq.responseType = "blob";
oReq.onload = function (oEvent) {
var blob = oReq.response;
if (blob) {
fileEntry.createWriter(function (fileWriter) {
fileWriter.onwriteend = function (e) {
fileEntry.getMetadata(function(meta){
console.log(meta);
}, function(error){
});
var link = document.createElement("A");
link.appendChild(document.createTextNode(fileEntry.toInternalURL()));
link.href = fileEntry.toInternalURL();
document.getElementById('links').appendChild(link);
var image = document.createElement("IMG");
image.src = fileEntry.toInternalURL();
document.getElementById('links').appendChild(image);
var link2 = document.createElement("A");
link2.appendChild(document.createTextNode(fileEntry.toURL()));
link2.href = fileEntry.toURL();
document.getElementById('links').appendChild(link2);
var image2 = document.createElement("IMG");
image2.src = fileEntry.toURL();
document.getElementById('links').appendChild(image2);
var link3 = document.createElement("a");
link3.appendChild(document.createTextNode(fileEntry.toURL().replace("///", "//") ));
link3.href = fileEntry.toURL().replace("///", "//");
document.getElementById('links').appendChild(link3);
var image3 = document.createElement("IMG");
image3.src = fileEntry.toURL().replace("///", "//");
document.getElementById('links').appendChild(image3);
link4 = document.createElement("A");
link4.appendChild(document.createTextNode(fileEntry.fullPath ));
link4.href = fileEntry.fullPath;
document.getElementById('links').appendChild(link4);
var image4 = document.createElement("IMG");
image4.src = fileEntry.fullPath;
document.getElementById('links').appendChild(image4);
console.log(blob);
link5 = document.createElement("A");
link5.appendChild(document.createTextNode(window.URL.createObjectURL(blob) ));
link5.href = window.URL.createObjectURL(blob);
document.getElementById('links').appendChild(link5);
var image5 = document.createElement("IMG");
image5.src = window.URL.createObjectURL(blob);
document.getElementById('links').appendChild(image5);
var readerBlob = new FileReader();
readerBlob.onload = function(event){
console.log('dataURL2');
//console.log(readerBlob.result);
var image6 = document.createElement("IMG");
image6.src = readerBlob.result;
document.getElementById('links').appendChild(image6);
};
console.log('dataURL1');
readerBlob.readAsDataURL(blob);
};
fileWriter.onerror = function (e) {
// you could hook this up with our global error handler, or pass in an error callback
console.log('Write failed: ' + e.toString());
};
fileWriter.write(blob);
});
} else console.error('we didnt get an XHR response!');
};
oReq.onerror = function (oEvent) {
if(oRessources.loadingStack.length > 0){
//oRessources.download();
}else{
oRessources.loading = false;
}
}
oReq.send(null);
},
function (error) {
console.log('error creating file');
console.log(error);
}
);
}
};
document.addEventListener("deviceready", function(){
console.log('DEVICE READY');
oRessources.init();
}, false);
window.onerror = function(message, url, lineNumber){
console.log('Error: '+message+' in '+ url + ' at line '+lineNumber);
}
config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="de.app.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="mail#nils-fett.de" href="http://www.adomain.de">
Nils Fett
</author>
<content src="index.html" />
<access origin="*" />
<access origin="cdvfile://*" />
<access origin="file://*/*" />
<access origin="file:///*/*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="file://*/*" />
<allow-intent href="file:///*/*" />
<allow-intent href="cdvfile:*" />
<allow-navigation href="*" />
<allow-navigation href="file://*/*" />
<allow-navigation href="file:///*/*" />
<allow-navigation href="cdvfile:*" />
<allow-origin href="file://*/*" />
<allow-origin href="file:///*/*" />
<allow-origin href="cdvfile:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<access origin="*" />
<access origin="cdvfile://*" />
<access origin="file://*/*" />
<access origin="file:///*/*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<allow-intent href="file://*/*" />
<allow-intent href="file:///*/*" />
<allow-intent href="cdvfile:*" />
<allow-navigation href="file://*/*" />
<allow-navigation href="file:///*/*" />
<allow-navigation href="cdvfile:*" />
<allow-origin href="file://*/*" />
<allow-origin href="file:///*/*" />
<allow-origin href="cdvfile:*" />
<splash height="1024" src="lobbe-logo-768x1024.png" width="768" />
<splash height="2048" src="lobbe-logo-1536x2048.png" width="1536" />
<splash height="1536" src="lobbe-logo-2048x1536.png" width="2048" />
</platform>
<preference name="DisallowOverscroll" value="true" />
<preference name="Orientation" value="default" />
<preference name="BackupWebStorage" value="local" />
<preference name="iosPersistentFileLocation" value="library" />
<preference name="AutoHideSplashScreen" value="true" />
<feature name="File">
<param name="ios-package" value="CDVFile" />
</feature>
<feature name="FileTransfer">
<param name="ios-package" value="CDVFileTransfer" />
</feature>
<icon src="lobbe.png" />
<plugin name="cordova-plugin-console" spec="~1.1.0" />
<plugin name="cordova-plugin-device" spec="~2.0.1" />
<plugin name="cordova-plugin-email-composer" spec="~0.8.11" />
<plugin name="cordova-plugin-file" spec="~6.0.1" />
<plugin name="cordova-plugin-inappbrowser" spec="~2.0.1" />
<plugin name="cordova-plugin-network-information" spec="~2.0.1" />
<plugin name="cordova-plugin-splashscreen" spec="~5.0.1" />
<plugin name="cordova-plugin-webserver" spec="~1.0.3" />
<plugin name="cordova-plugin-whitelist" spec="~1.3.3" />
<engine name="ios" spec="~4.2.1" />
</widget>
I think its a kind of restriction added in a newer IOS Version. I heard of a issue of the WKWebView, but threads read that this problem should be solved. Any ideas?
UPDATE:
So sorry, there was no problem with cordova or iOS or filesystem. The problem was, that the image URL were redirected to a html page. So I downloaded HTML and tried to dispay it as image. The code works. toInternalURL, toURL, createObjectURL and readAsDataURL work perfect.
So sorry, there was no problem with cordova or iOS or filesystem. The problem was, that the image URL were redirected to a html page. So I downloaded HTML and tried to dispay it as image. The code works. toInternalURL, toURL, createObjectURL and readAsDataURL work perfect.
Related
In my Phonegap project the Diagnostic plugin gives the following error!
Uncaught TypeError: Can not read property 'diagnostic' of undefined
I have already virified the versions, uninstalled and installed the plugin. And this always happens, I've even been isolated from other plugins!
var structureApp = {
initialize: function(){
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
document.addEventListener("deviceRegistered", this.successDeviceRegistered, false);
},
onDeviceReady: function() {
structureApp.mount();
navigator.geolocation.getCurrentPosition(
structureApp.geoLocate,
structureApp.geoErro,
{enableHighAccuracy:true, maximumAge:30000, timeout:27000}
);
.structureApp.getPosition();
},
mount: function() {
structureApp.logoutNotification();
},
geoLocate: function(position){
var lat=position.coords.latitude;
var lon=position.coords.longitude;
localStorage.setItem('lat',lat);
localStorage.setItem('lon',lon);
$("#latitude").html("Sua Latidute:" + lat);
$("#longitude").html("Sua Longitude:" + lon);
},
geoErro: function (e){
alert("Houve um erro:" + e.message);
},
getPosition: function (){
cordova.plugins.diagnostic.isLocationAuthorized(function(enabled){
if(!enabled){
navigator.diagnostic.requestLocationAuthorization(function(status){
navigator.geolocation.getCurrentPosition(function(position){
alert(position.coords.latitude, position.coords.longitude);
startSplash();
}, function(error){
alert("Something went wrong while retrieving your position. " + error.message);
},
{
maximumAge:6000,
timeout:5000,
enableHighAccuracy: true
});
},function(error){
alert(error.message);
});
}
},function(error){
alert("The following error occurred: " + error.message);
});
}
};
$(function(){ structureApp.initialize(); });
My config.xml looks like this:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.meuapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>MeuAPP</name>
<description>
######
</description>
<author email="" href="">
########
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="*" />
<preference name="orientation" value="default" />
<preference name="phonegap-version" value="cli-6.5.0" />
<preference name="android-build-tool" value="ant|gradle" />
<preference name="android-minSdkVersion" value="10" />
<preference name="android-maxSdkVersion" value="24" />
<preference name="android-targetSdkVersion" value="12" />
<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize" />
<platform name="android">
<config-file parent="/*" target="AndroidManifest.xml">
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.READ_CALENDAR" />
</config-file>
</platform>
<platform name="ios">
<plugin name="cordova-plugin-background-fetch" spec="*" />
<config-file parent="UIBackgroundModes" platform="ios" target="*-Info.plist">
<array>
<string>fetch</string>
<string>remote-notification</string>
</array>
</config-file>
</platform>
<platform name="windows">
<preference name="windows-target-version" value="10.0" />
<preference name="target-device" value="universal" />
<preference name="Windows.Universal-MinVersion" value="10.0.0.0" />
</platform>
<engine name="ios" spec="~4.5.5" />
<engine name="windows" spec="latest" />
<engine name="android" spec="^7.0.0" />
<plugin name="cordova-plugin-dialogs" spec="~2.0.1" />
<plugin name="cordova-plugin-file-transfer" spec="~1.7.1" />
<plugin name="cordova-plugin-geolocation" spec="~4.0.1" />
<plugin name="cordova-plugin-request-location-accuracy" spec="^2.2.3" />
<plugin name="cordova-android-support-gradle-release" spec="^1.4.4">
<variable name="ANDROID_SUPPORT_VERSION" value="25.+" />
</plugin>
<plugin name="cordova.plugins.diagnostic" spec="^4.0.10" />
</widget>
Can someone help me?
I create a "Play Youtube" App with PhoneGap(version 6.3.0) , Cordova (version 6.3.1) , simple load a youtube video by ID.
use Cordova YoutubeVideoPlayer plugin, using build.phonegap.com to build project, but not working with error:
An error occurred during the retrieval of the video. This could be due to network issue of YouTube protocols. Please try again later.
I test on android OS version 6.0.
Thanks in advance.
add to config.xml:
<plugin name="com.bunkerpalace.cordova.youtubevideoplayer" spec="1.0.1" source="pgb" />
Load youtube video when device ready in index.js
YoutubeVideoPlayer.openVideo('1s96mq8kfzY');
index.js
var app = {
initialize: function() {
this.bindEvents();
}, bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
}, onDeviceReady: function() {
app.receivedEvent('deviceready');
},
receivedEvent: function(id) {
var parentElement = document.getElementById(id);
var listeningElement = parentElement.querySelector('.listening');
var receivedElement = parentElement.querySelector('.received');
listeningElement.setAttribute('style', 'display:none;');
receivedElement.setAttribute('style', 'display:block;');
console.log('Received Event: ' + id);
YoutubeVideoPlayer.openVideo('1s96mq8kfzY');
}
};
index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.hd.yu" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>YTube2</name>
<description>
Hello World sample application that responds to the deviceready event.
</description>
<author email="support#phonegap.com" href="http://phonegap.com">
PhoneGap Team
</author>
<content src="index.html" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="14" />
<plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1" />
<plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-console" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1" />
<plugin name="cordova-plugin-device" source="npm" spec="~1.1.1" />
<plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2" />
<plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-file" source="npm" spec="~4.1.1" />
<plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0" />
<plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3" />
<plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0" />
<plugin name="cordova-plugin-media" source="npm" spec="~2.2.0" />
<plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0" />
<plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1" />
<plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2" />
<plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0" />
<plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />
<plugin name="com.bunkerpalace.cordova.youtubevideoplayer" spec="1.0.1" source="pgb" />
<icon src="icon.png" />
<platform name="android">
<icon density="ldpi" src="www/res/icon/android/drawable-ldpi-icon.png" />
<icon density="mdpi" src="www/res/icon/android/drawable-mdpi-icon.png" />
<icon density="hdpi" src="www/res/icon/android/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="www/res/icon/android/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="www/res/icon/android/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="www/res/icon/android/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="www/res/screen/android/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="www/res/screen/android/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="www/res/screen/android/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="www/res/screen/android/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="www/res/screen/android/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="www/res/screen/android/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="www/res/screen/android/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="www/res/screen/android/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="www/res/screen/android/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="www/res/screen/android/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="www/res/screen/android/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="www/res/screen/android/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<icon height="57" platform="ios" src="www/res/icon/ios/icon.png" width="57" />
<icon height="114" platform="ios" src="www/res/icon/ios/icon#2x.png" width="114" />
<icon height="40" platform="ios" src="www/res/icon/ios/icon-40.png" width="40" />
<icon height="80" platform="ios" src="www/res/icon/ios/icon-40#2x.png" width="80" />
<icon height="50" platform="ios" src="www/res/icon/ios/icon-50.png" width="50" />
<icon height="100" platform="ios" src="www/res/icon/ios/icon-50#2x.png" width="100" />
<icon height="60" platform="ios" src="www/res/icon/ios/icon-60.png" width="60" />
<icon height="120" platform="ios" src="www/res/icon/ios/icon-60#2x.png" width="120" />
<icon height="180" platform="ios" src="www/res/icon/ios/icon-60#3x.png" width="180" />
<icon height="72" platform="ios" src="www/res/icon/ios/icon-72.png" width="72" />
<icon height="144" platform="ios" src="www/res/icon/ios/icon-72#2x.png" width="144" />
<icon height="76" platform="ios" src="www/res/icon/ios/icon-76.png" width="76" />
<icon height="152" platform="ios" src="www/res/icon/ios/icon-76#2x.png" width="152" />
<icon height="29" platform="ios" src="www/res/icon/ios/icon-small.png" width="29" />
<icon height="58" platform="ios" src="www/res/icon/ios/icon-small#2x.png" width="58" />
<icon height="87" platform="ios" src="www/res/icon/ios/icon-small#3x.png" width="87" />
<splash height="1136" platform="ios" src="www/res/screen/ios/Default-568h#2x~iphone.png" width="640" />
<splash height="1334" platform="ios" src="www/res/screen/ios/Default-667h.png" width="750" />
<splash height="2208" platform="ios" src="www/res/screen/ios/Default-736h.png" width="1242" />
<splash height="1242" platform="ios" src="www/res/screen/ios/Default-Landscape-736h.png" width="2208" />
<splash height="1536" platform="ios" src="www/res/screen/ios/Default-Landscape#2x~ipad.png" width="2048" />
<splash height="768" platform="ios" src="www/res/screen/ios/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" platform="ios" src="www/res/screen/ios/Default-Portrait#2x~ipad.png" width="1536" />
<splash height="1024" platform="ios" src="www/res/screen/ios/Default-Portrait~ipad.png" width="768" />
<splash height="960" platform="ios" src="www/res/screen/ios/Default#2x~iphone.png" width="640" />
<splash height="480" platform="ios" src="www/res/screen/ios/Default~iphone.png" width="320" />
</platform>
<platform name="wp8">
<icon height="99" platform="wp8" src="www/res/icon/wp8/ApplicationIcon.png" width="99" />
<icon height="159" platform="wp8" src="www/res/icon/wp8/Background.png" width="159" />
<splash height="1280" platform="wp8" src="www/res/screen/wp8/screen-portrait.jpg" width="768" />
</platform>
<platform name="windows">
<icon height="150" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-100.png" width="150" />
<icon height="30" platform="windows" src="www/res/icon/windows/Square30x30Logo.scale-100.png" width="30" />
<icon height="50" platform="windows" src="www/res/icon/windows/StoreLogo.scale-100.png" width="50" />
<splash height="300" platform="windows" src="www/res/screen/windows/SplashScreen.scale-100.png" width="620" />
<icon height="120" platform="windows" src="www/res/icon/windows/StoreLogo.scale-240.png" width="120" />
<icon height="44" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-100.png" width="44" />
<icon height="106" platform="windows" src="www/res/icon/windows/Square44x44Logo.scale-240.png" width="106" />
<icon height="70" platform="windows" src="www/res/icon/windows/Square70x70Logo.scale-100.png" width="70" />
<icon height="71" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-100.png" width="71" />
<icon height="170" platform="windows" src="www/res/icon/windows/Square71x71Logo.scale-240.png" width="170" />
<icon height="360" platform="windows" src="www/res/icon/windows/Square150x150Logo.scale-240.png" width="360" />
<icon height="310" platform="windows" src="www/res/icon/windows/Square310x310Logo.scale-100.png" width="310" />
<icon height="150" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-100.png" width="310" />
<icon height="360" platform="windows" src="www/res/icon/windows/Wide310x150Logo.scale-240.png" width="744" />
<splash height="1920" platform="windows" src="www/res/screen/windows/SplashScreenPhone.scale-240.png" width="1152" />
</platform>
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
<engine name="android" spec="~5.2.2" />
</widget>
I have developed the wifi application using wifiwizard and cordova for android devices and it works fine. I can choose the network and I can put the password and I can validate it and connect into it. But the problem is my company got some extra validations like identity number, employee type, and some other details. So how am I suppose to do these stuffs or how to add these for particular networks. I have uploaded my entire wifi application which works exactly I expected. Please have a look and help me to do it still better.
index.html
<!DOCTYPE html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Wifi Wizard</title>
</head>
<body>
<div class = "content">
<table id = "displayNetworks" class = "table-responsive">
</table>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
var unique_array = [];
$(document).ready(function(){
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android|BlackBerry)/)){
document.addEventListener("deviceready", onDeviceReady, false);
}else{
onDeviceReady();
}
});
function onDeviceReady(){
alert("I'm into the browser for debug");
window.setTimeout(function(){
WifiWizard.setWifiEnabled(true, win_enable, fail_enable);
}, 200);
}
function win_enable(){
alert("Wifi Enabled successfully");
}
function fail_enable(e){
alert(e.message);
}
window.setTimeout(function(){ alert("I'm in here");
WifiWizard.startScan(success_scan, fail_scan);
}, 1000);
function success_scan(){ alert("Trying to connect scan function");
window.setTimeout(function(){
getScanResult();
}, 2000);
}
function fail_scan(e){
alert(e.message);
}
function getScanResult(){alert("Im here too getting the scan result");
WifiWizard.getScanResults(listHandler, fail_network);
}
function listHandler(a){
alert(JSON.stringify(a));
var network_array = [];
for(var i = 0; i < a.length; i++){
network_array.push(a[i].SSID);
}
unique_array = network_array.filter(function(elem, pos){
return network_array.indexOf(elem) == pos;
});
alert(network_array);
var content = "<table>"
for(var j = 0; j < network_array.length; j++){
content += '<tr class="dynamicTable"><td>' + network_array[j] + '</td></tr>';
}
content += "</table>"
document.getElementById('displayNetworks').innerHTML = content;
}
function fail_network(e){
alert(e.message);
}
function clickWifi(netssid){ alert("Hello Im inside click function");
var id = netssid;
alert(id);
var promptWindow = prompt("Please enter the password for the network: " + id);
alert(promptWindow);
var connectWifi = WifiWizard.formatWPAConfig(id, promptWindow);
WifiWizard.addNetwork(connectWifi, function(){
WifiWizard.connectNetwork(id, connectSuccess, connectFailed);
});
}
function connectSuccess(e){
alert("Connected Successfully");
window.open("http://www.google.com", "_self");
}
function connectFailed(e){
alert(e.message);
}
And too I'm having problem with window.open in the function connectSuccess, the window.open is not working inside my application and if I come out of my application I can reach Google.
config.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.ionicframework.wifiexpandables353717" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>WifiExpandables</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="you#example.com" href="http://example.com.com/">
Your Name Here
</author>
<content src="index.html"/>
<access origin="*"/>
<preference name="webviewbounce" value="false"/>
<preference name="UIWebViewBounce" value="false"/>
<preference name="DisallowOverscroll" value="true"/>
<preference name="SplashScreenDelay" value="2000"/>
<preference name="FadeSplashScreenDuration" value="2000"/>
<preference name="android-minSdkVersion" value="16"/>
<preference name="BackupWebStorage" value="none"/>
<preference name="SplashScreen" value="screen"/>
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true"/>
</feature>
<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
<splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
<splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
<splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
<splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
<splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
<splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
</platform>
</widget>
Add the following lines in config.xml. It should work fine.
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
I am having issues with my phoneGap build, I am trying to build a recording app, I have all the plugin and codes in place, when I use the phoneGap iOS emulator and load the app, it allows me to record. When I go to build.phonegap and use their tool to build the apk package and then I installed the app on my iPhone and click the button to launch the recorder nothing happens, the recording interface does not launch as it did with the emulator. Any help would be greatl
*****Index.html
<!DOCTYPE html>
<html>
<head>
<title>M title</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="custom.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureAudio() {
// Launch device audio recording application,
// allowing user to capture up to 2 audio clips
navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
</head>
<body onload="getTitle();">
<ul id="nav">
<li>← Back</li>
<li></li>
</ul>
<button onclick="captureAudio();">Capture Audio</button> <br>
</body>
</html>
*****Config.xml
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="com.phonegap.iriejam" version="1.0.0">
<name>irieJam</name>
<description>Hello World sample application that responds to the deviceready event.</description>
<author href="http://phonegap.com" email="support#phonegap.com">PhoneGap Team</author>
<content src="index.html"/>
<preference name="permissions" value="none"/>
<preference name="orientation" value="default"/>
<preference name="target-device" value="universal"/>
<preference name="fullscreen" value="true"/>
<preference name="webviewbounce" value="true"/>
<preference name="prerendered-icon" value="true"/>
<preference name="stay-in-webview" value="false"/>
<preference name="ios-statusbarstyle" value="black-opaque"/>
<preference name="detect-data-types" value="true"/>
<preference name="exit-on-suspend" value="false"/>
<preference name="show-splash-screen-spinner" value="true"/>
<preference name="auto-hide-splash-screen" value="true"/>
<preference name="disable-cursor" value="false"/>
<preference name="android-minSdkVersion" value="7"/>
<preference name="android-installLocation" value="auto"/>
<gap:plugin name="org.apache.cordova.battery-status"/>
<gap:plugin name="org.apache.cordova.camera"/>
<gap:plugin name="org.apache.cordova.media-capture"/>
<gap:plugin name="org.apache.cordova.console"/>
<gap:plugin name="org.apache.cordova.contacts"/>
<gap:plugin name="org.apache.cordova.device"/>
<gap:plugin name="org.apache.cordova.device-motion"/>
<gap:plugin name="org.apache.cordova.device-orientation"/>
<gap:plugin name="org.apache.cordova.dialogs"/>
<gap:plugin name="org.apache.cordova.file"/>
<gap:plugin name="org.apache.cordova.file-transfer"/>
<gap:plugin name="org.apache.cordova.geolocation"/>
<gap:plugin name="org.apache.cordova.globalization"/>
<gap:plugin name="org.apache.cordova.inappbrowser"/>
<gap:plugin name="org.apache.cordova.media"/>
<gap:plugin name="org.apache.cordova.network-information"/>
<gap:plugin name="org.apache.cordova.splashscreen"/>
<gap:plugin name="org.apache.cordova.vibration"/>
<gap:plugin name="org.apache.cordova.inappbrowser" />
<icon src="icon.png"/>
<icon src="www/res/icon/android/icon-36-ldpi.png" gap:platform="android" gap:qualifier="ldpi"/>
<icon src="www/res/icon/android/icon-48-mdpi.png" gap:platform="android" gap:qualifier="mdpi"/>
<icon src="www/res/icon/android/icon-72-hdpi.png" gap:platform="android" gap:qualifier="hdpi"/>
<icon src="www/res/icon/android/icon-96-xhdpi.png" gap:platform="android" gap:qualifier="xhdpi"/>
<icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry"/>
<icon src="www/res/icon/blackberry/icon-80.png" gap:platform="blackberry" gap:state="hover"/>
<icon src="www/res/icon/ios/icon-57.png" gap:platform="ios" width="57" height="57"/>
<icon src="www/res/icon/ios/icon-72.png" gap:platform="ios" width="72" height="72"/>
<icon src="www/res/icon/ios/icon-57-2x.png" gap:platform="ios" width="114" height="114"/>
<icon src="www/res/icon/ios/icon-72-2x.png" gap:platform="ios" width="144" height="144"/>
<icon src="www/res/icon/webos/icon-64.png" gap:platform="webos"/>
<icon src="www/res/icon/windows-phone/icon-48.png" gap:platform="winphone"/>
<icon src="www/res/icon/windows-phone/icon-173-tile.png" gap:platform="winphone" gap:role="background"/>
<gap:splash src="www/res/screen/android/screen-ldpi-portrait.png" gap:platform="android" gap:qualifier="port-ldpi"/>
<gap:splash src="www/res/screen/android/screen-mdpi-portrait.png" gap:platform="android" gap:qualifier="port-mdpi"/>
<gap:splash src="www/res/screen/android/screen-hdpi-portrait.png" gap:platform="android" gap:qualifier="port-hdpi"/>
<gap:splash src="www/res/screen/android/screen-xhdpi-portrait.png" gap:platform="android" gap:qualifier="port-xhdpi"/>
<gap:splash src="www/res/screen/blackberry/screen-225.png" gap:platform="blackberry"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait.png" gap:platform="ios" width="320" height="480"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-2x.png" gap:platform="ios" width="640" height="960"/>
<gap:splash src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios" width="640" height="1136"/>
<gap:splash src="www/res/screen/ios/screen-ipad-portrait.png" gap:platform="ios" width="768" height="1024"/>
<gap:splash src="www/res/screen/ios/screen-ipad-landscape.png" gap:platform="ios" width="1024" height="768"/>
<gap:splash src="www/res/screen/windows-phone/screen-portrait.jpg" gap:platform="winphone"/>
<access origin="*"/>
<plugin name="cordova-plugin-whitelist" version="1"/>
<allow-intent href="http://*/*"/>
<allow-intent href="https://*/*"/>
<allow-intent href="tel:*"/>
<allow-intent href="sms:*"/>
<allow-intent href="mailto:*"/>
<allow-intent href="geo:*"/>
<platform name="android">
<allow-intent href="market:*"/>
</platform>
<platform name="ios">
<allow-intent href="itms:*"/>
<allow-intent href="itms-apps:*"/>
</platform>
</widget>
I was experiencing that issue because when you upload the www zipped folder to build.phonegap, you must include the config.xml in order for phonegap to generate the apps with the appropriate plugin libraries.
I work with Xcode 5, Cordova 3.3.0. The plugins has been installed by command line (cordova plugin add org.apache.cordova.inappbrowser).
I tested on Ipad2 with ios6 and on simulator with ios7.
I don't have any problem to open html file or pdf file but I don't have ToolBar/Location Bar or other.
It's impossible to close pdf to return on previous page !!!
What can I check again? What can I do to resolve this?
Thanks in advance for your help ;-)
Content of my html file:
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.removeEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadError(event) {
alert(event.type + ' - ' + event.message);
}
function iabClose(event) {
alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.removeEventListener('exit', iabClose);
}
// device APIs are available
//
function onDeviceReady() {
}
function openPdf() {
iabRef = window.open('test.pdf', '_blank', 'location=yes,toolbar=yes,transitionstyle=fliphorizontal');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.addEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);
}
function openHtml() {
// open win and turn off location
var ref = window.open('index2.html', '_blank', 'location=no');
// attach listener to loadstart
ref.addEventListener('loadstart', function(event) {
var urlSuccessPage = "index2.html";
if (event.url == urlSuccessPage) {
ref.close();
}
});
}
</script>
</head>
<body>
<p>PDF</p>
<p>page 2</p>
</body>
</html>
Content of my config file:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.antidot.testpdf2" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Hello Cordova</name>
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="DisallowOverscroll" value="false" />
<preference name="EnableViewportScale" value="false" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="GapBetweenPages" value="0" />
<preference name="PageLength" value="0" />
<preference name="PaginationBreakingMode" value="page" />
<preference name="PaginationMode" value="unpaginated" />
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage" />
</feature>
<name>test-pdf-2</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<access origin="*" />
<feature name="InAppBrowser">
<param name="ios-package" value="CDVInAppBrowser" />
</feature>
<feature name="File">
<param name="ios-package" value="CDVFile" />
</feature>
<feature name="Console">
<param name="ios-package" value="CDVLogger" />
</feature>
</widget>
most likely the inapp browser plugin is not loading, but rather a webview. Check all settings and see if the inappbrowser is actually being called.