1. #1
    Ext User
    Join Date
    Nov 2010
    Location
    Mexico City
    Posts
    6
    Vote Rating
    0
    2000Rivets is on a distinguished road

      0  

    Default Help; how to enable iPad touch-events

    Help; how to enable iPad touch-events


    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

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    79
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  3. #3
    Touch Premium Member jeffcrilly's Avatar
    Join Date
    May 2008
    Posts
    89
    Vote Rating
    0
    jeffcrilly is on a distinguished road

      0  

    Default


    Quote Originally Posted by 2000Rivets View Post
    .... 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
    Code:
        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...
    Code:
                
    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

  4. #4
    Ext User
    Join Date
    Nov 2010
    Location
    Mexico City
    Posts
    6
    Vote Rating
    0
    2000Rivets is on a distinguished road

      0  

    Default


    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:
    Code:
    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

  5. #5
    Touch Premium Member jeffcrilly's Avatar
    Join Date
    May 2008
    Posts
    89
    Vote Rating
    0
    jeffcrilly is on a distinguished road

      0  

    Default


    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

  6. #6
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    195
    Vote Rating
    2
    hitman01 is on a distinguished road

      0  

    Default


    Have you had an problem where pinch conflict with scroll?

Similar Threads

  1. Problems with iFrame Sencha Touch, Android and iPad???
    By olin in forum Sencha Touch 1.x: Discussion
    Replies: 18
    Last Post: 11 Jul 2012, 5:26 AM
  2. Free Gomoku Game for ipad - using Sencha Touch
    By namheo in forum Sencha Touch 1.x: Examples and Showcases
    Replies: 8
    Last Post: 3 Apr 2012, 11:38 AM
  3. Compare Development IPad native(objectif-c) and Sencha Touch
    By Dragnic in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 16 Aug 2010, 12:41 AM
  4. touch events iPad text-input : don't exist?
    By tr888 in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 22 Jul 2010, 2:54 PM

Thread Participants: 3

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi