[TIMOB-25632] iOS: Unable to get x,y coordinates with respect to screen size

GitHub Issue	n/a
Type	Story
Priority	None
Status	Closed
Resolution	Done
Resolution Date	2018-01-04T07:44:30.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	n/a
Reporter	Mostafizur Rahman
Assignee	Vijay Singh
Created	2017-12-27T16:07:41.000+0000
Updated	2018-08-06T17:34:49.000+0000

Description

Hello, Unable to get x,y coordinates with respect to the screen size on iOS. But android its showing the value. We are able to achieve this in the Android using the “e.source.rect.x” and “e.source.rect.y” properties on click of the image view. But considering iOS, we are not seeing any rect property within the “e”. *Test Environment:* Appcelerator Command-Line Interface, version 7.0.0 and 7.0.1 SDK: 7.0.0.GA and 7.0.1.GA iOS simulator *Test Code:*

var win = Ti.UI.createWindow({
	backgroundColor : "#fff",
});
var mainScrollView = Ti.UI.createScrollView({
	height : Ti.UI.SIZE,
	width : Ti.UI.SIZE,
	layout : 'vertical'
});
var toolTipYPosition,
    scrollViewHeight,
    scrollViewWidth;
var toolTipViewHeight = 200,
    toolTipViewWidth = 300;
var addBelow = false;
function addToolTipView() {

	var mainView = Ti.UI.createView({
		height : Ti.UI.FILL,
		width : Ti.UI.FILL,
		backgroundColor : '#9ffffff'
		//layout : 'vertical'
	});
	var toolTipView = Ti.UI.createView({
		height : toolTipViewHeight,
		width : Ti.UI.FILL,
		backgroundColor : 'grey',
		center : {
			// x : toolTipXPosition,
			y : addBelow ? toolTipYPosition + 100 : toolTipYPosition - 116
		},
		borderColor : 'red',
		borderRadius : 1,
		borderWidth : 1,
		layout : 'vertical'
	});
	Ti.API.info('toolTipYPosition.....=' + toolTipYPosition + 'scrollViewHeight....' + scrollViewHeight + 'scrollViewWidth....' + scrollViewWidth);
	var tableviewRows = [];
	var row1,
	    row2,
	    row3;
	var tableView = Ti.UI.createTableView({
		width : Ti.UI.FILL,
		height : 150
		//backgroundColor : '#9ffffff',

	});
	row1 = Ti.UI.createTableViewRow({
		width : Ti.UI.SIZE,
		rowIndex : 'unSubmitted',
		height : Ti.UI.SIZE,
		color : '#000000',
		title : "View Unsubmitted Claims"
	});
	row2 = Ti.UI.createTableViewRow({
		width : Ti.UI.SIZE,
		height : Ti.UI.SIZE,
		rowIndex : 'Submitted',
		color : '#000000',
		title : "View Claims in Process"
	});
	row3 = Ti.UI.createTableViewRow({
		width : Ti.UI.SIZE,
		height : Ti.UI.SIZE,
		rowIndex : 'inProcess',
		color : '#000000',
		title : "View Completed Claims"
	});
	tableviewRows.push(row1);
	tableviewRows.push(row2);
	tableviewRows.push(row3);
	tableView.data = tableviewRows;
	tableView.addEventListener('click', function(e) {
		Ti.API.info('tableView.addEventListener.....' + JSON.stringify(e));
	});
	var arrowImage = Ti.UI.createImageView({
		width : Ti.UI.SIZE,
		height : Ti.UI.SIZE,
		image : addBelow ? '/images/up-arrow-triangle-outline.png' : '/images/down-arrow-triangle-outline.png',
		right : 10
	});
	if (addBelow) {
		toolTipView.add(arrowImage);
		toolTipView.add(tableView);
	} else {
		toolTipView.add(tableView);
		toolTipView.add(arrowImage);
	}

	mainView.add(toolTipView);
	addBelow = false;
	mainView.addEventListener('click', function(e) {
		mainView.height = 0;
	});

	return mainView;

}

for (var i = 0; i < 10; i++) {
	var mainView = Ti.UI.createView({
		width : Ti.UI.FILL,
		height : 300,
		borderColor : 'red',
		borderRadius : 2,
		borderWidth : 2,
		layout : 'vertical',
		top : 10
	});
	var titleView = Ti.UI.createView({
		width : Ti.UI.FILL,
		height : Ti.UI.SIZE
		//layout : 'horizontal'
	});
	var titleLabel = Ti.UI.createLabel({
		width : '70%',
		height : Ti.UI.SIZE,
		left : 10,
		text : "My Submitted Eclaims",
		color : 'black'
	});
	titleView.add(titleLabel);
	discoveryImage = Ti.UI.createImageView({
		width : Ti.UI.SIZE,
		height : Ti.UI.SIZE,
		image : '/images/more.png',
		right : 10,
		borderColor : 'green',
		borderWidth : 1,
	});
	titleView.add(discoveryImage);
	discoveryImage.addEventListener('click', function(e) {
		Ti.API.info('.....' + JSON.stringify(e));
		toolTipYPosition = e.source.rect.y;
		if (toolTipYPosition < scrollViewHeight / 2) {
			addBelow = true;
		}
		win.add(addToolTipView());
	});
	mainView.add(titleView);
	mainScrollView.add(mainView);
}

