Background
I'm using Cordova to deploy javascript to iOS devices. Along with this, I'm using the CDVSplashScreen plugin in order to show my own splashscreen.
What I need help with
I want to be able to lock only the Launch/Splash Screens and then allow the app to reorient as it will for all other views.
What I've tried
I've added the following to my config.xml file:
<preference name="SplashScreen" value="screen" />
<preference name="orientation" value="portrait" />
<preference name="SplashScreenDelay" value="1000000" />
And I added the following code to both the CDVSplashScreen.m and CDVViewController+SplashScreen.m files:
-(NSUInteger)supportedInterfaceOrientations {
return UIInterfaceOrientationMaskPortrait;
}
The Results:
What I've added to the config.xml file appears to have locked the Launch Screen in portrait mode...however, after the SplashScreen appears, the view will rotate freely to landscape mode.
I don't believe that the supportedInterfaceOrientations function is doing anything at all where it's at - it only works in the mainViewController (but then the entire app is stuck in Portrait mode).
My Plea
Has anyone used this unique conglomeration of plugins before with the same requirement of a locked SplashScreen before? How did you solve it?
I haven't checked, but you could try the following:
Lock the orientation in Xcode to your needs. (Xcode -> General -> Deployment info)
Put an event handler in your javascript:
window.addEventListener("orientationchange", function() {
// Do some DOM-/CSS-manipulation depending on the value in window.orientation
}, false);
Or you could use CSS to make changes:
#media screen and (orientation: portrait) {
/* rotate your container */
}
#media screen and (orientation: landscape) {
/* rotate your container */
}
But I'm not sure that the device is firing the event.
Thank you guys for your suggestions. I ended up setting the orientation in the following function in the MainViewController:
- (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
self.acceptedOrientation = UIInterfaceOrientationMaskPortrait;
}
return self;
}
This seemed to lock the SplashScreen in portrait mode for me.
Related
I've used a plugin to try and lock the screen orientation within my PhoneGap app:
cordova-plugin-screen-orientation
Within my app page I have the following code extract:
// Once DOM is loaded...
$(document).on('pagecreate', function() {
window.screen.lockOrientation('portrait'); // Seems to set variable but not LOCK screen?
var orient = screen.orientation; // Works
alert(orient); // Works
window.addEventListener("orientationchange", function(){ // Works
alert(screen.orientation); // e.g. portrait // Works
});
... Other code etc.
As you can see from the comments the plugin seems to be installed correctly as I am successfully calling portrait-primary, landscape-secondary etc. as I rotate my phone. The issue seems to be the function isn't LOCKING the screen?
Any help would be GREATLY appreciated!
Try setting this attribute in your config.xml.
<preference name="Orientation" value="portrait" />
I'm a newbie to Ionic framework. Is there a way to open the menu on the landscape mode, closing it while it changes to portrait mode and vice versa similar to this one, Hiding the Ionic Framework Header based on screen orientation.
By using,
window.addEventListener("orientationchange", function(){
});
I can able to detect the orientation change but couldn't find a way to hide/show the menu. And is there way to do this using CSS'
/* portrait */
#media screen and (orientation:portrait) {
}
/* landscape */
#media screen and (orientation:landscape) {
}
And if both are possible, which is the preferred way of handling this situation?
You can use the service $ionicSideMenuDelegate to open or close the menu programatically.
.controller('AppCtrl', function($scope, $ionicSideMenuDelegate) {
// ˆˆˆˆ injected ˆˆˆˆ
window.addEventListener("orientationchange", function(){
$ionicSideMenuDelegate.toggleLeft(window.orientation !== 0);
});
})
Remember to inject the service $ionicSideMenuDelegate in your controller. In this example I injected $scope and $ionicSideMenuDelegate in the AppCtrl.
This works on iOS and Android!
I have created a small game and created build using Intel XDK. I installed it in device and can see the splash screen. I tried what is mentioned in other topics but unable to remove the splash screen.
function onDeviceReady(){
if( navigator.splashscreen && navigator.splashscreen.hide ) {
navigator.splashscreen.hide();
}
if( window.intel && intel.xdk && intel.xdk.device ) {
if( intel.xdk.device.hideSplashScreen ) {
intel.xdk.device.hideSplashScreen();
}
intel.xdk.device.setRotateOrientation("landscape");
intel.xdk.device.setAutoRotate(false);
intel.xdk.device.hideStatusBar();
}
}
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
This is how it looks initially when I launch the app.
I have this plugin added in the project
cordova-plugin-splashscreen
Please help me resolve this issue.
Received this answer on XDK forum
The purpose of the splashscreen is to hide the details of the
initialization process (even before your device ready fires). The
splashscreen you see is the default cordova splash screen, you can
replace it by your own graphics. You can upload custom splashscreen
through Launch Icons and Splash screens on Projects page. The
hidesplashscreen() method will hide the splashscreen that is displayed
at the initialization and the contents of your app will appear (which
happens when device is ready).
I create a web page(chrome & safari) for mobiles (iphone & android), I want to lock the screen orientation in portrait mode.
Unlike mobile apps,there is no manifest file and activity as it a web page.
How to lock the orientation in mobiles using technologies (css/javascript/bootstrap/jquery) or any other?
I use a manifest file for my web app, which locks orientation for Chrome on my Android. For whatever reason, Safari gives their users the "right" to do this, but not the designers of the web app... Sort of feels like copyright infringement or something! ;) Don't get me started on Safari's disgraceful rewriting/rendering of input buttons!...
Anyways, back to the answer.
1) Include a link to your manifest within the head section of your page:
<link rel="manifest" href="http://yoursite.com/manifest.json">
2) Create your manifest file, "manifest.json"
{
"name":"A nice title for your web app",
"display":"standalone",
"orientation":"portrait"
}
3) Read more about manifests HERE
From my tests, assigning the screen.lockOrientation ( every browser versions ) to a var throw an illegal invocation error. Just use wind.screen.orientation.lock('landscape'); . It
EDIT: You can't use lock orientation on safari, cause it doesn't support fullscreen api at the moment http://caniuse.com/#feat=fullscreen . The lock orientation API NEED a fullscreen page to work. In Chrome, the window.screen.orientation.lock return a promise. So, AFTER you go fullscreen with the page, you can do something like this :
var lockFunction = window.screen.orientation.lock;
if (lockFunction.call(window.screen.orientation, 'landscape')) {
console.log('Orientation locked')
} else {
console.error('There was a problem in locking the orientation')
}
However, the lock orientation and fullscreen API are still experimental, not all browsers supports it.
The lockOrientation method locks the screen into the specified orientation.
lockedAllowed = window.screen.lockOrientation(orientation);
From the following code, you can check that orientation is locked or not.
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
if (lockOrientation("landscape-primary")) {
// orientation was locked
} else {
// orientation lock failed
}
see the following link, you will get idea from this.
https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation
You can use:
screen.addEventListener("orientationchange", function () {
console.log("The orientation of the screen is: " + screen.orientation);
});
and
screen.lockOrientation('landscape');
Following: https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation
Could anybody please advise how I can add a splash screen to my HTML5 Phonegap based Android App. I just want it to display for 5 seconds on load. Also - can anybody advise what dimensions the splash screen should be.
In order to have a splash screen in a PhoneGap Android application you need to put your splash.png file into res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi, res/drawable-xhdpi. Where those directories represent low, medium, high and extra large dots per inch. You'll need to resize you splash.png (the file name is important here) for each directory or Android will stretch it for you.
The sizes of each image should be:
xlarge (xhdpi): at least 960 x 720
large (hdpi): at least 640 x 480
medium (mdpi): at least 470 x 320
small (ldpi): at least 426 x 320
Then in your main Java class, the one that extends DroidGap, you'll need to add one line and modify another. First add:
super.setIntegerProperty("splashscreen", R.drawable.splash);
this line should show up under super.onCreate but before super.loadUrl. Then you'll need to modify your loadUrl method to pause for 5 seconds before loading up the main page. It would look like this:
super.loadUrl("file:///android_asset/www/index.html", 5000);
That should do it for you.
I've recently made some updates to how the SplashScreen works on PhoneGap Android. The main app now loads while the splash screen is being shown. This is a big improvement over the previous blocking splash screen call. Read more about the changes on my blog.
Phonegap (Apache Cordova) documentation has enough details about the splash screen and different resolutions for both Android and iOS at one place.
http://docs.phonegap.com/en/2.2.0/cordova_splashscreen_splashscreen.md.html
In my Phonegap app, Android version, Eclipse debugger throws tantrums if you set the splash screen or even the 'loading' dialog before calling loadUrl.
Both will work in the actual app installed on a device, but they will break your debugging. So I've put them behind loadUrl, where they can do no harm and still show well before the app itself.
public class App extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html",5000);
super.setStringProperty("loadingDialog", "Starting your app...");
super.setIntegerProperty("splashscreen", R.drawable.splash);
...
}...
I have also face this issue in Phonegap Android, but now I got solution.
super.setIntegerProperty("splashscreen", R.drawable.splash);(find image under drawable folder named splash,so put splash.png under drawable folder)
super.loadUrl("file:///android_asset/www/index.html",15000);(splash screen will show 15 sec.
Please edit your main Java file under src folder in your project directory:
public class radiobiafra extends DroidGap
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html",15000);
}
}
Using Cordova >= 3.6, and building your app with the Cordova Command-Line Interface, it's possible to configure the splash screen from the config.xml file. This is an example for Android:
<platform name="android">
<!-- you can use any density that exists in the Android project -->
<splash src="res/screen/android/splash-land-hdpi.png" density="land-hdpi"/>
<splash src="res/screen/android/splash-land-ldpi.png" density="land-ldpi"/>
<splash src="res/screen/android/splash-land-mdpi.png" density="land-mdpi"/>
<splash src="res/screen/android/splash-land-xhdpi.png" density="land-xhdpi"/>
<splash src="res/screen/android/splash-port-hdpi.png" density="port-hdpi"/>
<splash src="res/screen/android/splash-port-ldpi.png" density="port-ldpi"/>
<splash src="res/screen/android/splash-port-mdpi.png" density="port-mdpi"/>
<splash src="res/screen/android/splash-port-xhdpi.png" density="port-xhdpi"/>
</platform>
<preference name="SplashScreenDelay" value="10000" />
There is also a dedicated plugin to show/hide the splash screen programmatically.
See the Cordova documentation for more information.
This will probably meet your needs. It lets you customise and add all the relevant config.xml setting, images and splashscreens in a nice intuitive interface.
I recommend downloading the file and installing manually. The web based air installer doesn't seem to work.
https://aj-software.com/apps/configap.html