iOS select image from camera roll Cordova - html

I have a jqm+phonegap application running on cordova 2.9.0 for ios platform.
On android, the following code worked, but isn't working on iOS...
JS:
function getImage() {
navigator.camera.getPicture(uploadPhoto, function(message) {
alert('Get Picture Failed. Please Try Again.');
},{
quality: 50,
destinationType: navigator.camera.DestinationType.FILE_URI,
sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
}
);
}
function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey="file";
options.fileName=curClub+imageURI.substr(imageURI.lastIndexOf('/')+1);
options.mimeType="image/jpeg";
var params = new Object();
params.value1 = "test";
params.value2 = "param";
params.clubID = curClub ;
options.params = params;
options.chunkedMode = false;
var ft = new FileTransfer();
ft.upload(imageURI, "url", win, fail, options);
}
HTML:
<div data-role = "button" onClick = "getImage();" >Upload Logo</div>
If i test the getImage() function by adding an alert inside, it works, so i know that it is going there. What else am I doing wrong?
Do I need to add any permissions in config.xml?
Or what different code is required to make it work on ios?

Related

Error in Apple's TVML documentation? pushPage function doesn't work

UPDATED 6/1/17 with the correct code pasted at the bottom.
I'm working through Apple's TVML guide, section 2: Navigating Between Pages. (https://developer.apple.com/library/content/documentation/TVMLKitJS/Conceptual/TVMLProgrammingGuide/NavigatingBetweenPages.html#//apple_ref/doc/uid/TP40016718-CH9-SW1)
Everything is fine until the last bit (Listing 4-4), which allow you to use the menu button on the remote to return to the previous page. Whenever I try it, my sample app simply won't load:
var baseURL;
function loadingTemplate() {
var template = '<document><loadingTemplate><activityIndicator><text>Loading</text></activityIndicator></loadingTemplate></document>';
var templateParser = new DOMParser();
var parsedTemplate = templateParser.parseFromString(template, "application/xml");
return parsedTemplate;
}
function getDocument(extension) {
var templateXHR = new XMLHttpRequest();
var url = baseURL + extension;
var loadingScreen = loadingTemplate();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushPage(templateXHR.responseXML, loadingScreen);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
}
function pushPage(page, loading) {
var currentDoc = getActiveDocument();
navigationDocument.replaceDocument(page, loading);
}
App.onLaunch = function(options) {
baseURL = options.BASEURL;
var extension = "templates/InitialPage.xml";
getDocument(extension);
}
What am I missing?
This works:
var baseURL;
function loadingTemplate() {
var template = '<document><loadingTemplate><activityIndicator><text>Loading</text></activityIndicator></loadingTemplate></document>';
var templateParser = new DOMParser();
var parsedTemplate = templateParser.parseFromString(template, "application/xml");
navigationDocument.pushDocument(parsedTemplate);
return parsedTemplate;
}
function getDocument(extension) {
var templateXHR = new XMLHttpRequest();
var url = baseURL + extension;
var loadingScreen = loadingTemplate();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushPage(templateXHR.responseXML, loadingScreen);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
}
function pushPage(page, loading) {
navigationDocument.replaceDocument(page, loading);
}
App.onLaunch = function(options) {
baseURL = options.BASEURL;
var extension = "templates/InitialPage.xml";
getDocument(extension);
}
Yes, I believe there is a mistake. They should have kept the line
navigationDocument.pushDocument(parsedTemplate);
at the end of the loadingTemplate method.
The idea is to push the loading page, then replace it with the new page.
On a side note, the line
var currentDoc = getActiveDocument();
has no business here. This code was obviously not tested or reviewed.

CaptureElement preview not available sometimes

I have problem with initialization camera on Windows Universal Apps. This code works and never throw any exception, but i have wrapped it into dialog control. Problem is sometimes (1/10 dialog openings) i don't see preview from camera. Have you any idea how to fix that or at least check if preview is displayed?
private async Task InitCameraAsync()
{
var devices = await DeviceInformation.FindAllAsync(DeviceClass.VideoCapture);
var backCam = devices.FirstOrDefault(q => q.EnclosureLocation != null && q.EnclosureLocation.Panel == Windows.Devices.Enumeration.Panel.Back);
var mediaCapture = new MediaCapture();
if (backCam != null)
{
await mediaCapture.InitializeAsync(new MediaCaptureInitializationSettings()
{
VideoDeviceId = backCam.Id,
AudioDeviceId = String.Empty,
StreamingCaptureMode = StreamingCaptureMode.Video,
PhotoCaptureSource = PhotoCaptureSource.VideoPreview
});
}
else
{
await mediaCapture.InitializeAsync();
}
CameraControl.Source = mediaCapture;
SetImageEncodingProperties(); // get encoding properties to save images
await SetPreviewResolutionAsync();
await CameraControl.Source.StartPreviewAsync();
}
}
Are you sure that you are calling the function from the UI thread to access the camera for the API to run reliably?
https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.core.coredispatcher.runasync.aspx

