Mouse events. AddEventListener, Mobile finger movement

[Mauritz Zondagh]

Hi, can anyone point me in the right direction regarding touch movements on a mobile phone. I want to swipe from one screen to another, and previously in QT i did it it with mouse movement. I am a newbie in Droidscript and JS, and i am searching for a example how to detect the mouse (or your finger on mobile) current position.

Something like

window.addEventListener('mousemove', onMouseUpdate, false); // Where should this be, inside function start, and what sould window be (app,layout??)

function onMouseUpdate(e) {

    x = e.pageX;

    y = e.pageY;

    app.ShowPopup("xx");

}

but i do not get it working.

Thanks

[Alex F]

Do you mean smth like thks?

var lastAct;

function OnStart() {
lay= app.CreateLayout("linear",FillXY")
img= app.CreateImage(null,1,1);
img.SetOnTouch(touch)
lay.AddChild(img)
app.AddLayout(lay)
}

function touch(ev) {
if (lastAct != ev.Action) {
app.ShowPopup("Action: "+ev.Action+"; posX: "+ev.X+"; posY: "+ev.Y)
lastAct=ev.Action;
}
}

[Alex F]

Sry it is ev.action ^^

[Mauritz Zondagh]

Thankyou. This is exactly what i needed.

Tested and working fine.

var lastAct;

function OnStart()
{
lay= app.CreateLayout("linear","FillXY");

img= app.CreateImage(null,1,1);
img.SetOnTouch(touch);
lay.AddChild(img);
app.AddLayout(lay);
}

function touch(ev)
{
// if (lastAct != ev.action)
// {
app.ShowPopup("Action: "+ev.action+"; posX: "+ev.X+"; posY: "+ev.Y);
// lastAct=ev.action;
// }

[sankarshan dudhate]

This is a dirty code I use sometimes. You just swipe on the screen and it'll tell you the swipe direction.

var i = 0; //To count moving instances
var e1 = {}; var e2 = {}; //two objects

//Called when application is started.
function OnStart()
{
//Create a layout with objects vertically centered.
lay = app.CreateLayout( "linear", "VCenter,FillXY" );
lay.SetOnTouchMove( moving );

//Create a text label and add it to layout.
txt = app.CreateText( "Hello" );
txt.SetTextSize( 32 );
lay.AddChild( txt );

//Add layout to app.
app.AddLayout( lay );
}

function moving(e) {
i += 1;
e.x = e.x[0]; //First x value.
e.y = e.y[0]; //First y value
if(i==1) { //if its first instance
//alert(e.x + "," + e.y);
e1.x = e.x;
e1.y = e.y;
}
if(i==2) {//the second instance
//alert(e.x + "," + e.y);
e2.x = e.x;
e2.y = e.y;
}

if(i == 3) {//third instance
xdiff = e1.x - e2.x; //get the difference betn the two x
ydiff = e1.y - e2.y;

xdiff = Math.abs(xdiff);//xdiff can be -ve, so make it +ve
ydiff = Math.abs(ydiff);

if(xdiff > ydiff) {
alert("xdiff > ydiff");
if(xdiff < 0) alert("swipe towards leftwards");
else alert("swipe rightwards");
}

else if(xdiff < ydiff) {
alert("xdiff < ydiff");
if(ydiff < 0) alert("swipe upwards");
else alert("swipe downwards");
}
}
}

[Mauritz Zondagh]

Thanks, i will try this code.

I did a similar dirty code exercise in QT, but added a time variable to see if a swipe was far enough within a time period before switching screens.

Will report back later when done.

[Steve Garman]

If it's any help, I use this createSwipeLayout function for swipeable layouts when I only want to use them for displaying data.

It could probably be better encapsulated if I want to let it out in the wild world. It sort of grew from a long debugging session. 

Still, it might give you some ideas.

I don't really recommend using throw() without try/catch in non-personal projects either'

var lay2,orient;
function OnStart()
{
  orient = app.GetOrientation();
  var lay = createSwipeLayout( "linear", "VCenter,FillXY" );
  if(orient=="Portrait") lay.minSwipeY = 0.05;
  var txt = app.CreateText( "Swipe Up Or Down" );
  txt.SetTouchable( false );

  txt.SetTextSize( 32 );
  lay.AddChild( txt );

 
  app.AddLayout( lay );  
 
  //beware - may be called multipe times
  lay.SetOnSwipeY(lay_SwipeY);
 
  lay2 = createSwipeLayout( "linear", "VCenter,FillXY" );
  lay2.SetBackColor("#000066");
  var txt2 = app.CreateText( "Swipe Left" );
  txt.SetTouchable( false );
  txt2.SetTextSize( 32 );
  lay2.AddChild( txt2 );  
  app.AddLayout( lay2 );  
 
  //beware - may be called multipe times
  lay2.SetOnSwipeX(lay2_SwipeX);  
}
 
function lay_SwipeY( direction)
{
   if(lay2.GetVisibility()=="Show") return;
   var anim =
     (direction=="Down") ?"slideFromTop":"slideFromBottom";
   lay2.Animate(anim);
}
 
function lay2_SwipeX( direction,layout )
{
   if(direction=="Left" && layout.GetVisibility()=="Show")
   layout.Animate("slideToLeft");
}
 
//====================
function createSwipeLayout(type,options)
{
  var lay = app.CreateLayout( type,options );
  lay.state= "unset";
  lay.minSwipeX = 0.08;
  lay.minSwipeY = 0.08;
  lay.firstX = 0;
  lay.firstY = 0;
  lay.lastX = 0;
  lay.lastY = 0;
  lay.swipeX = null;
  lay.SwipeY = null;
  lay.SetOnTouch( onSwipe );
  lay.SetOnSwipeX = function(callback)
  {
      if (typeof callback != "function")
          throw("invalid callback SetOnSwipeX");
      if (lay.swipeY)
      {
           lay.swipeY = null;
           app.Alert("SetOnSwipeY disabled","Too many callbacks");
      }
      lay.swipeX = callback;
  }
  lay.SetOnSwipeY = function(callback)
  {
      if (typeof callback != "function")
          throw("invalid callback SetOnSwipeY");
      if (lay.swipeX)
      {
           lay.swipeX = null;
           app.Alert("SetOnSwipeX disabled","Too many callbacks");
      }
      lay.swipeY = callback;
  }
  return lay;
}
function onSwipe (ev)
{
    var x = ev.X,
          y = ev.Y,
          xDiff,yDiff;
    switch(ev.action)
    {
      case "Down":
        this.state = "testing";
        this.firstX = x;
        this.firstY = y;
        break;
      case "Move":
        if(this.state = "testing")
        {
            xDiff = x - this.firstX;
            yDiff = y - this.firstY;
            if(this.swipeX && Math.abs(xDiff)>this.minSwipeX)
            {
                this.state = "finished";
                this.swipeX(xDiff<0?"Left":"Right",this);
            }
            else if(this.swipeY && Math.abs(yDiff)>this.minSwipeY)
            {
                this.state = "finished";
                this.swipeY(yDiff<0?"Up":"Down",this);
            }
        }
        break;
      case "Up":
        this.state = "finished";
        break
    }
     this.lastX = x;
     this.lastY = y;
}

[Mauritz Zondagh]

Thank you for all the reply's and help.

I managed to get my QT version ported with your help, see below for anyone else interested.

Steve, i see you use a CreateSwipeLayout, whereas i am using a CreateLayout. You also mentioned that you use it for displaying info, so no entering of data? I still need to look into this to see what advantages a SwipeLayout have. Thanks

var     xpos_start;

var     StartTime;

function OnStart()

{

  

//Create a layout with objects vertically centered.

lay1 = app.CreateLayout( "linear", "HCenter,FillXY" );

lay1.SetBackground( "/Sys/Img/BlueBack.png" );

lay1.SetPadding( 0, 0.1, 0, 0 );

    lay1.SetOnTouch(touch1);

    app.AddLayout(lay1);

    

lay2 = app.CreateLayout( "Linear", "HCenter,FillXY" );

lay2.SetBackground( "/Sys/Img/GreenBack.png" );

lay2.SetPadding( 0, 0.1, 0, 0 ); 

    lay2.SetOnTouch(touch2);

lay2.SetVisibility( "Hide" );

    app.AddLayout(lay2);

}

function touch1(ev)

 {

  var     diff_xpos;

  if (ev.action == "Up") // Means finger removed, not upwards swipe

  {

       diff_xpos = xpos_start - ev.X;

       // Use x difference as 0.5 = 1/2 of screen

       if ((Math.abs(diff_xpos) > 0.5) && (((new Date()).getTime() - StartTime) < 250))

        {

           if (diff_xpos < 0)

           {

               //Move Right

               app.ShowPopup("Screen to right");

               lay2.Animate( "SlideFromLeft" );

           }

           else

           {

               //Move Left

               app.ShowPopup("Screen to left -- No Screen");               

               //lay2.Animate( "SlideToLeft" );

           }

        }

  }

  else if (ev.action == "Down") // Down means Pressed not down swipe

  {

   StartTime  = (new Date()).getTime();

   xpos_start = ev.X;

  }

}

function touch2(ev)

 {

  var     diff_xpos;

  if (ev.action == "Up") // Means finger removed, not upwards swipe

  {

       diff_xpos = xpos_start - ev.X;

       // Use x difference as 0.5 = 1/2 of screen

       if ((Math.abs(diff_xpos) > 0.5) && (((new Date()).getTime() - StartTime) < 250))

        {

           if (diff_xpos < 0)

           {

               //Move Right

               app.ShowPopup("Screen to right No Screen");

               //lay2.Animate( "SlideFromLeft" );               

           }

           else

           {

               //Move Left

               app.ShowPopup("Screen to left");               

               lay2.Animate( "SlideToLeft" );               

           }

        }

  }

  else if (ev.action == "Down") // Down means Pressed not down swipe

  {

   StartTime  = (new Date()).getTime();

   xpos_start = ev.X;

  }

}