I'm trying to add the phonegap imagePicker plugin to my app and am receiving the following error when I try to call the function:
"Uncaught TypeError: Cannot read property 'getPictures' of undefined",
source: file:///android_asset/www/js/main.js (85)
I installed the plugin using the CLI per the instructions. I have copied the .js to the appropriate folder and referenced it.
Here are the relevant sections of the different pages:
Html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href="jquerymobile/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="jquerymobile/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<script src="js/imagepicker.js" type="text/javascript"></script>
<script src="js/main.js"></script>
</head>
<body>
<!-- a bunch of irrelevant stuff -->
Upload
</body>
</html>
main.js:
$(document).on("pageshow", "#thepageinquestion", function() {
$("#btn_upload").click(function() {
window.imagePicker.getPictures( // <--- this is line 85
function(results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, function (error) {
console.log('Error: ' + error);
}
);
});
});
imagepicker.js:
cordova.define("com.synconset.imagepicker.ImagePicker", function(require, exports, module) { /*global cordova,window,console*/
/**
* An Image Picker plugin for Cordova
*
* Developed by Wymsee for Sync OnSet
*/
var ImagePicker = function() {
};
/*
* success - success callback
* fail - error callback
* options
* .maximumImagesCount - max images to be selected, defaults to 15. If this is set to 1,
* upon selection of a single image, the plugin will return it.
* .width - width to resize image to (if one of height/width is 0, will resize to fit the
* other while keeping aspect ratio, if both height and width are 0, the full size
* image will be returned)
* .height - height to resize image to
* .quality - quality of resized image, defaults to 100
*/
ImagePicker.prototype.getPictures = function(success, fail, options) {
if (!options) {
options = {};
}
var params = {
maximumImagesCount: options.maximumImagesCount ? options.maximumImagesCount : 15,
width: options.width ? options.width : 0,
height: options.height ? options.height : 0,
quality: options.quality ? options.quality : 100
};
return cordova.exec(success, fail, "ImagePicker", "getPictures", [params]);
};
window.imagePicker = new ImagePicker();
});
After beating this up for hours, finally realized the external javascript file wasn't loading. Rookie mistake, I had placed the reference to the script in the page header instead of within the data-role="page" tags.
Found the answer here:
JQuery Mobile Change Page doesnt load JS files
Related
I'm using chart.js for first time and I'm facing problem in drawing graph. When I run this code, Graph axis are shown only but bars are not shown until I minimize or change browser window size. This is happening every time. Maybe this has to do with responsiveness. Any help about what I'm doing wrong here. I'm using visual studio and chrome for rendering graph.
let labels=[]
let duration=[]
let file="assets/duration.csv";
d3.csv(file).then(
function (loaddata) {
for (let i = 0; i < loaddata.length; i++) {
//console.log(loaddata.hours)
if (loaddata[i].hours != 0)
{
duration.push(loaddata[i].hours)
labels.push(loaddata[i].Trend)
}
}
//console.log(labels)
//console.log(duration)
}
);
let options={
type: 'bar',
responsive: true,
title: {
display:true,
text:'Duration of Trending Tweets'
},
data: {
labels:labels,
datasets:[{
data: duration,
label: 'Hours',
backgroundColor:["#3e95cd"]
}]
}
};
let chart=new Chart(document.getElementById('canvas'),options);
<!DOCTYPE html>
<html lang="en">
<head>
<script src="chart.min.js"></script>
<script src ="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js">
</script>
<script src="http://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My first website</title>
</head>
<body>
<h1>Hello world</h1>
<div>
<canvas id="canvas" style="position: relative; height:40vh; width:80vw">
</canvas>
</div>
<script src="index.js">
</script>
</body>
</html>
The problem is that you create the chart before the CSV data is loaded. Be aware that the d3.csv request is processed asynchronously.
This can be solved by creating the chart only once the CSV data is fully loaded (at the end and inside of d3.csv(file).then( ... ).
An alternative approach is described in this answer.
I tried set my path with link from web and path of PC and didn't work, ever display this green square my screen:
My game.ejs file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
<script src="//cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
parent: 'phaser-example',
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create,
update: update
}
};
var debug;
var source;
var target = new Phaser.Math.Vector2();
var distanceText;
new Phaser.Game(config);
function preload ()
{
this.load.image('worm', 'assets/worm.png');
}
function create ()
{
source = this.physics.add.image(100, 300, 'worm');
debug = this.add.graphics();
this.input.on('pointerdown', function (pointer) {
target.x = pointer.x;
target.y = pointer.y;
this.physics.moveToObject(source, target, 250);
}, this);
distanceText = this.add.text(10, 10, 'Click to set target', { fill: '#00ff00' });
}
function update ()
{
var distance = Phaser.Math.Distance.Between(source.x, source.y, target.x, target.y);
if (source.body.speed > 0)
{
distanceText.setText('Distância: ' + distance);
if (distance < 4)
{
source.body.reset(target.x, target.y);
}
}
}
</script>
</body>
</html>
That's like I said, nothing worked with url or path from my pc, I just want to display my sprite player on screen without that green square and I saw another questions, but nothing offered me a solution, what can I do?
It seems like it can't find the image its looking for, which means that either it doesn't exist, or more likely it doesn't exist in the location you've provided.
If you're serving this web page from the root (aka it's visible on http://localhost or http://127.0.0.1 than you could try simply adding a / in front of the path, as such: /assets/worm.png, the leading / means it'll search for the asset from the root of your webpage.
I have a PWA which essentially re-directs the user to the messages app on open using Javascript. With the roll-out of iOS 12 and changes to PWAs, the webpage no longer re-initializes and executes the Javascript when it is re-opened or when it re-gains focus. Instead, it now loads the previously saved state and won't re-execute the Javascript.
Does anyone have any ideas around this? Can I force Javascript execution every time the PWA has focus? Can I force the page to re-initialize on load?
Sample code below:
<html manifest="ios/scripts/offline.manifest">
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>SMS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="SMS">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="180x180" href="ios/img/Icon-60x60#3x.png">
<link rel="apple-touch-startup-image" href="ios/img/LaunchImage-1125#3x~iphoneX-portrait_1125x2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
</head>
<body>
<script>
if (window.navigator.standalone) {
document.write('<a id="url" href="sms:1111111111" name="url"></a>');
var e = document.getElementById('url');
var ev = document.createEvent('MouseEvents');
ev.initEvent('click', true, true);
e.dispatchEvent(ev);
}
</script>
</body>
</html>
I encountered the same problem. Here is what I did to force PWA to execute javascript at start:
Register page visibility event in your javascript that is embedded
between tags.
Within the event handler of page visibility event, execute javascript that you want to execute when subsequently open PWA.
Any time PWA is opened, it will trigger page visibility event and execute your script.
Example: in your html file:
<script>
registerPageVisibility()
</script>
function registerPageVisibility() {
let hidden;
let visibilityChange;
if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
hidden = 'hidden';
visibilityChange = 'visibilitychange';
} else if (typeof document.msHidden !== 'undefined') {
hidden = 'msHidden';
visibilityChange = 'msvisibilitychange';
} else if (typeof document.webkitHidden !== 'undefined') {
hidden = 'webkitHidden';
visibilityChange = 'webkitvisibilitychange';
}
window.document.addEventListener(visibilityChange, () => {
if (!document[hidden]) {
//put your script here and it will be execute everytime when PWA is opened.
}
});
}
Take a look at this post re PWA 'state': Progressive Web App Progress in iOS 12.2 Beta 1 (Build 16E5181f)
I'm trying to displayGoogle Maps on a html page in cordova.
The example code I'm trying to replicate is this one: https://developers.google.com/maps/documentation/javascript/examples/map-simple?hl=it
Here is my code:
HTML:
<!DOCTYPE html>
<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" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<div id="map-canvas"></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src=js/jquery-1.11.1.min.js></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="js/google_map.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
index.js (I used some alert() and every method was called)
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
toIndex();
}
};
$(document).ready( function(){
app.initialize();
});
function toIndex(){
google_map.init();
}
google_map.js
the class which take care of the map
var google_map = (function(){
var _map;
var _$map_canvas;
function init(){
_$map_canvas = $('.app').find('#map-canvas');
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
_map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function getMap(){
return _map;
}
return {
init:init,
getMap:getMap
}
})();
and the index.css file
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
Instead of displaying the map, I see a white page.
Second question:
code here: http://jsfiddle.net/qbddfdk7/1/
This one doesn't work too, the problem is at line 14:
if I change it from
map = new google.maps.Map(map_canvas, mapOptions);
to
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
It will work, but I can't undesrstand why.
The problem with your second question is a timing issue.
You see, your inline javascript is in the <head>, so at the time var map_canvas = document.getElementById('map-canvas'); runs, the element with the id map-canvas is not loaded yet, so var map_canvas is set to null.
Moving the <script> tag to the bottom of the <body> element solves this issue. I've updated your jsFiddle accordingly.
As for your first issue, try Chrome Remote Debugging if available, or weinre. These will help you find the source of your problem.
I've had no luck using their recommendation to use percentages for the map-canvas. To ensure everything is working fine, hard-code the div tag to a fixed width and height.
Once you have the map displayed, then you'll need to write javascript to adjust the style width and height during the pagecreate or pageinit. You can then change the same properties during the orientationchange event.
There are several articles on the best way to find the screen size. I'm using:
function effectiveDeviceWidth(factor) {
var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
// iOS returns available pixels, Android returns pixels / pixel ratio
// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
deviceWidth = deviceWidth / window.devicePixelRatio;
}
return parseInt(deviceWidth) * factor + 'px';
}
function effectiveDeviceHeight(factor) {
var deviceHeight = window.orientation == 0 ? window.screen.height : window.screen.width;
// iOS returns available pixels, Android returns pixels / pixel ratio
// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
deviceHeight = deviceHeight / window.devicePixelRatio;
}
return parseInt(deviceHeight) * factor + 'px';
}
$('#map-canvas').width(effectiveDeviceWidth(.8));
$('#map-canvas').height(effectiveDeviceHeight(.6));
Hope this helps.
The problem was in the css, in eclipse I corrcted the css to this:
html, body, #map-canvas {
height: 100%;
width: 100%;
position: relative;
z-index: -1;
margin: 0px;
padding: 0px
}
I'm new to web languages and I didn't know that I had to write css even for the hmtl and the body tag, as you can see those tag are missing from the code in the question.
im having a problem with a javascript file possibly failing to load or containing errors
HTML Code:
<head>
<title>TEMPLATE</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="author" content="Adam Bullock">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="js/main.js"></script>
</head>
Javascript Code:
/*
* NavBar_ArrowSlider moves an arrow depending on the users move selection on
* the navigation bar
*
* The script takes a position an moves the slider image to a set margin
*
* NavElement - number of list item
* MouseEvent - if users moves out of the name bar the icon will move back to
* its default position
* DefaultPosition - number of list item
*/
function navBar_arrowSlider(navElement, mouseEvent, defaultPosition) {
var arrow = document.getElementById(navBarSlider);
var navElementPosition = ["90px","295px","493px","695px"];
// DEBUG
alert("Positon:" + navElement + " Move Event:" + mouseEvent + " default position:" + defaultPositon);
// END OF DEBUG
if (mouseEvent === "mouseOver") {
var position = navElementPosition[navElement];
arrow.style.marginLeft=navElementPosition;
} else {
var position = navElementPosition[defaultPosition];
arrow.style.marginLeft=navElementPosition;
}
}
im at a lost as to why this is not working, because i cant seem to see any errors atm, bare in mind i have been working solid for the past 14 hours :/ life of a programmer
Any help would be appreciated
Thanks
Bull
You cannot have JavaScript code in <script> tags that loads external JavaScript. You need to break them up:
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">navBar_arrowSlider(0,'moveOver',0)</script>
A <script> element can have either a "src" attribute or JavaScript content, but not both.