Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

MultiTouch na desktopie - horror w kilku aktach

Niedawno miałem przyjemność (i nadal mam) pracować przy tworzeniu aplikacji na ekrany dotykowe, podłączone do zwykłych komputerów desktopowych. Całość miała być robiona w oparciu o HTML5. Systemem miał być koniecznie Windows 7 (założenia odgórne). W sumie nie było to złe rozwiązanie, gdyż multitouch na linuxie mógł sprawić dużo kłopotu,a terminy były napięte. Z racji tego, że oprócz HTML5 nie było innych wytycznych, prace ruszyły bardzo szybko...

Tak przynajmniej się wydawało. Okazuje się, że temat ekranów dotykowych z multitouchem na dektopach w oparciu o HTML5 to ciągle temat "w fazie testów". Mimo, iż ekrany dotykowe w urządzeniach mobilnych są czymś normalnym, o tyle na desktopach to temat świeży, baaardzo świeży (vide Windows 8).

W kilku podpunktach omówię, ciekawostki na jakie się natknąłem.

Firefox - jedyny sprawiedliwy

HTML5 pociągał za sobą użycie jakiejś nowszej przeglądarki. Dzięki specyfikacji aplikacji, można było wybrać jedną, konkretną wersję przeglądarki pod jaką będziemy działać. Wybór jest ogromny. Jednakże, jak się okazało, nie było to prawdą :)

HTML5 miał służyć do bardzo atrakcyjnej prezentacji aplikacji, oraz dzięki niemu nie trzeba było się zbytnio narobić :P Dodatkowo jak pisał ostatnio alucosoftware tworzenie GUI w HTML ma wiele zalet: jest szybkie i komfortowe. Wisieneczką na torcie miały być gesty multitouch (powiększanie zdjęć/obiektów itp.). Okazało się, iż ten ostatni wymóg sprawił, iż z morza przeglądarek do wyboru... została tylko jedna, Firefox. Dlaczego? :)

Przeglądarki desktopowe w większości obsługują gesty multitouch samodzielnie. O czym mowa? Dotykając dwoma palcami ekranu przeglądarki, strona www... jest automatycznie skalowana. Nie ma możliwości podpięcia się pod te eventy. Internet Explorer, Chrome, Opera, wszędzie jest zoom przy dotykaniu dwoma palcami i nie da się tego wyłączyć! Już nawet były pod uwagę brane wersje beta (Opera Next, Chrome). Nadal to samo. Nie obyło się bez testów na przeglądarkach mobilnych, które mają skompilowane wersje pod desktopy (Opera Mobile, Fennec). W tym ostatnim przypadku multitouch albo wcale nie działał lub powodował zoom (dzień dobry), albo storna skakała jak oszalała.

Nagłówek akapitu, wskazuje zwycięzce. Jedynie w Firefoxie desktopowym nie ma automatycznego zoomowania przy dotykaniu ekranu dwoma palcami. Czyżby był to już koniec problemów z przeglądarką? O nie nie...

Firefox - zapomniany dotyk na desktopie

Ogólnie nic nie mam do dokumentacji Mozilli. Jest świetna, wyczerpująca, ma wiele przykładów (działających na live demo!) i jest naprawdę pomocna. Jednakże....

Jeśli chodzi o eventy do multitoucha to chyba kogoś tam %^#$#%@#. Już spieszę wyjaśniać. Otóż eventy do multitocha w Firefoxe zostały zaprezentowane już w becie Firefoxa 4 (2010 rok). Nawet powstał filmik, gdzie uśmiechnięty Pan bawi się multitouchem:

Na stronie MDN Touch events jest piękny opis eventów:

  • touchstart
  • touchend
  • touchmove
  • touchenter
  • touchleave
  • touchleave

Wszystko byłoby ok, gdyby nie to, że nie chcą one działać. Co się okazuje? Otóż w wersja desktopowa Firefoxa nadal używa... starych eventow z wersji beta Firefoxa 4....

  • MozTouchDown
  • MozTouchMove
  • MozTouchUp

