Finger movements when working with the iPad. How to use TalkBack gestures What is the name of the finger gesture on the screen cmpr

Android devices use a touch screen. Users who are accustomed to button controls may find it difficult to adapt to working with a touch screen.

Push-button control uses a keyboard and mouse, while the touch screen is controlled using your fingers or a stylus.

On the one hand, gesture controls seem a little primitive. On the other hand, Android gestures open up new horizons for various programs that would be very difficult or impossible to implement in a button version.

The touch screen control is that it reacts to touches with your fingers or a stylus, and, if necessary, repeats these movements exactly. If the device recognizes touches or movements as commands, then they are executed exactly as commands. The user's task is simple - to master pressing the touch screen so that it leads to the execution of those commands that will be understandable to the device and that the user needs.

Let's look at the main seven techniques used on touch screens. Android gestures can be the following:

1. Touch (press)

Tapping (or pressing) is the basic action most commonly used on a touchscreen.

Touching is necessary in many cases:

• to enable functions,
• to launch any application,
• activation of one or another parameter, element,
• to select the desired icon or corresponding option from the list,
• to enter text
• etc.

Touching is simple. It’s easy enough to touch the desired location on the screen with your finger or stylus, for example, touch the icon of the desired application.

To enter text, just touch the desired field, a virtual keyboard will automatically appear, and you can type text by touching the keys with the desired characters.

I can’t help but remember how many years ago I went to the terminal, pressed the terminal buttons to deposit money on my mobile phone. In general, I did everything as usual, but nothing happened on the terminal, the terminal did not respond to the buttons. So I made 3 or 4 approaches to the terminal on different days with zero results. One fine day, a young man who was standing in line at the terminal behind me said: “What if I press my finger on the screen?” And here it is, happiness: I pressed my finger on the screen and the terminal began to respond to clicks, everything worked out. This was my first encounter with a touch screen.

2. Double tap

Double tap (or double tap) is used to quickly zoom, to launch some applications and other actions.

To change the scale, for example, when viewing a web page, you need to quickly touch the screen 2 times with a minimum interval. To return to the previous state, you need to double-tap the screen again.

One double tap turns on the corresponding option, a second double tap cancels the same option.

If we compare Android with Windows, then double-tapping in Android is somewhat similar to double-clicking the left button in Windows.

3. Touch and hold

Pressing (touching) and holding is used to open additional options, if any.

You need to touch the desired area on the screen and hold your finger for a few seconds. At the moment of touching and holding, nothing happens, and this may cause some surprise at first. But as soon as you release your finger, an additional menu will immediately appear or another action will occur as a result of touching and holding.

This action is very similar to right-clicking in Windows, when after right-clicking on an object, a so-called context menu appears with additional options for the object.

4. Swipe (swipe)

Swiping can also be called swiping or scrolling. Having lightly touched the screen, without releasing your finger, you need to move your finger from top to bottom, from bottom to top, from left to right, or from right to left, that is, as if to lightly brush away “dust from the screen” in the desired direction.

Swiping (scrolling) is used to switch between pages on the Desktop, to scroll through various lists, etc. Depending on the Android screen lock setting, it may be that swiping diagonally (diagonally) means unlocking the screen - this swipe diagonally also applies, and not just swipes from bottom to top or from right to left.

When I first needed to send a message in Russian on a smartphone, to do this I needed to change the layout on the virtual keyboard from English to Russian. I tried all the options, even went into the language settings, but it didn’t work: the English layout “stood rooted to the spot.” I was told that I just need to lightly wave my finger across the space from left to right. By the way, I saw the inscription “English” on the space bar on the virtual keyboard, I pressed it, but to no avail. And as soon as I waved my finger over the space, the layout immediately changed to Russian. That's swiping, it works!

5. Drag and Drop (Drag and Drop)

Drag and drop (or dragging) is required to move applications on the screen, as well as to move folders, icons, and the like.

You need to touch the required element, wait for it to be highlighted, then, without releasing your finger, move this element (folder, file, icon, etc.) to the desired point on the touch screen.

6. Pinch and spread fingers

A simple and useful function for changing the scale of what is displayed on the screen: picture, text, map, diagram, etc. You can zoom in and zoom out again if necessary.

To do this, you need to touch the screen with two fingers (or several) at once and, without lifting your fingers from the screen, spread them apart. The scale will increase proportionally.

If you touch the screen with two fingers (or several) and, without lifting them from the screen, bring them together, the scale will decrease.

