Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-25839

TiAPI: Touch event coordinate units do not match between platforms

    Details

    • Story Points:
      8
    • Sprint:
      2019 Sprint 1

      Description

      Summary:
      The (x,y) units provided by View event's "touchstart", "touchmove", "touchend", and "touchcancel" do not match between Android and iOS. Both platforms ignore the "ti.ui.defaultunit" property setting in "tiapp.xml".

      On Android, the touch coordinates are always in "px" (ie: pixels).
      On iOS, the touch coordinates are always in "dip" (aka: "dp").

      Steps to Reproduce:

      1. Build and run the below code on Android.
      2. Drag your finger in the gray view.
      3. Notice that the blue square does not correctly following your finger.
      4. Build and run on iOS.
      5. Drag your finger in the gray view.
      6. Notice that the blue square correctly follows your finger.
      7. Change "tiapp.xml" property "ti.ui.defaultunit" to "px".
      8. Build and run on iOS.
      9. Drag your finger in the gray view.
      10. Notice that the blue square does not correctly following your finger.
      11. Build and run on Android.
      12. Drag your finger in the gray view.
      13. Notice that the blue square correctly follows your finger.

      function onTouch(event) {
      	if (event.source == containerView) {
      		touchView.center = { x: event.x, y: event.y };
      	}
      }
       
      var window = Ti.UI.createWindow(
      {
      	layout: "vertical",
      	fullscreen: true,
      	theme: "Theme.AppCompat.NoTitleBar",
      });
      window.add(Ti.UI.createLabel(
      {
      	text: "Touch Drag Test",
      	top: "20dp",
      }));
      var containerView = Ti.UI.createView(
      {
      	touchEnabled: true,
      	backgroundColor: "gray",
      	top: "10dp",
      	bottom: "20dp",
      	width: "90%",
      });
      var touchView = Ti.UI.createView(
      {
      	touchEnabled: false,
      	backgroundColor: "#008800",
      	width: "100dp",
      	height: "100dp",
      });
      containerView.add(touchView);
      containerView.addEventListener("touchstart", onTouch);
      containerView.addEventListener("touchmove", onTouch);
      containerView.addEventListener("touchend", onTouch);
      containerView.addEventListener("touchcancel", onTouch);
      containerView.addEventListener("click", onTouch);
      containerView.addEventListener("dblclick", onTouch);
      containerView.addEventListener("doubletap", onTouch);
      window.add(containerView);
      window.open();
      

      Work-Around:
      The following will work-around this issue on both Android and iOS...

      // Fetch the default unit property set in "tiapp.xml".
      var defaultUnit = Ti.App.Properties.getString("ti.ui.defaultunit", "dip");
      if (defaultUnit === "dp") {
      	defaultUnit = "dip";
      } else if (defaultUnit === "system") {
      	defaultUnit = (Ti.Platform.name === "android") ? "px" : "dip";
      }
       
      // Do the below when a touch event has been received.
      function onTouch(event) {
      	if (Ti.Platform.name === "android") {
      		event.x = Ti.UI.convertUnits(event.x + "px", defaultUnit);
      		event.y = Ti.UI.convertUnits(event.y + "px", defaultUnit);
      	} else if ((Ti.Platform.name === "iOS") || (Ti.Platform.name === "iPhone OS")) {
      		event.x = Ti.UI.convertUnits(event.x + "dip", defaultUnit);
      		event.y = Ti.UI.convertUnits(event.y + "dip", defaultUnit);
      	}
      	touchView.center = { x: event.x, y: event.y };
      }
      

      Ideal Solution:
      Convert native touch coordinates to use "ti.ui.defaultunit" on both Android and iOS. This way views can easily be dragged since their "x", "y", and "center" properties already respect the "ti.ui.defaultunit" property.
      Note that this would be a breaking change.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                jquick Joshua Quick
                Reporter:
                jquick Joshua Quick
                Reviewer:
                Vijay Singh
                Tester:
                Samir Mohammed
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-6232
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code