How to handle QML page orientation? - qt

I'm developing a BlackBerry 10 mobile application using the Momentics IDE 2.1.2 (native SDK).
Let's start with the example of the "orientation handler" that I'm using for my layout :
attachedObjects: [
OrientationHandler {
id: handler
onOrientationAboutToChange: {
if (orientation == UIOrientation.Landscape) {
mainContainer.sideMenuLarge = ui.sdu(80.0)
mainEntryHeaderContainer.layoutProperties.spaceQuota = 1.6
mainEntryBodyContainer.layoutProperties.spaceQuota = 5.8
} else {
mainContainer.sideMenuLarge = ui.sdu(60.0)
mainEntryHeaderContainer.layoutProperties.spaceQuota = 1
mainEntryBodyContainer.layoutProperties.spaceQuota = 7.4
}
}
}
]
Like you see, when the app starts in portrait mode everything is cool, it should be because all the Controls Paddings and the Containers SpaceQuota things are initialized with values that it is compatible with the portrait mode, but when it starts in Landscape mode it is different thing, it will takes the initial values of the portrait mode until I switch to portrait mode and then return it to landscape mode.
How can I fix this ? And can I have 2 pages in 1 navigation pane with differents "OrientationSupport" ? I tried but it doesn't works; for example I'm in page 1 in landscape mode and then I opened the page 2 that support only the portrait mode, it switchs to portrait but when I came back to the previous page the OrientationSupport will be fixed in portrait mode (it does not handle the landscape mode anymore)
Page 1:
OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All
Page 2:
OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.DisplayPortrait

Related

Xamarin Forms app not changing orientation on iOS

I have a Xam.Forms app which is working fine on iOS and Android with one exception. All screens except one are portrait. When this one screen shows, it show rotate to landscape. It works fine on android.
On iOS, it fails to change. The info.plist file has all orientations enabled. As I want only this one screen to be portrait, I have in the AppDelegate class an override that ensures everytrhing is portrait except one.
The override is this
public override UIInterfaceOrientationMask GetSupportedInterfaceOrientations(UIApplication application, UIWindow forWindow)
{
var mainPage = Shell.Current?.CurrentPage;
if (mainPage != null)
{
if (mainPage is IDCardPage)
{
return UIInterfaceOrientationMask.Landscape;
}
}
return UIInterfaceOrientationMask.Portrait;
}
A break point for the landscape is hit, but there is no rotation. According to the Apple docs, this is all I should need to do to rotate a view

How do I remove the extra padding when displaying the MasterDetail Master view

When opening the Master portion of a Xamarin Forms MasterDetail window in Landscape mode on iPhoneX it looks like the padding meant to accommodate the safe area is not removed, resulting in a huge gap between the hamburger and master view. This does not exist running on an iPhone 8.
iPhone X:
iPhone 8:
Also, the color of the safe area to the left of the master area is the same color as the detail view, how do I make the colors of the master view extend into this area?
For the color to extend you just have to set the background color of your page and as for the insets, you can adjust them.
public YourPage()
{
InitializeComponent();
On<Xamarin.Forms.PlatformConfiguration.iOS>().SetUseSafeArea(true);
BackgroundColor = Color.YourColor;
}
protected override void OnAppearing()
{
base.OnAppearing();
var inset = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
inset.Left = 24;
Padding = inset;
}
Keep in mind if your app can rotate between portrait and landscape you may have to override OnSizeAllocated to handle setting the insets there as well.

how to display a perfect 4k picture android TV?

i have a task in my company. they want me to display a 4k resolution image (4096 X 2160) on the android TV that we are working now by only using Android java code. one thing that i to have mention is, our tv resolution is 1920 X 1080. i got this resolution from the log here:
WindowManager windowManager = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
Display display = windowManager.getDefaultDisplay();
TvLog.i(TAG, "Width" + display.getWidth());
TvLog.i(TAG, "Height" + display.getHeight());
and the width will show 1920 while the height will show 1080. i just use a simple code to display the image. below is the code:
View view;
WindowManager wm;
public void onStart(Intent intent, int startId) {
super.onStart(intent, startId);
LayoutInflater layoutInflater = LayoutInflater.from(this);
WindowManager.LayoutParams params = new WindowManager.LayoutParams(
WindowManager.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.WRAP_CONTENT,
WindowManager.LayoutParams.TYPE_SYSTEM_OVERLAY,
WindowManager.LayoutParams.FLAG_WATCH_OUTSIDE_TOUCH,
PixelFormat.TRANSPARENT);
wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
view = layoutInflater.inflate(R.layout.pict_4k, null);
params.gravity = Gravity.TOP | Gravity.END;
wm.addView(view, params);
}
and the layout also simple which is:
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/a1" >
i read that only at Android 6.0, 4k mode API will be introduced. currently im using Android 5.0. so, is there any way for me to force the picture show its actual resolution on the TV?
Android TV resolution supports only up to 1080P
Yes, Android 6.0 does allow 4K display, but only if hardware supports it.
The platform now allows apps to request that the display resolution be
upgraded to 4K rendering on compatible hardware.