7. Changing screen orientation

Portrait (vertical) orientation is convenient for reading books. Landscape (horizontal) orientation is good for watching videos and various maps. All this, of course, is not for everyone; everyone chooses for himself which orientation is better in this or that case.

To change orientation from one to another, you just need to rotate the smartphone. In this case, the Screen Rotation function must be activated in the screen parameters. If the function is deactivated, the image will not be rotated.

These are not all possible gesture options, but perhaps the most basic and frequently used. Other gestures, such as turning in a circle, etc. They are used less frequently, and these gestures may not work in every program. As a rule, the listed gestures are enough for all occasions, or almost all.

They are easy and quick to learn, you just need to practice a little to get started. Gestures are logically understandable; this is the action you expect from them. Except touch and hold is a little unnatural. The rest of the gestures are intuitive. Therefore they are easy to remember.

P.S. Check out other materials:

Get the latest computer literacy articles delivered straight to your inbox.
Already more than 3,000 subscribers

.

The term gesture is a way to combine finger movements on the screen to trigger some action; In this case, finger movement is used instead of just touching or clicking. A complete touch or mouse - a move-capturing function - is needed to ensure that gestures are registered and are absolutely correct. Today, only Safari and Android browsers have good support for this feature.

If the user needs to use gestures in your web application, it is important to teach him the correct actions - using help, animated examples, or some other type of hints (Figure 8.5).

Rice. 8.5. Google Fast Flip is a new viewer that uses gestures on iPhone and Android devices. On the left you will see a warning dialog with instructions on how to use it. You will only see the instructions once.

Swipe Gesture

The swipe gesture (also known as flip) is a technology for touch browsers, usually used to move content back and forth. This gesture is used, for example, in many photo galleries to change the image displayed on the screen and in presentations to flip through slides. The essence of the gesture is a simple movement of your finger along the X axis from left to right (horizontal swipe) or along the Y axis from top to bottom (vertical swipe). The swipe gesture is supported in almost every touch device, as it is performed with one finger.

There is no special standard event to intercept a swipe action, so we will emulate it using the existing standard events

On 5th generation Symbian devices, if you use your finger instead of a cursor, the mouse down, move and up events produce rather strange results. The event is generated only once during a finger drag action, and the event does not fire at all if the finger is moved from the initial mouse-down coordinates. Therefore, different approaches are needed to detect swipe in some situations.

Sequencing:

Intercept the event (or ontouchstart on iPhone and other compatible browsers) and start recording the gesture.

Intercept (or ontouchmove on iPhone and browsers with the necessary support) and continue recording the gesture if the X (or Y) movement occurs within a certain threshold. Cancels a gesture if the movement occurs along a different axis.

Intercept onmouseup (or ontouchend in iPhone and browsers with the necessary support) and, if at this moment the gesture was ongoing (was active) and the difference between the source and destination coordinates is greater than a certain constant, define a swipe in one direction.

The last point can be replaced by checking the gesture on the fly inside the onmousemove event.

If you use jQuery in your work, you can use the free plugin from here http://plugins.jquery.com/project/swipe to detect the horizontal swipe gesture on iPhone devices.

With the following code we can create an object-oriented library for swipe detection (compatible with iPhone, Android and other devices):

