jQM + WL on Android - High CPU in landscape - jquery-mobile

The current version of my app, running on Android 4.0.4 on an ancient Galaxy Tab has an odd issue when it's running in landscape orientation. I have the CPU usage developer option turned on, and I can see that a single core is being fully utilised when the app is sitting idle, even at it's login screen.
I'm using jQM 1.4.4, WL 6.2.0.01-20141027-1531.
When it's clear that CPU usage idling high for my app, I change to portrait and the CPU usage completely goes away, and the app is responsive again.
Step (CPU usage after a few seconds)
Login Screen (high)
Tap in text field, keyboard appears (none)
Hide keyboard (none)
Switch to portrait (none)
Switch to landscape (high)
On top of that, when I switch from Portrait to Landscape, the view doesn't redraw under the new aspect. The view is constrained to an area (square-ish) as wide as the screen is tall (or wide in portrait). The fixed header disappears but the view is interactive. To fix this, you can tap into a text field which brings up a keyboard. The view updates to fill the screen, and CPU usage is down again.
Other thing to note is that this issue did not exist in the previous version of the app. I've reviewed all changes between the versions and nothing stands out to me that should cause an issue like this.
Suspects:
the page or pagecontainer, popup or fixed header is doing a lot of work that usually should only occur on window resize (no direct changes to the logic here);
the CSS, in particular some responsive queries (there's a breakpoint between landscape and portrait) (no responsive CSS changes)
Other info:
Not a single problem was reported with Samsung Tab 3 running 4.2.2 or a Nexus 7 on 4.4.4 with this version
Tried using weinre to profile this issue except it loses connection soon after opening the app (again, previous version it was fine)
Minor differences between two identical target devices (Samsung Galaxy Tab 10.1): one tablet always performs fares better
I'm about to roll back to the older codebase and iteratively add code back in to see where the issue comes in.
Thanks for reading. Any pointers or suggestions are obviously greatly appreciated.
Update 1
I profiled from within Eclipse (turns out the Timeline inspector tab is pretty useless in weinre).
https://www.dropbox.com/s/ke0a9c2z9krhucu/highThreadUsage.PNG
Doesn't mean much to me. I suspect all that profile really says is 'the webview is doing all the work'.
I've created a new Hybrid app in the same project, and copied everything into it. I'm going to start stripping out chunks of code/functionality to see resolves the issues first.

This is a preliminary answer. I'm still doing the legwork and trying to see what exactly is happening in this situation.
The culprit appears to be a specific panel. A panel I haven't even touched in weeks. The only thing that I can even think of is that I changed the padding-top on .ui-tabs-panel from 1em to 0.5em...
There are two panels that are immediately init'd on app load. The one that slides from the right is the culprit: if I remove the init call and the HTML for it, the app is fine. Putting it all back, and prematurely opening the panel via weinre resolves the issue. Next step, is changing that padding-top back to 1em.
Problem doesn't show up. I repeat this several times over: make a build with 0.5em padding, and another with 1em. Repeat. The 0.5em build always has the issue, the other does not.
I'm going to chalk this up to the most coincidental (read: unlucky) bug, ever.
I'm planning on hardcoding the panel contents to display:none and showing them when the panel is opened. See if that works.

Related

Magic Leap Menu UI disappear

Im using Magic Leap One: Creator Edition almost everyday for Unity Development, but I stumbled across the following issue:
Magic Leap does not show anything (Menu and icons) when I start magic Leap device. I see the starting screen with and astronaut flying with text TAP TO START. I click, as usual, and it takes around 30-45 seconds to load and everything disappears (No UI/UX of Menu with app icons). Sometimes I get pop up message Scan Area and when I scan it popups with Area Recognized and still nothing happens after scanning. Even after closing all applications and restarting the device, the same issue arises.
What could be the cause? What can I do?
I found the mistake I made. I changed the models for Icon and Portal with unsupported high polygon models from asset store. If you want to avoid this trouble, follow guidelines for icon and portal asset development.

Cordova iOS iPhone X - Home indicator - Edge protection - DeferringSystemGestures?

I'm working on a webapp built with Cordova for both iOS and Android. Everything was fine until I launched tests on the new Apple's iPhoneX. As you may know, Apple decided to remove the physical home button by replacing it by a home indicator at the bottom of the screen:
This home indicator is always visible on your screen and it goes over your webapp content. When user want to navigate between apps or to go back to the home screen, he has to swip up this home indicator (which is very sensitive). This wonderful invention brought to my webapp 2 main problems:
This break my webapp design because it goes over the content.
The system gesture enter in conflict with my webapp gesture. My entire gameplay is based on drag & drop and all draggable icon are at the bottom of the screen, under the home indicator.
1. How to hide the home indicator?
To solve the first point I found a plugin called cordova-plugin-hide-home-indicator. This will hide (with fadeIn/Out effect) the home indicator after a few second of inactivity. But every times a touchscreen event is detected, the home button is visible again... I have red here that even if the Objective C (Xcode) function prefersHomeIndicatorAutoHidden() (which I guess is used by this Cordova plugin) return true it doesn't mean that the home indicator will be hidden for ever. Well... if somebody has a better solution I would appreciate your help!
2. How to lock system gesture?
I found a Xcode function called preferredScreenEdgesDeferringSystemGestures() They explain that normally the system will always take precedence on an app gesture, but in some cases (for immersive games for exemple) you can ask for your app to take precedence on the system. This sounds great! But unfortunately I don't know anything of Objective C :) I didn't find any plugin about that point.
In this video from Apple at 10:33, they talk about edge protection, which should do the trick by giving the app gesture the precedence, but again, I didn't find any plugin for Cordova...
Any ideas? Thanks!
Don't hide the home indicator. The solution by Apple is to use the new CSS constants as padding for the safe areas of the device. Read this to get starting point: iPhone X support
You can use this plugin in order to avoid edge gestures at iOS
https://github.com/distinctdan/cordova-plugin-screen-edges
It's very easy to use, i used in a cordova project and it works as expected

UICollectionViewLayout for Google Chrome (iOS App) Tab Switcher-like UI

My project needs a UI like Google Chrome's Tab Switcher. There was such a question in the past but the responses are mostly irrelevant, as it was written 5 years ago and the responses had to do with a static and overlapping Evernote UI (here). I've been trying for days, but the best I could get was something really sluggish. Also interestingly, when coded, at some areas it worked, then it didn't. I didn't choose any code because honestly my code probably is more wrong than right and I should start fresh from the beginning.
What is it that makes it so confusing? Bottom down must be initially 100% visible, next up 50%, next 25% (relative to their height) and also obviously it's scrollable. The scroll direction like chrome is first (latest) at bottom and last at the top. However, I would also like the distance between the first and second to increase, should you scroll down to see less recent views, the second would have to be able to be 100% visible, as the bottom app disappears off screen.
Yes, it's a jailbreak project but that's irrelevant as I've coded a replica in the iOS simulator for this part. It's just a layout problem for a UICollectionView. All of the rest of the project, has been coded
I think that you can you the following library to achieve the desired result.
StickyCollectionView-Swift

xCode: Release version of app has bug that identical developer build does not

I released an app today which I thought I had tested vigorously. A friend brought to my attention that the tab bar controller, a crucial part of the app, simply did not work, as though user interaction were disabled. Tapping other tabs did not reveal the view controller for that tab. The tab bar item icons didn't even change, like they're supposed to when selected. They were simply stuck on the first view controller.
The weirdest part is when I took both my friend's iPhone and mine (hers a 5S, mine a 5C) and then redownloaded the app on both devices. The bug persisted on hers, but the tab bar worked completely normally on mine. Other people have complained about the same bug, but I cannot replicate it on my own phone. I could not even replicate it in several versions of Xcode Simulator. I had never seen it before.
I have already submitted a new build in which I had to force the tab bar controller to display the appropriate tab under the didSelect method, but my app will essentially be broken until the Review Board accepts it.
What could have caused this?
EDIT: The newly uploaded build still isn't working properly. Even innocuous changes aren't taking effect. I've downloaded the new version on both phones - mine shows the new navigation bar button in the top right, but the other phone still has the old button. And they are both running the same version.
It's likely the bug is related to code that is compiled differently between debug and release modes due to different optimizer settings.
There are two main categories:
Use of uninitialized variables: The value of the uninitialized variable is technically undefined, but in the debug builds it can be pretty "stable" (e.g. always equaling zero due to the variable's location in memory and what was in that location before). When you compile in Release and the location of the variable changes, or the order of initialization changes, your variable now has a different value and the code behavior changes.
Luckily for this class of bugs Xcode can help. Select "Analyze" from the "Product" menu and pay close attention to all the errors marked in blue.
Timing bugs: Typically code in Release runs faster so if you are doing anything async/multi-threaded, you may trigger timing related bugs in Release that weren't evident in Debug. I'm not sure if this is relevant for your case, though I can imagine some scenarios where a timing bug could cause views to get messed up internal state. It's hard to say without seeing your code.
Please note that changing architectures (5S is 64 bit and 5C is 32 bit) is also a factor in both of the above categories.

Understanding the use of views in a Multi-Device Project

This is the first time I have really attempted a Project using Firemonkey, with the Target Platform been Android.
I am finding it difficult trying to understand the workflow with the use of views been somewhat trivial, I just can't seem to grasp the concept at the moment.
I have successfully managed to get the Delphi IDE to recognise my device (Xperia Z2) so when building and running the Project I can see the app on my phone (although so far I am not too impressed, long black screens before anything showing and sometimes the app wont show at all, not to mention slow compilation and linking time).
The first problem I ran into is that controls dont appear on the Android device in the correct places. I added Android 5" Phone as a view as that would be the closest thing to my device, the controls on the Form Designer are aligned to how I want them, for simple testing I just dropped a couple of buttons that are centered in the middle of the form horizontally. When running and viewing the app on my phone however, the buttons are wider than the visible area of the phone, I tried the same with other views such as Android 4" Phone and it's the same. The controls appear lined up correctly on the Delphi Form Designer, but when running and viewing them on my phone they are not lined up at all, it feels like I need to guess where the controls should appear making views seem pointless, after all I cannot test on a multitude of devices and therefore if they don't appear on my phone as they do on the Delphi Form Designer what hope do we have? I expected that how the controls appeared in the view window is exactly how it should appear on my Android deivce but this does not seem the case.
The other view related question is, what is the purpose of the Master View? From my vague understanding you need views to design the layout for each Android device, does this mean then for each device view we have to constantly reposition and move controls independantly for each view? What purpose does the master view have, other than from what I can tell you can only delete controls from the master view and from each view use the Revert to Inherited context menu.
It feels like I need to guess where the controls should appear, the device view at Design Time seems rather inaccurate, surely how you look at the device view on the Form Designer is exactly how it should appear on your Android device?

Resources