I made a simple application in Intel XDK.
When I was testing the application I noticed that they enabled the accelerometer.
For this application it's needed to have only 1 position.
How can I disable the accelerometer?
Thanks in advance.
Its not accelerometer that is causing, its the device orientation that needs to fixed.
Call this API to fix the orientation: intel.xdk.device.setRotateOrientation(ORIENTATION); after intel.xdk.device.ready has fired.
Full documentation is here
Portrait: intel.xdk.device.setRotateOrientation("portrait");
Landscape: intel.xdk.device.setRotateOrientation("landscape");
Both: intel.xdk.device.setRotateOrientation("any");
Below is sample code:
<!DOCTYPE html>
<html>
<head>
<title>XDK</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<script src="intelxdk.js"></script>
<script>
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
function onDeviceReady(){
// set orientation
intel.xdk.device.setRotateOrientation('landscape');
// intel.xdk.device.setRotateOrientation('portrait');
// intel.xdk.device.setRotateOrientation('any');
intel.xdk.device.hideSplashScreen();
}
</script>
<style>
body {font-family:arial;background-color:white}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Locked to Landscape</p>
</body>
</html>
That is possible do it the way next:
Go the project properties.
Build Settings
Orientation
You select, landscape or portrait.
If you emule the project, you see the changes.
use the setRotateOrientation-Method:
To lock the device in portrait mode, use:
intel.xdk.device.setRotateOrientation("portrait");
Works on Android as well as iOS.
See: Documentation
Easier is to go to Build Settings -> Your Platform -> Orientation. That very fast and simple.
Related
I experience a weird behavior on web app added to home screen on Android devices when keyboard appears.
I have a web app:
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
</head>
<body style="overflow-y: scroll">
<div id="red" style="height:200px;width:100%;background-color:red"></div>
<input type="text">
<script>
(function() {
var baseH = window.innerHeight;
window.addEventListener("resize", function() {
if (window.innerHeight<baseH) {
document.getElementById('red').innerHTML = 'KEYBOARD';
} else {
document.getElementById('red').innerHTML = 'NO KEYBOARD';
}
});
})();
</script>
</body>
</html>
If I open the web app, click on the input field, keyboard appears but resize event is not triggered.
If I press recent application on my android device and I click on the current web app to go back in it and then click in input field keyboard appears and resize event is triggered.
How can I make resize event triggered when I open the web app at the first time?
Tested on Nexus4, Nexus5 and Nexus7 all on Android 4.4.x
That's because height=device-height has been set in the viewport meta tag. Removing it should fix the problem.
I didn't seem to find any related answers, SL4A version is R6, Py4A is R5. It's really simple, the app calls webViewShow with a HTML page, it displays properly, the script terminates, but the page does not want to disappear. Can't reach menu, back button doesn't work, only home button, then you need to kill sl4a from app manager if script is running through adb, or kill the script if run from the on-device interpreter. I also tried with http://www.google.com, same happening. The webViewShow returns a NoneType, but still, the page is displayed.
Example:
import android
droid = android.Android()
droid.webViewShow('/sdcard/sl4a/scripts/main_view.html'
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" id="viewport"
content="width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
</head>
<body >
<h1 style="text-align:center">Supervisor</h1>
</body>
</html>
Thanks in advance!
Maybe this could help:
<script>
var droid = new Android();
</script>
<input type="button" value="Exit" onclick="droid.dismiss();" />
I also ran into this problem, and could not find a proper answer. In my case I suspect the script cannot fully 'terminate' until the WebView closes...catch-22. To work around it I added an explicit 'Quit' option to the phone's menu button before spawning the WebView:
# give us a way to escape from the webview
droid.addOptionsMenuItem('Quit','menu-quit',None,"ic_lock_power_off")
Not ideal (the user still has to hunt for the Quit option or know about it in advance), but seems to work taking down both the script and WebView, at least on my phone (SL4A r6, Android 2.3.7).
i agree with pedro. this is the only way to exit a webview from sl4a, confirmed by damon kolher, the last maintainer of the project before it was finally forked.
once you deployed a webview, there is no way to kill it besides from within itself using js.
<script> var droid = new Android(); </script>
Then attach this to an element.
onclick="droid.eventPost('kill', ''); droid.dismiss();
For me I use an eventPost call back to my main script via eventWait.
while True:
event = droid.eventWait().result
if event['name'] == 'kill':
pipe.send('kill')
pipe.close()
i find this to work exceptionally well as i am using bottle to serve up my webview as two seperate processes and needed a way to shutdown my script as soon as the webview was exited.
I am trying to make a mobile app in html 5 using PhoneGap.
For this i am going to use button(like the menu button)
When i am searching in google i can find code, but it seems to me that only doesnt work for me.
My code so far from what i have tried(copied and not working):
http://pastebin.com/0U6ipFa7
Is there something wrong in the code?
Do i need to change something in the config so this will work?
document.write() can only be used when your script is inline with the HTML, for example:
<html>
<head>
<title>Foo</title>
</head>
<body>
<script language="javascript">
document.write("bar");
</script>
</body>
</html>
In your case you should use innerHTML:
<html>
<head>
<title>Foo</title>
<script language="javascript">
function onMenuKeyDown() {
document.getElementById("barCntr").innerHTML += "<h1>Menu</h1>";
}
</script>
</head>
<body>
<div id="barCntr"></div>
</body>
</html>
document.addEventListener("deviceready", function () {
document.addEventListener("menubutton", menuKeyDown, true);
}, false);
function menuKeyDown() {
alert('Menu button pressed.');
}
Refer this phonegap link for reference.
You should install phonegap plugins first.
Follow this tutorial here.
Install phonegap/cordova here and even in Eclipse IDE install phone-gap plugin by going to help --->eclipse market
for getting menu option in the mobile on click on mobile option you are supposed to get like setting ,logout....
menu option...
I need to be able to turn pinch-zoom on and off using the viewport setting on my Android PhoneGap app.
But I'm unable to get viewport to affect pinch-zooming at all when using PhoneGap. I cannot turn on Pinch-zoom in PhoneGap, but when browsing with the Android Native browser to the webpage everything works fine.
I have spent a lot of time searching for a solution, without any result.
I created a very simple index.html for testing, having viewport setting like:
<meta name="viewport" content="user-scalable=yes" />
As some has suggested I have also tried the viewport:
<meta name="viewport" content="user-scalable=1" />
Other solutions for Android PhoneGap would be to enable Android Native Pinch-Zoom which have been suggested here:
zoom in phonegap for android
But this will not work for me, since I need to be able to control the pinch-zoom from javascript. I.e. I need to be able to use javascript to change the viewport setting, to control when pinch-zoom is available (user-scalable=yes / user-scalable=no)
Please observe that other viewport settings like "initial-scale" and "target-densitydpi" seems to work fine. For example setting initial-scale=2 starts the app zoomed.
(I'm currently testing pinch-zoom on PhoneGap 1.4.1 and HTC Desire HD Android 2.3.3)
I'm beginning to think I have missed something obvious, since I find so little information about similar problems...
The minimal index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="user-scalable=yes" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
document.getElementById("devready").innerHTML = "OnDeviceReady fired.";
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Minimal AppLaud App</h2>
<p> LOTS OF TEXT WHICH HAVE BEEN REMOVED HERE </p>
<p><span id="devready">onDeviceReady not fired.</span></p>
</body>
</html>
Appreciate any ideas that you might have!
Are you using PhoneGap Build? It is not possible with PhoneGap Build.
With Desktop PhoneGap, if you haven't already, follow the PhoneGap Getting Started with Android Guide and set your code up in an Eclipse Project.
Once set up, edit your Main Java file, as in the getting started guide:
Add the following imports:
import android.webkit.WebSettings;
import android.webkit.WebSettings.ZoomDensity;
Below the 'super.loadUrl("file:///android_asset/www/index.html");' line that you put in, as part of the start up guide, add:
settings.setBuiltInZoomControls(true);
settings.setSupportZoom(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
Clean and build your project - zooming should now be allowed.
To restrict how far users can zoom in, add a meta tag, like the one below to every HTML page:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1.5, user-scalable=1">
Just confirmed Pinch Zoom as working on the following Android Phones:
Samsung Galaxy S820L Android 4.4
LG Sunset L33L Android 5.0
With PhoneGap CLI (not the service), on Windows:
C:\>phonegap --version
5.4.1
Android SDK Tools Verion:
24.4.1 (from the SDK Manager)
Here is the code for MainActivity.java (platforms\android\src\com\phonegap\helloworld):
package com.phonegap.helloworld;
import android.os.Bundle;
import org.apache.cordova.*;
import android.webkit.WebView;
import android.webkit.WebSettings;
public class MainActivity extends CordovaActivity
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
loadUrl(launchUrl);
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
}
}
And this is in index.html:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=3, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
One additional note - with this call:
settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM);
got this when building:
uses or overrides a deprecated API - Note: Recompile with -Xlint:deprecation for details
Commented it out, and Zoom was not affected.
Thank you guys!!!
Whoever even after this didn't find a solution, I found an answer in Github:
https://github.com/LouisT/cordova-useragent/issues/1
Basically you have to:
import android.webkit.WebView;
And then:
// super.appView.getSettings().setBuiltInZoomControls(true);
// super.appView.getSettings().setDefaultZoom(ZoomDensity.MEDIUM);
// super.appView.getSettings().setSupportZoom(true);
// Instead use this
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
For cordova 5.x.x you need to use the solution from https://github.com/LouisT/cordova-useragent/issues/1
import android.webkit.WebView;
WebView webView = (WebView) appView.getEngine().getView();
WebSettings settings = webView.getSettings();
settings.setBuiltInZoomControls(true);
settings.setDefaultZoom(ZoomDensity.MEDIUM);
settings.setSupportZoom(true);
For me, it was required to change ZoomDensity.MEDIUM to WebSettings.ZoomDensity.MEDIUM
I have exactly the same issue and besides testing different viewport settings, I have tried the suggestions from this: Pinch Zoom in Android with Phonegap and jQUERY Mobile but I can't make it work (testing on Samsung Galaxy SII, Android 4.0.3). However, others have reported successful pinch-zooming using the tips from the link. Hope it helps you too!
The html5 document should begin with:
<!DOCTYPE html>
Without this line did not work the viewport AppBrowser in Phonegap Android
I created a sample script to add and remove metatags from the head. But Android 2.2 doesn't seem to respect it's removal. However it does respect the addition of the metatag on click for example.. How do I get it to respect the removal of the tag and revert to the default viewport through javascript?
<script type="text/javascript">
$(document).ready(function(){
function initMeta(){
var headID = document.getElementsByTagName("head")[0];
var metaNode = document.createElement('meta');
metaNode.name = 'viewport';
metaNode.content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
metaNode.id = 'metatag';
headID.appendChild(metaNode);}
function closeMeta(){
$("#metatag").remove();}
$("#add").click(function(){initMeta();alert("meta opened");});
$("#del").click(function(){closeMeta();alert("meta closed");});
});
</script>
<input name="add" type="button" value="add metatag" id="add"/>
<input name="del" type="button" value="delete metatag" id="del"/>
I note this behavior in iOS Safari too.
You are actually removing the meta tag (verifiable through DOM - Try alerting $("#metatag").length after removal)
The problem is the viewport itself does not respond to the absence of content in this tag. If you update the contents or re-add the meta tag with new contents, you should see it manifest on your screen. But by simply removing the meta tag, the UA seems to think "No change necessary" as it's not getting any explicit instructions there.
Hope that helps! Your question / example helped me realize this was even possible!