/** Creates a swipe gesture event handler */ function MobiSwipe(id) ( // Constants this.HORIZONTAL = 1; this.VERTICAL = 2; this.AXIS_THRESHOLD = 30; // The user will not define a perfect line this. GESTURE_DELTA = 60; // The min delta in the axis to fire the gesture // Public members this.direction = this.HORIZONTAL; this.element = document.getElementById(id); this.onswiperight = null; this.onswipeleft = null ; this.onswipeup = null; this.onswipedown = null; this.inGesture = false; // Private members this._originalX = 0 this._originalY = 0 var _this = this; // Makes the element clickable on iPhone this.element. onclick = function() (void(0)); var mousedown = function(event) ( // Finger press event.preventDefault(); _this.inGesture = true; _this._originalX = (event.touches) ? event.touches. pageX: event.pageX; _this._originalY = (event.touches) ? event.touches.pageY: event.pageY; // Only for iPhone if (event.touches && event.touches.length!=1) ( _this.inGesture = false; // Cancel gesture on multiple touch ) ); var mousemove = function(event) ( // Finger moving event.preventDefault(); var delta = 0; // Get coordinates using iPhone or standard technique var currentX = (event.touches) ? event.touches.pageX: event.pageX ; var currentY = (event.touches) ? event.touches.pageY: event.pageY; // Check if the user is still in line with the axis if (_this.inGesture) ( if ((_this.direction==_this. HORIZONTAL)) ( delta = Math.abs(currentY-_this._originalY); ) else ( delta = Math.abs(currentX-_this._originalX); ) if (delta >_this.AXIS_THRESHOLD) ( // Cancel the gesture, the user is moving in the other axis _this.inGesture = false; ) ) // Check if we can consider it a swipe if (_this.inGesture) ( if (_this.direction==_this.HORIZONTAL) ( delta = Math.abs( currentX-_this._originalX); if (currentX>_this._originalX) ( direction = 0; ) else ( direction = 1; ) ) else ( delta = Math.abs(currentY-_this._originalY); if (currentY>_this. _originalY) ( direction = 2; ) else ( direction = 3; ) ) if (delta >= _this.GESTURE_DELTA) ( // Gesture detected! var handler = null; switch(direction) ( case 0: handler = _this.onswiperight; break; case 1: handler = _this.onswipeleft; break; case 2: handler = _this.onswipedown; break; case 3: handler = _this.onswipeup; break; ) if (handler!=null) ( // Call to the callback with the optional delta handler(delta); ) _this.inGesture = false; ) ) ); // iPhone and Android "s events this.element.addEventListener("touchstart", mousedown, false); this.element.addEventListener("touchmove", mousemove, false); this.element.addEventListener("touchcancel", function( ) ( _this.inGesture = false; ), false); // We should also assign our mousedown and mousemove functions to // standard events on compatible devices )

Here's a simple example of using our swipe.js library with one with horizontal swipe detection and another with vertical detection:

Swipe Gesture Detection window.onload = function() ( var swipev = new MobiSwipe("vertical"); swipev.direction = swipev.VERTICAL; swipev.onswipedown = function() ( alert("down"); ); swipev.onswipeup = function() ( alert("up"); var swipeh = new MobiSwipe("horizontal"); swipeh.direction = swipeh.HORIZONTAL; swipeh.onswiperight = function() ( alert("right"); ); swipeh.onswipeleft = function() ( alert("left"); ) Vertical Swipe Horizontal Swipe

Many touch devices use the drag gesture to scroll page content and do not support preventDefault (we talked about preventing default behavior earlier in this chapter). That is why we must consider other available navigation methods in addition to the swipe gesture.

Zoom and rotate gestures

When the iPhone first came out, the coolest features it had were the zoom and rotate gestures. By using the pinching gesture (moving two fingers in and out in a pinch), the user could zoom in or out on content—usually an image—on a page, and by rotating two fingers in a circle, the image could be rotated.

In devices that do not support multi-touch, zoom functions must be implemented using regular floating buttons and sliders.

Fortunately, starting with iOS 2.0, these gestures can be detected without resorting to low-level mathematics in touch events. Table 8.35 lists three WebKit extensions that are available as events. The Android browser has also added support for these events.

The same events are used for scaling and rotation. All three receive a GestureEvent parameter. This parameter has the typical properties of an event, as well as the additional properties scale and rotation.

The scale property defines the distance between two fingers as a floating point multiplier of the origin of the distance where the gesture began. If the value is greater than 1.0, then it is an open pinch (increase), and if the value is 1.0, then it is a closed pinch (decrease).

rotation gives the value (in degrees) of the rotation delta (distance) from the starting point. If the user rotates the object clockwise, then we get a positive value, and if counterclockwise, then the value will be negative.

I know what you're thinking: "Rotating and zooming are great, but what use are they if we're working with HTML?" Here we come to the aid of CSS extensions for Safari on iOS (and other browsers with appropriate support) with one property and two functions to control its value: rotate and scale.

The rotate function takes a parameter in degrees and we need to define a deg unit after the number (for example, rotate(90deg)). We can find out this from the script using element.style.webkitTransform.

Let's look at a simple example:

Gesture Management function gesture(event) ( // We round values ​​with two decimals event.target.innerHTML = "Rotation: " + Math.round(event.rotation*100)/100 + " Scale: " + Math.round(event .scale*100)/100; // We apply the transform functions to the element event.target.style.webkitTransform = "rotate(" + event.rotation%360 + "deg)" + " scale(" + event.scale + ")"; )

You can see how the example works in Figure 8-6. On compatible devices, you can use two fingers to rotate and zoom (along with all content). But what's the problem? The transform style is always applied to the original element. So, if we apply a scale of 2.0 to an element, and then increase it again by 0.5, the new value will be 0.5, not 1.0, as one might expect.

Rice. 8.6. By combining touch events with CSS transformations, you can rotate and scale elements on your site.

For typical zoom-rotate behavior we should replace the function with the following:

var rotation = 0; var scale = 1; function gesture(event) ( event.target.innerHTML = "Rotation: " + Math.round((event.rotation+rotation)*100)/100 + " Scale: " + Math.round((event.scale*scale) *100)/100; event.target.style.webkitTransform = "rotate(" + (event.rotation+rotation)%360 + "deg)" + " scale(" + event.scale*scale + ")"; ) function gestureend(event) ( rotation = event.rotation+rotation; scale = event.scale*scale; )

With the spread of touch screens, the issue of combinations of gestures in computer technology becomes especially relevant. Multi-touch allows users to easily move virtual objects on the screen using simple finger movements. Most of the key actions on touch devices are closely related to gestures, they are the basis of interaction with mobile devices and tablets. Gestures consist of haptic mechanics (what the user's fingers do on their touchscreen) and subsequent haptic activity (the result of the haptic mechanics).

Below we have collected the necessary information that reveals the main features of touch manipulation on mobile devices. There are also free vector variations of gestures that can be used in your work.

Tactile mechanics and tactile activity There are quite a few types of tactile mechanics. Below are the most common gestures.

Touching the touch screen is the most popular and basic gesture. Actually, it is carried out every day when you touch the screen to launch applications, email or any other similar service. Single touch is characterized by simply pressing on the screen with one finger.

Double-tapping the touchscreen is the next most common gesture. Double-tap is performed by quickly double-clicking your finger on the device screen. Typically used to enlarge an image or text area on the screen.

Sliding is also well known to the average user. This action is carried out by touching and sliding your finger across the surface of the screen. A great example is locking your phone by connecting your finger to certain points on the screen to lock or unlock.

Dragging has almost the same tactile mechanics as the action described in the previous case. The main difference is the speed of operations.

Swiping combines sliding and dragging. In this case, the tactile mechanics do not differ much from dragging, except in speed. When swiping, your finger moves very quickly, as if you need to scroll the screen to remove your profile picture/avatar/app.

A long press involves touching an element of the screen and holding your finger on it for some time. The result of such tactile mechanics can be the opening of a window to copy a section of text, etc...

Long press and drag involves pressing and holding your finger on the screen and then dragging across its surface. It is used to change the order of application icons, etc.

Double tap and drag - This combination of gestures is a little more intricate. You need to press on a section of the screen, lift your finger from the surface and press again, further moving your finger along the surface of the screen to the area of ​​interest. These haptic mechanics can be used when you want to zoom in on content in one area of ​​the screen and then zoom out in another.

Pinch/Spread involves simultaneous pressing of two fingers located close or at some distance from each other, with their further spreading or bringing together. The gesture ends with raising your fingers above the surface of the screen. Typically, the result of such mechanics is a decrease or increase in image scale.

Single touch with two fingers - a press that is performed with two fingers at the same time. This is followed by the immediate raising of both fingers. The gesture usually serves to zoom out the image.

Dragging, dragging, or swiping with two fingers - these gestures require the use of two fingers as the user touches, "slides" across the screen, and lifts them off the screen. Gestures can be used to either select multiple items, tilt, or scroll.

Long press and two-finger drag involves pressing two fingers on an area of ​​the screen, holding them down, and moving them to the desired area of ​​the screen and then lifting them off the touch surface. This tactile mechanism is effective when working with an interface that requires rearrangement of list elements or the order of icons and images.

A two-finger double-click is performed using two successive short presses of two fingers on the screen. Basically, this gesture is intended to reduce the image scale.

Rotation or rotation is used when working with animation and images on mobile devices. You need to press the screen with two fingers from different sides of the central object and, rotating your fingers in an orbit around the object, rotate it. The gesture ends traditionally - by removing your fingers from the touch screen. Using rotation is also useful when working with a Google map, when you need to rotate it horizontally for greater convenience.

Almost the entire concept of working with interfaces on touch devices is based on the use of gestures. With a fairly limited mobile screen area, designers and developers have to use tactile mechanics in the most rational and intelligent way. To effectively interact with a device, gestures must be intuitive and associated with the tactile activity associated with them.

Tactile mechanics in vector Below is a free collection of vector sets of gestures. They are suitable not only for developing the design of multi-touch device interfaces and promoting mobile applications, but can also be used as icons, pointers, etc.

When developing applications for Android and iPhone with iPad (IOS) using only web technologies, every developer sooner or later faces the question of implementing and using complex multi-touch actions in his game or application, such as swipe, pinch, as well as processing a long tap (long touch with one finger without moving) and drag"n"drop.

In this material we will look at ways to process touch events of varying complexity using Javascript Events, without third-party libraries (we’ll just grab jQuery min).

I’ll make a reservation right away that I will use jQuery only to disable the default behavior of the browser on the event. I don't like this library, so everything will be written in Vanilla JS.

So, we’ll start with theory and actually touch on what events should be used when creating an application or game.

A total of 3 key events are used:

touchstart - Touched the screen

touchend - The finger was removed

touchmove - Move your finger

If in order to get the element on which the mouse moved or moved, it was enough to call event.target, then with touch events everything is not so simple.

Each touch must be identified. And lists are used for this:

touches - All fingers that are currently interacting with the screen ("Touched" the screen)

targetTouches - List of fingers that interact with the element

changedTouches - List of fingers that are involved in the current event. If, for example, this is a touchend event, then the list will contain the finger that was removed (Even if the other 4 fingers are still on the screen).

To make it easier to understand, here is the situation:

I put one finger on the screen and all 3 lists have one element.

I place the second finger and now touches has 2 elements, targetTouches will have 2 elements if I place the second finger on the same HTML element as the first, and changedTouches, in turn, will only have the second finger, since it was the one that triggered the event.

If I put 2 fingers on the screen at the same time, then changedTouches will have 2 elements (one per finger).

If I start moving my fingers across the screen, only the list of changedTouches will shrink. The number of elements it will contain will be equal to the number of fingers involved in the movement (at least 1).

If I remove my finger, the touches and targetTouches lists will be empty by one element, and changedTouches will contain the finger, since it caused the event (touchend)

When I remove the last finger, the touches and targetTouches lists will not contain anything, and changedTouches will have information about this very finger.

Now is the time to find out exactly what information we can get about the finger:

identifier - Unique touch ID

target - The object itself that we touched

PageX,PageY - Touch coordinates on the page

You can view the unique ID of a single touch by calling event.touches.identifier, and on IOS, if I'm not mistaken, you need to do this event.originalEvent.touches.identifier.

Well, I’ve already taught you something, and now it’s time to move on to practice.

Before we get started, there are a few things you should understand. In every game and application that you will make on Android and iOS, you must disable the standard response of the WebView component to events. For this we connected jQuery (I couldn’t do in Pure JS what the functions do event.preventDefault() And event.stopPropagation()).

So you need to put the following in your JS code:

event.preventDefault();
event.stopPropagation();

), false);

event.preventDefault();
event.stopPropagation();
/* Here is your event handling code */
), false);

event.preventDefault();
event.stopPropagation();
/* Here is your event handling code */
), false);

