Tinder like function, appcelerator

Question

I tried to re create a Tinder like function.

I found this code :

var win = Titanium.UI.createWindow({
    backgroundColor: "#ffffff",
    title: "win"
});

// animations
var animateLeft = Ti.UI.createAnimation({
    left: -520,
    transform: Ti.UI.create2DMatrix({rotate: 60}),
    opacity: 0,
    duration: 300
});
var animateRight = Ti.UI.createAnimation({
    left: 520,
    transform: Ti.UI.create2DMatrix({rotate: -60}),
    opacity: 0,
    duration: 300
});

var curX = 0;

win.addEventListener('touchstart', function (e) {
    curX = parseInt(e.x, 10);
});

win.addEventListener('touchmove', function (e) {
    if (!e.source.id || e.source.id !== 'oferta') {
        return;
    }

    // Subtracting current position to starting horizontal position
    var coordinates = parseInt(e.x, 10) - curX;
    // Defining coordinates as the final left position

    var matrix = Ti.UI.create2DMatrix({rotate: -(coordinates / 10)});

    var animate = Ti.UI.createAnimation({
        left: coordinates,
        transform: matrix,
        duration: 20
    });

    e.source.animate(animate);

    e.source.left = coordinates;
});

win.addEventListener('touchend', function (e) {
    if (!e.source.id || e.source.id !== 'oferta') {
        return;
    }

    // No longer moving the window
    if (e.source.left >= 75) {
        e.source.animate(animateRight);
    } else if (e.source.left <= -75) {
        e.source.animate(animateLeft);
    } else {
        // Repositioning the window to the left
        e.source.animate({
            left: 0,
            transform: Ti.UI.create2DMatrix({rotate: 0}),
            duration: 300
        });
    }
});

for (var i = 0; i < 10; i++) {

    var wrap = Ti.UI.createView({
        "id": 'oferta',
        "width": 320,
        "height": 400,
        "backgroundColor": (i % 2 == 0 ? "red" : "blue")
    });

    var text = Ti.UI.createLabel({
        text: "row: " + i,
        color: "black"
    });

    wrap.add(text);

    win.add(wrap);
}

win.open();

But there's a weird behaviour. Indeed, When I took the wrap view from the top, everythnig is OK but if I put my finger on the bottom on the wrap view, the image becomes crazy..

Try the code and You will see strange behaviour.

I use Titanium SDK 5.2.2 and iOS 9.3.1 on an iPhone 6.

Here s a video showing the weird thing: http://tinypic.com/player.php?v=x37d5u%3E&s=9#.Vx_zDaOLQb0

(Sorry for the video size) Thanks for your help

*"a Tinder like function"* - What does that mean? You're trying to start a fire? — nnnnnn, Apr 25 '16 at 00:35
it would help if you can share a video recording of your screen/device — developer82, Apr 25 '16 at 09:59
Here s the video : Here s a video showing the weird thing: http://tinypic.com/player.php?v=x37d5u%3E&s=9#.Vx_zDaOLQb0 (Sorry for the video size) — Franck, Apr 26 '16 at 23:03
You should use a custom native module and not check for touch events as performance is quite bad this way. — danny005, Apr 28 '16 at 01:46
The problem with native module is that sometimes, it is not support anymore after the developer stop to maintain it. Any other solution ? Did you test the code ? — Franck, Apr 28 '16 at 20:11

score 1 · Answer 1 · answered Apr 28 '16 at 00:28

Use this code to convert pxToDp and vice versa:

Put following code in your lib folder and include it with require("measurement") instead of require("alloy/measurement")

var dpi = Ti.Platform.displayCaps.dpi, density = Ti.Platform.displayCaps.density;

exports.dpToPX = function(val) {
    switch (density) {
      case "xxxhigh":
        return 5 * val;

      case "xxhigh":
        return 4 * val;

      case "xhigh":
        return 3 * val;

      case "high":
        return 2 * val;

      default:
        return val;
    }
};

exports.pxToDP = function(val) {
    switch (density) {
      case "xxxhigh":
        return 5 / val;

      case "xxhigh":
        return 4 / val;
      case "xhigh":
        return val / 3;

      case "high":
        return val / 2;

      default:
        return val;
    }
};

exports.pointPXToDP = function(pt) {
    return {
        x: exports.pxToDP(pt.x),
        y: exports.pxToDP(pt.y)
    };
};

Thanks @Michael What about moving on Y coordinates ? Like in Tinder you can move the picture from left to right but also from top to Bottom .. How can I do that ? ??? thnaks — Franck, Apr 28 '16 at 23:01

score 1 · Answer 2 · answered Apr 28 '16 at 23:00

Many thanks to all !!! It works using this code ::

var win = Titanium.UI.createWindow({
    backgroundColor: "#ffffff",
    title: "win"
});

// animations
var animateLeft = Ti.UI.createAnimation({
    left: -520,
    transform: Ti.UI.create2DMatrix({rotate: 60}),
    opacity: 0,
    duration: 300
});
var animateRight = Ti.UI.createAnimation({
    left: 520,
    transform: Ti.UI.create2DMatrix({rotate: -60}),
    opacity: 0,
    duration: 300
});