win.add(mainScrollView);

mainScrollView.addEventListener('postlayout', function(e) {
	Ti.API.info('mainScrollView rect: ' + mainScrollView.rect.width + ',' + mainScrollView.rect.height);
	scrollViewHeight = mainScrollView.rect.height;
	scrollViewWidth = mainScrollView.rect.width;
});
win.open();

*Steps to reproduce :* 1) Create a sample project 2) Copy the above code app.js file. 3) Place the attached images in the resources/iphone/images/ folder. 4) Click on any imageview. *iOS out comes:*

[INFO] :   .....{"y":42.5,"force":0,"timestamp":13640.100374778001,"altitudeAngle":1.5707963705062866,"x":16.5,"maximumPossibleForce":6.666666507720947,"bubbles":true,"type":"click","source":{"animating":false,"paused":false,"reverse":false,"stopped":true,"autorotate":true,"duration":200,"horizontalWrap":true,"visible":true,"touchEnabled":true,"width":"SIZE","height":"SIZE","right":10,"borderColor":"green","borderWidth":1,"image":"/images/more.png"},"cancelBubble":false}
[INFO] :   toolTipYPosition.....=0 scrollViewHeight....667scrollViewWidth....375

*Android Output:*

[INFO] :   .....{"type":"click","source":{"image":"/images/more.png","animating":false,"reverse":false,"paused":false,"tintColor":0,"hiddenBehavior":4,"enabled":true,"visible":true,"touchEnabled":true,"right":10,"borderWidth":1,"borderColor":"green","backgroundRepeat":false,"height":"size","width":"size","keepScreenOn":false,"children":[],"size":{"height":43,"width":43,"y":0,"x":0},"rect":{"height":43,"width":43,"y":340,"x":307},"apiName":"Ti.UI.ImageView","bubbleParent":true,"soundEffectsEnabled":true,"horizontalWrap":true,"_events":{"click":{}}},"y":26.9931640625,"size":0,"force":0,"x":21,"bubbles":true,"cancelBubble":false}
[INFO] :   toolTipYPosition.....=340 scrollViewHeight....560scrollViewWidth....360

Thanks

Attachments

File	Date	Size
sampleCodeAndAssets.zip	2017-12-27T16:11:58.000+0000	5351

Comments

Vijay Singh 2017-12-28

Hi, In iOS relative position can be calculated as - var convertedPoint = titleView.convertPointToView({x:this.rect.x, y:this.rect.y}, mainScrollView); In given code if I modify for loop as below, it will work for both iOS and android -

   for (var i = 0; i < 10; i++) {
       (function () {
       var mainView1 = Ti.UI.createView({
           width : Ti.UI.FILL,
           height : 300,
           borderColor : 'red',
           borderRadius : 2,
           borderWidth : 2,
           layout : 'vertical',
           top : 10
       });
       var titleView = Ti.UI.createView({
           width : Ti.UI.FILL,
           height : Ti.UI.SIZE
           //layout : 'horizontal'
       });
       var titleLabel = Ti.UI.createLabel({
           width : '70%',
           height : Ti.UI.SIZE,
           left : 10,
           text : "My Submitted Eclaims",
           color : 'black'
       });
       titleView.add(titleLabel);
       var discoveryImage = Ti.UI.createImageView({
           width : Ti.UI.SIZE,
           height : Ti.UI.SIZE,
           image : 'more.png',
           right : 10,
           borderColor : 'green',
           borderWidth : 1,
       });
       titleView.add(discoveryImage);
       discoveryImage.addEventListener('click', function(e) {
           Ti.API.info('.....' + JSON.stringify(e));
           
          if (Ti.Platform.osname === 'android') {
            toolTipYPosition = e.source.rect.y;
          } else {
               var convertedPoint = titleView.convertPointToView({x:this.rect.x, y:this.rect.y}, mainScrollView);
               Ti.API.info('.....converted point is' + convertedPoint.x + '  ' + convertedPoint.y);
               toolTipYPosition = convertedPoint.y;
          }
   
           if (toolTipYPosition < scrollViewHeight / 2) {
               addBelow = true;
           }
           win.add(addToolTipView());
       });
       mainView1.add(titleView);
       mainScrollView.add(mainView1);
     }());
   }

[~mrahman] Can you check with client, if it works for them? Thanks

Vijay Singh 2017-12-28