This must be done, because many devices without this have significant glitches and jerky animation.

We took a break. Let's continue.

Let's use the knowledge we have gained to describe all the basic touch interactions with the screen and elements.

Tap

This event is executed simply when we touch the screen with our finger and remove it.

var myclick=event.targetTouches; /*Your code*/
}
), false);

In the example in the variable myclick will contain your touch.

Long tap

Although not often, there are situations when in a mobile application or game you need to catch the action of a long touch on an object. Let's look at how to make a long touch in Javascript for touch screens of mobile smartphones and, of course, tablets.

Implementation 1:

var ldelay;
var betw=();
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
ldelay=new Date();
betw.x=event.changedTouches.pageX;
betw.y=event.changedTouches.pageY;
), false);
/*Catch the release of the finger*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
if(event.changedTouches.pageX==betw.x &&
event.changedTouches.pageY==betw.y &&
(pdelay.getTime()-ldelay.getTime())>800)(
/*Here is your code*/
}
), false);

This is the first implementation of Long Tap in JavaScript. The logic is this: we catch the touch, measure the time of this event, catch the release, measure the release time, subtract the first time from the second and check whether the position of the finger on the screen has changed. If the finger is in the same place and time has passed more than 800 milliseconds, we perform Long Tap actions.

Now let's look at the second implementation with slightly different logic:

