Help; how to enable iPad touch-events

[2000Rivets]

Hi everyone, I'm trying to make an application which loads images and put them into carousel (using Sencha Touch) that's not problem at all, the problem here's: how should I make to enable ipad Touch events, like zoom-in, zoom-out, save as ... options?, It doesn't have any problems to display when you launch the app at iPhone, the Touch events aren't enabled neither but you can see pictures clearly, the problem becomes when launching at iPad, because remains a lot of unused space. Thanks for your answers

[jay@moduscreate.com]

That becomes hard because the drag event requires a tap + hold user interactions, which conflict with the user interactions that you describe.

[jeffcrilly]

.... how should I make to enable ipad Touch events, like zoom-in, zoom-out, save as ... options?,

I'm working on a similar (if not the same) problem.. afaict, if you want zoom in/out on an image you need to listen for and handle the "pinch" events. Your callback event handler will get an event object which will contain the scale of the pinch gesture (among other interesting attributes of the gesture). The event handler will also get the "touch" events, etc.

There is an example of hooking up the event handler in the "touch events" kitchen sink demo..
sencha-touch-1.0/examples/kitchensink/src/demos/touch.js

    afterRender: function() {
        demos.TouchImpl.TouchPad.superclass.afterRender.call(this);

        this.mon(this.el, {
            touchstart: this.handleEvent,
            touchend: this.handleEvent,
            touchmove: this.handleEvent,
            touchdown: this.handleEvent,
            dragstart: this.handleEvent,
            drag: this.handleEvent,
            dragend: this.handleEvent,
            singletap: this.handleEvent,
            tap: this.handleEvent,
            doubletap: this.handleEvent,
            taphold: this.handleEvent,
            tapcancel: this.handleEvent,
            swipe: this.handleEvent,
            pinch: this.handleEvent,
            pinchstart: this.handleEvent,
            pinchend: this.handleEvent,
            scope: this
        });
    },

    handleEvent: function(e) {
        this.fireEvent('log', e.type, e);
    }

Also see src/gestures/Pinch.js .. afaict the event passed to handleEvent() has the following attributes relevant to pinch gestures...

            
info = {
                scale: scale,
                deltaScale: scale - 1,
                previousScale: me.previousScale,
                previousDeltaScale: scale - me.previousScale,
                distance: distance,
                deltaDistance: distance - me.startDistance,
                startDistance: me.startDistance,
                previousDistance: me.previousDistance,
                previousDeltaDistance: distance - me.previousDistance,
                firstTouch: firstTouch,
                secondTouch: secondTouch,
                firstPageX: firstTouch.pageX,
                firstPageY: firstTouch.pageY,
                secondPageX: secondTouch.pageX,
               secondPageY: secondTouch.pageY,
                // The midpoint between the touches is (x1 + x2) / 2, (y1 + y2) / 2
                midPointX: (firstTouch.pageX + secondTouch.pageX) / 2,
                midPointY: (firstTouch.pageY + secondTouch.pageY) / 2
            };

I'm currently using e.scale to scale the image width and height in the event hander... however this is not ideal... so I'm looking for a way to use the webkitTransform.. that worked for DIVs but not for IMGs. (still sorting that out.)

jeff

[2000Rivets]

thanks a lot Jeff, that was very usefully for me, it doesn´t work exactely as I wanted but it works to perform a simulated zoom in and zoom out, would you have any idea how to make it grow by the center?, because as you can see it grows form te left-top side

The code i used was:

demos.TouchImpl.TouchPad = Ext.extend(Ext.Component,{
        id:'touchPad',
        html:'1Touch Here  </br> <img id="img" src="./images/tablet_startup.png" />',
        
    initComponent: function(){
        this.addEvents('log');
        demos.TouchImpl.TouchPad.superclass.initComponent.call(this);
    },
    
    afterRender: function() {
        demos.TouchImpl.TouchPad.superclass.afterRender.call(this);

        this.mon(this.el, {
            touchstart: this.handleEvent,
            touchend: this.handleEvent,
            touchmove: this.handleEvent,
            touchdown: this.handleEvent,
            dragstart: this.handleEvent,
            drag: this.handleEvent,
            dragend: this.handleEvent,
            singletap: this.handleEvent,
            tap: this.handleEvent,
            doubletap: this.handleEvent,
            taphold: this.handleEvent,
            tapcancel: this.handleEvent,
            swipe: this.handleEvent,
            pinch: this.handleEvent,
            pinchstart: this.handleEvent,
            pinchend: this.handleEvent,
            scope: this
        });
    },

    handleEvent: function(e) {
        this.fireEvent('log', e.type, e);
        if(e.type == 'pinch'){
            Ext.getDom('img').width= (e.targetTouches[0].pageX/2 + e.targetTouches[1].pageX/2)*(-1);    
            Ext.getDom('img').height= tabPanel2.height/2-(e.targetTouches[0].pageY/2 + e.targetTouches[1].pageY/2)*(-1);
            Ext.getDom('img').x = (e.targetTouches[0].pageX + e.targetTouches[1].pageX) / 2;
            Ext.getDom('img').y = (e.targetTouches[0].pageY + e.targetTouches[1].pageY) / 2;
        }
        
        if(e.type == 'scrollend'){
                Ext.getDom('img').x = (e.targetTouches[0].pageX + e.targetTouches[1].pageX) / 2;
                Ext.getDom('img').y = (e.targetTouches[0].pageY + e.targetTouches[1].pageY) / 2;
            }
        
        if(e.type == 'doubletap'){
            var widthImg= Ext.getDom('img').width;
            for(i=0; i<widthImg; i+=10){
                Ext.getDom('img').width= tabPanel2.width/2-(i*2);
                Ext.getDom('img').x = (e.targetTouches[0].pageX + e.targetTouches[1].pageX) / 2;
                Ext.getDom('img').y = (e.targetTouches[0].pageY + e.targetTouches[1].pageY) / 2;
            }
        }

not all of the events I'm using at all but i left them to check out how does it work

thank you very much

[jeffcrilly]

Iirc I also handle the "pinchStart" event.... on pinchStart I record the current width of the image. Then on each 'pinch' event I scale the image in x and y by info.scale. There's some math in the gestures/pinch.js class (part of sencha but not in the api doc) that does the math to figure out scale. Essentially the "scale" is the hypotenuse of the triangle determined by the two 'touch' positions in the pinch event.

(I would post my code, but... its at home, not on this machine.)

As for the scaling from the center... yes.. I have the same issue.

Two solutions come to mind... but I'll need to test these out sometime.

1) set the scroll position of the image to correct for the offset caused by the scaling (on each pinch event).

2) use webkittransform: scale()... it seems this will scale the image about the center; see this site for an example: www . the-art-of-web . com / css / css-animation /
(sorry, non url posted because i think posts are moderated if they have Urls.)

Still, scaling about the center is not quite right... the app should scale about the one of the touch points.. from looking at the photo/cameraroll app it seems to scale about the first touch point.

jeff

[hitman01]

Have you had an problem where pinch conflict with scroll?