(źródło: http://hacks.mozilla.org/2010/08/firefox4-beta3/)

Ludzie... :P

Wyrzućcie tego WebKita!

Z racji tego, iż WebKit króluje na urządzeniach mobilnych, wszelkie wtyczki do np. jQuery, związane z dotykiem, tworzone są z myślą właśnie o tym silniku. Szkoda tylko, że powoli robi się z WebKita hamulec internetu, podobnie jak było ze starym Internet Explorerem. Zaglądając do kodu CSS takiej wtyczki, otrzymujemy sieczkę prefixów -webkit-. Co za tym idzie? Otóż na Firefoxie (i innych nie WebKitowych silnikach) nie uświadczymy efektów działania części wtyczek, do obsługi dotyku. Ha, nawet wtyczki multitouch pod WebKita nie działają na wersji desktopowej... bida...

Występuje to nawet w jQuery Mobile. Obecnie aktualna wersja 1.0, wszelkie animacje przejścia w CSSsie, ma zrobione tylko na WebKita (nawet animacja loadingu!). Dopiero niedawno udostępniona wersja 1.1.0 RC1, dodaje efekty dla Firefoxa. Wcześniej trzeba było samemu "kompilować" pliki js i css z repo jQuery Mobile!!

Szybkość działania CSSów

Będąc już przy CSSach zahaczę o temat wydajności animacji. Na małych 3"-5" ekranach, nawet 1GHz mobilne procesorki spokojnie obsłużą wymyślne przejścia w CSS3. Jednakże na 22" ekranie niektóre animacje nie są już płynne.

Bywa, że animacja typu flow dla jQuery Mobile (http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-transitions.h...) potrafi skonsumować nawet 50% procesora. To dużo, szczególnie, że animacja na Firefoxie nie jest rewelacyjnie płynna (nawet po hackach związanych z włączeniem akceleracji GPU).
To nie koniec, całkiem udana wtyczka jQTouch (http://www.jqtouch.com/preview/demos/main/#animations) potrafi zjeść nawet do 70% procesora przy animacjach 3D (które faktycznie mogą się podobać).

W sumie w kilku miejscach trzeba było i tak samemu, korzystając z jQuery UI Draggable, dorabiać "szuranie" listą po ekranie. Dla dużych danych, CSSowe animacje nie wyrabiały...

A jednak się udało

Mimo wielu przeciwności, efekt po wstępnej fazie, wyszedł zaskakująco dobry. Mam nadzieje, że kilka wskazówek przyda się osobom chcącym tworzyć aplikacje w HTML5 na ekrany (multi)touch pod desktopy.

Pamiętajcie, że wraz z nowymi wersjami przeglądarek sytuacja może ulec zmianie, oby na lepsze! :) 

programowanie urządzenia mobilne

Komentarze

0 nowych
alucosoftware   7 #1 22.03.2012 09:35

@djfoxer
"Wyrzućcie tego WebKita!"

Już wyrzuciłem :) Podzielam Twoje zdanie odnośnie właściwości CSS dla konkretnych silników -moz, webkit itd. Takie samodzielne implementacje producentów bardzo utrudniają pracę i po raz kolejny dzielą użytkowników i twórców na dwie grupy: jedyny słuszny webkit i cała reszta. No, ale po prostu wykorzystali okazję (Apple i Google)...

Ciekawy projekt, co konkretnie robicie? :)

pamix   7 #2 22.03.2012 09:39

Obawiam się że dotykowe ekrany jeszcze przez długi czas nie zagoszczą na desktopach. All-in-one'ów nie ma na rynku za dużo a w dodatku ich konfiguracje nie powalają i mają się nijak do ceny. Z samymi dotykowymi ekranami jest jeszcze gorzej. Więc na razie twórcy przeglądarek nie śpieszą się żeby zaimplementować zaawansowaną obsługę multitouch'a. Są one domeną smartfonów i tak jeszcze przez jakiś czas zostanie.

http://www.sjp.pl/ulec

alucosoftware   7 #3 22.03.2012 11:07

@panoramix88
Zagoszczą za rok, może dwa z uwagi na nadchodzące dużymi krokami przesycenie rynku tabletami i tym podobnymi cudeńkami. Niemniej już teraz jest najlepszy czas na przełamanie wewnętrznych barier i zapoznanie się z technologią z punktu widzenia dewelopera. Tu gratulacje należą się koledze djfoxer'owi.

Jeżeli zaś chodzi o producentów przeglądarek - kto wie ile przyjdzie nam czekać. Sądzę, że na chwilę obecną najlepszym rozwiązaniem jest wykorzystanie wybranego silnika wespół z zewnętrznym gesture-based-only-API i stworzenie niewielkiego interfejsu umożliwiającego sprawną komunikację tych dwóch (s)tworów w ramach realizowanych projektów.

djfoxer   17 #4 22.03.2012 12:16