Implementation 2:

var timer;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
lttimer=setTimeout(longTouch,800);
), false);
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
clearTimeout(lttimer);
), false);
document.addEventListener("touchend", function(event) (
clearTimeout(lttimer);
), false);
function longTouch())(/*Your code*/)

The above implementation of the Long Tap event in Javascript is more correct and is most often used in mobile applications. Its main difference from the previous implementation is that it does not wait for the finger to be released and, if the finger did not move, it triggers the Long Tap event, which you must place in the longTouch function. longTouch.

Swipe

It's time to talk about scrolling on the screen of a smartphone or tablet. Swipe is quite common in the construction of primarily mobile applications, so sooner or later every app builder has to deal with it.

If you don't want to bother and you only need the Swipe functionality in the mobile application, you can read about it at the very bottom of the page.

If you are a hardcore developer, let's go!

Implementation 1:

var initialPoint;
var finalPoint;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
initialPoint=event.changedTouches;
), false);
document.addEventListener("touchend", function(event) (
event.preventDefault();
event.stopPropagation();
finalPoint=event.changedTouches;
var xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX);
var yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
if (xAbs > 20 || yAbs > 20) (
if (xAbs > yAbs) (
if (finalPoint.pageX< initialPoint.pageX){
/*SWIP LEFT*/)
else(
/*SWIP RIGHT*/)
}
else(
if (finalPoint.pageY< initialPoint.pageY){
/*SWIP UP*/)
else(
/*SWIP DOWN*/)
}
}
), false);

This is our first implementation of swipe in Javascript. The peculiarity of this implementation is that the event is counted as a swipe when you release the finger involved in the event. This swipe can be used in some tasks. In this and many other examples, do not forget to turn off the standard behavior of the browser on touch events (I wrote about this above), I usually do not write them in the examples given, but don’t forget.

Now let's look at another - classic implementation, when swipe needs to be counted in real time, for example when turning a page:

var startPoint=();
var nowPoint;
var ldelay;
document.addEventListener("touchstart", function(event) (
event.preventDefault();
event.stopPropagation();
startPoint.x=event.changedTouches.pageX;
startPoint.y=event.changedTouches.pageY;
ldelay=new Date();
), false);
/*Catch the movement with your finger*/
document.addEventListener("touchmove", function(event) (
event.preventDefault();
event.stopPropagation();
var otk=();

otk.x=nowPoint.pageX-startPoint.x;
/*Process the data*/
/*For example*/
if(Math.abs(otk.x)>200)(
if(otk.x0)(/*SWIP RIGHT(NEXT PAGE)*/)
startPoint=(x:nowPoint.pageX,y:nowPoint.pageY);
}
), false);
/*Catch the release of the finger*/
document.addEventListener("touchend", function(event) (
var pdelay=new Date();
nowPoint=event.changedTouches;
var xAbs = Math.abs(startPoint.x - nowPoint.pageX);
var yAbs = Math.abs(startPoint.y - nowPoint.pageY);
if ((xAbs > 20 || yAbs > 20) && (pdelay.getTime()-ldelay.getTime()) yAbs) (
if (nowPoint.pageX< startPoint.x){/*СВАЙП ВЛЕВО*/}
else(/*SWIP RIGHT*/)
}
else(
if (nowPoint.pageY< startPoint.y){/*СВАЙП ВВЕРХ*/}
else(/*SWIP DOWN*/)
}
}
), false);

In this method, we took a slightly different route and partially used the principle of first implementation. Logically, this is a slightly more complex swipe. In the place where /*Process the data*/ is commented, you should use the coordinates of the swipe finger. For example, this could be an animation of turning a page, and the further to the left your finger is, the more the page turns. For example, we are in the event listener part touchmove only the x-coordinate was tracked, the y-coordinate was screwed in a similar way. In variable otk.x the current position of the finger relative to the point where it first touched the touch is stored. If the finger is to the left of this point, then the variable has a negative value, if to the right, it is positive.

For example, we set a condition there when the finger moves a distance of more than 200 pixels to the left or right of the touch point - we count a swipe. What is it for? For example, you can, as soon as the user touches and begins to move his finger, show him a smooth turning of the page that follows his finger, and as soon as the finger goes beyond 200 pixels, the final animation is performed and the page turns. This is one of the possible ways to use such a swipe.

But why then the event touchend you ask... Sometimes the user does not want to move his finger for a certain distance to swipe, and in many applications swipe is used as a reaction to quickly moving the finger across the screen to the side for a short distance. This is exactly what we used in the last event listener.

Drag"n"Drop (Drag an element)

Often in application interfaces and games you have to drag one of the elements to a certain place with your finger. Let's do it in javascript, tailored for touch screens. Let's start:

