Develop Reference

Why *ngIF is not working in Cordova Angular?

I have been stucked in this for a while. It is confirm that this.progressBarValue is changed to true. But the progress bar is not displaying. Can someone help me with this thanks in advance.
some-component.html
<div class="progressBar">
<mat-progress-bar class="fileProgress" mode="indeterminate" *ngIf="progressBarValue">
</mat-progress-bar>
</div>
some-component.ts
confirmConversion() {
this.progressBarValue = true;
console.log(this.progressBarValue)
var filepath = this.filePath;
var fileextension = this.settingsExtension;
new Promise((resolve, reject) => {
window.ConvertMedia(filepath, fileextension, resolve, reject);
}).then((message) => {
console.log(message);
});}
It is working(Progress bar is displayed) if I don't call that Cordova API. I also tried this using some methods given below but it didn't worked.
this.zone.run(() => this.progressBarValue = true)
console.log(this.progressBarValue)
this.changeDetector.detectChanges() & this.changeDetector.markForCheck()
Note: ProgressBar is displayed if I update this.progressBar = true inside
.then((message) => {console.log(message);});

I would try to add *ngIf to container - div like that:
<div class="progressBar" *ngIf="progressBarValue">
<mat-progress-bar class="fileProgress" mode="indeterminate">
</mat-progress-bar>
</div>
If default value for progressBarValue is false mat-progress-bar could not load properly.
Write if it helps or still nothing ;)
Also you can add to your html code
eg. :
<span> {{progressBarValue}} </span>
to keep track of value and be sure if it's even changing

Prevent standard action when you select [CSS, JS, android]

I have made an app in android webview and I want that something can be copied. So when you press a button you will have something copied to your clipboard.
I have tried "clipboard.js" works browers but not on android. So I used this javascript:
var copyXBT = function () {
var theTheCopyXBTAdr = $('#theToCopyXBT');
theTheCopyXBTAdr.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
};
But when you pressed the input type text will get a blue color,.. and blue border(android webview yellow) and on android your keyboard will pop up.
I use this css styling to "hide" it. Because I can't say display none. If I do that I won't work.
#theToCopyETH{
color: white;
border: 0px solid white;
}
::selection{
background: white;
color: white;
}
This is a piece of my HTML:
<button class="btn btn-coinchecker" id="copyETH">Copy ETH address</button><button class="btn btn-coinchecker" data-toggle="modal" data-target="#showETHQR">Click me to get the QR-code</button>
<input type="text" id="theToCopyETH" value="*********************">
See fiddle for example (please open in Google Chrome)
So my question is how to prevent the pop-up of the keyboard and get rid of the yellow-border in android (google chrome on desktop is that blue)
Thanks in advance for helping me!

I found the answer.
What do I need to do to hide my keyboard is this js:
enter var hidekeyboard = function (e) {
e.attr('readonly', 'readonly'); // Force keyboard to hide on input field.
e.attr('disabled', 'true'); // Force keyboard to hide on textarea field.
setTimeout(function() {
e.blur(); //actually close the keyboard
// Remove readonly attribute after keyboard is hidden.
e.removeAttr('readonly');
e.removeAttr('disabled');
}, 100)
};
I need to add that after my selection has happend otherwise I won't work.
My copyETH looks like this then:
var copyETH = function () {
var theTheCopyETHAdr = $('#theToCopyETH');
theTheCopyETHAdr.removeClass('toggleDisplay');
theTheCopyETHAdr.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
hidekeyboard(theTheCopyETHAdr);
theTheCopyETHAdr.addClass('toggleDisplay');
};
So you can see I do also a removeClass and addClass. Because If I only use the hidekeyboard you can see the selection but with his css class it's gone + no-one can change the input field.
Here to see the solved fiddle

This should be enough to hide the input and prevent any activity when it's clicked/tapped, but not break your JS:
#theToCopyETH {
visibility: hidden;
pointer-events: none;
}

Cannot read property 'getPicture' of undefined - ionic camera

