Cordova/Phonegap - Landscape view - angularjs

Hello it's possible to block, landscape view just for Smartphones, but not for Tab's or bigger devices?

It all depends on the container holding your webview.
In android you can block orientationchanges, even changes under certain conditions, on your activity. The overridable method "onConfigurationChanged(Configuration newConfig)" is responsible for this.
On iOS you can do this on the ViewController. This post describes how to do it: iOS 6 - How to run custom code when orientation changes.
It is also possible to do this from the configuration files of the project. For iOS you can block certain views for certain device types. With Android this is only possible to block landscape mode entirely.
If you are feeling adventurous, there is also the option to CSS-transform your view, though this is more of a hack than a real solution: Prevent orientation change in iOS Safari

Related

Inability to correctly scale canvas on iOS for an AirConsole controller created in Construct 2

I have been playing around with creating AirConsole controllers using Construct 2. Construct 2 comes with several scaling modes to ensure that the canvas scales as desired. I have tested every possible combination, and found that the simulator (running in Safari, Edge, Chrome, and Firefox) works correctly, the Nexus 5 works correctly, but the iPhone 7 Plus and iPad (running the iPhone AirConsole app) both do not obey the scaling I have set in Construct 2.
At 1280x720, this means a portion of the controller is always offscreen. I have used both the "AirConsole" and "AirConsoleController" plugins on the screen side, and both have the same issue. When I remove both plugins from my Construct 2 project and load the page using airconsole.com/#[SERVER_URL]/pong, the scaling problem goes away, but I lose the ability to call AirConsole API methods (set orientation to landscape, handshake, messaging, etc.).
I fully understand that this probably not high on the priority list, as the AirConsole team has done a great job putting together the controller generator, but would it be possible to take a look into this problem on iOS devices? Is there something happening on the AirConsole side that would overwrite the Construct 2 screen scaling rules for iOS controllers?
One of our team's goals is to create a controller minigame that a user would play on their device while the main game was in progress on screen.html. It would much simpler to do this in Construct 2, rather than coding it by hand.
Edit:
I reran a quick test of the Pong example using the Phaser.io tank screen as a controller, instead of the pong buttons. In this test, I would expect to see the tank screen loading onto the controller. This is what I see on the simulator and on my Nexus 5. On my iPhone, half of the tank screen is off of the edge of the phone.
Since a similar behavior occurs in both the Construct 2 and Phaser.io projects, I have a hunch that the problem might occur whenever a canvas element is placed on iOS screens for AirConsole controllers.
There seems to be a bug on iOS with iframes.
Applying this CSS to the controller.html fixed it for some developers:
html, body {
height: 100%;
overflow: hidden;
}

Change of orientation performance issue - codenameone

when orientation changes in android, native android call the destroy method and total new layout is to be made as far as I know. But I think codenameone doesn't do that which is a great thing. But when I checked the cn1 app in devices while changing from portrait to landscape a blank screen is seen for a while and then the orientation changes.
My Problem is that when I have many more components displayed in a form,
the blank screen appears for a longer duration and sometime it hangs. Does it
happen as I don't use Orientation listener methods etc or is there anything I
can do to solve this issue?
I just tried this on my device and it worked fine for the latest build on my Android 6 device. There was the rotation animation from Android where the screen rotated into its new place.
I'm guessing the rendering of your screen is so slow that Android takes too long to draw it and ends up drawing a black screen instead so it can proceed with the animation.
I can't benchmark an application remotely but I suggest going over the performance of your app and making sure it is truly optimized.

responsive design - disable jquery effects for touch screens

I have some jquery mouseover effects on my website that I need to disable for touch screens, however, how do I know what width of screen to disable the JQuery? At the moment I have it at less than 800px. This works on an ipad portrait but then when I turn it landscape the JQuery is activated again. I have read that Ipad landscape width is 1024px but this could also be the size of a small none touch screen. Is there a way I can specify effects for certain devices instead of screen widths ?
To achieve this you should look at working the other way and instead of disabling mouse over events for touch devices ADD the events for non-touch devices.
Add Modernizr to the project your working on (you've probably already got it in there). Once added you can include a test for "touch" by adding it as a class to the HTML element
<html class="touch">
If the device has touch capabilities then everything will remain as is, however if the device does not have touch then moderizr will covert that from touch to to no-touch
<html class="no-touch">
You can then bind your mouse events off the html element having the class of .no-touch
I've put an example of this in the code pen - http://rwd.is/VyRl37
This assumes that you're still loading the jQuery library for all devices and deciding whether to load the mouse over functions based on touch devices. If you're looking at conditionally loading jQuery itself then you should look at enquire.js to load in jQuery at a specified width.
If you want to keep jQuery for other functions on smaller devices but want to improve performance you could look at using using Zepto.js as a lightweight alternative.
Finally Response.js will also allow you to call functions at particular breakpoints but you still run into the issue of not knowing if it's touch enabled or not.

How to force landscape on a Flash builder mobile app

I am building a mobile application using Flash Builder. I am testing on a Motorola Xoom. When the app opens on the attached Xoom it opens with the correct orientation (landscape), but when it opens on the computer in the emulator it is backwards (Portrait).
I have specified the ratio and orientation in the *-app.xml:
<aspectRatio>landscape</aspectRatio>
<autoOrients>false</autoOrients>
I'm assuming it is a bug but it is possible that I am missing something or that there may be a fix.
In my case, neither was working. So, for the desktop version, I've made an ugly thing: duplicated the aspectRatio property above the others, after title property. I don't know if the position of the property matters, but that way it worked.
There is just one problem with this approach: when building the debug version of your application all works fine (including in mobile), but when you build the release version, an error occurs saying that the aspectRation property is unexpected. Just remove one of them and the build will work.
Just for the register, to make it work in mobile, I had to set the property aspectRatio in the code too, like this:
stage.setAspectRatio(StageAspectRatio.LANDSCAPE);

How do you detect tablet PC screen rotation in a full screen Silverlight application?

I am working on a Silverlight 4 out of browser (OOB) application on a Windows 7 tablet PC. The majority of the time, the program is in full screen mode. However, if the user rotates the tablet, the application rotates and stays full screen, but is scaled for the previous screen orientation. Taking the application out of full screen and putting it back into full screen rescales everything correctly. Is there any way I can detect when the screen rotates? So far I've tried the app's Resize, LayoutChanged and FullScreenChanged events and have a handler for the main page's SizeChanged event. None of these get fired when the application is rotated in full screen mode.
Per Josh Einstein's suggestion, I tried polling the ActualWidth/Height of the application on a timer. It looks like after the rotation, the ActualWidth/Height values returned from the Silverlight plug-in are the pre-rotated values. Only taking it out of full screen and putting it back in full screen will change the resolution of the plug-in. The HtmlPage.Eval hack didn't work since I am OOB.
The WP7 version of Silverlight has the OnOrientationChanged event, which doesn't seem to be available in the desktop version. Anyone have any ideas?
Great question but as far as I can tell, it doesn't seem to be possible. I tried changing the screen resolution in a virtual machine (orientation change is really just a screen resolution change that results in width being larger than height or vice versa) and could not trigger any layout events.
The issue seems to be that the Silverlight plugin itself is not resized. With an elevated out-of-browser application you could presumably use COM interop with WMI to get the actual screen resolution, but it's kind of hacky. If it's an in-browser application, you could use the HTML DOM. In both cases, you'll probably have to poll for the current screen resolution instead of being notified via an event.
Mister Goodcat has written a blog post about how to get at this information in both scenarios.
I would file it as a Silverlight bug too.

Resources