var obj = document.getElementById("sat");
/*Catch the touch*/
obj.addEventListener("touchstart", function(event) (
if (event.targetTouches.length == 1) (
var touch=event.targetTouches;
touchOffsetX = touch.pageX - touch.target.offsetLeft;
touchOffsetY = touch.pageY - touch.target.offsetTop;
}
), false);
/*Move the object*/
obj.addEventListener("touchmove", function(event) (
if (event.targetTouches.length == 1) (
var touch = event.targetTouches;
obj.style.left = touch.pageX-touchOffsetX + "px";
obj.style.top = touch.pageY-touchOffsetY + "px";
}
), false);

As you can see, this is not the whole code, so far we’ve got drag without drop. You’ve probably already noticed that moving an element is ultimately done by CSS parameters left And top. Instead of these two lines, which are responsible for moving an object across the screen, you can put:

obj.style.WebkitTransform="translate("+(touch.pageX-touchOffsetX)+"px,"+(touch.pageY-touchOffsetY)+"px)";

Those. use CSS3, but in my case I didn’t notice any performance gain, so it’s better top And left. With this code you can move an object around the field, but releasing it at a certain place will not be counted. To implement this, add a touchend handler to the object with the corresponding code inside:

var tarobj=document.getElementById("dro");
obj.addEventListener("touchend", function(event) (
if (event.changedTouches.length == 1) (
var tarWidth=tarobj.offsetWidth;
var tarHeight=tarobj.offsetHeight;
var tarX=tarobj.offsetLeft;
var tarY=tarobj.offsetTop;
if(
(event.changedTouches.pageX > tarX) &&
(event.changedTouches.pageX< (tarX + tarWidth)) &&
(event.changedTouches.pageY > tarY) &&
(event.changedTouches.pageY< (tarY + tarHeight))){
/*We are above the tarobj object*/
}
}
), false);

In order for everything to work, point your object to a variable tarobj and you will be happy.

Pitch

It's time to remember the famous pinch that Steve Jobs first showed when he presented the first iPhone. It is this movement of two fingers towards or away from each other that is called a pinch. Typically this gesture is used to make something bigger or smaller.

In the example below, key points are marked with comments (so that the code does not merge into a complete wheat porridge):

/*Defining some variables*/
var objzoom = document.getElementById("dro");
var scaling = false;
var dist = 0;
var scale_factor = 1.0;
var curr_scale = 1.0;
var max_zoom = 8.0;
var min_zoom = 0.5
/*Write a function that determines the distance between fingers*/
function distance (p1, p2) (
return (Math.sqrt(Math.pow((p1.clientX - p2.clientX), 2) + Math.pow((p1.clientY - p2.clientY), 2)));
}
/*Catching the beginning of the contact*/
objzoom.addEventListener("touchstart", function(evt) (
evt.preventDefault();
var tt = evt.targetTouches;
if (tt.length >= 2) (
dist = distance(tt, tt);
scaling = true;
) else (
scaling = false;
}
), false);
/*Catching the zoom*/
objzoom.addEventListener("touchmove", function(evt) (
evt.preventDefault();
var tt = evt.targetTouches;
if (scaling) (
curr_scale = distance(tt, tt) / dist * scale_factor;
objzoom.style.WebkitTransform = "scale(" + curr_scale + ", " + curr_scale + ")";
}
), false);
/*Catch the end of the contact*/
objzoom.addEventListener("touchend", function(evt) (
var tt = evt.targetTouches;
if (tt.length< 2) {
scaling = false;
if (curr_scale< min_zoom) {
scale_factor = min_zoom;
) else (
if (curr_scale > max_zoom) (
scale_factor = max_zoom;
) else (
scale_factor = curr_scale;
}
}
objzoom.style.WebkitTransform = "scale(" + scale_factor + ", " + scale_factor + ")";
) else (
scaling = true;
}
), false);

In the example we use an object with id for testing dro, you can use your object by assigning it to a variable objzoom. In variables you can change data, for example maximum zoom or minimum.

Sliding images and HTML

We have already described above how to make a swipe, on the basis of which you can slide images or your data in HTML code. However, some may not be satisfied with this, and if you are among those who want to get results easier and faster without going into details, this subsection is for you.

First of all, let's note a free JS development called Fotorama, which is very functional and will be useful for mobile application developers who want to use sliding.

There is also a beautiful image slider.

In addition to this manual creation of a touch shell for an application or game, you can use a framework. Here is a list of popular frameworks in this topic: Sencha Touch, jQ Touch, JQuery Mobile.

