Dotýkejte se, prosím…
Dotykové ovládání je v mobilních zařízeních de facto standard. Při prohlížení webu v mobilním prohlížeči jsou dotyky a dotyková gesta primární metodou, jak uživatel se stránkou komunikuje. Jak na takovou komunikaci stránku připravit? V článku si ukážeme API pro dotyková gesta.
Seriál: Dotykové ovládání a JavaScript (3 díly)
- Dotýkejte se, prosím… 18. 1. 2012
- Dotýkejte se, prosím, jemněji… 25. 1. 2012
- Dotýkejte se, prosím, na více místech 15. 2. 2012
Nálepky:
Ovládání dotykem je u mobilních zařízení dnes už téměř pravidlem. Dokonce i low-endové telefony přišly s dotykovými displeji a namísto „ťukání“ do kláves dnes komunikujeme s většinou těchto přístrojů „šmudláním“ prstem po obrazovce.
Dříve se dotykové události (například ťuknutí stylusem) v mobilních prohlížečích interně „překládaly“ na události myši, jako onclick atd. Toto „překládání“ stále trvá (a díky němu můžeme ovládat i „nemobilní“ webové stránky), ale přibyla řada nových událostí, jako je dotyk prstu, tažení prstem nebo vícedotyková gesta.
Právě v oblasti ovládání je rozdíl dotykového ovládání proti běžným způsobům (myš, klávesnice) poměrně výrazný – nikoli technickým provedením, ale i samotnou podstatou. Jak byste si například u dotykového ovládání představovali ekvivalent najetí kurzorem na objekt (a:hover)?
Dotykové ovládání přináší řadu nových gest – od ťuknutí prstu přes gesta pro zvětšování, zmenšování, otáčení, až po rychlé listování, kdy systém rozlišuje např. jestli listujete jedním, dvěma nebo třemi prsty. Jiný význam má tažení dvěma prsty dolů, jiný význam může mít tažení třemi prsty apod.
Některá gesta ale mají význam, který lze připodobnit ovládání myší. Mapování dotykových gest na události myši v prohlížeči ukazuje následující tabulka.
| Tap | Prst se dotkne displeje a zase se oddálí | Pokud není objekt klikatelný, nestane se nic. Pokud je, jsou vyvolány události mouseover a mousemove. Pokud zůstane stránka nezměněná, jsou vyvolány události mousedown, mouseup a click. |
| Double tap | Prst se rychle dvakrát po sobě dotkne displeje | Je zavolána obsluha systémové události „double tap zoom“ (přiblížení dvojdotykem). Žádná zachytitelná událost není vyvolána |
| Tap and hold | Prst se dotkne displeje a setrvá tam | Je vyvolána systémová „bublina“, není adekvátní zachytitelná událost myši |
| Pan | Prst se dotkne displeje a přesouvá se po něm | Systém vykonává vlastní události pro přetahování obsahu. Po dokončení pohybu je vyvolána akce onscroll. |
| Two-finger pan | Dva prsty se dotýkají displeje a přesouvají se | U skrolovatelných elementů je vyvolána událost onmousewheel, jinak je provedena systémová obsluha a nakonec vyvolána událost onscroll. |
Nové API vylepšuje práci s dotykovým ovládáním a umožňuje reagovat na specifické události. API nabízí dvě úrovně zpracování – vyšší úroveň, která rozpoznává přímo gesta (gestures), a nižší úroveň, kde můžete sledovat jednotlivé body dotyku (de facto prsty) a jejich pohyb po ploše.
Začněme vysokoúrovňovými gesty.
Gesta
Při práci s API gest zachytáváme následující události:
- ongesturestart – uživatel se dotkl obrazovky alespoň dvěma prsty a je pravděpodobné, že udělá nějaké gesto (pro otočení nebo změnu velikosti)
- ongesturechange – uživatel provádí gesto dvěma prsty
- ongestureend – gesto dokončeno
Objekt event, předaný obsluze události, má tyto vlastnosti:
- target – element, pro který byla událost vyvolána
- rotation – aktuální úhel natočení (ve stupních)
- scale – aktuální měřítko (1.0 = původní velikost)
- shiftKey, altKey, metaKey, ctrlKey – pravdivostní hodnoty – u dotykových zařízení vybavených klávesnicí dávají smysl, na „čistokrevných“ tabletech asi ne. Uvádím je tu jen pro úplnost.
Tato gesta můžeme zachytávat i pro jednotlivé elementy, ne jen pro celou stránku, takže nejsme odkázáni na systémovou obsluhu a můžeme nabídnout uživatelům lepší práci s obsahem.
Pro lepší ilustraci rovnou příklad:
<script>
"use strict";
var lastScale=1.0;
var lastRotation=0.0;
var startRotation, startScale;
function gestureStart( e ) {
startRotation = e.rotation;
startScale = e.scale;
e.preventDefault();
}
function handleGesture( e ) {
var rot = e.rotation + startRotation + lastRotation;
var scale = e.scale * startScale * lastScale;
var _style = "rotate(" + rot + "deg)";
_style += " scale(" + scale + ")";
e.target.style.webkitTransform = _style;
e.preventDefault();
}
function gestureEnd( e ) {
lastRotation = e.rotation + startRotation + lastRotation;
lastScale = e.scale * startScale * lastScale;
e.preventDefault();
}
function empty( e ) {
e.preventDefault();
}
function onload(){
var g = document.getElementById("here");
g.ongesturestart = gestureStart;
g.ongesturechange = handleGesture;
g.ongestureend = gestureEnd;
document.ongesturestart = empty;
document.ongesturechange = empty;
document.ongestureend = empty;
document.ontouchmove = function(e){e.preventDefault();}
}
</script>
…
<body onload="onload()">
…
<div id=here>Nějaký zajímavý obsah</div>
Po natažení stránky nastavíme handlery pro gesta – u celého dokumentu to je „prázdný handler“ s preventDefault. Vybranému elementu pak přiřadíme tři ovladače – pro začátek gesta, pro vlastní průběh a pro jeho skončení.
Na začátku má element nulovou rotaci a měřítko 1.0. To jsou proměnné lastScale a lastRotation.
Jakmile se člověk dotkne oblasti dvěma prsty najednou, je vyvolána událost gesturestart. V obsluze si jen poznamenáme úvodní rotaci a změnu velikosti.
Prohlížeč v iPad 2 při testech vždy uváděl úvodní měřítko jako 1.0 a rotaci jako 0. Pokud chceme, aby bylo gesta možno zopakovat několikrát po sobě, musíme tyto údaje brát nikoli jako absolutní, ale vztáhnout je k předchozímu stavu objektu (lastRotation, lastScale).
Ve chvíli, kdy uživatel začne prsty hýbat po displeji a dělat gesta zmenšení, zvětšení či otáčení, vyvolává systém událost gesturechange. V objektu event jsou aktuální údaje o natočení a měřítku, z nich se spočítá natočení a měřítko.
Jakmile gesto skončí, pošle systém událost gestureend. V jeho obsluze si jen poznamenáme, jaký úhel natočení a jaké měřítko má v ten okamžik objekt, aby další gesto mohlo navázat na jeho výsledky.
V pokračování článku si ukážeme, jak přesně „stopovat“ jednotlivé prsty a jejich pohyb po ploše displeje.
Autor děkuje společnosti Czech Computer za laskavé zapůjčení tabletu iPad 2.
Martin Malý
Začal programovat v roce 1984 s programovatelnou kalkulačkou. Pokračoval k BASICu, assembleru Z80, Forthu, Pascalu, Céčku, dalším assemblerům, před časem v PHP a teď by rád neprogramoval a radši se věnoval starým počítačům.
Musím říct, že pořízení iPadu mi přineslo zcela nový pohled na webový design. Začal jsem vidět věci, kterých jsem si dřív nevšiml. Namátkou třeba kolik webů má naprosto nepoužitelný pager, menu atd. Stačí pár drobných úprav a hned se mohou návštěvníci vašeho webu bezpečně dotknout. A když zjistím, že mohu na nějaký web gestikulovat (třeba slideshow posunout ne ťuknutím, ale posunutím prstů), hned se tam cítím jako doma a třeba i zjistím, že to je lepší než s myší.
Bylo by fajn podobným článkem popsat jak fungují události reagující na dotýká ve frameworku jQuery Mobile.