this code returns:
Cannot read property 'getPicture' of undefined
Have no idea what im doing wrong, can you please help me with the code?
My App:
angular.module('Todo', ['ionic', 'Todo.controllers','ngStorage',
'Todo.services', 'ngCordova'])
my Controller:
.controller('profileEditCtrl', function($scope,Camera, $localStorage,
$cordovaCamera)
{
$scope.$storage = $localStorage.$default({ data:[]});
$scope.takePicture = function()
{
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.DATA_URL });
function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src ="data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Failed because: ' + message);
}
}});

Your code is correct, just add an html button with ng-click="takePicture()".
There is no problem here, It's sure that the browser "cannot read
property 'getPicture' of undefined" because it has no configuration
for a mobile camera that you defined, which means you should test your application on
a real device using:
> ionic run android.
Notice that the new update of Google Chrome has a new feature which
helps your test your device on the browser if it is connected to the
PC/laptop, for testing go to chrome's navigation panel >> More tools >> Inspect devices
or just go to this link:
chrome://inspect/#devices
I'm sure your camera will function normally if you have the plugin cordova plugin add org.apache.cordova.camera installed in the app,
I hope this helps you.

After trying various solutions with no luck for my cordova project, I simply went ahead to use the built-in JavaScript APIs. Essentially:
async function startCapturing() { // get ready to shoot
await getPermission('android.permission.CAMERA');
let stream = await navigator.mediaDevices.getUserMedia({ video: {width: 480, height: 320, facingMode:'environment' }, audio: false });
let video = document.getElementById("pVideo"); // a <video> element
video.srcObject = stream;
video.play();
video.style.display = "block";
}
function shootPhoto(){ // take a snapshot
let video = document.getElementById("pVideo");
let canvas = document.getElementById("pCanvas"); // a <canvas> element
let context = canvas.getContext('2d');
context.drawImage(video,0,0,480,320);
document.getElementById('fsPhotoI').src = Photo.current.src = canvas.toDataURL('image/png');
Photo.current.changed = Profile.current.changed = true;
video.style.display = "none";
}
In particular, some plugins did not work for me because they could't use the Android rear camera right away. The following in getUserMedia(...) does the trick:
facingMode:'environment'
Also make sure you have the CAMERA permission in your AndroidManifest.xml.

Jquery Mobile Global Popup Background

i got a problem with my app.i'm developing an app with cordova & jquery mobile.
Following the code on jquery mobile master i found that code
function openPopup(idPopup, onTimeout) {
var popupContent = '<div data-role="content" data-theme="a" style="border:0px;" class="ui-corner-bottom ui-content centerContent">' +
'<h3 class="ui-title" id="myTitle">Caricamento</h3>' +
'<img src="img/load_shop33sell.gif"/></div>';
var popup = '<div data-role="popup" id="popup-' + idPopup + '" data-overlay-theme="b" data-theme="a" class="ui-content">' + popupContent + '</div>';
$.mobile.activePage.append(popup).trigger("pagecreate");
$("#popup-" + idPopup).on({
popupbeforeposition: function () {
$('.ui-popup-screen').off();
}
});
var fallback = setTimeout(function () {
$("#popup-" + idPopup).popup("open");
}, 3000);
$("#popup-" + idPopup).popup("open");
clearTimeout(fallback);
callback = setTimeout(function () {
$("#popup-" + idPopup).popup('close');
if (onTimeout && typeof (onTimeout) === "function") {
onTimeout();
}
}, 20000);
}
With this code, i am able to open a popup without needing to include a
<div data-role="popup">..../<div>
in each page i create.I just modified a bit adding the popupbeforeposition event to make the popup undismissable by clicking on the background.
Well, it works fine but i got a problem. Randomly in my first page this happens
Seems like the popup opens before it get the right position. In addition i have a second page which is scrollable, and i always have this situation. If i try to scroll up to the top of the page, i have half of the screen black, as in first picture.
What could be the problem?
Thanks in advance, and sorry for my english :)

