Модные «жесты» jQuery

Original author: Anant Garg
  • Translation
Включите распознавание сложных жестов мышью (жесты могут описывать буквы, символы других алфавитов и иные символы, включая Ваши собственные знаки) на Вашем сайте!

Возможности
  1. Можно создавать свои собственные жесты;
  2. Можно иметь множество областей на странице, которые будут способны распознать жесты;
  3. Есть визуальная обратная связь;
  4. Работоспособность во всех основных браузерах.
Благодарности

Этот скрипт инициирован из скрипта распознавания жестов мыши от Didier Brun.

Демонстрация

Запустить демонстрацию распознавания жестов мыши

Скриншот модных жестов jQuery

скриншот

Требования

1. jQuery
2. Библиотека Walter Zorn’s VectorGraphics

Введение

Создайте новый файл html со следующим кодом. Функция возвратит данные, то есть распознанный символ или название:
<div id="sample" style="border:1px solid black;position:relative;height:150px;width:150px;"></div>

<script type="text/javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancygestures.js"></script>

<script>

$(document).ready(function () {
  $('#sample').fancygestures(function (data) {
    alert(data);
  });
});

</script>

* This source code was highlighted with Source Code Highlighter.


Настройка

Пожалуйста, используйте ключ ниже, чтобы генерировать строку чисел для Вашего знака: например. L будет похожа на последовательность из движений 2 и 0. Следующие символы уже отображены в скрипте:
ключ и известные символы

Предположим, что Вы хотите добавить символ «CIRCLE» (круг) с последовательностью движений «432107654»; для этого нужно отредактировать jquery.fancygestures.js, добавив следующее после строки 7:
gestures["CIRCLE"] = "432107654";

* This source code was highlighted with Source Code Highlighter.


Вышеупомянутый код возвратит «CIRCLE» из функции, когда Вы проведете круг. Тем не менее, удостоверьтесь, что у Вас нет подобных наборов движений, так как в этом случае Вы получите непредсказуемые результаты, например, наличие одного и того же жеста для нуля и символа O.

Загрузить

Загрузите Fancy Gestures

Лицензия

Fancy Gestures лицензируются согласно лицензии MIT. Пожалуйста, напишите мне, если Вы нашли интересное применение данному скрипту.

Комментарии/Предложения?

