Issue Description
Ti SDK 5.5.0 and iOS 10 introduce new behaviors and expose a bug in Titanium using Ti.Media.showCamera() with an overlay
Using SDK 5.2.2, and setting allowEditing=false. Yet, users could still pinch to zoom and tap within the photo to set the exposure point. With iOS 10, app built with 5.2.2 and allowEditing set to false, pinch & exposure no longer work.
Migrating to 5.5.x / Xcode 8 and testing the code with that environment with allowEditing=false, pinch & exposure don't work. (NSCameraUsageDescription key is added in tiapp.xml.)
Setting allowEditing=true, users can again pinch to zoom and set exposure, however, they can no longer tap on the buttons in the overlay. It's as if the camera preview is at a higher zIndex .. the overlay is visible however touch events go to the camera not the overlay.
As a result, users are stuck -- they can't tap on the overlay's Done button to close the camera and use the rest of the app. They have to force-quit the app.
Steps to reproduce
Create a default Alloy project.
Make sure to add the NSCameraUsageDescription to the tiapp.xml.
Replace the app folder with the one linked above.
Build to an iOS 10 device.
Tap open camera.
You can pinch to zoom and tap to set exposure, but the shutter button and Done buttons don't respond to taps.
Edit the app/controllers/index.js to set allowEditing=false, rebuild.
This time, you cannot pinch to zoom but you can tap the shutter or done buttons.
* Adjusting the zIndex on the overlay view has no effect.
Test-case (based on the Alloy-project):
This is what we have in our core:
Means, as soon as we have the
allowEditing
set totrue
, it will manually disable the view interaction because of the above reason. Maybe the interference changed for iOS 10, so we could wrap it accordingly. Testing ... *EDIT*: Yeah, removing that snippet solves the issue. I'm pretty sure it was an old hack (implemented: 2010, SDK 1.8.0) to fix some native misbehavior. To ensure, I need this tested against an iOS 9 and iOS 8 device. [~eharris] / [~htbryant] can I send one of you guys a packaged SDK to test? *Summary*: I guess Apple has made the pinch-zoom and exposure as part ofallowEditing
on iOS 10. So the customer could enable it as proposed and we fix the line above to either be removed completely or only be called on iOS < 10. That's what I need feedback from the QE regarding the current behavior of iOS < 10 will the above test-case compared to iOS 10. After that, I can setup a proper PR. Thanks!Testing on both iOS10 / iOS9 devices, I created a matrix to display the behaviour for the different configurations, please see below: !screenshot-1.png! Tested On: iPhone 6 Plus 10.0.1 Device iPhone 5S 9.3.5 Device Mac OSX El Capitan 10.11.6 Ti SDK: 5.5.0.GA / 5.5.1.v20160921190109 Appc Studio: 4.8.0.201609101003 Appc NPM: 4.2.8-6 App CLI: 5.5.0 Xcode 8.0 Node v4.4.7
Thanks for the report Harry. I am wondering one thing: The reporter says that the pinch-zoom and exposure does not work on iOS 10 when
allowEditing
is set tofalse
. But in your tests, it seems to work. Can you verify that? I am curious if we should really remove the above snippet, because if we don't use custom-controls (showControls
set totrue
),allowEditing
will display a native UI to crop the image. Not sure if that will interfere again or if the developer would be able to configure the behavior so it doesn't happen. Many property-dependencies here, so we need to be cautious.[~hansknoechel] I can verify that the results displayed in the above matrix are accurate, I had considered the original behaviour described, and tested it multiple times to make sure.
Ok. I will check.
I think there is confusion in understanding property, allowEditing . As per our doc
This don't have to do anything with enabling/disabling of Pinch Zoom or Tap Exposure.
This (allowEditing) is only used after capturing image not in open camera state.
We can fix Pinch Zoom and Tap Exposure behaviour by removing the below code snippet -
5. After above changes (point 4) matrix will changed as - ios9/ios10 , allowEditing = true/false : Pinch Zoom, Tap Exposure, Take Picture and Close Camera will work . Please let me know your comments.
[~vijaysingh] Did you check my above comment regarding the removal of this line? {quote} I am curious if we should really remove the above snippet, because if we don't use custom-controls (showControls set to true), allowEditing will display a native UI to crop the image. Not sure if that will interfere again or if the developer would be able to configure the behavior so it doesn't happen. Many property-dependencies here, so we need to be cautious. {quote} Please test my use-case that also has the
showControls
property enabled. It caused problems for that use-case if we remove the line.I created a sample iOS camera app and compared its behavior with Titanium SDK camera app by changing the value of properties (showControls, isEditing and customControls) . Results are as below - ========== Native Camera App ============ 1. showControls = true and isEditing = True , custom overlay = true { a. Capture image with native control - Will open a native UI to crop image. b.Capture image with custom control - Same } 2. showControls = true and isEditing = false , custom overlay = true { a. Capture image with native control - Will open a native UI to confirm image (With “Use photo” an d “Retake” button). b.Capture image with custom control - Same } 3. showControls = false and isEditing = true , custom overlay = true { a. Capture image with native control - Invalid b.Capture image with custom control - Capture image directly. } 4. showControls = false and isEditing = false , custom overlay = true { a. Capture image with native control - Invalid b.Capture image with custom control - Capture image directly. } 5. showControls = true and isEditing = True , custom overlay = false { a. Capture image with native control - Will open a native UI to crop image. b.Capture image with custom control - Invalid } 6. showControls = true and isEditing = false , custom overlay = false { a. Capture image with native control - Will open a native UI to confirm image (With “Use photo” an d “Retake” button). b.Capture image with custom control - Invalid } 7. showControls = false and isEditing = true , custom overlay = false { a. Capture image with native control - Invalid b.Capture image with custom control - Invalid. } 8. showControls = false and isEditing = false , custom overlay = false { a. Capture image with native control - Invalid b.Capture image with custom control - Invalid. } ========== Titanium SDK camera app (by commenting line [view performSelector:@selector(setTouchEnabled_: ) withObject:NUMBOOL(NO)]; ) ============ 1. showControls = true and isEditing = True , custom overlay = true { a. Capture image with native control - Will open a native UI to crop image. b.Capture image with custom control - Same } 2. showControls = true and isEditing = false , custom overlay = true { a. Capture image with native control - Will open a native UI to confirm image (With “Use photo” an d “Retake” button). b.Capture image with custom control - Same } 3. showControls = false and isEditing = true , custom overlay = true { a. Capture image with native control - Invalid b.Capture image with custom control - Capture image directly. } 4. showControls = false and isEditing = false , custom overlay = true { a. Capture image with native control - Invalid b.Capture image with custom control - Capture image directly. } 5. showControls = true and isEditing = True , custom overlay = false { a. Capture image with native control - Will open a native UI to crop image. b.Capture image with custom control - Invalid } 6. showControls = true and isEditing = false , custom overlay = false { a. Capture image with native control - Will open a native UI to confirm image (With “Use photo” an d “Retake” button). b.Capture image with custom control - Invalid } 7. showControls = false and isEditing = true , custom overlay = false { a. Capture image with native control - Invalid b.Capture image with custom control - Invalid. } 8. showControls = false and isEditing = false , custom overlay = false { a. Capture image with native control - Invalid b.Capture image with custom control - Invalid. } As per comparison , both (native and sdk) have similar behaviour . But there is one code snippet - [TiUtils setView:view positionRect:[picker view].bounds]; which create overlay above whole camera screen, whatever be the size of overlay . So in case of image captured as per 1,2, 5 and 6 , “Use photo” and “Retake” button are not working as it comes below overlay view . Ideally above line snippet should be like - [TiUtils setView:view positionRect:view.bounds]; *+ Result -+* For getting similar behavior as of native , we should change following - 1. Comment code snippet - view performSelector:@selector(setTouchEnabled_: ) withObject:NUMBOOL(NO)]; 2. Change code snippet - [TiUtils setView:view positionRect:[picker view].bounds]; to [TiUtils setView:view positionRect:view.bounds]; [~hansknoechel] [~cng] Let me know your comment on same.
Native camera app attached as TestProvisioning.zip .
PR(master): https://github.com/appcelerator/titanium_mobile/pull/8571 Unnecessary check for disabling touch of overlay view removed . Bound of overlay view was getting set wrong . It was getting set to bound of picker view, so overlay view covered whole screen . Bound of overlay view set properly .
[~vijaysingh] master-PR merged, please do a 6_0_X backport, we will include it in 6.0.0.GA :-)
[~hansknoechel] PR for 6_0_X : https://github.com/appcelerator/titanium_mobile/pull/8583
Tested again on iOS10 & iOS9 devices with the latest 6.0.X branch and can confirm that the
allowEditing
property now defines whether or not an image can be edited AFTER capture, and that in both cases of this property being true / false, Pinch to Zoom, Tap Exposure work correctly. One thing to note is that the custom controls on the overlay are no longer able to displayed. This is using the following demo code that was provided previously:*When building the app with SDK 5.5.1.GA the custom controls are present.* However, setting the
showControls
property to TRUE exposes the native controls, which work without issue. Before I can validate this ticket as closed, I need clarification for the custom controls no longer being visible. Is this an *intended* change or a *bug*? Tested On: iPhone 6 Plus 10.1.1 Device iPhone 5S 9.3.5 Device Mac OS Sierra (10.12.1) Ti SDK: 6.0.0.v20161107075927 Appc Studio: 4.8.0.201611020954 Appc NPM: 4.2.8-9 App CLI: 6.0.0-68 Xcode 8.1 Node v4.4.7As I was the original reporter via a support ticket, we would not consider this resolved if we could not use our own custom control to take the photo. This would be a change in behavior from the old SDK versions and would not fit with our UI.
If we create overlay in following way, it will be visible - var overlay = Ti.UI.createView({ top: 10, left: 10, width: 300, height: 60 }); rather var overlay = Ti.UI.createView(); I will discuss with [~hansknoechel] and [~cng] for better solution, which work in scenario as mentioned in comment as well .
I can confirm that as per [~vijaysingh]'s comment, when specifying values for the
width
&height
properties for the Overlay view, the custom controls become visible. After further investigation it was found that in fact the overlay view will only be visible in this case, and that not specifying a numerical value for eitherwidth
orheight
will prevent the view from being visible, along with the custom controls within it. This is specific to the case when a view is used as an overlay view for Ti.Media.showCamera(options), there are no issues when a created View is added as a child of a standard Window. It also only occurs with the 6.0.X build. The usual case is that whenheight
andwidth
are not specified, the default value will beTi.UI.SIZE
, which seems to be the case for 5.5.1.GA. Additionally when I replaced the numerical values of theheight
andwidth
properties to it's default equivalent:Ti.UI.FILL
/Ti.UI.SIZE
, the overlay was not visible when built with 6.0.XWe won't keep it like it is. Views should fill (Ti.UI.FILL) for both
height
andwidth
when they are not specified. So either we come up with a more solid solution to get the correct frame or we need to move this to 6.0.1 - reverting the initial commit.[~hansknoechel] PR(master): https://github.com/appcelerator/titanium_mobile/pull/8596 PR(6_0_X): https://github.com/appcelerator/titanium_mobile/pull/8597
The issue is fixed with the recent PR we've been working on. It fixes the default layout specs and uses auto-filling as supposed to be. It was just merged, so [~skypanther], if you want, you can check it out and contact me on Slack to talk about your findings. Thx! :-)
Thank you all. Unfortunately, it will be a couple of weeks till I can actually try this. Our app uses quite a few modules which are not compatible with 6.x. I started working on updating them, but have been sidetracked by other priorities. On the good-news side, this ticket was one of the key things we were looking forward to in the 6.x line. So, this gives us incentive to push forward.
Gotcha, thanks anyway!
I finally got a chance to test this in our app. It is not working. I have set
allowEditing
totrue
and I cannot pinch to zoom or set the exposure point. I also tried settingshowControls
totrue
and while I briefly see a yellow square in the preview area (a crop window I guess), I still cannot pinch to zoom or set the exposure point.* Appc cli version 6.0.0 * SDK version 6.0.0.GA * iPhone 5 running iOS 10.1.1 (14B100)
As a follow-up, I will say that my "take-picture" button and other controls on the overlay are now clickable with allowEditing set to true. So, we have made progress but it's not all the way there yet. Was this maybe not released in 6.0.0.GA as the release notes say? Is it still to come in 6.0.1?
Some further test results: * iPhone 7 running iOS 10.1.1. No pinch to zoom or exposure point. * iPhone 5 running iOS 10.1.1. No pinch to zoom or exposure point. * iPod Touch running iOS 9.3.5. Both pinch to zoom and setting exposure point work.
[~ssekhri] Can you please verify the scenario and let me know the result. As per my observation in native camera app “TestProvisioning.zip” and camera app using titanium sdk - - in iOS 9 and iOS 10 tap to exposure property is only available with showControls = true (in this yellow lined square will visible ) - in iOS 9 if showControls = false (yellow lined square will not be visible but when we tap on camera and move finger exposure will change) - in iOS 10 if showControls = false, tap to exposure property is not working . - two finger zoom feature is available in both iOS 10 and iOS 9 both . Note - If we do not give width and height property to overlay view, it will be of screen size. Please compare behavior with attached native iOS camera app “TestProvisioning.zip”, by changing the property.
Apparently I deleted the previous zip file from my Dropbox folder. Here it is again https://www.dropbox.com/s/o5nrno8oep8ydea/TIMOB-23936.zip?dl=0 (BTW, you could solve the problem of links going stale if you let people attach files to tickets.)
When using the classic app code as provided in the very first comment by Hans, the pinch to zoom works fine irrespective of the size of overlay view (default, custom or Ti.UI.Fill for both height and width). The pinch to zoom works on both iOS 9 and iOS 10 device. However when using the alloy app provided by Tim Poulsen, the issue as reported by Tim for pinch to zoom does exist. The zoom works on iOS 9 but not on iOS 10. In the app the overlay controller defines the overlay view of height and width to be Ti.UI.Fill. However if the same overlay view from the controller was changed to be of lesser height like 100 then camera view shown beyond worked fine for zoom on iOS 10 as well. Also if a simple view was created in the index.js and passed to the overlay instead of the view from controller, the zoom works on iOS 10. As far as Tap to Exposure property is concerned it behaves the same in Titanium app as it behaves in a native iOS app. The Tap to exposure works on iOS 10 only when showControls = True in both Titanium and native swift app.
Our app's UI spec calls for the overlay to fill the screen. I have tried setting an explicit height/width of various sizes, but at no size could I get the pinch-to-zoom to work. I tried setting in the TSS as well as in the overlay controller (JS) file. I tried setting to a simple integer, to Ti.Platform.displayCaps.platformWidth / Height, and to a constant defined in the alloy.js all with the same result -- no zoom/exposure controls. I tried with both our actual app and with the linked sample project with the same results.
[~hansknoechel] As result shared by Satyam and Tim Paulson are contradictory, Can you please have a fresh pair of eyes on the issue.
I got back to this issue and validated that the same behavior is on both the native project and our Titanium app. That's why we will resolve this issue first (since it's a 6.0.0 ticket and 6.0.0 is released already) and keep an eye on Tim's response after getting in touch with Apple about a possible regression from their side (like TIMOB-23910 and TIMOB-24137). Thanks guys!
So, in summary, this is resolved as "Not our bug" and you won't be doing anything further on it, correct? Functionality that worked pre-5.5 is no longer supported? You should at least update your docs and include info in your release notes to set developer expectations that this sort of functionality is no longer possible with Titanium.
I had some time to check this again today. Environment: Xcode 8.2.1, Titanium SDK 6.0.1.GA, CLI 6.1.0.GA, on an iPhone 5 with iOS 10.2 I do NOT get pinch to zoom OR exposure control using any combination of the following: *
allowEditing: true
orfalse
*showControls: true
orfalse
* width/height of the overlay set in the TSS toTi.UI.FILL
or set to explicit heights using values calculated at app start time fromTi.Platform.displayCaps.platform*
or simple point values such as340
/500
* width/height of the overlay set in the controller that creates the overlay controller prior to callingshowCamera
toTi.UI.FILL
,Alloy.Globals.deviceHeight
/Width
(calculated at app start time fromTi.Platform.displayCaps.platform*
, or340
/500
* adding/removing thetransform
property to theshowCamera
call I'm still confused how Apple's bug about the transform relates to this ticket and gives you reason to close it (as FIXED). While I'd prefer to not see the camera controls box, frankly if it has to be there in order to get pinch to zoom and exposure control working, I can live with it. Again, Apple having a bug that makes it impossible to hide that box is not justification for closing this ticket as FIXED. The only thing fixed here is that UI elements in my overlay are now tappable.[~acvauctions] Hi Tim. I spoke with Hans about this one, but would like to understand it for myself. I'll take a look today.
Hey Tim, I thought this was clear after my last comment, sorry if not. The summary (as stated above) is that Apple changed the behavior in iOS (or caused an iOS bug - like the transform one). We attached a native project during the discussion last months, did multiple native device tests and it's all behaving the same. The fix we applied fixed the tap-gestures as stated by you, that's why this ticket has been marked as
Fixed
. If there would be a fix on the native side, we would apply it, but so far there isn't. Please let me know if I should record another video demonstrating the native behavior, but no code-adjustment could change that.Addition: To clear all points - it worked pre-5.5.0 because pre-5.5.0 was not built with the iOS 10 SDK (iOS 10 on the device != iOS 10 SDK).
Here are the findings [~skypanther] and me found out after some more investigations: * The issue was / is not the overlay itself, it is the layout of those views * When we have two views that overlaying each other (e.g. two filling views in this case), iOS will not be able to receive any gestures anymore * This worked in iOS 9 (Ti SDK < 5.5.0) and stopped working in iOS 10 (Ti SDK >= 5.5.0) * Both the native app and the Ti app behave the same when we check against that specific use-case (that was the problem before) * I updated the native project to reflect the native issue * I created a bugreport at Apple (29949293) and create an open radar ([#http://www.openradar.me/radar?id=6104055453581312](http://www.openradar.me/radar?id=6104055453581312))for this issue * In the specific use-case for Tim, removing the container view for the flash resolved the issue temporary - although it's not the ideal solution * I will update our docs to inform devs about this special behavior * I will keep this ticket updated based on Apples response
Thanks to [~ hansknoechel] for working through this with me in TiSlack. He deserves a raise, by the way. In our testing, we have found that due to a change in iOS 10, you cannot have multiple views overlaid atop the camera window. For example, using my sample app posted on 13/Dec/16, by removing both the
wrapper
andflashOverlay
views from the overlay the pinch to zoom and exposure controls work on an iOS 10 device. An iOS 9.3.5 device works fine with those Views present or removed. Setting the additional views toopacity: 0
orbackgroundColor: 'transparent'
does not resolve the issue. It appears to be something related to events on child views not bubbling to the parents properly. This means that I will have to rework our UI layout. But, at least the problem is now solvable. Thanks Hans!!OK [~acvauctions], I'll see what I can do for Hans. :)