As you mentioned it is due to data-overlay-theme="a". But actually it should works in good way..thinking that this is due to $('.ui-popup-screen').off();
you can observe here
Prevent JQuery Mobile from closing a popup when user taps outside of it
if you need an alternative way for black background you can do this ..
Add div <div id="overlaypage"></div> like this inside <div data-role="page">
HTML:
<div data-role="page">
<div id="overlaypage"></div>
<div id="header"></div>
</div>
CSS:
.overlaycont {
background:#000;
bottom:0;
left:0;
position:fixed;
right:0;
top:0;
z-index:100;
opacity:.6
}
jQuery:
When you try to click to open a popup addclass
$("#overlaypage").addClass("overlaycont");
When you closing the popup remove class
$("#overlaypage").removeClass("overlaycont");
Working demo: http://jsfiddle.net/nPeaV/7421/

ok, i solved the problem combining the two answers, this is my function to open popup
function apriPopup(idPopup, onTimeout) {
$(".ui-navbar").css('display','none');
var popupContent = '<div data-role="content" data-theme="a" style="border:0px;" class="ui-corner-bottom ui-content centerContent">' +
'<h3 class="ui-title" id="myTitle">Caricamento</h3>' +
'<img src="img/load_shop33sell.gif"/></div>';
var popup = '<div data-role="popup" data-dismissible="false" id="popup-' + idPopup + '" data-theme="a" class="ui-content">' + popupContent + '</div>';
$.mobile.activePage.append(popup).trigger("create");
//$("#popup-" + idPopup).on({
// popupbeforeposition: function () {
// $('.ui-popup-screen').off();
// }
//});
var fallback = setTimeout(function () {
$("#overlaypage").addClass("overlaycont");
$("#popup-" + idPopup).popup("open");
}, 3000);
$("#overlaypage").addClass("overlaycont");
$("#popup-" + idPopup).popup("open");
clearTimeout(fallback);
callback = setTimeout(function () {
$(".ui-navbar").css('display','block');
$("#overlaypage").removeClass("overlaycont");
$("#popup-" + idPopup).popup('close');
if (onTimeout && typeof (onTimeout) === "function") {
onTimeout();
}
}, 20000);
}
as you can see i have commentend the $('.ui-popup-screen').off(); , added a data-dismissable="false"
and i have used the overlaycont css style suggested by dileep.
in my index, as child of body,i added a <div id="overlaypage"></div> and $("#overlaypage").addClass("overlaycont");,
in this way popup is undismissabile by cliking outside of it, and background is displayed correctly.
such a pain!

PhoneGap Conversion - HTML to .apk

I am turning a HTML app into a .apk using https://build.phonegap.com and everything works great appart from my file selector.
<input name="file" type="file" id="file">
I want to be able to select images only (it doesnt matter if it can select more - but its the images I am looking for) from both camera and file system..
In the web version http://carbonyzed.co.uk/websites/assent/1/photos.html this works great from my phone, but when converted to .apk, this functionality is lost, and I can't seem to find anything on here, or online relating to this issue.

At least for me, the input file doesn't work in Phonegap.
You need use the Phonegap API to get picture and select the source where come from, like photolibrary, camera or savedphotoalbum.
See more info about camera.getPicture: http://docs.phonegap.com/en/2.1.0/cordova_camera_camera.md.html#camera.getPicture
and about Camera.PictureSourceType parameter of cameraOptions method: http://docs.phonegap.com/en/2.1.0/cordova_camera_camera.md.html#cameraOptions

Ended up using the Child Browser system like so
In the head
<script src="childbrowser.js"></script>
in the body
<button class="button-big" onClick="window.plugins.childBrowser.showWebPage('URL_TO_GO_HERE',
{ showAddress: false });" style="width: 100%;">UPLOAD PHOTOS</button>
which has a standard fileuploader like
<input name="file" type="file" id="file">
then it let me select from root storage, works in phonegap 2.2 onwards on both iOS and Android OS
To capture an image I used this in the head
<script type="text/javascript" charset="utf-8" src="json2.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 captureImage() {
// Launch device camera application,
// allowing user to capture up to 2 images
navigator.device.capture.captureImage(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>
and this in the body
<input type="button" class="button-big" style="width: 100%;" onclick="captureImage();" value="TAKE PHOTO">
copy and past and it works a dream,
Check it out in this image
any questions, just email comment,
or email me... support#carbonyzed.co.uk