The last question is the question of compatibility of all this with mobile platforms. Well, touch supports Android 2.3-4.X and IOS. But multitouch is supported by everything except Android 2.3.

Don’t forget that you should attach handlers to HTML objects when they are already known, i.e. in the event window.onload or DOMContentLoaded.

If you have anything to add to the article, write in the comments.

Dear friends who are starting to master a smartphone!

If you have switched from a regular push-button mobile phone to a smartphone with a touch screen (touch screen), then some of you at first have difficulty mastering the touch screen. It is not very clear to you how to touch the screen, how long to hold the touch, how to move around the page, etc. In this article I will try to briefly describe the main features of smartphone control.

I must say right away that the transition from mechanical buttons to virtual ones is a huge step forward in the development of mobile devices. It allows you to increase the screen area to almost the entire front surface of the smartphone and make it easier to control. But at the same time, some inconvenience appears at first. You could pick up a regular phone in any way you wanted and touch any part of the front panel and screen. With smartphones, you need to be more careful, since any accidental touch to the surface of the screen can cause an unwanted action. You need to develop the habit of holding your smartphone in your hand without touching the screen unnecessarily, at least while it is unlocked.

So, here are the basic touch screen controls:

Single touch (tap)

This is a quick (virtually no delay) touch of the screen with one finger. The delay should not exceed 0.5 seconds. Any touch is easy enough to make, since modern capacitive touch screens are very sensitive (unlike resistive ones that are already a thing of the past).

On the home screen (and any work screen - desktop), a single tap on the application icon launches the application. This is analogous to pressing the left mouse button on a regular computer. In other cases, within the application this may be selecting an option from several offered, selecting a contact in the contact list, confirming an action, etc.

A single tap in text fields inserts the cursor where you touched it.

Delayed touch (long tap)

This is a one-finger touch with a delay of more than 1 second (until the result appears). The result may vary depending on the situation. In most cases, this action leads to the appearance of a context menu (analogous to the right mouse button).

Pressing and holding an icon on the main screen causes this icon to “stick” to your finger, which makes it possible to move it around the screen, including to the adjacent work screen, as well as delete the icon (not the application itself) to the trash bin that appears on the screen.

In text fields, the delay causes a portion of the text under your finger to be selected, with the ability to further expand the selection using the resulting end marks, and a menu appears at the same time Copy, Select All, Cut, Paste. Pausing on the cursor mark causes the menu to appear Insert(last clipboard contents), Paste from clipboard(any of the 20 most recent clipboard contents).

Double tap

Double tap with one finger with a short interval between taps (no more than 0.2 seconds). Used to alternately zoom in and out of a web page in a browser, a picture in the Gallery, etc. You need to click exactly on the area of ​​the screen that you want to view larger and in more detail.

Tap & drag

This is a one-finger touch with an immediate (delay of no more than 0.2 seconds) start of moving the finger across the screen without releasing the finger. Further delay in one place after the start of movement does not matter: the contents of the screen seem to stick to the finger until the moment of release. This is how you scroll through desktops (screens), pages in the browser in any direction, scroll through lists (for example, contacts), etc. This gesture also serves to move the sliders of various virtual controls (for example, volume, brightness, etc.).

Swipe

This one-finger action is similar to the previous one, but it is only done without prolonged movement across the screen, reminiscent of a quick brush stroke on paper. In this case, the content of the screen continues to move even after lifting your finger from the screen in the process of “smearing” with a gradual slowdown. I remember the video of the first demonstration of this effect by Steve Jobs at the presentation of the Apple iPhone 2G in 2007 to a storm of applause.

Now let's look at two-finger touch techniques. In this case, the fingers can be on the same hand or on different ones, it doesn’t matter.

Pinch (pinch) and spread apart two fingers (pinch, zoom)

This technique is used to smoothly reduce and, accordingly, increase the scale of an image on the screen (pictures, web pages). You place both fingers on the screen almost simultaneously, and then make a pinch or spread motion. The direction of movement of the fingers (right-left, up-down or intermediate movements) does not matter.

Rotate with two fingers (rotate)

This is another technique used to rotate the image on the screen. After touching the screen, two fingers each move along an arc of a circle in the same direction (clockwise or counterclockwise). Or one finger stands motionless at the center of rotation, and the other moves in an arc around this center. This method is used quite rarely. For example, I used it when editing an image in the MDScan application to obtain scanned copies of documents.