I want to convert a website into an android app using Apache Cordova and visual studio 2015. Below is my index.html code:
<!doctype html>
<html lang="en">
<head>
<title>Zoggle</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.splashscreen.hide();
if (navigator.network.connection.type == Connection.NONE) {
networkError()
} else {
loadApp()
}
}
function loadApp() {
navigator.app.loadUrl("http://zoggle.zolmeister.com")
}
function networkError() {
navigator.notification.alert('Zoggle requires an internet connection')
var $net = document.createElement('div')
$net.innerHTML = 'Zoggle requires an internet connection'
document.body.appendChild($net)
}
</script>
<style>
body {
padding: 15px;
background: #23252e;
color: #01ced3;
text-align: center;
}
div {
font-size: 20px;
}
</style>
</head>
<body>
</body>
</html>
When I run the code, it shows me a blank black page. I want to load the web page the link is given..Please Help.
You can use Inappbrowser Plugin to load the website in your app
http://www.plugreg.com/plugin/apache/cordova-plugin-inappbrowser
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/
Related
Below is the sample for audio player:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio>
</body>
</html>
With this, I want to add some constraints like don't want to show the play button.Instead it will automatically play after 10 secs and it can play only once. How can I do with this. If anyone knows solution please help me to get out of this issue. Reference. https://kolber.github.io/audiojs/
You can hide the play/pause button by changing its style of .play-pause to display:none
Set autoplay to false to avoid playback at load and use setTimeout to play after 10 sec.
Refer below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<style>
.play-pause {
display: none;
}
.scrubber {
display: none;
}
.audiojs {
width: 110px;
}
.audiojs .time {
border-left: none;
}
</style>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" id="player"></audio>
<label id="audio_stats"></label>
<script>
var element = document.getElementById("player");
var settings = {
autoplay: false,
loop: false,
preload: true,
swfLocation: 'audiojs/audiojs.swf',
trackEnded: function (e) {
document.getElementById("audio_stats").innerText = "Track Ended...";
}
}
audiojs.events.ready(function () {
var a = audiojs.create(element, settings);
var count = 11;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
a.play();
document.getElementById("audio_stats").innerText = "Playing...";
return;
}
document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
}
});
</script>
</body>
</html>
I am loading google maps in my WebView using a local html file (assets folder). The map has a kml overlay. The problem I'm facing is that when the kml file is updated, the respective changes are not being reflected in my WebView. I also tried removing the files, in which case, the map still shows the previously loaded overlays. So I assume its related to cache. For preventing caching, I tried using manifest in html, but it was not successful. My codes are as follows.
wv_map.getSettings().setJavaScriptEnabled(true);
wv_map.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
wv_map.clearCache(true);
wv_map.clearHistory();
wv_map.loadUrl("file:///android_asset/content.html");
The content.html being:
<!DOCTYPE html>
<html manifest="map.cache">
<head>
<meta charset="utf-8">
<title>KML Layers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#map img {
opacity: .4;
}
.gmnoprint a, .gmnoprint span {
display:none; //remove copyright and terms of use
}
.gmnoprint div {
background:none !important;
}
.gm-style-mtc {
display: none; //remove satellite option
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
function initMap() {
layer0 = new google.maps.KmlLayer(*MY_URL_TO_KML_FILE*,
{
preserveViewport: true
});
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 2,
center: {lat: 10, lng: 120},
streetViewControl: false //remove the icon of person from the map
});
layer0.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</body>
map.cache (in same location as content.html) file's content is:
CACHE MANIFEST
#CACHE
#cache nothing
NETWORK:
*
Finally, the kml file is:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<GroundOverlay>
<color>#7cff0000</color>
<drawOrder>1</drawOrder>
<Icon>
<href>URL_TO_OVERLAY_IMAGE</href>
</Icon>
<LatLonBox>
<west>90</west>
<east>95</east>
<south>-19</south>
<north>25</north>
</LatLonBox>
</GroundOverlay>
</Document>
</kml>
I update the overlay image via Icon tag.
Thanks.
Below is the code I have tried. When I execute the code below it appears as when I click a button in my application and it is opening device phone book and displaying contacts. When I click on any contact it is picked by application but it should not open device address book but when clicked it should display the contacts of my device in my application. Can anyone suggest me how to do this?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, r-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter" ng-controller="AppCtrl" class="platform-android platform-cordova platform-webview">
<ion-pane>
<ion-header-bar class="bar-stable">
<button class="button" ng-click="pickContact()">Contacts</button>
<h1 class="title">All Contacts</h1>
</ion-header-bar>
<ion-content>
<div class="list">
<a class="item item-thumbnail-left" ng-repeat="contact in data.selectedContacts">
<img src="{{contact.photos[0].value}}" ng-if="contact.photos.length > 0">
<h2>{{contact.displayName}}</h2>
<p ng-if="contact.emails.length > 0">{{contact.emails[0].type}} : {{contact.emails[0].value}}</p>
<p ng-if="contact.phones.length > 0">{{contact.phones[0].type}} : {{contact.phones[0].value}}</p>
</a>
</div>
<p class="padding"></p>
</ion-content>
</ion-pane>
</body>
</html>
Javascript:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.service("ContactsService", ['$q',
function($q) {
var formatContact = function(contact) {
return {
"displayName": contact.name.formatted || contact.name.givenName + " " + contact.name.familyName || "Unknown Person",
"emails": contact.emails || [],
"phones": contact.phoneNumbers || [],
"photos": contact.photos || []
};
};
var pickContact = function() {
var deferred = $q.defer();
if (navigator && navigator.contacts) {
navigator.contacts.pickContact(function(contact) {
deferred.resolve(formatContact(contact));
});
} else {
deferred.reject("Hurray!!!!...... No contacts in desktop browser");
}
return deferred.promise;
};
return {
pickContact: pickContact
};
}
])
.controller("AppCtrl", ['$scope', 'ContactsService',
function($scope, ContactsService) {
$scope.data = {
selectedContacts: []
};
$scope.pickContact = function() {
ContactsService.pickContact().then(
function(contact) {
$scope.data.selectedContacts.push(contact);
console.log("Selected contacts=");
console.log($scope.data.selectedContacts);
},
function(failure) {
console.log("Hurray!!!!...... Failed to pick a contact");
}
);
}
}
])
You could try using $cordovaContacts which is a part of the ngCordova (ngCordova needs to be installed). You can install in your app with the command cordova plugin add cordova-plugin-contacts. Then there is a simple function to getting all contacts in your contacts list.
$scope.getAllContacts = function() {
$cordovaContacts.find({filter: '',multiple:true}).then(function(allContacts) {
$scope.contacts = allContacts;
});
};
Note: It seems to be so that the find() function in $cordovaContacts can not be empty. Include ie. a filter in there for it to work.
EDIT:
This is a demonstration of the general structure and functions which you need to make the ngCordova contacts plugin to work.
Here's all my code you'll need in a JSFiddle: https://jsfiddle.net/thepio/osjppoqu/
And then I just call the getAllContacts function using a button click in my app.html file like this:
<button type="button" ng-click="getAllContacts()" class="button button-block button-positive">Get contacts</button>
REMEMBER it only works on a real device, probably not even emulator (haven't tested though). Include the ngCordova in your module. If you're calling the contacts plugin without a click or something remember that it is required that it's only called AFTER the device is ready. In Ionic you can do this with the following:
$ionicPlatform.ready(function() {
// Call the plugin here
});
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);
}
Getting error
"11-13 13:10:55.470: E/Web Console(9799):
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17 at
file:///android_asset/www/index.html:304"
when converting html div content to canvas in android with phonegap.
It is working properly on browser. Any help will be appreciated. I am using jQuery-1.9.1, jQuery-UI.
code snippet:
// html file
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="resourcess/css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jquery.plugin.html2canvas.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="resourcess/css/style.css" />
</head>
<body>
<div class="imag-container">
<div class="dragImg">
<div id="dropHere"></div>
<div id="click" > click </div>
<div id="img-check">check</div>
<canvas id="canvas" width="100" height="100">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
// script
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true
};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0] );
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-ggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
$('#click').click(function(){
//Some code
var domElement = document.getElementById('dropHere');
setTimeout(function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.getElementById("canvas");
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 50, 50,0,0,100,100);
}
});
}, 10000);
});
});