How to differ between phones and tablets while developing in Flex mobile?

I use applicationDPI in a Flex mobile card game:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
firstView="views.Menu"
applicationDPI="160"
initialize="init()">
<fx:Style source="Preferans.css" />
<fx:Script>
<![CDATA[
import spark.core.ContentCache;
public static const AVATAR_CACHE:ContentCache = new ContentCache();
public static var SCALE:Number;
public function init():void {
SCALE = runtimeDPI / applicationDPI;
}
]]>
</fx:Script>
</s:ViewNavigatorApplication>
And provide assets in 3 different resolutions based on it:
<fx:Declarations>
<s:MultiDPIBitmapSource id="BACK"
source160dpi="#Embed('assets/icons/low-res/back.png')"
source240dpi="#Embed('assets/icons/mid-res/back.png')"
source320dpi="#Embed('assets/icons/high-res/back.png')"/>
</fx:Declarations>
And still the result doesn't look good, when I for example select an iPad emulator in the Flash Builder 4.6:
While selecting Google Nexus One produces better result:
What to do here, what to use for detection of a phone vs tablet device?
Checking screen resolution wouldn't help here - see the above iPad example (low resolution, but big screen).
public static function get isTablet():Boolean
{
var deviceWidth:Number = Capabilities.screenResolutionX / Capabilities.screenDPI;
var deviceHeight:Number = Capabilities.screenResolutionY / Capabilities.screenDPI;
var diagonalInches:Number = Math.sqrt((deviceWidth * deviceWidth)+ (deviceHeight * deviceHeight));
if(diagonalInches>=7)
return true;
else
return false;
}
For a project I did for work, I had to evaluate the exact same issue. To do so, I created a new class that was run on app init that would evaluate the device and make some decisions.
Essentially, I did this
var deviceWidth:Number = Capabilities.screenResolutionX / Capabilities.screenDPI;
var deviceHeight:Number = Capabilities.screenResolutionY / Capabilities.screenDPI;
That will give you the device width and height on the majority of devices. The screenDPI property is not always accurate, however, so this will not work 100% of the time. It works often enough, however, that I don't think it is an issue.
From there, I did some research. I found that point where a phone stopped being a phone and started being a tablet. There is no standard approach, so I took the smallest popular tablet I could find (at the time, the Blackberry Playbook or Kindle Fire, can't remember which), and used the dimensions of that screen as the breakpoint between phone and tablet.
if ( deviceWidth >= fireWidth && deviceHeight >= fireHeight ) {
isTablet = true;
}
else {
isPhone = true;
}
That's pseudo code, obviously, but you get the idea. I also threw in some checks to distinguish between each platform (iOS, Android, and Desktop) and, if it was iOS, I manually set whether it was a tablet or phone because there is a limited field of devices there.
From there, I had two interfaces. One for phones, one for tablets. In the addedToStage function for my Application class, I used the isPhone and isTablet checks to choose which interface to load.
Probably not how it is supposed to be done, nor is it fool proof. Unfortunately, though, that is the closest we can get to a universal application with device-specific interfaces in Adobe AIR, as far as I am aware.

movie does not start in full screen in flash video player

We have this legacy code of a flash video player that functions well enough but still has some loose ends I need to tighten up. It can do the basic "switch to full screen and back to normal size" stunts, however with one exception.
On the first fresh load of the app, if I switch to full screen mode first, and then click to play the movie, the player would be in full screen, yet the movie itself would remain in it's original size.
//trigger
if (stage.displayState == StageDisplayState.NORMAL) {
stage.addEventListener('fullScreen', procFullScreen);
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.displayState = StageDisplayState.FULL_SCREEN;
//mv:VideoDisplay
mv.percentHeight = 100;
mv.percentWidth = 100;
mv.x = 0;
mv.y = 0;
}
// event handler
if (event.fullScreen) {
mv.smoothing = true;
this.height = stage.height;
this.width = stage.width;
//videoCanvas:Canvas
videoCanvas.height = Application.application.height;
videoCanvas.width = Application.application.width;
fullScreenViewStack.selectedIndex = 1;
}
The VideoDisplay object even returns the expected width/height, but the movie just plays in it's original size. If I switch screen sizes during movie playback, then the movie size will shrink or stretch as it should. I'm running out of ideas, any suggestions? Thanks in advance!
Seems like a bug... What version of sdk are you using?
Have you tried calling validateNow() in the VideoDisplay after switching to fullscreen?

Resources