{ "id": "143089", "key": "AC-1189", "fields": { "issuetype": { "id": "1", "description": "A problem which impairs or prevents the functions of the product.", "name": "Bug", "subtask": false }, "project": { "id": "12217", "key": "AC", "name": "Appcelerator - INBOX", "projectCategory": { "id": "10000", "description": "", "name": "Customer Service" } }, "resolution": { "id": "5", "description": "All attempts at reproducing this issue failed, or not enough information was available to reproduce the issue. Reading the code produces no clues as to why this behavior would occur. If more information appears later, please reopen the issue.", "name": "Cannot Reproduce" }, "resolutiondate": "2015-01-26T21:31:57.000+0000", "created": "2015-01-18T18:05:22.000+0000", "labels": [ "TCSupportTriage", "android", "camera", "overlay" ], "versions": [], "issuelinks": [], "assignee": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "updated": "2016-03-08T07:37:33.000+0000", "status": { "description": "The issue is considered finished, the resolution is correct. Issues which are closed can be reopened.", "name": "Closed", "id": "6", "statusCategory": { "id": 3, "key": "done", "colorName": "green", "name": "Done" } }, "components": [], "description": "When I open camera (using Ti.Media.showCamera()) on Android using a custom overlay, the preview is stretched in height.\r\nAfter I take the picture and use it inside an ImageView, it shows correctly.\r\n\r\nThis problem affects only Samsung Galaxy S4 Mini (GT-I9195) with both Android 4.2.2 and 4.4.2, whilst other devices work good (tested on Galaxy S2, S4, Nexus 4, Nexus 5).\r\nI attach a screenshot of the problem: what you see in the image was a perfectly circular bowl.\r\n\r\nHere is the code:\r\n\r\nfunction openCamera() {\r\n\tvar transform = Ti.UI.create2DMatrix();\r\n\t// transform is iOS only, ignored on Android\r\n\ttransform = transform.scale(1);\r\n\tvar overlay = getCameraOverlay(); // code is below\r\n\tTitanium.Media.showCamera({\r\n\t\tsuccess : function(event) {\r\n\t\t\tvar image = event.media;\r\n\t\t\tif (OS_ANDROID) {\r\n\t\t\t\tvar cropRect = event.cropRect;\r\n\t\t\t\tTitanium.API.info('PHOTO CAMERA SUCCESS type: ' + image.mimeType + ' cropRect.x ' + cropRect.x + ' cropRect.y ' + cropRect.y + ' cropRect.height ' + cropRect.height + ' cropRect.width ' + cropRect.width);\r\n\r\n\t\t\t\t// set image view\r\n\t\t\t\tTi.API.debug('Our type was: ' + event.mediaType);\r\n\t\t\t\tif (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {\r\n\t\t\t\t\tcropFromCamera(image, cropRect.height, cropRect.width);\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\t// ios\r\n\t\t\t\tcropFromCamera(image, null, null);\r\n\t\t\t}\r\n\r\n\t\t},\r\n\t\tcancel : function() {},\r\n\t\terror : function(error) {},\r\n\t\tsaveToPhotoGallery : false,\r\n\t\toverlay : overlay,\r\n\t\ttransform : transform,\r\n\t\tautorotate : false,\r\n\t\t// allowEditing and mediaTypes are iOS-only settings\r\n\t\tallowEditing : false,\r\n\t\tshowControls : false,\r\n\t\tmediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]\r\n\t});\r\n}\r\n\r\n\r\nfunction getCameraOverlay() {\r\n\tvar displayWidth = Ti.Platform.displayCaps.platformWidth;\r\n\tvar displayHeight = Ti.Platform.displayCaps.platformHeight;\r\n\tvar camera = \"rear\";\r\n\tvar viewsHeight = (displayHeight - displayWidth) / 2;\r\n\tvar photoViewDim = displayWidth;\r\n\tif (OS_ANDROID) {\r\n\t\tvar viewsHeight = viewsHeight + \"px\";\r\n\t\tvar photoViewDim = displayWidth + \"px\";\r\n\t}\r\n\t// setup overlay\r\n\tvar overlay = Ti.UI.createView({\r\n\t\twidth : Ti.UI.FILL,\r\n\t\theight : Ti.UI.FILL,\r\n\t\tbackgroundColor : \"transparent\",\r\n\t\tlayout : \"vertical\"\r\n\t});\r\n\r\n\tvar header = Ti.UI.createView({\r\n\t\twidth : Ti.UI.FILL,\r\n\t\theight : viewsHeight,\r\n\t\ttop : 0,\r\n\t\tbackgroundGradient : Alloy.Globals.gradientBackgroundHorizontal,\r\n\t\tlayout : \"vertical\"\r\n\t});\r\n\r\n\tvar backClickableView = Ti.UI.createView({\r\n\t\twidth : \"55dp\",\r\n\t\theight : \"35dp\",\r\n\t\tbackgroundColor : \"transparent\",\r\n\t\tleft : 0,\r\n\t\tzIndex : 1,\r\n\t\ttop : \"3dp\"\r\n\t});\r\n\r\n\tvar backArrow = Ti.UI.createImageView({\r\n\t\timage : \"/img/elements/back.png\",\r\n\t\twidth : \"10dp\",\r\n\t\theight : \"auto\",\r\n\t\tleft : \"5dp\",\r\n\t\ttouchEnabled : false\r\n\t});\r\n\r\n\tvar appLogo = Ti.UI.createView({\r\n\t\tleft : \"20dp\",\r\n\t\t// 31x35 fits the image\r\n\t\twidth : \"31dp\",\r\n\t\theight : \"35dp\",\r\n\t\tbackgroundImage : \"/img/logo_white_little.png\",\r\n\t\ttouchEnabled : false\r\n\t});\r\n\r\n\tbackClickableView.add(backArrow);\r\n\tbackClickableView.add(appLogo);\r\n\tbackClickableView.addEventListener('click', function() {\r\n\t\tTitanium.Media.hideCamera();\r\n\t});\r\n\tbackClickableView.addEventListener('touchstart', function() {\r\n\t\tbackClickableView.setOpacity(0.5);\r\n\t\tbackClickableView.setBackgroundColor(\"white\");\r\n\t});\r\n\tbackClickableView.addEventListener('touchend', function() {\r\n\t\tbackClickableView.setOpacity(1);\r\n\t\tbackClickableView.setBackgroundColor(\"transparent\");\r\n\t});\r\n\theader.add(backClickableView);\r\n\r\n\tvar photoView = Ti.UI.createView({\r\n\t\twidth : photoViewDim,\r\n\t\theight : photoViewDim,\r\n\t\tbackgroundColor : \"transparent\",\r\n\t\ttouchEnabled : false\r\n\t});\r\n\r\n\tvar optionBar = Ti.UI.createView({\r\n\t\ttop : \"3dp\",\r\n\t\twidth : Ti.UI.FILL,\r\n\t\theight : Ti.UI.FILL,\r\n\t\tbottom : 0,\r\n\t\tbackgroundColor : \"black\"\r\n\t});\r\n\r\n\tvar switchCameraBtn = Ti.UI.createButton({\r\n\t\twidth : \"37dp\",\r\n\t\theight : \"37dp\",\r\n\t\tbackgroundImage : \"/img/btn/switch_camera.png\"\r\n\t});\r\n\tswitchCameraBtn.addEventListener('click', function() {\r\n\t\tif (camera == \"rear\") {\r\n\t\t\tTitanium.Media.switchCamera(Titanium.Media.CAMERA_FRONT);\r\n\t\t\tcamera = \"front\";\r\n\t\t} else {\r\n\t\t\tTitanium.Media.switchCamera(Titanium.Media.CAMERA_REAR);\r\n\t\t\tcamera = \"rear\";\r\n\t\t}\r\n\r\n\t});\r\n\tvar startFlashImage = \"/img/btn/flash_auto.png\";\r\n\tswitch(Titanium.Media.cameraFlashMode) {\r\n\tcase Titanium.Media.CAMERA_FLASH_OFF:\r\n\t\tTitanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_AUTO);\r\n\t\tstartFlashImage = \"/img/btn/flash_off.png\";\r\n\t\tbreak;\r\n\tcase Titanium.Media.CAMERA_FLASH_ON:\r\n\t\tTitanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_OFF);\r\n\t\tstartFlashImage = \"/img/btn/flash_on.png\";\r\n\t\tbreak;\r\n\tdefault:\r\n\t\tbreak;\r\n\t}\r\n\r\n\tvar flashBtn = Ti.UI.createButton({\r\n\t\twidth : \"35dp\",\r\n\t\theight : \"35dp\",\r\n\t\tbackgroundImage : startFlashImage,\r\n\t\tright : \"10dp\"\r\n\t});\r\n\tflashBtn.addEventListener('click', function() {\r\n\t\tswitch(Titanium.Media.cameraFlashMode) {\r\n\t\tcase Titanium.Media.CAMERA_FLASH_AUTO:\r\n\t\t\tTitanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_ON);\r\n\t\t\tflashBtn.backgroundImage = \"/img/btn/flash_on.png\";\r\n\t\t\tbreak;\r\n\t\tcase Titanium.Media.CAMERA_FLASH_OFF:\r\n\t\t\tTitanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_AUTO);\r\n\t\t\tflashBtn.backgroundImage = \"/img/btn/flash_auto.png\";\r\n\t\t\tbreak;\r\n\t\tcase Titanium.Media.CAMERA_FLASH_ON:\r\n\t\t\tTitanium.Media.setCameraFlashMode(Titanium.Media.CAMERA_FLASH_OFF);\r\n\t\t\tflashBtn.backgroundImage = \"/img/btn/flash_off.png\";\r\n\t\t\tbreak;\r\n\t\t}\r\n\t});\r\n\toptionBar.add(switchCameraBtn);\r\n\toptionBar.add(flashBtn);\r\n\r\n\tvar takePictureView = Ti.UI.createView({\r\n\t\twidth : Ti.UI.FILL,\r\n\t\theight : viewsHeight,\r\n\t\tbackgroundColor : \"black\"\r\n\t});\r\n\ttakePictureView.addEventListener('click', function() {\r\n\t\tTitanium.Media.takePicture();\r\n\t});\r\n\tvar takePictureBtn = Ti.UI.createImageView({\r\n\t\twidth : \"auto\",\r\n\t\theight : Ti.UI.FILL,\r\n\t\timage : \"/img/btn/camera_icon_white.png\",\r\n\t\ttop : \"10dp\",\r\n\t\tbottom : \"10dp\",\r\n\t\ttouchEnabled : false\r\n\t});\r\n\ttakePictureView.add(takePictureBtn);\r\n\theader.add(optionBar);\r\n\toverlay.add(header);\r\n\toverlay.add(photoView);\r\n\toverlay.add(takePictureView);\r\n\r\n\treturn overlay;\r\n}", "attachment": [ { "id": "53681", "filename": "IMG-20150118-WA0001.jpg", "author": { "name": "Kiulomb", "key": "kiulomb", "displayName": "Luca Colombo", "active": true, "timeZone": "America/Los_Angeles" }, "created": "2015-01-18T18:05:22.000+0000", "size": 49918, "mimeType": "image/jpeg" } ], "flagged": false, "summary": "Android camera stretched with overlay", "creator": { "name": "Kiulomb", "key": "kiulomb", "displayName": "Luca Colombo", "active": true, "timeZone": "America/Los_Angeles" }, "subtasks": [], "reporter": { "name": "Kiulomb", "key": "kiulomb", "displayName": "Luca Colombo", "active": true, "timeZone": "America/Los_Angeles" }, "environment": "Windows 7-8.1 and Mac OS X 10.9-10.10\r\nTitanium SDK 3.4.0 and 3.5.0\r\nTitanium CLI 3.4.1\r\n\r\nSamsung Galaxy S4 Mini (GT-I9195)", "comment": { "comments": [ { "id": "339872", "author": { "name": "morahman", "key": "morahman", "displayName": "Motiur Rahman", "active": true, "timeZone": "Asia/Dhaka" }, "body": "Hello,\r\n\r\nWe have tested this issue on Galaxy S3. It works as expected. Camera preview is not stretched in height.\r\nSamsung Galaxy S4 Mini (GT-I9195) is not available here. Please test it with specific devices.\r\n\r\n*Testing Environment:* \r\nTitanium SDK: 3.5.0\r\nTitanium CLI: 3.4.1\r\nAndroid Device: Galaxy S3,\r\nOS X Version: 10.9.5,\r\nAppcelerator Studio: 3.4.1\r\n\r\n*Test Code*\r\n{code:title=app.js}\r\nvar win = Titanium.UI.createWindow({\r\n\t\tbackgroundColor : '#fff',\r\n\t\tlayout : 'vertical'\r\n\t});\r\n\r\n\tvar OpenCamera = Ti.UI.createButton({\r\n\t\tbackgroundColor : '#ff0000',\r\n\t\ttitle : 'Open Camera',\r\n\t\tcolor : '#fff',\r\n\t\twidth : Ti.UI.SIZE,\r\n\t\theight : Ti.UI.SIZE,\r\n\t\ttop : 10\r\n\r\n\t});\r\n\r\n\tOpenCamera.addEventListener('click', function() {\r\n\t\tfireUpTheCamera();\r\n\t});\r\n\r\n\twin.add(OpenCamera);\r\n\r\n\tvar anImageView = Ti.UI.createImageView({\r\n\t\twidth : Ti.UI.FILL,\r\n\t\theight : Ti.UI.FILL,\r\n\t\ttop : 10,\r\n\t\tautorotate : true,\r\n\t});\r\n\twin.add(anImageView);\r\n\r\n\tvar overlay = Ti.UI.createView({\r\n\t\twidth : 50,\r\n\t\theight : 50,\r\n\t});\r\n\t// Create an ImageView.\r\n\tvar overlayImg = Ti.UI.createImageView({\r\n\t\timage : '/appicon.png',\r\n\t\twidth : Ti.UI.SIZE,\r\n\t\theight : Ti.UI.SIZE,\r\n\t\tautorotate : true,\r\n\t});\r\n\r\n\toverlayImg.addEventListener('click', function() {\r\n\t\tTi.Media.takePicture();\r\n\t});\r\n\toverlay.add(overlayImg);\r\n\r\n\tfunction fireUpTheCamera() {\r\n\t\tTitanium.Media.showCamera({\r\n\r\n\t\t\tsuccess : function(event) {\r\n\t\t\t\tvar cropRect = event.cropRect;\r\n\t\t\t\tvar image = event.media;\r\n\r\n\t\t\t\tTi.API.debug('Our type was: ' + event.mediaType);\r\n\t\t\t\tif (event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO) {\r\n\t\t\t\t\tanImageView.image = image;\r\n\t\t\t\t\t//new_upload_profile_picture_update(anImageView.image);\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"got the wrong type back =\" + event.mediaType);\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tcancel : function() {\r\n\t\t\t},\r\n\t\t\terror : function(error) {\r\n\t\t\t\t// create alert\r\n\t\t\t\tvar a = Titanium.UI.createAlertDialog({\r\n\t\t\t\t\ttitle : 'Camera'\r\n\t\t\t\t});\r\n\r\n\t\t\t\t// set message\r\n\t\t\t\tif (error.code == Titanium.Media.NO_CAMERA) {\r\n\t\t\t\t\ta.setMessage('Please run this test on device');\r\n\t\t\t\t} else {\r\n\t\t\t\t\ta.setMessage('Unexpected error: ' + error.code);\r\n\t\t\t\t}\r\n\r\n\t\t\t\t// show alert\r\n\t\t\t\ta.show();\r\n\t\t\t},\r\n\t\t\tsaveToPhotoGallery : true,\r\n\t\t\tallowEditing : false,\r\n\t\t\toverlay : overlay,\r\n\t\t\tmediaTypes : [Ti.Media.MEDIA_TYPE_PHOTO]\r\n\t\t});\r\n\t}\r\n\r\n\twin.open();\r\n{code}\r\n\r\nThanks\r\n\r\n", "updateAuthor": { "name": "mpmiranda", "key": "mpmiranda", "displayName": "Mauro Parra-Miranda", "active": true, "timeZone": "America/Mexico_City" }, "created": "2015-01-20T11:29:49.000+0000", "updated": "2015-01-26T21:30:25.000+0000" } ], "maxResults": 2, "total": 2, "startAt": 0 } } }