マルチタッチログインのホームページ

タッチに基づいてホームページを作成したいと思います。たとえば、ユーザーが画像のように5本の指で画面に触れた場合（緑色の円、下記参照）、ユーザーは特定のホームページにリダイレクトされますが、他のパターン（赤い円）でタッチすると「ログインに失敗しました、もう一度やり直してください」という警告が表示されます。正方形の中にいる限り、ユーザーが触れる場所は関係ありません。マルチタッチログインのホームページ

主なアイデアは、ユーザーの指の位置を特定し、彼を別のページにリダイレクトすることです。ログインの考え方は単なる例です。

iOSのホームページにしたいので、HTMLとJavaScriptを使用してこれを行う方法はありますか？

example layout http://s12.postimage.org/ta0molzvx/touch_example.png

出典

2012-05-01 iEmad

平易なHTML + JSは、JSがコンパイルされておらず、誰でもあなたのコードから正しいパスワードを読むことができるので意味がありません。 –

ポイントは、特定のホームページにユーザーをリダイレクトするためのタッチを決定しています...上の画像は使用法の一例に過ぎませんが、とにかく感謝します。 – iEmad

私は知っていますが、このクライアント側.js内のパスワード/タッチ位置をハードコードする必要があります。誰にでも見えます。 –

ユーザーがタッチしたい要素のタッチイベントにバインドする必要があります。これらのイベントは、タッチスタート、タッチ移動、touchend（wellとtouchcancel）です。イベントでは、指の位置の座標が配列で与えられます（実際には3つのイベント/シナリオでアクセスする配列または配列の最下部のリンクを参照）。これらの座標を使用して形状を計算することができます。

ここでは、jquery（必須ではない）を使用した2本の指の例を示します。

#JQuery 
$('#myID').bind("touchstart", function(event) { 
    var finger1PosX = event.originalEvent.targetTouches[0].pageX; 
    var finger2PosX = event.originalEvent.targetTouches[1].pageX; 
});

これは少なくとも2本の指が押されたことを前提としていますが、これは誤った仮定です。 http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/

ます。また、これはevent.preventDefaultを使用してDIVでスクロールや他のジェスチャを防ぐために必要になることがあります。

はここで良いのチュートリアル/議論です。

アンドロイドのマルチタッチイベントのサポートは、バージョンによって異なります（iOSについて質問していたことがわかります）。

出典

2012-05-02 15:30:18

ありがとう！このチュートリアルはまさに私が探していたものです。 – iEmad

あなたはそれでそれらの各座標ですタッチ（あなたの場合は5）の配列を取得することができます。そこから、あなたが望むものを判断するのは「簡単」でなければなりません。座標をループ内のボックスの座標と比較するだけです。こちらのチュートリアルのhttp://seb.ly/2011/04/multi-touch-game-controller-in-javascripthtml5-for-ipad/をご覧になるか、または012個の他のGoogle検索エンジンを見つけて

出典

2012-05-01 11:06:28 Gavriel

アイデアをお寄せいただきありがとうございます。私には分かりませんが、ユーザーはタッチして、5本の指で画面に触れたかどうかを確認しました。私はあなたのアイデアを使い始めることができます。 – iEmad

jGesturesの順に右クリックしてください。

出典

2012-05-01 11:07:08 ilanco

これは本当に便利なプラグインです。少しカスタマイズする必要があります。あなたの助けをありがとう – iEmad

私は隠しテーブルを作成することをお勧めします。 Torranceのエラーに対処する方法も提供します。あなたはhttp://www.html5rocks.com/en/mobile/touch/を見て、タッチ対応アプリのセクションでは、これは、マルチタッチイベント

私はセルの数を持つことになり、グリッドになるだろうの監視に役立つかもしれ

場合。（より多くの細胞数はパスワードを解読するのが難しくなりますが、ユーザーがログインするのを困難にする傾向があります）

グリッドが10x10の場合（例：1 = users touch）

あなたはそれがありません、パスワードで保護されたページのためにあなたはまた、サーバーサイド処理が必要になります

出典

2012-05-01 11:09:12 Steve

しかし、ユーザーがテーブルを見ることができないとき、彼は国境に/近くで触れる可能性があります - どのようにそれが処理されるのですか？ – Bergi

私はBergiに同意します。サイトに感謝します。私は役に立つと思うし、いくつかのコードを借りることができます。 – iEmad

と一致するかどうかを確認するために1秒の間の関係をうまくできました。

HTMLページには、（非表示の）フォームが含まれ、タッチイベントハンドラの座標が更新されます。その後、所定の時間が経過した後、または条件（例えば、5つのコーディネイトが登録されている）が満たされたら、フォームを提出します。後でこれをAJAXサービスに変換することもできますが、違いはありません。

サーバーアプリケーションは、タッチパターンを分析し、ログインCookieで失敗メッセージまたは成功通知を送信する必要があります。

出典

2012-05-01 11:09:27 Bergi

実際にログインしようとするとあなたのアイデアは良いです。今後の使用のために心に留めておきます。ありがとう – iEmad

あなたは何を探していますか？ 5つのコードを取得する方法は？または、1つまたは複数のパターンに対して1組のコードをチェックする（javascript）アルゴリズムですか？ – Bergi

私は5つの指が画面に触れているかどうかを確認する方法を探しています。（1番目がTRUEの場合）2番目の指の指をチェックしてください。その後、指を比較してパターンを確認してから何らかの処置をします。 – iEmad

マルチタッチログインのホームページ

答えて

関連する問題