three.js fog on chrome mobile not working

Well I have a scene and I add some fog to it and the result is the fog is filling my entire screen with that color, like having a plain black background.
Chrome version: 39.0.2171.93
Mobile device: nexus 5
Android: lolipop
Here is my code:
Demo.prototype.initializeScene = function( settings ) {
var defaults = {
fogColor: 0x000000,
fogIntensity: 0.0005,
near:50000,
far:120000
};
this.options.scene = $.extend(true, defaults, settings);
this.scene = new THREE.Scene();
this.scene.fog = new THREE.FogExp2( this.options.scene.fogColor, this.options.scene.fogIntensity );
}
The code works fine on desktop and other mobile devices.
If I remove the fog everything seems to work great.
Furthermore everything takes place inside a dome (json) mesh created with blender and then loaded, here is the code in case it's a material issue.
Demo.prototype.initializeEnvironment = function() {
var that = this;
loadMesh("geometry/dome.json", function(geometry, materials) {
var materials = [
new THREE.MeshLambertMaterial({ color: 0x3333ff, shading: THREE.FlatShading, overdraw: false}),
new THREE.MeshLambertMaterial({ color: 0x2e2eff, wireframe: true})
];
that.dome = new THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
that.dome.position.set(0,0,0);
that.dome.scale.set(500,500,500);
that.scene.add(that.dome);
});
}
Finally the renderer code:
Demo.prototype.initializeRenderer = function( settings ) {
var defaults = {
init :{
antialias: true,
alpha: true,
autoClear: false
},
clearColor: 0x000000,
clearColorIntensity: 1
};
this.options.renderer = $.extend(true, defaults, settings);
this.renderer = new THREE.WebGLRenderer( this.options.renderer.init );
this.renderer.setClearColor( this.options.renderer.clearColor, this.options.renderer.clearColorIntensity );
this.renderer.setSize( this.options.generic.container.clientWidth, this.options.generic.container.clientHeight );
this.options.generic.container.appendChild( this.renderer.domElement );
}
I am using Three.js r73 and hit the same issue on my Nexus 4 with Android 5. Fog seems to work again after disabling antialiasing.
You can achieve the same anti-aliasing effect by setting the renderer's pixelRatio. Here's what I do:
renderer.setPixelRatio((window.devicePixelRatio || 1) * 2);

How to include a link in the HTML5 notification?

