I am trying to disable animations in Ionic Framework for Android OS. I have tried:
<body ng-app="myApp" animation="{'no-animation': ionic.Platform.is('android')}">
This doesn't work. When I change animation to ng-animation, it adds the class "no-animation" to navbar but doesn't disable the animation. Is there any way I can target specific OSes in Ionic Framework?
Check out Ionic.Platform: http://ionicframework.com/docs/api/utility/ionic.Platform/ Also, the Device plugin in general for Cordova could help.
I used some vanilla javascript to add the attribute which worked. Although I am not so sure if it is the proper way to do. Here is the code added to index.html file:
<script>
var noAnimation = ionic.Platform.is('android'),
body = document.getElementById("bd"),
navbar = document.getElementById("nb");
if(noAnimation) {
body.setAttribute('animation', 'no-animation');
navbar.setAttribute('animation', 'no-animation');
}
</script>
Related
There are multiple questions with answers related to my problem but unfortunately, none worked for me.
I have to detect the enter pressed on android keyboard and change focus from current matInput to next matInput.
I have tried keyup.enter, keydown and keypress but none worked for me. I implemented directive approach but doesn't trigger method when I am debugging app on Android device. Although, it does trigger the method on browser.
Here is what I am using.
HTML:
<mat-form-field class="ib-input-container-width">
<input matInput data-dependency="lastName" (keypress)="onChange($event.keyCode)" (keyup.enter)="handleNext('lastName')" [formControl]="form.get('FirstName')" type="text" >
</mat-form-field>
<mat-form-field class="ib-input-container-width" >
<input #lastName id="lastName" matInput [formControl]="form.get('LastName')" type="text">
TS:
handleNext(elementId){
let nextElement = document.getElementById(elementId);
console.log(nextElement);
nextElement.focus();
}
onChange(event){
console.log(event.keycode);
}
PS: I am on a working progressive web app using Cordova.
Update
I have tried solution from https://stackoverflow.com/a/28103608/3081929
But ng-change doesn't work either.
the code looks correct,
before running your codova app on android make sure you have compiled the angular project using angular cli and output should be set to www folder
Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts a new camera app and totally moves away from my html web app before returning to it. I need something embedded in my app
Thanks
You can install mbppower/CordovaCameraPreview plugin (for android,ios) in your Cordova/phonegap application that allows camera interaction from HTML code. A really amazing plugin it is..
You can access Features such as:
Start a camera preview from HTML code.
Drag the preview box.
Set camera color effect (Android and iOS),Send the preview box to back of the HTML content,Set a custom position for the camera preview box,Set a custom size for the preview box and Maintain HTML interactivity.
Or you can also use donaldp24/CanvasCamera Plugin for your application if it fits to your requirements.Its supported in both android and iOS platforms. I have observed, for iOS its working fine but in android it isn't working.
Now you can install CordovaCameraPreview plugin through Online PhoneGap too. So without using CLI you can directly use it through this by adding
<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />
in your config.xml file and create ApplicationTemplate.apk/.ipa. For more information regarding this you can ask me. Happy to help.
UPDATE:10th Oct 2017
It used to work well during that time but, donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version.
I did it for one of my projects. Check out navigator.getUserMedia(). There are a tonne of things you can do with your webcam and browser, including AR games! Here's just a basic example:
HTML:
<html>
<head>
</head>
<body>
<form><input type='button' id='snapshot' value="snapshot"/></form>
<video autoplay></video>
<canvas id='canvas' width='100' height='100'></canvas>
<script type="text/javascript" src="findit.js"></script>
</body>
</html>
findit.js
var onFailSoHard = function(e)
{
console.log('failed',e);
}
window.URL = window.URL || window.webkitURL ;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var video = document.querySelector('video');
if(navigator.getUserMedia)
{
navigator.getUserMedia({video: true},function(stream) {
video.src = window.URL.createObjectURL(stream);
},onFailSoHard);
}
document.getElementById('snapshot').onclick = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video,0,0);
}
Live Demo:
A personal project
More Resources, this is what I used:
Webcam Access
Update:
This solution is valid only for front camera if our device has one. It's basically a "webcam" solution. Not sure if it'll work for your case. Just in case, check out the resources.
You can use camera.getPicture from cordova-plugin-camera or navigator.device.capture.captureVideo from cordova-plugin-media-capture.
var getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia
|| navigator.device.capture.captureVideo
|| navigator.camera
|| camera.getPicture;
Hope it helps.
There is no direct access to the Camera app using javascript. You can either write a custom PhoneGap (Cordova) plugin to do that.
I know there are questions on this issue, but I tried everything and do not fix my mistake! X__X
I have a mobile application (astronomical) for Android and when I use to load another html, in the transition makes a white flash that I can't remove (I tried removing the transitions "slide" to use and nothing, background: # 000000! important, etc. ..). I use jQuery mobile 1.3.1 and Phonegap 2.9.0.
I'll share a video where you can see better the problem: http://www.youtube.com/watch?v=ykjCN03nOCM
Any help??
Regards,
Daniela.
CSS :
.ui-page {
-webkit-backface-visibility: hidden;
}
Code :
The CSS solution from this thread didn't work for me (Android 2.x).
I disabled the transistion with data-transition="none" in all links and everything was ok. It should also work when set on page-level, but it didn't work for me (jQuery Mobile 1.0). This is the code:
// turn off animated transitions for Android
if (navigator.userAgent.indexOf("Android") != -1)
{
$("a").attr("data-transition", "none");
}
Another (the better) way would be to set the default transitions for jQuery Mobile:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
iPhone performs the transitions hardware-accelerated, while the other platforms perform it per software. This explains why only iPhone performs smooth transitions.
Try this one here: here
Maybe your transitions will be more smoothly then.
Is there a view of showing the live camera view inside html ( e.g. embedded in a div ) before we snap a picture using JavaScript? I have tried PhoneGap but it totally starts a new camera app and totally moves away from my html web app before returning to it. I need something embedded in my app
Thanks
You can install mbppower/CordovaCameraPreview plugin (for android,ios) in your Cordova/phonegap application that allows camera interaction from HTML code. A really amazing plugin it is..
You can access Features such as:
Start a camera preview from HTML code.
Drag the preview box.
Set camera color effect (Android and iOS),Send the preview box to back of the HTML content,Set a custom position for the camera preview box,Set a custom size for the preview box and Maintain HTML interactivity.
Or you can also use donaldp24/CanvasCamera Plugin for your application if it fits to your requirements.Its supported in both android and iOS platforms. I have observed, for iOS its working fine but in android it isn't working.
Now you can install CordovaCameraPreview plugin through Online PhoneGap too. So without using CLI you can directly use it through this by adding
<gap:plugin name="com.mbppower.camerapreview" version="0.0.8" source="plugins.cordova.io" />
in your config.xml file and create ApplicationTemplate.apk/.ipa. For more information regarding this you can ask me. Happy to help.
UPDATE:10th Oct 2017
It used to work well during that time but, donaldp24/CanvasCamera is no longer maintained and currently fails build with the latest Cordova version.
I did it for one of my projects. Check out navigator.getUserMedia(). There are a tonne of things you can do with your webcam and browser, including AR games! Here's just a basic example:
HTML:
<html>
<head>
</head>
<body>
<form><input type='button' id='snapshot' value="snapshot"/></form>
<video autoplay></video>
<canvas id='canvas' width='100' height='100'></canvas>
<script type="text/javascript" src="findit.js"></script>
</body>
</html>
findit.js
var onFailSoHard = function(e)
{
console.log('failed',e);
}
window.URL = window.URL || window.webkitURL ;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
var video = document.querySelector('video');
if(navigator.getUserMedia)
{
navigator.getUserMedia({video: true},function(stream) {
video.src = window.URL.createObjectURL(stream);
},onFailSoHard);
}
document.getElementById('snapshot').onclick = function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(video,0,0);
}
Live Demo:
A personal project
More Resources, this is what I used:
Webcam Access
Update:
This solution is valid only for front camera if our device has one. It's basically a "webcam" solution. Not sure if it'll work for your case. Just in case, check out the resources.
You can use camera.getPicture from cordova-plugin-camera or navigator.device.capture.captureVideo from cordova-plugin-media-capture.
var getUserMedia = navigator.getUserMedia
|| navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia
|| navigator.msGetUserMedia
|| navigator.device.capture.captureVideo
|| navigator.camera
|| camera.getPicture;
Hope it helps.
There is no direct access to the Camera app using javascript. You can either write a custom PhoneGap (Cordova) plugin to do that.
Im having a problem with Jquery Mobile after compiling it with Phonegap.
Here is a code snippet:
function game() {
$.mobile.changePage( "#game", { transition: "slideup"} );
}
Page 1:
<a onclick="game()" data-role="button">Start game</a>
Page2:
<div data-role="page" id="game" data-theme="a">
...
</div>
When i click the link "Start Game" it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.
Anyone able to help? :)
Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.
Transitions can be turned off like this:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/
After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.
Solution found, thanks to Gajotres.
I found that i had to include the transition disable script before jquery mobile, which in terms are a bit weird. It would be more logical to include it after, however it works now, and im happy :)
The solution:
<script src="js/disableTransition.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>