Modified code of attached code, which is working good in both iOS and android -

   var win = Ti.UI.createWindow({
       backgroundColor : "#fff",
   });
   var mainScrollView = Ti.UI.createScrollView({
       height : Ti.UI.SIZE,
       width : Ti.UI.SIZE,
       layout : 'vertical'
   });
   var toolTipYPosition,
       scrollViewHeight,
       scrollViewWidth;
   var toolTipViewHeight = 200,
       toolTipViewWidth = 300;
   var addBelow = false;
   function addToolTipView() {
    
       var mainView = Ti.UI.createView({
           height : Ti.UI.FILL,
           width : Ti.UI.FILL,
          // backgroundColor : '#9ffffff'
           //layout : 'vertical'
       });
       var toolTipView = Ti.UI.createView({
           height : toolTipViewHeight,
           width : Ti.UI.FILL,
           backgroundColor : 'gray',
           center : {
               // x : toolTipXPosition,
               y : addBelow ? toolTipYPosition + 100 : toolTipYPosition - 116
           },
           borderColor : 'red',
           borderRadius : 1,
           borderWidth : 1,
           layout : 'vertical'
       });
       Ti.API.info('toolTipYPosition.....=' + toolTipYPosition + 'scrollViewHeight....' + scrollViewHeight + 'scrollViewWidth....' + scrollViewWidth);
       var tableviewRows = [];
       var row1,
           row2,
           row3;
       var tableView = Ti.UI.createTableView({
           width : Ti.UI.FILL,
           height : 150,
           backgroundColor :'gray'
       });
       row1 = Ti.UI.createTableViewRow({
           width : Ti.UI.SIZE,
           rowIndex : 'unSubmitted',
           height : Ti.UI.SIZE,
           color : '#000000',
           title : "View Unsubmitted Claims",
           backgroundColor:'gray'
       });
       row2 = Ti.UI.createTableViewRow({
           width : Ti.UI.SIZE,
           height : Ti.UI.SIZE,
           rowIndex : 'Submitted',
           color : '#000000',
           title : "View Claims in Process",
                   backgroundColor:'gray'
   
       });
       row3 = Ti.UI.createTableViewRow({
           width : Ti.UI.SIZE,
           height : Ti.UI.SIZE,
           rowIndex : 'inProcess',
           color : '#000000',
           title : "View Completed Claims",
                   backgroundColor:'gray'
   
       });
       tableviewRows.push(row1);
       tableviewRows.push(row2);
       tableviewRows.push(row3);
       tableView.data = tableviewRows;
       tableView.addEventListener('click', function(e) {
           Ti.API.info('tableView.addEventListener.....' + JSON.stringify(e));
       });
       var arrowImage = Ti.UI.createImageView({
           width : Ti.UI.SIZE,
           height : Ti.UI.SIZE,
           image : addBelow ? 'up-arrow-triangle-outline.png' : 'down-arrow-triangle-outline.png',
           right : 10
       });
       if (addBelow) {
           toolTipView.add(arrowImage);
           toolTipView.add(tableView);
       } else {
           toolTipView.add(tableView);
           toolTipView.add(arrowImage);
       }
    
       mainView.add(toolTipView);
       addBelow = false;
       mainView.addEventListener('click', function(e) {
           mainView.height = 0;
       });
    
       return mainView;
    
   }
    
   for (var i = 0; i < 10; i++) {
       (function () {
       var mainView1 = Ti.UI.createView({
           width : Ti.UI.FILL,
           height : 300,
           borderColor : 'red',
           borderRadius : 2,
           borderWidth : 2,
           layout : 'vertical',
           top : 10
       });
       var titleView = Ti.UI.createView({
           width : Ti.UI.FILL,
           height : Ti.UI.SIZE
           //layout : 'horizontal'
       });
       var titleLabel = Ti.UI.createLabel({
           width : '70%',
           height : Ti.UI.SIZE,
           left : 10,
           text : "My Submitted Eclaims",
           color : 'black'
       });
       titleView.add(titleLabel);
       var discoveryImage = Ti.UI.createImageView({
           width : Ti.UI.SIZE,
           height : Ti.UI.SIZE,
           image : 'more.png',
           right : 10,
           borderColor : 'green',
           borderWidth : 1,
       });
       titleView.add(discoveryImage);
       discoveryImage.addEventListener('click', function(e) {
           Ti.API.info('.....' + JSON.stringify(e));
           
          if (Ti.Platform.osname === 'android') {
            toolTipYPosition = e.source.rect.y;
          } else {
               var convertedPoint = titleView.convertPointToView({x:this.rect.x, y:this.rect.y}, mainScrollView);
               Ti.API.info('.....converted point is' + convertedPoint.x + '  ' + convertedPoint.y);
               toolTipYPosition = convertedPoint.y;
          }
   
           if (toolTipYPosition < scrollViewHeight / 2) {
               addBelow = true;
           }
           win.add(addToolTipView());
       });
       mainView1.add(titleView);
       mainScrollView.add(mainView1);
     }());
   }
    
   win.add(mainScrollView);
    
   mainScrollView.addEventListener('postlayout', function(e) {
       Ti.API.info('mainScrollView rect: ' + mainScrollView.rect.width + ',' + mainScrollView.rect.height);
       scrollViewHeight = mainScrollView.rect.height;
       scrollViewWidth = mainScrollView.rect.width;
   });
   win.open();

Mostafizur Rahman 2017-12-28

[~vijaysingh], Yes, I can see the modified code is working fine for iOS and also sending to the customer. Thanks
Eric Merriman 2018-08-06

Closed as completed. If this is in error, please reopen.

JSON Source