Touchbasedui что это за программа
С развитием мобильных технологий остро встал вопрос об обеспечении адекватного средства коммуникации в интернете. Речь идет об общении в социальных сетях, написания заметок в «Твиттере» и прочих приятных вещах. Как водится, главный инструмент общения — клавиатура.
Но в смартфонах долгое время все было не совсем хорошо в этом плане. Многие производители считали полную клавиатуру бредом, не заслуживающим внимания. И только компания «Эппл» подумала, что за полноценными клавиатурами в мобильных девайсах будущее. И не прогадала. Как и всегда.
После этого производители начали соревноваться в выпуске самой лучшей мобильной клавиатуры. Однако они зачем-то ограничивали функционал ее. И появилась-таки «клава» от стороннего разработчика, которая удовлетворила буквально все запросы пользователей. Называется она TouchPal.
Что это за клавиатура и чем она хороша? Попробуем разобраться.
Что это за программа?
Итак, как вы уже поняли — это клавиатура. И не просто «клава», а особо продвинутая. Если остальные программы такого типа умеют только набирать текст и реализовывать поддержку Т9, то возможности «Тачпала» просто безграничны. Самое же ценное то, что клавиатура TouchPal доступна для на самых различных устройствах.
Есть версии под Андроид и iOS. Вот только с аппаратами на платформе от «Майкрософт» еще не все ясно. Видимо, разработчики не желают тратить время на заведомо мертвую платформу. И это правильно, ибо дни «виндофонов» уже сочтены. Сама компания «Майкрософт» об этом заявила во всеуслышание. Однако не будем отвлекаться.
Лучше вернемся к обзору нашей замечательной клавиатуры.
Внешний вид
Стандартная тема клавиатуры — черная. Количество кнопок то же, что и в других подобных продуктах. Но благодаря расширенным настройкам интерфейса, изменить назначения и расположение кнопок, поменять скин или настроить смену языков не составляет никакого труда.
На выбор пользователя имеется около 30 скинов для кастомизации. И это далеко не предел, поскольку «народные умельцы» выпускают огромное количество авторских тем для TouchPal. Что это, если не популярность? Кнопки на клавиатуре даже по стандарту расположены так, что пользоваться ей весьма удобно.
Эргономичность просто зашкаливает. Однако перейдем к более интересным моментам.
Поддержка Свайпа
Свайп — это метод набора текста без отрывания пальца от клавиатуры. В «Тачпале» он называется «Набор текста при помощи жестов». Клавиатура способна интеллектуально распознавать направление движения пальца и предиктивно предлагать возможные слова. Иногда промахи случаются (это ведь машина), но в большинстве случаев клавиатура не ошибается.
Свайп доступен сразу «из коробки». Никакой установки дополнительных плагинов не требуется. И это еще одно преимущество TouchPal. Что это за программа, которой требуются дополнительные модули? Видимо, именно такими мыслями руководствовались и создатели «Тачпала». Это главное отличие сего продукта от других клавиатур.
Теперь перейдем к словарям и предиктивному вводу.
Искусственный интеллект в действии
Еще одна отличительная особенность «Тачпала» — обучаемость. Причем обучаться она способна на любом языке, включая русский. Программа запрашивает доступ к вашей переписке и СМС сообщениям и изучает найденные там неизвестные слова.
В результате такого поиска вы получаете уже готового помощника, который способен предложить вам уже готовое слово без особенных трудностей. Предиктивный ввод такого типа имеется только в клавиатуре пресловутого «айфона». Да и там он напрочь отказывается работать с русским языком. А здесь — пожалуйста. Еще один плюс в копилку TouchPal.
Что это за клавиатура такая? Очень смахивает на фантастику. Но это суровая правда жизни. Разработчики явно постарались на славу.
Установка TouchPal
Неудивительно, если после всего вышесказанного каждый захочет иметь такую умную клавиатуру. Но нужно знать, где ее можно найти. Хотя, это не бином Ньютона. Установить TouchPal можно из «Маркета» на «Андроид» или «АппСтора» для айфона.
Устанавливается сия программа по обычному алгоритму. Нужно ее найти, принять все условия, согласиться со всем и нажать на кнопку «Установить». После скачивания и установки программа будет доступна в меню приложений. Однако просто так приложение работать не будет.
Нужно не забыть предоставить ему определенные полномочия.
И тут встает вопрос о включении клавиатуры и предоставлении ей полномочий. Все очень просто в случае с TouchPal.
Как включить ее на «Андроиде»? Нужно всего лишь щелкнуть долгим тапом на любом поле ввода и выбрать метод ввода под названием «Тачпал».
После этого система предложит пользователю предоставить программе доступ к СМС сообщениям и переписке. Нужно согласиться. И после всех этих манипуляций программа «Тачпал» заработает так, как ей положено.
Отзывы пользователей о TouchPal
Разработка мультитач веб-приложений
Мобильные устройства такие как сматрфоны или планшеты обычно имеют емкостный экран, чувствительный к прикосновениям для расширенного взаимодействия с пользователем. С каждым днем мобильные приложения становятся все сложнее и сложнее. Веб-разработчикам тоже нужен API для использования всех возможностей тачскрина.
Например, какой-нибудь аркаде или файтингу нужна необходимость нажатья нескольких кнопок, эту возможность может предоставить экран с поддержкой мультитач.
Apple ввел свое touch events API в iOS 2.0, вскоре устройства на Android тоже получили такую возможность и touch events API стал стандартом де-факто.
Недавно была собрана рабочая группа W3C для работы над touch events specification.
В этой статье я рассмотрю touch events API, которое нам предоставляют устройства на iOS и Android, мы изучим какие приложения можно создавать, используя touch events API. В статье куча полезных примеров и техник, которые позволяют упростить написание приложений с touch events API.
События
Эти три основных события представлены в спецификации и поддерживаются многими устройствами:
touchstart: прикосновение к DOM element (аналог mousedown).
touchmove: движение пальца по DOM element (аналог mousemove).
touchend: палец убран с DOM element (аналог mouseup). Каждое событие включает в себя три списка точек прикосновения (списки пальцев):
touches: список всех точек прикосновения на экране.
targetTouches: список точек на текущем элементе.
changedTouches: список пальцев, участвующих в текущем событии. Например, в событии touchend это тот палец, который был убран. Каждый элемент списка представляет из себя объект формата:
identifier: уникальный идентификатор пальца, который сейчас на течскрине
target: DOM element, который является целью события
координаты client/page/screen: точка возникновения события на экране
radius и rotationAngle: эллипс, который описывает форму пальца
Приложения с поддержкой прикосновений
События touchstart, touchmove и touchend предоставляют достаточно мощный API для создания любых взаимодействий, основанных на прикосновении включая все обычные мультитач жесты — зум, вращение и так далее. Этот пример позволяет вам перетаскивать DOM element, используя одноточечное прикосновение:var obj = document.
getElementById('id'); obj.addEventListener('touchmove', function(event) { // Если 1 палец внутри элемента if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; // Place element where the finger is obj.style.left = touch.pageX + 'px'; obj.style.top = touch.
pageY + 'px'; } }, false); Ниже есть пример, который отображает все прикосновения на экране.
Картинка кликабильна Вот его код:// Выше мы создали canvas canvas.addEventListener('touchmove', function(event) { for (var i = 0; i < event.touches.length; i++) { var touch = event.touches[i]; ctx.beginPath(); ctx.arc(touch.
pageX, touch.pageY, 20, 0, 2*Math.PI, true); ctx.fill(); ctx.stroke(); } }, false);
Демки
Появилось уже большое количество приложений с поддержкой мультитач, одно из них рисовалка, основанная на canvas, созданная Paul Irish
И демка Browser Ninja — клон Fruit Ninja, использующая CSS3 transforms, transitions и canvas:
Предотвращение зума
Настройки по умолчанию не очень подходят для мультитач, часто ваши движения пальцами воспринимаются мобильным браузером как команды для зума или скролла. Для отключения зума вам необходимо приписать следующий мета-тег:
Для более точной настройки посмотрите вот эту статью www.html5rocks.com/mobile/mobifying.html#toc-meta-viewport
Предотвращение скролла
Некоторые мобильные устройства имеют поведение по умолчанию для жеста «скролл» (touchmove), такие как классический оверскролл в iOS, что приводит к возвращению страницы назад, если скролл превысил допустимые рамки. Это сбивает с толку в мультитач приложениях, но может быть легко отключено:document.body.addEventListener('touchmove', function(event) { event.preventDefault(); }, false);
Рисуйте аккуратно
Если вы пишете мультитач приложение, которое включается в себя сложное многопальцевые жесты, то будьте осторожны с ними так как вы будете получать очень много событий. Рассмотрим предыдущий пример, в котором рисовались все точки прикосновения. Вы можете это сделать таким образом:canvas.addEventListener('touchmove', function(event) { renderTouches(event.
touches); }, false); Этот метод не масштабируется с числом пальцев на экране. Вместо этого вы можете использовать цикл для отрисовки всех пальцев и получения значительно лучше производительности:var touches = [] canvas.addEventListener('touchmove', function(event) { touches = event.
touches; }, false); // Таймер 60fps timer = setInterval(function() { renderTouches(touches); }, 15);
Таймеры на setInterval — это не очень хороший способ для создания анимаций, т.к. он не синхронизируется с циклом перерисовки браузера.
Современные десктопные браузеры предоставляют функцию requestAnimationFrame, которая лучше подходит для цикличных анимаций — она производительней и тратит меньше батареи. Как только она будет поддерживаться всеми современными браузерами использование setInterval будет плохим тоном.
Использование targetTouches и changedTouches
Важно понять, что event.touches это массив всех пальцев, которые контактируют с экраном, не только те, что касаются DOM element'а. Наиболее подходящим обычно является event.targetTouches или event.changedTouches.
Наконец, если вы разрабатываете под мобильные устройства, вы должны знать важные моменты, которые описаны в статье Eric Bidelman и в документе W3C.
Поддержка устройств
К сожалению не все устройство поддерживают события прикосновения в должном качестве. Я написал скрипт для диагностики, который отображает информацию о поддержке touch API тем или иным устройством, а также точность touchmove. Я протестировал Android 2.3.
3 на Nexus One и Nexus S, Android 3.0.1 на Xoom, и iOS 4.2 на iPad и iPhone. В двух словах, все эти браузеры поддерживают touchstart, touchend, и touchmove.
В спецификации описаны ещё 3 события, но ни один из браузеров не поддерживает их:
touchenter: палец входи в DOM element.
touchleave: палец покидает DOM element.
touchcancel: касание прервано (зависит от реализации). Все протестированные браузеры также предоставляют списки прикосновений — touches, targetTouches и changedTouches. Однако, ни один из браузеров не поддерживает ни radiusX ни radiusY ни rotationAngle, которые определяют форму пальца. Событие touchmove, срабатывает порядка 60 раз в секунду на всех протестированных устройствах.
Android 2.3.3 (Nexus)
В браузере Android Gingerbread (Nexus One и Nexus S) отсутствует поддержка multi-touch. Это известная проблема.
Android 3.0.1 (Xoom)
В браузере Xoom есть поддержка мультитача, но она работает только на одном DOM элементе. Браузер не может корректно обработать два параллельных события на разных DOM элементах. Другими словами, следующий код будет обрабатывает два параллельных события:obj1.addEventListener('touchmove', function(event) { for (var i = 0; i < event.
targetTouches; i++) { var touch = event.targetTouches[i]; console.log('touched ' + touch.identifier); } }, false); А вот этот нет:var objs = [obj1, obj2]; for (var i = 0; i < objs.length; i++) { var obj = objs[i]; obj.addEventListener('touchmove', function(event) { if (event.targetTouches.length == 1) { console.log('touched ' + event.
targetTouches[0].identifier); } }, false); }
iOS 4.x (iPad, iPhone)
Устройства на iOS в полной мере поддерживают Touch API.
Инструменты разработчика
В мобильной разработке всегда проще прототипировать на компьютере и по необходимости использовать живое мобильное устройство для теста. Мультитач это одна из всех вещей, которую сложно протестировать на обычном ПК, т.к многие ПК не поддерживают мультитач. Необходимость тестирования на мобильных устройствах может увеличить цикл разработки, т.к.
каждое изменение вы должны залить на сервер, а затем на устройство (прим. пер. Очень сомнительное затруднение). На мобильных устройствах отсутствуют необходимые инструменты разработчика. Решение этой проблемы — симулирование события прикосновения на вашем ПК. Одноточечное прикосновение можно симулировать мышкой.
Мультитач может быть симулирован на устройствах с поддержкой мулититач, например на новых Apple MacBook.
Одноточечные события
Если вы желаете симулировать одноточечное событие на вашем ПК, то попробуйте Phantom Limb, которая симулирует события прикосновения на страницах.
Также существует плагин Touchable для jQuery, который обединяет события мыши и прикосновения.
Мультитач события (решение только для MAC)
Для того, чтобы включить возможность обработки мультитач событий в вашем браузере, используя мультитач устройства (Apple MacBook или MagicPad). Я создал MagicTouch.js он отлавливает события от вашего trackpad и конвертирует их в события совместимые со стандартом. Для начала работы:
1. Скачайте и установите плагин npTuioClient NPAPI в ~/Library/Internet Plug-Ins/.
2. Скачайте приложение TongSeng TUIO для MagicPad и запустите сервер.
3. Скачайте JavaScript библиотеку MagicTouch.js для симуляции событий прикосновения, совместимых со стандартом. 4. Подключите magictouch.js и плагин npTuioClient: … Touch input plugin failed to load! Я тестировал этот метод только в Chrome 10, но он должен работать и в других современных браузерах.
Если ваш ПК не поддерживает мультитач вы можете симулировать события прикосновения, используетя другие TUIO трекеры такие как reacTIVision. Подробная информация доступна на сайте проекта TUIO.
Ваши жесты могут пересекаться с жестами OS. На OS X вы можете настроить системные события в System Preferences > Trackpad
Мультитач события поддерживаются все большим числом мобильных браузеров, Я очень рад, что новые веб-приложения используют этот API в полную силу.
От переводчика
Программы-паразиты: как избавиться
Все эти Яндекс-, Рамблер-, Маил.ру- и т.д. бары как венерические заболевания: один раз во время установки не убрал галочку в нужном месте — всё, мучайся, лечи, удаляй.
Если у Вас при входе в интернет выскакивает табличка «Ого, в настройках интернета что-то поменялось!» или похожая, Вы не можете изменить стартовую страницу, изменился поиск по умолчанию, в браузере появились новые панели инструментов, при загрузке компьютера выскакивают неведомые окна, начинают сканировать компьютер и рапортовать о существовании кучи проблем — у Вас завелись программы-паразиты. В этой статье я расскажу что это такое, откуда они берутся и как от них избавиться.
По официальной классификации их ещё называют ПНП (Потенциально нежелательные программы) (англ. — Potentially Unwanted Programs (PUPs)).
Чем они нам грозят?
1. Панели инструментов (toolbars) занимают полезное пространство окна браузера, препятствуя свободному доступу к нужной и полезной информации.
2. Занимают оперативную память и ресурсы процессора и, в зависимости от их количества, могут существенно замедлить работу компьютера.
3. Практически всегда запускаются вместе с операционной системой а также с браузеом тем самым существенно увеличивают время их загрузки.
4. Могут проводить за спиной у пользователя какую-то свою «недокументированную» деятельность: собирать и передавать своим хозяевам историю посещения интернета, персональную информацию, пароли, модифицировать веб-страницы, поисковую выдачу, перенаправлять на другие ресурсы.
5. Ведя свою «деятельность» могут сильно понизить скорость Интернета.
6. «Халявные» улучшальщики, чистильщики, обновляльщики и оптимизаторы редко бывают полезны, а часто — наоборот.
7. Не всегда качественно написанные и оттестированные программистами, могут быть причиной самых разнообразных иных «глюков» компьютера.
От куда они берутся?
В отличие от заразы, называемой «hijack startpage» вроде webalta.ru apeha.ru, www.ctel.ru, www.smaxi.net, mygame.com.ua в появлении данных проблем пользователь виноват частично сам. Обычно эти программы честно предупреждают пользователя о том, что они будут устанавливаться (хотя может не всегда так явно, как хотелось бы).
Практически все бесплатные программы, игры, а так же и некоторые платные имеют этот «халявный довесок»:
При установке ICQ «довески» прячутся в пункте «Настройка установки»
При обновлении программ, плагинов:
При обновлении Adobe Flash Player не пропустите установку McAfee Security Scan Plus!
При скачивании файлов из файлообменников:
При загрузке файлов из интернета не пропустите «предложение» установить какой-нибудь Яндекс.Бар
При установке игр:
При установке игр, если не обращать внимание на настройку параметров, установится куча ненужных опций
Оказывается, что при установке платных программ (например антивирус NOD32) также нужно быть внимательным чтобы не «подхватить» какой-то Яндекс.бар вместе с сервисом хранения фотографий «всего лишь за 590 руб на 1 год»:
По-моему, встраивать в платные программы рекламные материалы — это уже жлобство!
Был приятно удивлён, что при установке антивируса Avira его SearchFree Toolbar НЕ ОТМЕЧЕН галочками по умолчанию
Что получаем?
В результате наших невнимательных действий получим такие или похожие всплывающие окна, невозможность изменить стартовую страницу, тулбар в браузер, новую иконку в трей и в автозапуске:
Mail.ru: Управление настройками интернета: «Ого, в настройках интернета что-то поменялось!»
Как с этим бороться?
Лучше этого конечно не допускать, но если уж такое произошло необходимо зайти в «Установку и удаление программ» и подчистую поудалять программы-паразиты, которые мы по неосторожности впустили в наш компьютер. Вот список из таких программ (будет постоянно пополняться), которые в последнее время наиболее часто встречаются:
Ask Toolbar
Ask Toolbar Updater
AlterGeo Magic Scanner
Avira SearchFree Toolbar
Bing Bar
Carambis Driver Updater
DAEMON Tools Toolbar
Google Toolbar
Guard@Mail.
Ru
Hamster Free ZIP Arhiver
Hamster Lite Arhiver
ICQ Toolbar
livetools
McAfee Security Scan
McAfee SiteAdvisor
Norton Security Scan
Rambler-Ассистент
Skype Click to Call
Skype Toolbars
Ticno multibar
Ticno Indexator
Ticno Tabs
Uniblue DriverScanner
Vpets
Windows iLivid Toolbar
Яндекс.Бар
Mail.Ru Спутник
При удалении Guard.mail.ru сопротивляется и нагло врёт о том, что он «охраняет компьютер от вредоносных программ». На самом деле он охраняет только службы Mail.ru (стартовую страницу, поиск и т.д.)
Ещё лучше воспользоваться какой-то продвинутой программой-деинсталлятором. Например Revouninstaller, чтобы она поподчищала за этимими программами все возможные «хвосты», которые остаются в системе после обычной деинсталяции:
Программа-деинсталятор Revouninstaller после удаления Яндекс.Бара стандартными средствами находит и удаляет от него ещё много «хвостов» как в реестре, так и на жёстком диске
После удаления этой гадости необходимо вручную поисправлять в браузерах стартовые страницы, поиск по умолчанию, поудалять ненужные дополнения. Хотя, иногда и этого бывает недостаточно: оно иногда так глубоко прописывается в браузере, что искоренить его полностью не представляется возможным.
После удаления Яндекс.Бара в браузере иногда остаются непонятные глюки
В таком случае проще и быстрее их также попереустнавливать при помощи программы деинсталяции (но не забывайте что в таком случае могут пропасть закладки, сохранённые пароли, история посещений и нужные дополнения!).
Удачи всем вам, будьте внимательны и не попадайтесь!
Сборник народной мудрости от цитатника рунета:
«А я маленькая программка управления фотоаппаратом, и я боюсь что ты меня никогда не увидишь, поэтому вот тебе мой тулбар в браузер, иконка в трей, автозапуск со сплешскрином, стартовая страница и поиск по умолчанию…»
***
Отзыв о программе Yahoo Toolbar:
— КАК Б**** УДАЛИТЬ ЭТУ Х****!!!
***
XXX: Переставлял винду у себя на машине вместе со всем софтом. Надо быть очень внимательным человеком, чтобы не поставить себе yandex bar.
***
Я бы проал на выборах за того кто пообещал бы законодательно запретить встраивать яндекс.бар в инсталляторы.
***
Из истории развития Вселенной, хронология большого взрыва:
- Рождение частиц
- Эпоха Великого объединения
- Отделение гравитации от объединённого электрослабого и сильного взаимодействия.
- Установлен Яндекс.Бар
- Вселенная наполняется кварк-глюонной плазмой
***
В: Почему ребёнок кричит при рождении?
О: Ему предлагают сразу проставить Яндекс.Бар.
***
Если вечером пьяным зайти в интернет, то на утро обнаружишь установленный в браузере Яндекс-бар.
***
ScayTrase: Долбаный Яндекс.Бар скоро приучит всех человеков читать лицензии, и смотреть на кнопочки при установке.
***
1: есть даже люди, которые добровольно яндекс.бар устанавливают
2: о_О О_О О_о
1: убери свой танк с моей территории
***
Вилка: Сегодня впервые устанавливала виндовс 7. Почему-то казалось, что на последней минуте спросит «Установить яндекс.бар?» ))
***
В: все эти яндекс.бары лишь портят удовольствие от установки программ по типу «далее, далее, далее, готово»
***
xxx: да гугл давно всякие програмульки выпускает
ууу: херня все это, вот если бы они сделали програмульку которая сносит всякие гварды мейл ру и ставит во все браузеры поиск по умолчанию гугл, ее бы без включения в софт качали на ура.
***
>Сегодня чуть было не поставил себе яндекс бар вместе с юторрентом…
>Теряю сноровку
Touch события на javascript, мультитач — реализация
Подробности Категория: Разработка 17.09.
2014 20:19
Разрабатывая приложения для Android и iPhone с iPad (IOS) используя лишь веб-технологии, перед каждым девелопером встаёт рано или поздно вопрос реализации и использования в своей игре или приложении сложными мультитач действиями, такими как свайп, щепотка, а также обработки длительного тапа (длительное касание одним пальцем без движения) и drag'n'drop.
В этом материале мы рассмотрим способы осуществления обработки тач-событий разной сложности на Javascript Event'ах, без сторонних библиотек (jQuery min только прихватим).
Сразу оговорюсь, что использовать jQuery я буду только для того чтобы отключить дефолтное поведение браузера на событие. Мне не нравится эта библиотека, поэтому всё будет написано на Vanilla JS.
Итак, начнём мы с теории и собственно коснёмся того какие события стоит использовать при создании приложения или игры.
https://www.youtube.com/watch?v=AXDhAHRT0uU
Всего используются 3 ключевых события:
touchstart — Коснулись экрана
touchend — Палец убрали
touchmove — Двигаем пальцем
Если чтобы получить элемент на который заехала мышь или съехала, было достаточно вызвать event.target, то с touch-событиями не так всё просто.
Каждое касание должно идентифицироваться. И для этого используются списки:
touches — Все пальцы которые сейчас взаимодействуют с экраном («Коснуты» экрана)
targetTouches — Список пальцев которые взаиможействуют с элементом
changedTouches — Список пальцев, которые учавствуют в текущем событии. Если например это событие touchend, то список будет содержать палец который был убран (Даже если остальные 4 пальца до сих пор на экране).
Чтобы было проще понять вот ситуация:
Я ставлю один палец на экран и все 3 списка имеют один элемент.
Я ставлю второй палец и теперь touches имеет 2 элемента, targetTouches будет иметь 2 элемента если второй палец я поставлю на тот же HTML элемент что и первый, а changedTouches в свою очередь будет иметь только второй палец, так как именно он вызвал событие.
Если я поставлю на экран сразу 2 пальца одновременно, тогда changedTouches будет иметь 2 элемента (по каждому на палец).
Если я начну двигать своими пальцами по экрану, то будет меньться только список changedTouches. Количество элементов которое он будет содержать будет равняться количеству пальцев задействованных в движение (как минимум 1).
Если я уберу палец, то списки touches, targetTouches опустеют на один элемент, а changedTouches будет содердать палец, так как он вызвал событие (touchend)
Когда я уберу последний палец, списки touches, targetTouches не будут содержать ничего, а changedTouches будет иметь информацию о этом самом пальце.
Теперь самое время узнать какую именно информацию мы можем получить о пальце:
identifier — Уникальный ID касания
target — Сам объект к которому мы коснулись
PageX,PageY — Координаты касания на странице
Посмотреть уникальный ID единственного касания можно вызвав event.touches[0].identifier, а на IOS, если я не ошибаюсь надо делать так event.originalEvent.touches[0].identifier.
Что ж, кой чему я вас уже научил, а теперь самое время перейти к практике.
Перед тем как мы приступим вам следует усвоить кое-что. В каждой игре, приложении которое вы будете делать на Android и IOS вы должны отключить стандартную реакцию компонента WebView на события. Для этого мы и подключали jQuery (Я не смог сделать на Pure JS то что делают функции event.preventDefault() и event.stopPropagation()).
Итак вам нужно поместить в ваш JS код следующее:
document.addEventListener('touchstart', function(event) {event.preventDefault();event.stopPropagation();/* Здесь ваш код обработки события*/
}, false);
document.addEventListener('touchmove', function(event) {event.preventDefault();event.stopPropagation();/* Здесь ваш код обработки события*/
}, false);
document.addEventListener('touchend', function(event) {event.preventDefault();event.stopPropagation();/* Здесь ваш код обработки события*/
}, false);
Это обязательно нужно делать, потому что у многих устройств без этого существенные тормоза глюки и дёрганная анимация.
Отвелеклись. Продолжаем.
Давайте имея полученные знания опишем все основные touch взаимодействия с экраном и элементами.
Tap (Косание)
Это событие выполняется просто когда мы косаемся пальцем экрана и убираем его.
obj.addEventListener('touchstart', function(event) {if (event.targetTouches.length == 1) {var myclick=event.targetTouches[0]; /*Ваш код*/}
}, false);
На примере в переменной myclick будет содержаться ваше касание.
Long tap (Длительное косание)
Хоть и нечасто, однако встречаются ситуации когда в мобильном приложении или игре нужно поймать действие длительного касания на объекте. Давайте рассмотрим как сделать длительное касание на Javascript для сенсорных экранов мобильных смартфонов ну иконечно же планшетов.
Реализация 1:
var ldelay;var betw={};document.addEventListener('touchstart', function(event) {event.preventDefault();event.stopPropagation();ldelay=new Date(); betw.x=event.changedTouches[0].pageX;betw.y=event.changedTouches[0].
pageY;}, false);/*Ловим отпускание пальца*/document.addEventListener('touchend', function(event) {var pdelay=new Date(); if(event.changedTouches[0].pageX==betw.x && event.changedTouches[0].pageY==betw.y && (pdelay.getTime()-ldelay.
getTime())>800){/*Здесь ваш код*/}
}, false);
Это первая реализация Long Tap на яваскрипте. Логика такая: ловим касание, замеряем время этого события, ловим отпускание, замеряем время отпускания, вычитаем первое время из второго и проверяем не изменилось ли положения пальца на экране. Если палец на том же месте и времени прошло более 800 миллисекунд, мы выполняем действия Long Tap.
Теперь давайте разберём вторую реализацию с немного другой логикой:
Реализация 2:
var lttimer;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(){/*Ваш код*/}
Выше приведённая реализация события Long Tap на Javascript является более правильной и наиболее часто применяется в мобильных приложениях. Её главное отличие от предыдущей реализации в том что она не дожидается когда будет отпущен палец и сама в том случае если палец не двигался запускает событие Long Tap, которое вы должны поместить в функцию longTouch.longTouch.
Swipe (Листание)
Самое время поговорить о листании на экране смартфона или планшета. Свайп — довольно распространённый в построении в первую очередь мобильных приложений, поэтому рано или поздно с ним приходиться иметь дело каждому аппстроителю.
Если вы не хотите заморачиваться и вам нужен только функционал Swipe в мобильном приложении, вы можете почитать в самом низу страницы об этом.
Если же вы зардкорный девелопер — поехали!
Реализация 1:
var initialPoint;var finalPoint;document.addEventListener('touchstart', function(event) { event.preventDefault(); event.stopPropagation();initialPoint=event.changedTouches[0];}, false);document.addEventListener('touchend', function(event) { event.preventDefault(); event.stopPropagation();finalPoint=event.
changedTouches[0];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){ /*СВАЙП ВЛЕВО*/} else{ /*СВАЙП ВПРАВО*/} } else { if (finalPoint.pageY < initialPoint.
pageY){ /*СВАЙП ВВЕРХ*/} else{ /*СВАЙП ВНИЗ*/} } }
}, false);
Это у нас первая реализация свайпа на Javascript. Особенность этой реализации в том что событие засчитывается как свайп, когда вы отпускаете палец участвующий в событии.
Данный свайп может быть применён в некоторых задачах.
Не забывайте в этом и многих других премерах выключать стандартное поведение браузера на тач события (Об этом я писал выше), я не пишу обычно их в приведённых примерах, но вы не забывайте.
А теперь рассмотрим другую — классическую реализацию, когда swipe нужно считать в реальном времени, например при перелистывании страницы:
var startPoint={};var nowPoint;var ldelay;document.addEventListener('touchstart', function(event) {event.preventDefault();event.stopPropagation();startPoint.x=event.changedTouches[0].pageX;startPoint.y=event.changedTouches[0].pageY;ldelay=new Date(); }, false);/*Ловим движение пальцем*/document.addEventListener('touchmove', function(event) {event.
preventDefault();event.stopPropagation();var otk={};nowPoint=event.changedTouches[0];otk.x=nowPoint.pageX-startPoint.x;/*Обработайте данные*//*Для примера*/if(Math.abs(otk.x)>200){if(otk.x0){/*СВАЙП ВПРАВО(СЛЕД.СТРАНИЦА)*/}startPoint={x:nowPoint.pageX,y:nowPoint.pageY};}}, false);/*Ловим отпускание пальца*/document.
addEventListener('touchend', function(event) {var pdelay=new Date(); nowPoint=event.changedTouches[0];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{/*СВАЙП ВПРАВО*/}}else {if (nowPoint.
pageY < startPoint.y){/*СВАЙП ВВЕРХ*/}else{/*СВАЙП ВНИЗ*/}}}
}, false);
В этом способе мы пошли немного другим путём и чстично использовали принцип первой реализации. По своей логике это немного более сложный свайп. В том месте где откомментировано /*Обработайте данные*/, вы должны использовать координаты свайпающего пальца.
Например, это может быть анимация перелистывания страницы и чем левее палец тем больше отлистывается страница. Для примера мы в той части слушателя события touchmove отслеживали только x-координату, y — прикручивается подобным образом. В переменной otk.x храниться текущее положение пальца относительно точки где он впервые коснулся эрана.
Если палец левее этой точки то переменная имеет отрицательное значение, если правее — положительное.
Для примера мы там поставили условие когда палец перемещается на расстояние более 200 пикселей в лево или право от точки касания — мы засчитываем свайп.
Для чего это нужно? Например вы можете как только пользователь коснулся и начал двигать палец показывать ему плавное перелистывание страницы, которая идёт за его пальцем, а как только палец уходит за 200 пикселей, совершает окончательная анимация и страница перелистывается. Это как одна из возможных способом применения такого свайпа.
Но зачем тогда событие touchend спросите вы… Иногда пользователь не желает на какое -то расстояние перемещать свой палец для свайпа и во многих приложениях используется свайп как реакция на быстрое перемещение пальца по экрану в сторону на небольшое расстояние. Именно это мы и применили в последнем слушателе событий.
Drag'n'Drop (Перетаскивание элемента)
Нередко в интерфейсах приложений и в играх приходится перетаскивать пальцем один из элементов в определённое место. Давайте сделаем это на javascript заточенным под сенсорные экраны. Начнём:
var obj = document.getElementById('sat');/*Ловим касание*/obj.addEventListener('touchstart', function(event) { if (event.targetTouches.length == 1) { var touch=event.targetTouches[0];touchOffsetX = touch.pageX — touch.target.offsetLeft;touchOffsetY = touch.pageY — touch.target.
offsetTop; }}, false);/*Передвигаем объект*/obj.addEventListener('touchmove', function(event) { if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; obj.style.left = touch.pageX-touchOffsetX + 'px'; obj.style.top = touch.
pageY-touchOffsetY + 'px'; }
}, false);
Как видно это не весь код, у нас пока получился drag без drop'а. Вы уже наверняка обратили внимание что передвижение элемента в конечном счёте производится css параметрами left и top. Можно вместо этих двух строчек, отвечающих за передвижение объкта по экрану поставить:
obj.style.WebkitTransform=»translate(«+(touch.pageX-touchOffsetX)+»px,»+(touch.pageY-touchOffsetY)+»px)»;
Т.е. использовать CSS3, однако в своём случае я не заметил прироста производительности, пожтому лувше top и left. Этим кодом вы можете передвигать предмет по полю, но его отпускание на каком-то определённом месте засчитано не будет. Чтобы это реализовать добавим на объект обработчик touchend с соответствующим кодом внутри:
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[0].pageX > tarX) && (event.changedTouches[0].pageX < (tarX + tarWidth)) && (event.changedTouches[0].pageY > tarY) && (event.changedTouches[0].
pageY < (tarY + tarHeight))){ /*Мы над объектом tarobj*/ } }
}, false);
Для того чтобы всё работало, укажите ваш объект в переменную tarobj и будет вам счастье.
Pitch (Щепотка)
Настало время вспомнить знаменитую щепотку, которую впервые показал Стив Джобс, когда презентовал первый айфон. Именно это движение двумя пальцами друг к друг другу или друг от друг от друга и называется щепоткой. Обычно этот жест используется для увеличения или уменьшения чего-либо.
Дорогие читатели, если вы увидели ошибку или опечатку в статье «Touchbasedui что это за программа?», помогите нам ее исправить! Выделите ошибку и нажмите одновременно клавиши «Ctrl» и «Enter». Мы получим ваше сообщение и внесём исправления в ближайшее время.