I would like to be able to set a link/permalink to each notification, so when user clicks on it; then he is taken to the permalink location,
I've seen this answer which has a solution that's a little bit different because static link is used,
I would like to, somehow:
var noti = window.webkitNotifications.createNotification(
'http://funcook.com/img/favicon.png',
'HTML5 Notification',
'HTML5 Notification content...',
'http://mycustom.dynamic.link.com/' /* invented code */
)
noti.onclose = function(){ alert(':(') };
noti.onclick = function(){
window.location.href = $(this).url; /* invented code */
};
noti.show();
Any chance? (I really don't like the static html file solution... I would like to keep this syntax)
How about something like this?
var createNotificationWithLink = function(image, title, content, link) {
var notification = window.webkitNotifications.createNotification(image, title, content);
notification.onclose = function() {
alert(':(');
};
notification.onclick = function() {
window.location.href = link;
};
return notification;
};
Now you can call createNotificationWithLink whenever you want to create a notification:
var noti = createNotificationWithLink(
'http://funcook.com/img/favicon.png',
'HTML5 Notification',
'HTML5 Notification content...',
'http://mycustom.dynamic.link.com/'
);
noti.show();
You can also move noti.show(); into the createNotificationWithLink function if you like (notification.show();). I don't know if you want the notification to be shown automatically when you create it...
You can pass a data property that you can read from within the onclick event handler as e.target.data.
var notification = new window.Notification("Hello!",
{
body: "Hello world!",
data: "https://www.example.com/?id=" + 123
});
notification.onclick = function(e) {
window.location.href = e.target.data;
}
noti.onclick = function() {
window.open("http://www.stackoverflow.com")
};
More on how to use window.open: http://www.w3schools.com/jsref/met_win_open.asp4
HTML5 Notification Resource: http://www.html5rocks.com/en/tutorials/notifications/quick/ (If this doesn't answer you're question)
For Each one you could have:
var noti1 = window.webkitNotifications.createNotification(
'http://funcook.com/img/favicon.png',
'HTML5 Notification',
'HTML5 Notification content...',
var noti2 = window.webkitNotifications.createNotification(
'http://funcook.com/img/favicon.png',
'HTML5 Notification #2',
'HTML5 Notification #2 content...',
etc
and then
noti1.onclick = function() {
window.open("http://www.stackoverflow.com")
};
noti2.onclick = function() {
window.open("http://www.example.com")
};
hope that helps :)
You can add the url as a property to 'noti', then call that property with this.yourpropertyname
example:
noti.myurl = 'http://stackoverflow.com';
...
noti.onclick = function(){
window.location.href = this.myurl;
};
hope this helps.
For anyone, who needs to open a new browser window(tab), but does not want the parent window(tab) to be replaced and focused upon notification click, this code snippet will do the trick:
var notification = new window.Notification("Hello!", {
body: "Hello world!",
data: "https://www.google.com/"
});
notification.onclick = function(event) {
event.preventDefault(); //prevent the browser from focusing the Notification's tab, while it stays also open
var new_window = window.open('','_blank'); //open empty window(tab)
new_window.location = event.target.data; //set url of newly created window(tab) and focus
};

Use other source of sound effect when using firefox beside mp3

I'm trying to make a menu with sound after user clicks it. It works well in Chrome, safari, and even IE, but not Mozilla Firefox. I use mp3 file for the sound which can't run on firefox. Here's the code
function loadSound (src) {
var sound = document.createElement("audio");
if ("src" in sound) {
sound.autoPlay = false;
}
else {
sound = document.createElement("bgsound");
sound.volume = -10000;
sound.play = function () {
this.src = src;
this.volume = 0;
}
}
sound.src = src;
document.body.appendChild(sound);
return sound;
}
$(document).ready(function () {
var sound = loadSound("<?=base_url()?>sound/testing.mp3"); // preload
$(".main_nav a").click(function(){
var ids = $(this).attr("id").split("-");
var url = ids[2];
sound.play();
setTimeout (function(){window.location = url;}, 2000);
return false;
});
});
What type of audio file works in firefox? How do I change the source file when a user use firefox?
Ok, I understand your problem and I have a solution.
You could use this function that I make:
function getSupportedAudio(){
var testEl = document.createElement( "audio" ), mp3, ogg;
if ( testEl.canPlayType ) {
mp3 = "" !== testEl.canPlayType( 'audio/mpeg;' );
ogg = "" !== testEl.canPlayType( 'audio/ogg' );
}
if(mp3){
return ".mp3";
}
else{
return ".ogg";
}
}
In your function loadSound(src) use this:
sound.src = src+getSupportedAudio();
document.body.appendChild(sound);
And when you call the loadSound function, don't send the audio format in the parameter (but you need to have both files, ogg and mp3, in the same folder and with the same name):
var sound = loadSound("<?=base_url()?>sound/testing"); // preload