i have downloaded plugin FileOpener
and added in m,y project like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>sample</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<link rel="stylesheet" href="css/adidas.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/data_en.js"></script>
<script src="js/data_sp.js"></script>
<script src="js/adidas.js"></script>
<script src="js/cordova.js"></script>
<script src="js/video.js"></script>
<script src="js/fileopener.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" class="my-page" id="video">
<video id="video_player" src="#" controls="controls"></video>
</div>
</body>
in js file
$(document).on('pagebeforeshow',"#video", function () {
var xyz = document.getElementById('video_player');
alert("values xyz:" + xyz);
var x = window.plugins.fileOpener.open("file:///android_asset/www/videos/1974.mp4");
xyz.src = window.plugins.fileOpener.open("file:///android_asset/www/balls/1970.png");
alert("opener:" + x);
window.plugins.videoPlayer.play(x);
alert("xyz after src:" + xyz);
});
i am failed to open any video file/ images from assets/www/videos/abcd.mp4 and similar for images
now everything is working fine but this is alert when trying to hit play button :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>sample</title>
<script src="js/cordova.js"></script>
<script src="js/video.js"></script>
<script src="js/fileopener.js"></script>
<script src="js/ADD_ANY_JQUERY.MIN.JS"></script>
<script>
function openFile(filePath)
{
window.plugins.fileOpener.open(filePath);
}
</script
</head>
<body>
<div data-role="page" data-theme="a" class="my-page" id="video">
<img src="img/b_img1.png" onclick="openFile('file:///android_asset/www/videos/1974.mp4')"/>
</div>
</body>
Edited
Fileopener.js will be like this:
cordova.define("cordova/plugin/fileopener",
function(require, exports, module) {
var exec = require("cordova/exec");
var FileOpener = function () {};
FileOpener.prototype.open = function(url) {
exec(null, null, "FileOpener", "openFile", [url]);
};
FileOpener.prototype.setTAG = function(tag) {
exec(null, null, "FileOpener", "setTAG", [tag]);
};
var fileOpener = new FileOpener();
module.exports = fileOpener;
});
/**
* Load Plugin
*/
if (!window.plugins) {
window.plugins = {};
}
if (!window.plugins.fileOpener) {
window.plugins.fileOpener = cordova.require("cordova/plugin/fileopener");
}
"js/ADD_ANY_JQUERY.MIN.JS"
in this line add a any jquery.min.js
Lastly check that Cordova.js folder is in your js folder of your application.. And let me know if it is not working what's your logcat saying...
i was using cordova 2.9.0 , jquery 1.9.1 ,jqm-1.3.2 and android-sdk-version:14 after adding code i was getting error:logcat is:
01-06 19:36:53.132: D/PluginManager(9420): exec() call to unknown plugin: FileOpener
01-06 19:36:53.202: D/CordovaLog(9420): file:///android_asset/www/js/fileopener.js: Line 20 : Class not found
01-06 19:36:53.202: I/Web Console(9420): Class not found at file:///android_asset/www/js/fileopener.js:20
the solution of this problem is i have done mistake in config.xml and in plugin.xml:
config.xml replace this:
<feature name="videoplayer">
<param name="android-package" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
</feature>
with:
<feature name="VideoPlayer">
<param name="android-package" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
</feature>
plugin.xml replace this:
<plugin name="videoplayer" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
with:
<plugin name="VideoPlayer" value= "com.adidas.football.app.videoPlayer.VideoPlayer"/>
a minor mistake of CAPITAL LETTER but it removes all error and finally i have no error except last one alert which i added in my edited question "cannot play video"
Related
I am new to Cordova apps,Right now I am developing an app on SAPUI5 using cordova, When I run it on android its taking 7-8 seconds to load,I tried minify css and js but it didn't help.Here is my HTML code.
`<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<link rel="stylesheet" type="text/css" href="Style/myCSS.css">
<script>
var user = "xxxx";
var pass = "xxxx";
var gatewayLoginLink = "proxy/http/xxxxxx/sap/opu/odata/sap/xxxxx";
sap.ui.getCore().setModel(new sap.ui.model.odata.ODataModel( gatewayLoginLink, true, user, pass));
</script>
<script>
sap.ui.localResources("qrcode");
var app = new sap.m.App({initialPage:"idqrcode1"});
var page = sap.ui.view({id:"idqrcode1", viewName:"qrcode.qrcode", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>`
please help.
I thought this simple setup would work and use the alternate link to print test.pdf. But in the print preview I see the current page and not test.pdf???
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="alternate" media="print" href="http://localhost/mydomain.com/test/test.pdf">
<script>
window.print();
</script>
</head>
<body>
<div>TODO write content</div>
</body>
</html>
[edit]
the closest I got only seems to work in Chrome (I like to skip the print preview and auto print, but the --kiosk doesn't seem to play along with following code):
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function ($) {
function print(url)
{
var _this = this,
iframeId = 'iframeprint',
$iframe = $('iframe#iframeprint');
$iframe.attr('src', url);
$iframe.load(function () {
callPrint(iframeId);
});
}
//initiates print once content has been loaded into iframe
function callPrint(iframeId) {
var PDF = document.getElementById(iframeId);
PDF.focus();
PDF.contentWindow.print();
}
print('http://localhost/mydomain.com/tests/test.pdf');
});
</script>
</head>
<body onload="">
<div>TODO write content</div>
<iframe id="iframeprint" src=""></iframe>
</body>
</html>
You can't do this to a pdf file. But you can do this to an html file.
Something like this:
function print() {
var w = window.open('', 'width=400, height=400');
w.document.body.innerHTML = "HTML";
w.print();
}
<button onclick="print()">Print another file</button>
You can see it here: http://output.jsbin.com/kefoxo
The full code: (Tested on Google Chrome)
http://jsbin.com/kefoxo/edit?html,js
I get this error with a Parse.com JS App:
ReferenceError: Parse is not defined.
I really don't know why. Everything looks good to me. The files are linked correctly; I've checked this a few times. Is it not true, that I have to put my own JS right below Parse and it should work? This is what I've read here: Github Project
I use Chrome with the ripple extension. I serve the app via cordova serve
Any help much appreciated!
Here is index.html:
<!DOCTYPE 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, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
<title>Zone</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<img src="../img/site-logo.png" rel="external" class="logo">
<!-- <div class="site-menu">
<i class="fa fa-angle-double-left"></i><p class="title"></p><i></i>
</div> -->
<img src="img/suche.jpg" class="icon">
<img src="img/essentrinken.jpg" class="icon">
<img src="img/einkaufen.jpg" class="icon">
<img src="img/kultur.jpg" class="icon">
<img src="img/dienstleistungen.jpg" class="icon">
<img src="img/nuetzlich.jpg" class="icon">
<img src="img/nummern.jpg" class="icon">
<img src="img/sport.jpg" class="icon">
<img src="img/verwaltung.jpg" class="icon">
<img src="img/hotel.jpg" class="icon">
<img src="img/neuzuzuger.jpg" class="icon">
<div class="adad"></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>
And here the JS file.
$(document).ready(function () {
Parse.initialize("", "");
var Ad = Parse.Object.extend("Ads");
function getPosts() {
var query = new Parse.Query(Ad);
query.find({
success: function (results) {
console.log("hello");
var output = "";
for (var i in results) {
var name = results[i].get("location");
if (name == 10) {
output += "<img src = '" + imageurl + "' class='media-object' height='60' width='100'>"
}
}
$("#adad").html(output);
console.log(output);
},
error: function (error) {
console.log("Query error:" + error.message);
}
});
}
getPosts();
});
I'm sorry, I have no experience with Cordova, but in general I've seen problems like these being caused by live reloading of files or by asynchronous loading, which could be caused by cordova/gulp/nodejs.
Maybe you should use a require statement as shown on the Parse quick start guide: var Parse = require('parse');
When I try your html and javascript in jsfiddle it just works, so it should have something to do with the order of loading js files in your local "webserver".
The problem could be that the parse CDN was not found i.e . download the SDK and host it yourself instead
Just run into the same issue. You are most likely missing the reference to parse.min.js.
The reference is typically in your index.html file, inside the header:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Security-Policy"/>
<script type="text/javascript" src="cordova.js"></script>
<! ---- LOOK HERE --------->
<script src="js/parse.min.js"></script>
<! ---- LOOK HERE --------->
<link rel="stylesheet" type="text/css" href="css/one.css" />
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
I'm trying to redirect with javascript after a 3-second delay, but my code currently does nothing. index.html is supposed to redirect to menupage.html after a 3-second delay, but nothing happens. menupage.html has 4 buttons on it: "Device motion" uses Phonegap's accelerometer and compass to show the device's speed and direction, and the other 3 just open new pages in Phonegap's in-app browser. Here is the code:
EDIT: It was just a file location error. The redirect works. Thank you!
<!--index.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<head>
<meta charset="utf-8" />
<title></title>
<link href="JQueryMobile/jquery.mobile-1.2.0.css" rel="stylesheet" />
<script src="JQueryMobile/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="JQueryMobile/jqm-docs.js" type="text/javascript"></script>
<script src="JQueryMobile/jquery.mobile-1.2.0.js" type="text/javascript"></script>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body onload="redirect()">
<img id="load-img" src="loading.jpg" />
<script src="scripts/scripts.js"></script>
</body>
</html>
<!--menupage.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<head>
<title>Menu</title>
<script type="text/javascript" src="phonegap.js"></script>
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<button id="devmotion" onclick="getMotion()">Device Motion</button>
<button id="ucla" onclick="openUCLA()">UCLA</button>
<button id="espn" onclick="openESPN()">ESPN</button>
<button id="google" onclick="openGoogle()">Google</button>
<script src="scripts/scripts.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
</body>
</html>
<!--devicemotion.html-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=1.0" />
<head>
<title>Acceleration and Compass Direction</title>
<script type="text/javascript" src="phonegap.js"></script>
<link href="styles/styles.css" rel="stylesheet" />
</head>
<body>
<div id="accel"></div>
<div id="compassdirection"></div>
<button id="goback" onclick="backToMenu()">Back</button>
<script src="scripts/scripts.js"></script>
<script src="scripts/jquery-2.1.1.min.js"></script>
</body>
</html>
<!--scripts.js-->
// JavaScript source code
function redirect() {
window.setTimeout(function() {
window.location.replace("menupage.html");
}, 3000)
}
function getMotion() {
window.location = "devicemotion.html";
//window.open("devicemotion.html", "_self", "location=yes");
navigator.accelerometer.getCurrentAcceleration(accelerometerSuccess, accelerometerError);
navigator.compass.getCurrentHeading(compassSuccess, compassError);
}
function backToMenu() {
window.location = "menupage.html";
}
function accelerometerSuccess(acceleration) {
acclrtn = 'Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n';
document.getElementById("accel").innerHTML = acclrtn;
};
function accelerometerError(error) {
alert("Accelerometer error: " + accelerometer.code);
}
function compassSuccess(heading) {
direction = "Direction: " + heading.magneticHeading;
document.getElementById("compassdirection").innerHTML = direction;
}
function compassError(error) {
alert("Compass error: "+error.code);
}
function openUCLA() {
window.open('www.ucla.edu', '_blank', 'location=yes');
}
function openESPN() {
window.open('www.espn.com', '_blank', 'location=yes');
}
function openGoogle() {
window.open('www.google.com', '_blank', 'location=yes');
}
it should be
window.location.href = "http://yoursite.com/menupage.html";
Update
Seems that the logic that leads up to the redirect is not working. You are defining an onload handle in the body tag <body onload="redirect()">, the catch is that when that command executes, the redirect function does not exist yet because you are loading the js at the end of the document (which is correct). You could do 2 things.
Given that your scripts are at the end, calling a function at the end of the script would only be executed after the browser has downloaded html and js, behaving similarly to an onload event.
// At the end of scripts.js
// ... omitted for brevity ...
function openGoogle() {
window.open('www.google.com', '_blank', 'location=yes');
}
// simply call the function
redirect();
To catch the window.onload event properly with cross browser compatibility is known to be a nightmare. Fortunately jQuery fixes this so you could use its initializer in case you have it or can include jQuery.
$(function(){
// this only happens when the document is ready!
redirect();
});
Finally your redirect function should look something like this
function redirect() {
window.setTimeout(function() {
window.location.href = "menupage.html";
// if you need to replace a part of the current url
// for example going from http://example.com/summer/index.html
// to http://example.com/winter/index.html you can
// window.location.href = window.location.href.replace('summer', 'winter');
}, 3000)
}
Have you tried using php to redirect? I believe it would be much easier to use.
header( "refresh:3;url=menupage.html" );
I am trying to develop a program using PhoneGap. I would like to scan and display the tag ID from a scanned card.
When the app is built and deployed through build.phonegap.com and comes into contact with a tag the device vibrates but nothing shown on screen. Can anyone tell me what I'm doing wrong?
function ready() {
function onNfc(nfcEvent) {
var tag = nfcEvent.tag;
var tagId = nfc.bytesToHexString(tag.id);
navigator.notification.alert(tagId);
var y=document.getElementById("rand");
y.innerHTML = tagId;
}
function win() {
console.log("Listening for NFC Tags");
}
function fail(error) {
alert("Error adding NFC listener");
}
nfc.addTagDiscoveredListener(onNfc, win, fail);
}
function init() {
document.addEventListener('deviceready', ready, false);
}
HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Scan NFC</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-nfc-0.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>
</head>
<body>
<p>Please scan NFC tag</p>
<p id="rand"></p>
</body>
</html>
I suppose that you main.js has the function init and so on.
well the only thing that you need is add after you file main.js the call to function init
<script type="text/javascript" charset="utf-8" src="main.js"></script>
<script type="text/javascript"> init(); </script>