@alucosoftware
Tak ogólnie jest to rodzaj multimedialnego kiosku offline. Dzięki temu, że bazujemy na Firefoxie pewnie użyjemy wtyczkę R-kiosk ( https://addons.mozilla.org/en-US/firefox/addon/r-kiosk/ ). Pozwala ona na wyłączenie zbędnych bajerów i blokuje zbędną interakcje na poziomie użytkownik - przeglądarka (zmiana adresu, prawo-klik, wyświetlanie podglądu url itp.).

@panoramix88
Masz rację, chociaż ja duże nadzieje wiążę z nowym Windowsem 8. Jednak ósemka jest mocno uprofilowana pod dotyk, więc może coś się ruszy. Faktycznie do tej pory GUI systemów nie było przystosowane do dotyku. Niby były nakładki, ale czasem mogło wyskoczyć okno eksploratora plików i palcem tam już nic nie zrobimy.

alucosoftware   7 #5 22.03.2012 12:44

@djfoxer
Rozumiem, że chodzi o aplikację pełnoekranową. A co ze skrótami klawiszowymi (np. ALT+F4), czy może klawiatura nie będzie dostępna dla "zwiedzających"?

djfoxer   17 #6 22.03.2012 13:17

@alucosoftware
Tak, pełen ekran. Na zewnątrz będzie tylko dostępny ekran dotykowy. Dodatkowo trzeba będzie powyłączać te dodatki dostępne w W7: szybkie ruchy, czy gesty, które wywołują pojawienie się klawiatury ekranowej itp. :)

pamix   7 #7 22.03.2012 14:34

@djfoxer
Coś się być może ruszy jak wyjdzie następca Windows 8 (obawiam się że nie będzie lubiany tak jak np. Windows Millenium czy Vista) i jak ludzie przestaną się "bać" urządzeń z dotykowymi ekranami.
Trochę odeszłem od tematu. Ale projekt ciekawy. Bardzo chętnie bym przetestował twoje dzieło po ukończeniu, ale zapewne nie bedzie mi to pisane.

Wolfgar   7 #8 22.03.2012 15:03

Kup pan dotykowy ekran. Zlew i mydło na 5 lat dostaniesz pan gratis ;)

djfoxer   17 #9 22.03.2012 15:03

@panoramix88
Przestawienie się na inne podejście do użytkowania może być bolesne. Zobaczymy czy MS zrewolucjonizuje rynek, czy będzie to klapa i nikt nie będzie chciał używać ekranów dotykowych w domach.

Jest szansa, że będziesz mógł go przetestować ;) Zobaczymy jak potoczą się losy tego projektu :)

Zauważyłem jeszcze jeden problem, raczej związany z hardwarem. Ze względu na to, iż ekrany mogą być oporowe, bardzo często zdarza się, przypadkowe dotknięcie np. kurtką czy rękawem. Szczególnie na ekranach dotykowych (multi), a nie na nakładkach na ekran.

Nazir50   4 #10 22.03.2012 17:07

Czekam na nowe laptopy z ekranami multitouchsecreen a nowy MSwin8 wymusi na producentach zmiany jak nie będą dalej spać i wstrzymywać rozwój tego segmentu sprzętu.

Airborn   8 #11 22.03.2012 18:12

@djfoxer na pojemnościowych ekranach wcale nie jest lepiej ;) Na pojemnościowych często zdarza się natomiast, że ekran zarejestruje kliknięcie jeszcze zanim palec faktycznie dotknie monitora.

djfoxer   17 #12 23.03.2012 12:13

@Airborn
Hmm to też jest problem. No cóż jeszcze wiele jest do zrobienia w kwestii ekranów dotykowych. (z drugiej strony, nakładki dotykowe na zwykły ekran bywają często mało czułe)

Airborn   8 #13 23.03.2012 12:27

Dzisiaj nakładki to już moim zdaniem przeszłość, robi się ich mało na rynku, a i normalne monitory dotykowe tanieją (mamy fajną iiyama 24" za jakieś 1300).

P.S. Z innych problemów z dotykami - czasami wzdłuż dolnej krawędzi ekranu potrafi gromadzić się kurz, który może uniemożliwić prawidłow działanie dotyku.

djfoxer   17 #14 23.03.2012 12:44

@Airborn
Zgadzam się, chociaż nie zaginą całkowicie np. : http://multi-touch-screen.com/product.html mają w ofercie nakładki na monitory od 32" do 103" (!), samych dotykowych ekranów takich nie ma.

Właśnie brud i kurz. Zarówno kurz jak i te" paluchy" na ekranie to nic przyjemnego i obniżają przyjemność z używania takiego monitora jak i funkcjonalnie zmniejszają jego żywotność.

  #15 17.05.2012 10:00

http://multi-touch-screen-display.com/ is the place to buy:)