1

このプロジェクトでは、LAN 経由でおもちゃの車を制御します。

私のHTMLページには、上、下、左、右、停止の5つの「ボタン」があります。私のコードは次のように機能します: ユーザーが「up」をクリックすると、処理のために値が php ページに送信され、処理された文字列が別の php ページに出力され、arduino が読み取ることができるとします。

車が止まるには、ユーザーは停止をクリックする必要があります。

<html>
<head>
</head>

<form name="motorform" action="motorboardprocess.php" method="post">
<tr><p align='center'><font face="BN machine" size="6" color="royalblue">Motor Shield</font></tr>
<tr>
    <input id="forward" type="image" src="up.png" name="forward">
</tr> 
<tr>
    <input id="left" type="image" src="left.png"  name="left">
    <input id="stop"type="image" src="stop.png"  name="stop">
    <input id="right" type="image" src="right.png" name="right">
</tr>
<tr>      
    <input id="backward" type="image" src="down.png" name="backward">
</tr>   
</form>
</body>
</html>

そして、前述のphp ...

<?php

if (isset($_POST['forward_x'], $_POST['forward_y'])){
    $myFile = "mtboardcom.php";
    $fh = fopen($myFile, 'w') or die("can't open file");    
    $stringData = "<?php\n";
    fwrite($fh, $stringData);
    $stringData = "echo ".'"<forward>"'."\n";
            fwrite($fh, $stringData);
    $stringData = "?>\n";
            fwrite($fh, $stringData);
    fclose($fh);        
}

else if (isset($_POST['left_x'], $_POST['left_y'])){
    $myFile = "mtboardcom.php";
    $fh = fopen($myFile, 'w') or die("can't open file");    
    $stringData = "<?php\n";
    fwrite($fh, $stringData);
    $stringData = "echo ".'"<left>"'."\n";
            fwrite($fh, $stringData);
    $stringData = "?>\n";
            fwrite($fh, $stringData);
    fclose($fh);        
}
//and so on.....

arduinoは次のように読みます：

<?php
    echo "<forward>"
?>

mousedown問題は、jquery のイベントとイベントをどのように利用しmouseupて停止「ボタン」を削除するかです。

または別のシナリオ: ユーザーがボタンを押したままにして車を動かし、ボタンを放して車を止める。

mousedownでは、文字列がarduino'forward'によって読み取られます。

mouseup同じボタンで、文字列'stop'が arduino によって読み取られます。

4

4 に答える 4

1

もちろん、Javascript で 2 つの異なるイベントをサブスクライブできます。イベントにフックするだけです：

var field = document.getElementsById('#idName');

field.onmousedown = function(){

}

field.onmouseup = function(){

}

またはjqueryの場合：

var field = $('#idName');

field.mousedown(function(){

}).mouseup(function(){

});
于 2012-12-29T18:32:59.177 に答える
0

jQueryを使用すると、これは非常に簡単です。

$('#element').mousedown(function (event) {
    // process mouse down
});
$('#element').mouseup(function (event) {
    // process mouse up
});

それらをチェーンすることもできます

$('#element').mousedown(function(event) {
    /* code */
}).mouseup(function (event) {
    /* code */
});

$.ajaxこれらのイベント中に、呼び出しでURLにpingを実行できます。ただし、AJAXは非同期であるため、注意しないと競合状態を確認している可能性があることに注意してください。それらは1つのクライアントからのものであるため、問題はないはずですが、応答時間のわずかな遅延や違いを引き起こす可能性のある他の問題が存在する可能性があります。

于 2012-12-29T18:36:14.827 に答える
0

次のjqueryコードを使用できます。ここにデモを追加しました

    <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div id='btn' style='width:50px;height:30px;background-color:red'>Click</div>
    <div id='log'></div>

<script>
    $("#btn").mouseup(function(){
      $('#log').append('<span style="color:#F00;">Mouse up.</span>');
    }).mousedown(function(){
      $('#log').append('<span style="color:#00F;">Mouse down.</span>');
    });

</script>

</body>
</html>
于 2012-12-29T18:37:09.057 に答える
0

はい、mousedownイベントとmouseupイベントの両方をキャッチできますが、ページをリロードするポストバックを行わないように、AJAX呼び出しを使用して情報をサーバーに送信する必要があります。

また、各mousedownイベントに対応するmouseupイベントを自動的に取得することはありません。ユーザーは、ボタンを離す前にマウスをボタンの外側に移動したり、別のボタンに移動したりする場合があります。どのボタンが押されたかをJavascript変数に保存し、ボタンではなくページ全体のmouseupイベントをキャッチし、最後のクリックがボタンであった場合は停止信号を送信する必要があります。

于 2012-12-29T18:54:31.790 に答える