Ti.include('measurement.js');


var curX = 0;
var wrap = [];
var topWrap = 100; //(Titanium.Platform.displayCaps.platformHeight - 400) / 2;
var leftWrap =  50; //(Titanium.Platform.displayCaps.platformWidth - 320) / 2;


for (var i = 0; i < 10; i++) {

    wrap[i] = Ti.UI.createView({
    "id": 'oferta',
    "width": Titanium.Platform.displayCaps.platformWidth - 100,
    "height": Titanium.Platform.displayCaps.platformHeight - 300,
    image:(i % 2 == 0 ? 'principale.png' : 'principale1.png'),
    "backgroundColor": (i % 2 == 0 ? "red" : "blue"),
    top:topWrap,
    left:leftWrap,
});



    wrap[i].addEventListener('touchstart', function (e) {
//        curX = parseInt(e.x, 10);
          curX = pxToDP(parseInt(e.x, 10));
//          curY = pxToDP(parseInt(e.Y, 10));
    });

    wrap[i].addEventListener('touchmove', function (e) {

        // Subtracting current position to starting horizontal position
//        var coordinates = parseInt(e.x, 10) - curX;
        // Defining coordinates as the final left position
var coordinatesX = pxToDP(parseInt(e.x, 10))  - curX;
//var coordinatesY = pxToDP(parseInt(e.y, 10))  - curY;
        var matrix = Ti.UI.create2DMatrix({rotate: -(coordinatesX / 10)});


        var animate = Ti.UI.createAnimation({
            left: coordinatesX,
//            top: coordinatesY,
            transform: matrix,
            duration: 10
        });

        e.source.animate(animate);

        e.source.left = coordinatesX;
//        e.source.top = coordinatesY;

    });

    wrap[i].addEventListener('touchend', function (e) {

        // No longer moving the window
        if (e.source.left >= 75) {
            e.source.animate(animateRight);
        } else if (e.source.left <= -75) {
            e.source.animate(animateLeft);
        } else {
            // Repositioning the window to the left
            e.source.animate({
                left: leftWrap,
                transform: Ti.UI.create2DMatrix({rotate: 0}),
                duration: 300
            });
        }
    });






    win.add(wrap);
}

win.open();

And the measurement.js file is :

var dpi = Ti.Platform.displayCaps.dpi, density = Ti.Platform.displayCaps.density;

function dpToPX(val) {
    switch (density) {
      case "xxxhigh":
        return 5 * val;

      case "xxhigh":
        return 4 * val;

      case "xhigh":
        return 3 * val;

      case "high":
        return 2 * val;

      default:
        return val;
    }
};

function pxToDP(val) {
    switch (density) {
      case "xxxhigh":
        return 5 / val;

      case "xxhigh":
        return 4 / val;
      case "xhigh":
        return val / 3;

      case "high":
        return val / 2;

      default:
        return val;
    }
};

function pointPXToD(pt) {
    return {
        x: pxToDP(pt.x),
        y: pxToDP(pt.y)
    };
};

@CarlosHenriqueLustosa ios. Did you try on android ? – Franck May 09 '16 at 18:58 — Franck, May 09 '16 at 18:58

score 0 · Answer 3 · answered Apr 25 '16 at 11:23

0

You have to convert px to dp.

var measurement = require('alloy/measurement');

win.addEventListener('touchstart', function (e) {
  curX =  measurement.pxToDP(parseInt(e.x, 10));
  Ti.API.info("touchstart curX: " + curX);
});

...
win.addEventListener('touchmove', function (e) {
if (!e.source.id || e.source.id !== 'oferta') {
    return;
}

// Subtracting current position to starting horizontal position
var coordinates = measurement.pxToDP(parseInt(e.x, 10))  - curX;
...

answered Apr 25 '16 at 11:23

Michael Bahl

2,941
1
13
16

Note that there is an issue with measurement bultin for high resolution screens.https://jira.appcelerator.org/browse/AC-3468?jql=text%20~%20%22measurement%22 – Michael Bahl Apr 25 '16 at 11:25
Here s a video showing the weird thing: http://tinypic.com/player.php?v=x37d5u%3E&s=9#.Vx_zDaOLQb0 (Sorry for the video size) – Franck Apr 26 '16 at 23:03
I tried your sample but the system return me an error : "Couldn't find module: alloy/measurement for architecture: arm64" – Franck Apr 26 '16 at 23:14
maybe **alloy/measurement** ist not availaable cause you are not using alloy project, don't care of that. – Michael Bahl Apr 28 '16 at 00:24
hi @michael-bahl What about moving on Y coordinates ? Like in Tinder you can move the picture from left to right but also from top to Bottom .. How can I do that ? ??? Any solution ? thanks – Franck May 09 '16 at 18:55
Hi @michael do you have any answer for the Y coordinates moves ? Thanks. – Franck Aug 27 '16 at 05:04

Tinder like function, appcelerator

3 Answers3