Дайте мне знать о том, как мы можем улучшить этот код или напишите о любых новых возможностях, которые Вы хотели бы добавить в этот скрипт.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 58

    –1
    Спасибо, прикольная штука. Как-нибудь поиграюсь.
      +11
      IMG_6486-xx
        +1
        palm был хорош:)
          0
          Да ладно, он и сейчас хорош. Я имею ввиду те, что до Palm TX и включая. :)
          *повертел в руках живой и работающий Palm TX*
          +1
          да-да, сразу же вспомнилось =)
            0
            Да! До сих пор пользуюсь ТТ2 :)
          +4
          К сожалению, у меня на демонстрационной странице получилось 50% промаха :(
            0
            аналогично
              0
              Похоже, это из-за того, что для букв задается направление рисования. Например, я рисовал букву «M», а получалась «H». Как только стал рисовать в обратном направлении, все стало получаться.
              0
              Пока еще не совсем «модные» :(
              i40.tinypic.com/35b9lr9.png
              i44.tinypic.com/x6ln2w.png
                0
                Просто вы рисовали их не в том направлении. Попробуйте писать А с права не лево, а i снизу вверх
                +3
                скрипт можно исползовать для альтернативы капчи
                а вот вместо пароля не пройдет =\ хотя можно и в это направлении подумать
                  –1
                  я свое имя тут еле написал, а ты про капчу. не только спамботы не пройдут, но и пользователи обломаются=)
                    +1
                    Особенно пользователи с трясущимися руками и просто нетрезвые.
                    Как вариант чтобы с пьяну всякую херню не писать. :-)
                    +1
                    Скрипт нельзя использовать вместо каптчи. Там совсем другие принципы нужны.
                      0
                      Допилить напильником и вполне можно.
                        0
                        Хоть запилитесь, скрипт всегда будет лучше линии рисовать, чем любой человек. Это из серии, когда люди думают, что компьютеру сложнее сложить два числа, чем человеку. Каптча совсем на других принципах должна работать.
                          0
                          Рисовать лучше — проблем нет. Рисовать как человек — уже сложнее.
                            0
                            В общем случае скрипт может рисовать как человек. Для этого элементарно можно использовать случайные искажения.
                      0
                      Это какая капча должна тожга быть, чтобы в ней ченить можно былобы написать
                        0
                        Очень хорошая идея!
                        +4
                        Ох, ЩИ. Я так думаю, это будет новый виток в handheld сайтах (в версиях сайтов для наладонников). Для обычных компов и ноутов это ни более чем модная фенька, а вот для спичечных коробков с сенсорными экранами самое то. Причем не для набора текста, все таки экранная клавиатура быстрее, а для, скажем навигации по сайту. Замутить легенду жестов, и тыщь-влево и вниз, и ты в каталоге; нарисовал квадратик-перешел в корзину; нарисовал треугольничек — перешел еще куда-то; нарисовал икосаэдр — попал в админскую панель.
                          0
                          А как добавлять туда поддержку других языков? Русского, например?
                            0
                            Очень просто. google palm cyrhack :) Кто-то поймет.
                            0
                            попробуйте «V» написать ;)
                              0
                              да, оно ее с «U» путает =)… А в принципе прикольно :) Такой себе аналог виртуальной клавиатуры можно сделать :)
                                0
                                Там нужно начинать «рисование» с того места, где на картинке более жирное место. Так если рисовать «V» слева-направо — получится «U», а если справа — налево, то «V».
                                Так, попробуйте нарисовать «I» сверху вниз — получается почему — то «F»
                                  0
                                  хм, интерестное замечание — работает :)))
                                0
                                интересная штука, но иногда на очень похожие действия получаются несколько разных символов.
                                буква Q далась с 10 попытки :)
                                  –1
                                  Плохо распознает. да и зачем? кому нужен рукописный ввод мышкой на персональном компьютере. На кпк то мало кто пользуется.
                                    +1
                                    Порисовал, поностальгировал по пальму
                                      0
                                      Сырое еще. 50% не того распознает.
                                        +1
                                        Библиотека интересная.
                                        Нашёл баг — попробуйте немного отскроллить страницу по горизонтали, но так, чтобы окошко рисования было большей частью видимо. И попробуйте что-нибудь нарисовать.
                                          +1
                                          В хроме последней версии во время рисования знака выделяет саму область :)
                                            0
                                            Пожалуйста, используйте ключ ниже, чтобы генерировать строку чисел для Вашего знака: например. L будет похожа на последовательность из движений 2 и 0. Следующие символы уже отображены в скрипте:
                                            =================
                                            Чем не кодирование?
                                              0
                                              267012, 4321043210, 46, 46, 432107654 = HELLO
                                              0
                                              интересно кто-нибудь смог написать «V» с первого раза
                                                –1
                                                а ты с другова края начинай ;-)
                                                  0
                                                  Точка на рисунке с буквой говорит о месте начала рисования буквы.
                                                    0
                                                    c 5 попытки)
                                                    и то если рисование начинать с правого верха…
                                                    0
                                                    Рисую L — стабильно выходит С, A — вообще все подряд… и т.п. На опере. В общем — только побаловатся, а так применения большого и не найти.
                                                      0
                                                      Обрати внимание на точку на примерах, с нее нужно начинать рисовать.
                                                      0
                                                      А теперь берем эту штуку, берем dev версию Хрома — и у нас получаются Mouse Gestures :-)
                                                        0
                                                        OMG, пальмовские граффити 10-летней давности объявляют инновацией! Хотя действительно штука незаслуженно забытая — гораздо удобнее экранных клавиатур.
                                                          0
                                                          Набор на экранной клаве гораздо быстрее, чем через граффити.
                                                            0
                                                            да, тема не нова, и в покетах это было востребовано palmz.in/board/index.php?showtopic=26710
                                                            +1
                                                            На мой взгляд не для мышки такое, это больше подходит для планшетных ПК, и других сенсорных устройств
                                                              0
                                                              Класная тема! Я маленький такое на делфи писал: ) Алгоритм кодирования один в один, только в шифровании использовались не номера направлений, а символьные обозначеният типа NW, N, S и т.д. Прога могла обучаться, сестра за вечер ее научила русский сносно разбирать: )
                                                                +2
                                                                А пробел как?
                                                                  +2
                                                                  Непонятно зачем там jQuery? И графическая библиотека — эхо из прошлого.
                                                                    0
                                                                    Левши пишут иначе. Скрипт для правшей:)
                                                                      0
                                                                      Заметил интересный баг на FF 3.0.10 — при отпускании левой клавиши мыши за пределами области гестчи, можно хаотично продолжать рисовать внутри этой области с отжатой кнопкой. Для «ввода» результата потребуется повторный клик. На остальных браузерах не тестил, но эффект забавный, когда в первый раз так делаешь и не знаешь, как ввод осуществить, нервно наворачивая круги .)
                                                                        0
                                                                        Ну так событие отпускания мыши ловит только квадратик, вот и рисует. Добавить на внешний слой обработку события и все.
                                                                        –3
                                                                        Идея распознавания рукописных символов сама по себе не нова. Единственное, что здесь нового — это реализация алгоритма распознавания в виде скрипта. Но — качество хромает и будет хромать по определению.
                                                                        Ибо:
                                                                        1. Во-первых, люди пишут мышью намного корявее чем ручкой, карандашом или на худой конец дигитайзером.
                                                                        2. Во-вторых, лексикон вводимых слов и словосочетаний фактически не ограничен, кроме того, проверку по словарю в виде скрипта реализовать на данный момент не реально.

                                                                        Для справки, наилучшие комерческие результаты распознавания рукописных символов на данный момент держат несколько систем распознавания и автоматической обработки банковских чеков и то, если не вру, вероятность распознавания у них доходит лишь до 98% (и это очень хороший результат!!!!). При этом система нацелена только на распознавание цифр и их словесного написания, т.е. расшифровки суммы — типа " Тысяча пятьсот евро", к примеру.
                                                                        При этом люди чеки заполняют ручками (шариковыми, гелевыми и т.п.), а не мышью.
                                                                        Да, и алгоритмы там используются на порядок сложнее — в виде скрипта не реализуемые в принципе…

                                                                        Так что на данный момент, увы, кроме ликбеза по факту существования разработок в данной сфере, для широкой публики эта разработка другой пользы принести не может…

                                                                          0
                                                                          Вы ничего не поняли. Ну совсем-совсем ничегошеньки :)
                                                                            0
                                                                            Возможно.
                                                                            Какую практическую задачу можно решить с помощью сабжа?
                                                                          0
                                                                          Как не пытался, цифру 6 не смог нарисовать
                                                                            0
                                                                            На Palm наехали из-за этого набора жестов, ждем наезда правообладателя на эти жесты. А вообще, идея интересная. Но далеко не инновационная. Русский прикрутить — дело получаса, потому что на Palm'ах буквы русские рисовались с «крышками».

                                                                            Only users with full accounts can post comments. Log in, please.