И снова о Heat-pipe Direct Touch: тестируем новые кулеры от компаний Xigmatek и OCZ (страница 4)
Все рассмотренные кулеры и их конкурент тестировались в двух режимах: на открытом стенде, когда материнская плата находится горизонтально на столе, а кулеры на ней в вертикальном положении, а также в закрытом корпусе системного блока при вертикальном расположении материнской платы. Конфигурация системного блока во время проведения тестирования не подвергалась каким-либо изменениям и состояла из следующих комплектующих:
960 об/мин на силиконовых шпильках, на боковой стенке такой же вентилятор на
реклама
Все тесты были выполнены в операционной системе Windows Vista Ultimate Edition x86 SP1. Для мониторинга температуры процессора и чипсета материнской платы, а также скорости вращения вентиляторов кулеров использовалась утилита SpeedFan версии 4.36 beta 15, считывающая температуру непосредственно из регистров процессора:
Технология автоматической регулировки оборотов вентиляторов кулеров в BIOS материнской платы была выключена, как и все функции энергосбережения центрального процессора. Контроль срабатывания термозащиты CPU (режима пропуска тактов) осуществлялся с помощью утилиты RightMark CPU Clock Utility 2.35.0:
Разогрев CPU был выполнен в двух режимах. В первую очередь для максимального прогрева использовался Linpack 32-bit в удобной для тестирования оболочке LinX версии 0.4.9. Объём используемой оперативной памяти во время тестирования был задан вручную и равнялся 1850 Мбайт, а число проходов зафиксировано на 15:
Так как цикл проводился дважды с 20-минутным периодом простоя на остывание и нормализацию температур, то этого, казалось бы, непродолжительного периода тестирования, было достаточно для того, чтобы максимальная температура процессора стабилизировалась.
В связи с тем, что Linpack нагружает процессор совершенно уникальной нагрузкой (очень высокой), то дополнительное тестирование кулеров было проведено в более приземлённой по степени нагрузки и распространённости игре Far Cry 2. Для этого использовался тройной цикл встроенного в игру бенчмарка в режиме «Ranch Long» при настройках «Very High» (DirectX 10) и разрешении 1280 х 1024:
При этом средний фрейм-рейт по результатам бенчмарка держался на уровне 93
95 кадров в секунду. Замена используемой мною прежде игры Unreal Tournament 3 вызвана более высокой нагрузкой от Far Cry 2 на процессор и, как следствие, более высокой температурой ядер процессора.
реклама
Эффективность систем охлаждения проверялась в обоих режимах не менее чем двумя циклами с периодом стабилизации температуры в корпусе системного блока равным
20 минутам. На открытом стенде период стабилизации был практически вдвое меньше. Несмотря на данный период, как правило, результаты второго цикла прогрева CPU были выше на 0.5-1 градус Цельсия. За итоговый результат принимались максимальные показатели температуры самого горячего из четырёх ядер процессора по двум циклам тестирования (при условии, если разница между данными не превышала одного градуса, в противном случае тестирование проводилось ещё, как минимум, один раз).
Комнатная температура во время тестирования контролировалась установленным рядом с системным блоком электронным термометром, с возможностью мониторинга изменения температуры в комнате за последние 6 часов. Во время тестирования всех систем охлаждения комнатная температура не выходила за границы диапазона 23.5
24.0 градусов Цельсия и является начальной точкой отсчёта на сводной диаграмме температур. Добавлю, что частота вращения вентиляторов кулеров на этих же диаграммах указана не по техническим характеристикам, а по среднему значению данных мониторинга SpeedFan за всё время тестирования.
Измерение уровня шума систем охлаждения осуществлялось после часа ночи в полностью закрытой комнате площадью около 20 м 2 с помощью электронного шумомера CENTER-321 с расстояний в 3 см, 1 метр и 3 метра от источника шума. Во время измерений, все три 120-мм корпусных вентилятора были замедлены до
700 об/мин. В этом режиме фоновый уровень шума системного блока, измеренный с расстояния в 1 метр, не превышал
32.8 дБА, а самым «громким» оказывался 140-мм вентилятор в блоке питания. При полностью выключенном компьютере шумомер фиксировал 30.8 дБА (нижний предел измерений равен 30 дБА), а субъективно комфортный уровень шума находится в диапазоне от 34.0
Для сравнения с рассмотренными в сегодняшней статье кулерами в тесты был добавлен эталонный кулер башенного типа Thermalright Ultra-120 eXtreme ($60), который оснащался PWM-вентилятором от кулера Xigmatek HDT-S1284 с частотой вращения от
Второй, дополнительный 92-мм вентилятор на кулер Xigmatek HDT-SD964 не устанавливался, так как его попросту не оказалось в моем распоряжении, а имеющиеся 80-мм вентиляторы на его радиатор установить обычным способом нельзя.
3. Результаты тестирования эффективности систем охлаждения и измерений уровня шума
При проведении проверки с помощью Linpack предел разгона 45-нм четырёхъядерного процессора внутри корпуса системного блока на самой слабой из тестируемых систем охлаждения сегодняшнего тестирования оказался равным 3.7 ГГц (+23.3 %) при повышении напряжения в BIOS материнской платы до
1.4875 В (+29.3 %). В свою очередь, при тестировании кулеров в игре Far Cry 2 процессор был стабилен вплоть до 3.95 ГГц (+31.7 %) при напряжении в 1.525 В (+32.6 %):
Прежде чем приступить к анализу результатов тестирования, внесу некоторые пояснения. Итак, все кулеры с технологией прямого контакта при тестировании устанавливались в наиболее выгодной, с точки зрения обеспечения теплопередачи, ориентации, то есть тепловыми трубками вдоль замка процессора (параллельно блоку питания). Далее, как выяснилось по ходу тестирования, замена штатного крепления с пластмассовыми защёлками кулеров Xigmatek HDT-S1284 и OCZ Gladiator Max на комплект Crossbow приводит к снижению температуры в пике нагрузки под Linpack на 2 градуса Цельсия. А вот Xigmatek HDT-SD964 оказался абсолютно равнодушен к замене крепления. Тем не менее, результаты всех трёх HDT-кулеров на диаграмме приведены с креплением Crossbow.
реклама
Результаты тестирования кулеров представлены на диаграмме:
Последнее место кулера Xigmatek HDT-SD964 вполне предсказуемо. Небольшая площадь рассеивания и широкие алюминиевые вставки между медными тепловыми трубками в основании не позволяют данному кулеру приблизиться к лидирующей группе. При этом необходимо отметить, что проигрыш HDT-SD964 следующему перед ним по эффективности OCZ Gladiator Max не превышает 2 градусов Цельсия, правда последний кулер функционирует тише. «Гладиатор» также не впечатлил своей эффективностью. Вероятнее всего, этому кулеру всё-таки не хватает площади рассеивания, чтобы в полной мере раскрыть свой потенциал. С мощным вентилятором Scythe Kaze Maru эффективность системы охлаждения от OCZ повышается на 3 градуса Цельсия внутри корпуса системного блока и на 4 градуса на открытом стенде.
А вот третий кулер с технологией прямого контакта – Xigmatek HDT-S1284 – оказался лучшим из сегодняшней тройки. Его преимущество над двумя другими участниками тестов невелико, но всё же имеет место быть. Максимально уплотнённые трубки в основании и высокая площадь радиатора позволяют системе охлаждения от Xigmatek опережать конкурентов, а со 140-мм вентилятором от Scythe на открытом стенде и вовсе сравняться по эффективности с Thermalright Ultra-120 eXtreme (с таким же вентилятором). Неплохо, если учесть, что Xigmatek HDT-S1284 стоит примерно на 15 долларов США дешевле и в его состав уже входит вентилятор, в то время как для Ultra-120 eXtreme его придётся приобретать за дополнительные средства.
Теперь посмотрим на диаграмму с результатами измерения уровня шума кулеров:
реклама
Как вы видите, уровень шума кулеров только на минимальной скорости вращения их вентиляторов не переходит субъективную границу комфорта. Во время же нагрузки на процессор и по достижению вентиляторами их максимальных скоростей кулеры становятся ощутимо слышны на фоне тихого системного блока, ну а Xigmatek HDT-SD964 и вовсе шумит слишком сильно.
Заключение
На мой взгляд, пожалуй, самым значимым моментом сегодняшней статьи является тот факт, что производители стали обращать внимание на критику в отношении слабого прижима кулеров с технологией прямого контакта, и теперь кулеры можно оснастить надежными креплениями с высоким усилием прижима. Для полного счастья остаётся только включить их в стандартный комплект поставки Xigmatek HDT-S1284 и OCZ Gladiator Max. Не думаю, что это существенно повлияет на их стоимость, зато в эффективности охлаждения пару градусов можно будет отыграть. И не будем забывать здесь об уже назревшей необходимости оснащения новых кулеров креплением для LGA 1366, которого пока у Xigmatek и OCZ нет.
Что же касается протестированных сегодня систем охлаждения, то в целом по современным меркам они мне показались неинтересными. Xigmatek HDT-SD964 может привлечь внимание разве что своей компактностью и невысокой ценой в 34 доллара США, но наверняка оттолкнёт потенциальных покупателей не выдающейся эффективностью охлаждения и высоким уровнем шума. Возможно, второй вентилятор, установленный на выдув, и улучшит его характеристики, но, как правило, в таких случаях эффективность возрастает на 3-4 градуса Цельсия, не более того. Немногим более эффективным оказался кулер OCZ Gladiator Max, однако при наличии на рынке такого конкурента, как Xigmatek HDT-S1284 идентичной стоимости, «гладиатору» сложно будет найти своих покупателей. Эффективность Xigmatek HDT-S1284 на тестируемых скоростях вентиляторов лишь немногим ниже, чем у более дорогого Thermalright Ultra-120 eXtreme, а с высокопроизводительным вентилятором кулеры и вовсе равны. Выбор, как и всегда, за вами.
VoiceOver на iOS: каждый контрол ведёт себя по-разному
Привет, Хабр! Недавно я говорил про адаптацию приложений для незрячих и неподвижных людей. И не договорил!
Сегодня расскажу, как изменить поведение контролов с помощью accessibilityTraits и сделать жизнь незрячих чуть удобней. Знать работу этих трейтов (traits) важно, чтобы не писать свои костыли.
Адаптация iOS-приложения — большая тема, в одну статью всё не влезло, поэтому выпускаю их серией.
В первой части мы начали разбираться с адаптацией приложений для незрячих с помощью VoiceOver: подписали контролы, сгруппировали их, исправили навигацию. В этой статье пойдём дальше и рассмотрим «особенности», которые можно дать контролам, чтобы улучшить их работу для незрячих людей и в целом повысить удобство использования приложения.
Особенности элементов управления — Trait collection
Тип контрола
VoiceOver знает про несколько базовых типов элементов. Часть из них уже настроена в вашем проекте, но всё равно расскажу про них.
Типы контролов используются для навигации: по ним можно быстро перемещаться с помощью ротора.
Состояние контрола
У контрола может быть три состояния: обычный, выбранный и отключенный. Интересно, что произносятся они в разное время и могут быть выбраны одновременно:
Особые свойства контролов
Есть ещё несколько необычных свойств. В нашем случае к экрану с пиццей они не подходят, но я всё равно расскажу про них, потому что информации о них мало. Возможно, это сэкономит вам время.
— standart typing — как простая кнопка в VoiceOver: сначала наведите фокус на букву, а затем нажмите дважды в любом месте, чтобы написать её. Набирать можно быстрее двумя руками: одним пальцем водить по клавиатуре (буквы будут озвучиваться) и касаться другим пальцем, чтобы подтвердить выбор клавиши.
— touch typing — однорукий ускоренный набор: водите пальцем по клавиатуре, чтобы озвучить кнопки. Отпустите палец, чтобы написать букву.
— direct touch typing — как обычный набор, будто VoiceOver выключен.
Видео про разные способы ввода:
Переключатель теста. Настройка теста состоит из пяти кнопок: три для выбора размера пиццы и две для типа теста. Их стоит сгруппировать и подписать, чтобы вместо пяти осталось две: «Размер, средний. Элемент регулировки» и «Тесто, традиционное. Элемент регулировки».
Нужно сделать в 4 шага:
Счетчик количества всего на свете. В данном блоке мы видим четыре контрола: кнопка минус, количество, кнопка плюс и цена. Можно объединить их в одну view и превратить в один контрол: «Количество, 1, 575 рублей. Элемент регулировки». После вертикального свайпа изменится количество, а затем произнесётся новое значение вместе с ценой.
Заключение
В следующий раз посмотрим на решение типовых проблем: порядок обхода, модальные окна, индикаторы загрузки.
А ещё у нас сейчас открыта одна вакансия в мобильном направлении. Так что я просто оставлю это здесь: Senior iOS Developer (Нижний Новгород).
И снова о Heat-pipe Direct Touch: тестируем новые кулеры от компаний Xigmatek и OCZ (страница 3)
OCZ Gladiator Max (OCZTGLADM)
Ну и, наконец, третья на сегодня новинка с технологией прямого контакта – это кулер от компании OCZ Technology с амбициозным названием Gladiator Max. Небольшая коробка из тонкого картона окрашена в синий и светло-голубой тона, а на её лицевой стороне есть небольшой вырез, сквозь который видна часть вентилятора кулера:
На коробке всё типично: особенности, характеристики, перечень разъёмов и процессоров, а также несколько фото кулера. Что интересно, внутри упаковки такой же пенополиуретановый корсет, как и у вышерассмотренных кулеров от Xigmatek, да и в целом по ходу обзора меня не покидало ощущение «дежа-вю». Сверху пакетик с комплектующими, в числе которых две планки крепления кулера на материнские платы с разъемом LGA 775, клипса-качель для платформы под процессоры AMD, силиконовые шпильки, винты и термопаста Stars (которая почему-то названа как Generic Thermal Compound):
реклама
Инструкция по установке в комплекте также имеется. На коробке и в инструкции нет ни слова о стране производства системы охлаждения, по штрих-коду также не удалось выяснить, где выпущен кулер. Впрочем, это несущественный пробел.
Также как и у двух предыдущих участников тестирования, у OCZ Gladiator Max радиатор и вентилятор в комплекте поставки являются отдельными компонентами. Радиатор выглядит следующим образом:
Его конструкция принципиально схожа с оной у Xigmatek HDT-S1284, так как в основе кулера четыре медные тепловые трубки диаметром 8 мм, являющиеся частью основания. На трубках нанизаны 42 алюминиевые пластины толщиной около 0.25
0.30 мм с межрёберным расстоянием в 2 мм:
На каждой из алюминиевых пластин есть отштампованный логотип компании OCZ. Тепловые трубки и здесь расставлены со смещением относительно друг друга.
Отличительной особенностью OCZ Gladiator Max является основание кулера, из которого выходят шесть алюминиевых стержней, входящие в четыре нижних ребра:
реклама
Довольно странное решение, так как если они предназначены для дополнительной перекачки тепла от основания к рёбрам, то тогда почему именно алюминий, а не медь? Ну а если вдруг для жесткости конструкции, то кому она в этой зоне нужна-то? Ну да ладно – пусть это останется на совести разработчиков, мы же посмотрим на основание:
Качество обработки поверхности трубок точно такое же, как и у Xigmatek, но вот толщина алюминиевой вставки между трубками чуть больше и составляет 1.5
1.7 мм. В то же время к ровности основания придраться сложно:
OCZ Gladiator Max оборудован 120 х 120 х 25 мм вентилятором с семью лопастями:
Управление скоростью вращения крыльчатки вентилятора осуществляется методом широтно-импульсной модуляции в диапазоне от
1500 об/мин при уровне шума от
26.4 дБА. Судя по спецификациям, вентилятор также основан на подшипнике скольжения с винтовой нарезкой с таким же как и у Xigmatek сроком службы в 40000 часов. Ну и система крепления та же – силиконовые виброгасящие шпильки:
Смотрим на кулер в сборе:
Добавлю здесь, что вес OCZ Gladiator Max составляет 780 грамм.
Система креплений идентична оной у кулеров Xigmatek:
реклама
Благодаря этому факту, на OCZ Gladiator Max замечательно подходит винтовое крепление из комплекта Xigmatek Crossbow:
Ну и напоследок два фото внутри корпуса системного блока:
реклама
И снова при ориентации кулера с технологией прямого контакта вдоль замка центрального процессора (правое фото) эффективность охлаждения повысилась на 2 градуса Цельсия. Расстояние от поверхности материнской платы до нижнего ребра кулера равно 41 мм.
Рекомендованная стоимость OCZ Gladiator Max составляет 45 долларов США.
технические характеристики кулеров и рекомендованная стоимость
Технические характеристики и рекомендованная стоимость только что рассмотренных кулеров представлены вашему вниманию в следующей таблице:
И снова о Heat-pipe Direct Touch: тестируем новые кулеры от компаний Xigmatek и OCZ (страница 2)
Xigmatek HDT-S1284 (CAC-SXHH4-U01) + Crossbow
Кулер Xigmatek HDT-S1284 также является новинкой, несмотря на схожесть названия и конструкции с ранее рассмотренным Xigmatek Achilles S1284. Коробка теперь выполнена в светло-зелёных тонах, хотя её информационное наполнение осталось прежним. Это и ключевые особенности кулера, и полные технические характеристики, и перечень процессорных разъемов, с которыми совместим кулер, и прочая менее полезная информация:
Внутри, также в пенополиуретановом корсете, отдельно зафиксированы кулер и вентилятор, а в верхней части в полиэтиленовом пакетике – аксессуары комплекта поставки:
реклама
В их число включены следующие компоненты:
Выпускается Xigmatek HDT-S1284 на Тайване.
Посмотрим на радиатор:
Внешне он очень напоминает радиатор уже упомянутого мною кулера Xigmatek Achilles S1284, однако есть весьма существенные отличия. В первую очередь я говорю об увеличенном числе алюминиевых пластин радиатора, коих теперь стало не 46, а 54. Так как размеры радиатора остались прежними – 120 x 60 x 159 мм – то для этого пришлось уменьшить толщину пластин с
0.20 мм и сократить с 2 до 1.5 мм межрёберное расстояние. Кроме того, на боковых сторонах радиатора теперь нет загнутых вниз и сомкнутых между собой концов рёбер, которые мы могли наблюдать у Achilles. Таким образом радиатор стал плотнее и насыщеннее, а его площадь, естественно, возросла:
Медные тепловые трубки (теперь без никелировки) диаметром 8 мм всё также расставлены в теле радиатора со смещением, что позволяет более равномерно распределять тепловой поток по рёбрам радиатора.
Произошли изменения и в основании. Теперь расстояние между трубками сокращено до минимума и составляет 1
1.1 мм (у Achilles было 2 мм):
реклама
На мой взгляд, это весьма значимое изменение, так как чем меньше будут зазоры между трубками, тем эффективнее будет осуществляться передача тепла от хитспредера процессора к трубкам. Качество обработки основания (с учётом того, что это HDT) и его ровность не вызывают нареканий. Отпечаток основания на стекле и, что самое важное, теплораспределителе процессора получился практически равномерным:
Как вы видите, полностью контактируют только две центральных тепловых трубки, а две крайних прижимаются к теплораспределителю процессора лишь на половину. Хотя в сравнении с прежним основанием контакт нового Xigmatek HDT-S1284 всё же выглядит получше.
Кулер оснащается вентилятором типоразмера 120 х 120 х 25 мм с семью лопастями:
Скорость вращения крыльчатки вентилятора регулируется автоматически в диапазоне от
1500 об/мин посредством широтно-импульсной модуляции. Максимальный воздушный поток равен 56.3 CFM, а уровень шума не должен превышать 27.2 дБА. Подшипник скольжения с винтовой нарезкой (Rifle Bearing) должен обеспечить беспроблемную работу вентилятора в течение 40000 часов (более 4.5 лет непрерывной работы). Вентилятор закрепляется на радиаторе с помощью всё тех же силиконовых шпилек, вставляемых в пластины радиатора.
Устанавливается кулер точно таким же способом, как и у описанного выше Xigmatek HDT-SD964. Если же какой-то момент окажется непонятен, то всегда поможет инструкция с официального сайта ( формат PDF, 3.92 Мбайт ).
Внутри корпуса системного блока Xigmatek HDT-S1284 выглядит так:
Расстояние от поверхности материнской платы до нижнего ребра кулера достаточное, чтобы последний не мешал чему-либо на материнской плате. Рекомендованная стоимость кулера Xigmatek HDT-S1284 составляет 45 долларов США.
Как вы наверняка помните, кулеры с технологией прямого контакта, помимо зависимости от ориентации на процессоре, имеют один существенный недостаток, а именно – слабый прижим к теплораспределителю процессора. В Xigmatek, по всей видимости, это также знают, поэтому предлагают для своих систем охлаждения альтернативные крепления (правда, пока в виде дополнения к кулерам, а не включения в комплекты поставки). Они называются Crossbow и предлагаются конечному покупателю в виде маленькой пластиковой коробочки, в которую вложена картонная оболочка:
На её развороте можно обнаружить инструкцию по установке кулера с помощью Crossbow-крепления:
реклама
Само же крепление представляет собой две стальные планки с подпружиненными винтами, backplate для LGA 775 или Socket 939/AM2(+), а также ключ и два винта:
Две планки крепления приворачиваются к основанию двумя винтами, вместо направляющих с пластиковыми защёлками:
А затем и сам кулер приворачивается сквозь материнскую плату к backplate:
реклама
Заставьте сайт работать на сенсорных устройствах
Сенсорные экраны на мобильных телефонах, планшетах, ноутбуках и настольных компьютерах открыли веб-разработчикам целый ряд новых взаимодействий. В переведенном руководстве Патрик Локи рассматривает основы работы с сенсорными событиями в JavaScript. Все рассматриваемые далее примеры есть в архиве.
Нужно ли нам беспокоиться о касаниях?
С появлением сенсорных устройств основной вопрос от разработчиков: «Что мне нужно сделать, чтобы убедиться, что сайт или приложение на них работает?» Удивительно, но ответ — ничего. Мобильные браузеры по умолчанию справляются с большинством сайтов, которые не разрабатывались для сенсорных устройств. Приложения не только нормально работают со статичными страницами, но еще и обрабатывают интерактивные сайты с JavaScript, где сценарии связаны с событиями вроде наведения курсора.
Для этого браузеры симулируют или моделируют события мыши на сенсорном экране устройства. Простой тест страницы (example1.html в приложенных файлах) показывает, что даже на сенсорном устройстве нажатие кнопки запускает следующую последовательность событий: mouseover > mousemove > mousedown > mouseup > click.
Эти события вызываются в быстрой последовательности практически без задержки между ними. Обратите внимание на событие mousemove, обеспечивающее хотя бы единоразовое выполнение всех сценариев, запускаемых поведением мыши.
Если ваш сайт реагирует на действия мыши, его функции в большинстве случае будут по-прежнему работать на сенсорных устройствах, не требуя дополнительной модификации.
Проблемы симуляции событий мыши
Задержка кликов
При использовании сенсорных экранов браузеры умышленно задействуют искусственную задержку длительностью около 300 мс между действием касания (например, нажатием на кнопку или ссылку) и фактической активацией клика. Эта задержка позволяет пользователям совершать даблтапы (например, для увеличения и уменьшения изображения) без случайной активации других элементов страницы.
Если вы хотите создать сайт, который реагирует на действия пользователя как нативное приложение, тут могут быть проблемы. Это не то, чего ждут обычные пользователи от большинства интернет-ресурсов.
Отслеживание движения пальцев
Как мы уже заметили, синтетические события, отправляемые браузером, содержат событие mousemove — всегда только одно. Если пользователи слишком много водят пальцем по экрану, синтетические события не будут формироваться вообще — браузер интерпретирует такое движение как жест вроде прокрутки.
Это становится проблемой, если ваш сайт управляется путем движений мыши — например, приложение для рисования.
Давайте создадим простое canvas-приложение (example3.html). Вместо конкретной реализации посмотрим, как сценарий реагирует на движение мыши.
Если тестировать пример с помощью мыши, видно, что позиция указателя непрерывно отслеживается по мере перемещения курсора. На сенсорном устройстве приложение не реагирует на перемещение пальцев, а откликается только на нажатие, которое запускает синтетическое событие движения.
«Смотрите глубже»
Чтобы решить перечисленные проблемы, придется уйти в абстракцию. Сенсорные события появились в Safari для iOS 2.0, и после внедрения почти во всех браузерах были стандартизированы в спецификации W3C Touch Events. Новые события, зафиксированные в стандарте — touchstart, touchmove, touchend и touchcancel. Первые три спецификации эквивалентны стандартным mousedown, mousemove и mouseup.
Touchcancel вызывается, когда сенсорное взаимодействие прерывается — например, если пользователь выводит палец за предел текущего документа. Наблюдая за порядком, в котором вызываются сенсорные и синтетические события для нажатия, получаем (example4.html):
touchstart > [ touchmove ]+ > touchend > mouseover > (a single) mousemove > mousedown > mouseup > click.
Задействуются все сенсорные события: touchstart, одно или больше touchmove (в зависимости от того, как аккуратно пользователь нажимает на кнопку, не перемещая палец по экрану), и touchend. После этого запускаются синтетические события и происходит финальный клик.
Обнаружение сенсорных событий
Чтобы определить, поддерживает ли браузер сенсорные события, используется простой скрипт.
Этот фрагмент отлично работает в современных браузерах. У старых есть причуды и несоответствия, которые можно обнаружить, только если лезть из кожи вон. Если ваше приложение ориентировано на старые браузеры, попробуйте плагин Modernizr и его механизмы тестирования. Они помогут выявить большинство несоответствий.
При определении поддержки сенсорных событий мы должны четко понимать, что тестируем.
Выделенный фрагмент проверяет только способность браузера распознавать касание, но не говорит, что приложение открыто именно на сенсорном экране.
Работа над задержкой клика
Если мы протестируем последовательность событий, передаваемых в браузер на сенсорных устройствах и включающих информацию о синхронизации (example5.html), мы увидим, что задержка в 300 мс появляется после события touchend:
touchstart > [ touchmove ]+ > touchend > [300ms delay] > mouseover > (a single) mousemove > mousedown > mouseup > click.
Итак, если наши скрипты реагируют на клик, от задержки браузера по умолчанию можно избавиться, прописав реакции на touchend или touchstart. Мы делаем это, отвечая на любое из этих событий. Touchstart используется для элементов интерфейса, которые должны запускаться сразу при касании экрана — например, кнопок управления в html-играх.
Опять же, мы не должны делать ложных предположений о поддержке сенсорных событий и том, что приложение открыто именно на сенсорном устройстве. Вот один из распространенных приемов, который часто упоминается в статьях о мобильной оптимизации.
Хотя этот сценарий несет благие намерения, он основан на взаимоисключающем принципе. Реакция либо на клик, либо на касание в зависимости от поддержки браузера вызывает проблемы на гибридных устройствах — они немедленно прервут любое взаимодействие при помощи мыши, трекпада или касания.
Более надежный подход учитывает оба типа событий:
Проблема в том, что функция выполняется дважды: один раз при touchend, второй раз — когда запускаются синтетические события и клик. Обойти это можно, если подавлять стандартную реакцию на события мыши, используя preventDefault(). Мы также можем предотвратить повторение кода, просто заставляя обработчик touchend вызывать нужное click-событие.
С preventDefault() есть проблема — при его использовании в браузере подавляется любое другое поведение по умолчанию. Если мы применим его непосредственно к начальным событиям касания, будет блокирована любая другая активность — прокрутка, долгое движение мыши или масштабирование. Иногда это приходится к месту, но метод стоит использовать с осторожностью.
Приведенный пример кода не оптимизирован. Для надежной реализации проверьте его в FTLabs’s FastClick.
Отслеживание движения с touchmove
Вооружившись знаниями о сенсорных событиях, вернемся к трекинг-примеру (example3.html) и посмотрим, как его можно изменить, чтобы отслеживать движения пальцев на сенсорном экране.
Прежде чем увидеть конкретные изменения в этом скрипте, сначала поймем, как события касания отличаются от событий мыши.
Анатомия сенсорных событий
В соответствии с Document Object Model (DOM) Level 2, функции, которые реагируют на события мыши, получают объект mouseevent в качестве параметра. Этот объект включает свойства — координаты clientX и clientY, которые приведенный скрипт использует для определения текущей позиции мыши.
Например:
Как видим, touchevent содержит три различных тач-листа.
Каждый из этих листов представляет собой матрицу отдельных сенсорных объектов. Здесь мы найдем пары координат по подобию clientX и clientY.
Использование событий касания для отслеживания пальцев
Вернемся к примеру, основанному на canvas. Мы должны изменить функцию так, чтобы она реагировала и на сенсорные события, и на действия мыши. Нужно отследить перемещение единственной точки касания. Просто захватываем координаты clientX и clientY у первого элемента в массиве targetTouches.
При тестировании измененного сценария на сенсорном устройстве (example6.html) вы увидите, что отслеживание одиночного движения пальцем теперь надежно работает.
Если мы хотим расширить пример так, чтобы работал мультитач, придется немного изменить первоначальный подход. Вместо одной пары координат мы будем учитывать целый их ряд, который циклически обрабатывается. Это позволит отслеживать и одиночные клики мыши, и мультитач (example7.html).
Вопросы производительности
Как и события mousemove, во время движения пальцев touchmove может работать с высокой скоростью. Желательно избегать сложного кода — комплексных вычислений или целых событий рисования для каждого перемещения. Это важно для старых и менее производительных сенсорных устройств, чем современные.
В нашем примере мы выполняем абсолютный минимум — хранение последних массивов мыши или координат точек касания. Код приложения независимо выполняется в отдельном цикле с помощью setInterval.
Если количество событий, которое обрабатывается скриптом, слишком высоко, это заслуживает работы специальных решений — например, limit.js.
По умолчанию браузеры на сенсорных устройствах обрабатывают специфические сценарии мыши, но есть ситуации, когда нужно оптимизировать код под сенсорное взаимодействие. В этом уроке мы рассмотрели основы работы с сенсорными событиями в JavaScript. Надеемся, это пригодится.
