2

我的 HTML 文档中有一个脚本,它检测何时检测到箭头键之一,然后它会更改 iframe 的 URL。释放键时,iframe 将再次更改。

这有效,除非在按住键期间它会不断重复操作以设置 iframe 的 url。

有没有办法,当它被按住时,它只会改变 iframe url 一次?然后当它发布时它会改变网址?

额外: 我创建了一个页面来通过网络控制遥控车。除了这个问题,它工作得很好。基本上,它将 iframe url 更改为 PHP 页面,每个箭头键都有一个不同的 get 变量。然后 PHP 页面使用 PHP Serial 根据从 iframe 发送的变量(使用 GET)将数据发送到串行端口。

谢谢你的帮助!!!

编辑:这是汽车的照片。http://oi41.tinypic.com/21cimms.jpg

编辑 2

继承人 index.html

<!doctype html>
<html lang="en">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
        function pause(ms) {
           ms += new Date().getTime();
           while (new Date() < ms){}
          } 
            var keyBeingHeld = new Array();
            keyBeingHeld[0] = false;//left
            keyBeingHeld[1] = false;//right
            keyBeingHeld[2] = false;//up
            keyBeingHeld[3] = false;//down

            function setControllerState(action){
                leftPressState="up";
                rightPressState="up";
                upPressState="up";
                downPressState="up";
                if (keyBeingHeld[0]){
                    leftPressState="down";

                }
                if (keyBeingHeld[1]){
                    rightPressState="down";
                }
                if (keyBeingHeld[2]){
                    upPressState="down";
                }
                if (keyBeingHeld[3]){
                    downPressState="down";
                }
                var stateStr = "?upPressState="+upPressState+"&downPressState="+downPressState+"&leftPressState="+leftPressState+"&rightPressState="+rightPressState;
                iframe = document.getElementById('stateFrame');
                iframe.src = "BackEnd.php"+stateStr+"&action="+action;

            }

            $(document).keydown(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (!keyBeingHeld[0]){
                            keyBeingHeld[0] = true;
                            setControllerState ("leftArrowPress");
                        } 
                        break;
                    case 38: 
                        if (!keyBeingHeld[2]){
                            keyBeingHeld[2] = true;
                            setControllerState ("upArrowPress");
                        } 
                        break;
                    case 39: 
                        if (!keyBeingHeld[1]){
                            keyBeingHeld[1] = true;
                            setControllerState ("rightArrowPress");
                        } 
                        break;
                    case 40: 
                        if (!keyBeingHeld[3]){
                            keyBeingHeld[3] = true;
                            setControllerState ("downArrowPress");

                        } 
                        break;
                }
            });

            $(document).keyup(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (keyBeingHeld[0]){
                            keyBeingHeld[0] = false;
                            setControllerState ("leftArrowRelease");    
                        } 
                        break;
                    case 38: 
                        if (keyBeingHeld[2]){
                            keyBeingHeld[2] = false;
                            setControllerState ("upArrowRelease");

                        } 
                        break;
                    case 39: 
                        if (keyBeingHeld[1]){
                            keyBeingHeld[1] = false;
                            setControllerState ("rightArrowRelease");

                        } 
                        break;
                    case 40: 
                        if (keyBeingHeld[3]){
                            keyBeingHeld[3] = false;
                            setControllerState ("downArrowRelease");
                        } 
                        break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p>
       <iframe id="stateFrame" name="stateFrame" style="width:160px;height:180px;" src="BackEnd.php?upPressState=up&downPressState=up&leftPressState=up&downPressState=up&action=none"></iframe>
       <p>Thanks vdbuilder!</p>
    </body>
</html>

这是后端.php

<?php
    $opened = false;

    $upPressState = cleanupSpecialChars($_GET['upPressState']) or $upPressState = 'up';   
    $downPressState = cleanupSpecialChars($_GET['downPressState']) or $downPressState = 'up';
    $leftPressState = cleanupSpecialChars($_GET['leftPressState']) or $leftPressState = 'up';   
    $rightPressState = cleanupSpecialChars($_GET['rightPressState']) or $rightPressState = 'up';
    $action = cleanupSpecialChars($_GET['action']) or $action = 'none';

    // build your message from states and action, and send to serial port here 

    //the rest is to display the state
    $pressedColor = "bbffbb";
    $releasedColor = "bbbbbb";

    $upArrowColor = $releasedColor;
    $downArrowColor = $releasedColor;
    $leftArrowColor = $releasedColor;
    $rightArrowColor = $releasedColor;





    if($upPressState == "down"){ 
        sendCMD(25);
        $upArrowColor = $pressedColor;
    }
    if($downPressState == "down"){
        sendCMD(24);
        $downArrowColor = $pressedColor;
    }
    if($leftPressState == "down"){
        sendCMD(28);
        $leftArrowColor = $pressedColor;
    }
    if($rightPressState == "down"){
        sendCMD(29);
        $rightArrowColor = $pressedColor;
    }
    //--- Up
     if($upPressState == "up"){ 
        sendCMD(15);
        $upArrowColor = $releasedColor; 
    }
         if($downPressState == "up"){ 
        sendCMD(14);
        $downArrowColor = $releasedColor;   
    }
         if($leftPressState == "up"){ 
         sendCMD(18);
        $leftArrowColor = $releasedColor;   
    }
         if($rightPressState == "up"){ 
         sendCMD(19);
        $rightArrowColor = $releasedColor;  
    }

    echo("<html><head><style>");
    echo("body{background-color:#000000;}
          div#container{position:absolute;left:10px;top:10px;background-color:#eeeeee;
              font-size:20px;padding:20px;width:100px;height:92px;text-align:center;}
          div.arrow{position:absolute;width:30px;padding-top:2px;padding-bottom:2px;}
          div#upArrow{left:55px;top:20px;background-color:#".$upArrowColor.";}
          div#downArrow{left:55px;top:82px;background-color:#".$downArrowColor.";}
          div#leftArrow{left:20px;top:50px;background-color:#".$leftArrowColor.";}
          div#rightArrow{left:90px;top:50px;background-color:#".$rightArrowColor.";}
          div#lastAction{position:absolute;left:0px;bottom:2px;font-size:14px;color:#ffffee;}");
    echo("</style></head><body>");
    echo("<div id='container'>
          <div class='arrow' id='upArrow'>&uarr;</div><div class='arrow' id='downArrow'>&darr;</div>
          <div class='arrow' id='leftArrow'>&larr;</div><div class='arrow' id='rightArrow'>&rarr;</div>
          </div><div id='lastAction'>Last Action:<br />".$action."</div>");
    echo("</body></html>");

//cleanup input
    function cleanupSpecialChars($inStr){
        $tempStr = htmlentities(stripslashes($inStr));
        $retStr = str_replace(array('\\','/'), '', $tempStr);
        return $retStr;
    }
    function sendCMD($cmd){
        if($opened == false){
        $fp =fopen("com4", "wb");
         } 
        fwrite($fp,$cmd);
        fclose($fp);
        }


?>
4

2 回答 2

2

在 keydown 上设置一个标志,在 keyup 上清除它。仅在未设置标志时触发操作。

于 2012-01-05T02:22:25.737 回答
1

简短的回答:

在发送请求之前设置一个标志并测试它是否已设置。

长答案:

需要两个文件。
以下两个文件的工作方式如下:

您导航到 FrontEnd.html。它维护状态并包含一个 iframe。iframe 使用 BackEnd.php 加载(其状态变量设置为默认值并通过 get 方法传递)。当按下或释放一个键时,FrontEnd.html 使用 BackEnd.php 重新加载 iframe(通过 get 方法传递状态)。

BackEnd.php 根据从 FrontEnd.html 传递给它的变量将消息发送到串行端口并显示箭头键的状态。

<!doctype html>
<html lang="en">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            var controllerIsReady = false;
            var keyEventBuffer = new Array();
            var keyBeingHeld = new Array();
            keyBeingHeld[0] = false;//left
            keyBeingHeld[1] = false;//right
            keyBeingHeld[2] = false;//up
            keyBeingHeld[3] = false;//down

            function controllerReady(){
                controllerIsReady = false;
                if(keyEventBuffer.length > 0){
                    bufferDiv = document.getElementById('eventBuffer');
                    buffHtmlStr = " ";
                    for (i=0;i<keyEventBuffer.length;i++){
                        tempStr = keyEventBuffer[i];
                        index = tempStr.indexOf("action", 0)+7;
                        keyEventStr = tempStr.substr(index,(tempStr.length-index));
                        buffHtmlStr = buffHtmlStr + "<br />" + keyEventStr;
                    }
                    bufferDiv.innerHTML = buffHtmlStr;
                    //shift event off and make request
                    stateStr = keyEventBuffer.shift(); 
                    iframe = document.getElementById('stateFrame');
                    iframe.src = "http://www.vdstudios.net/robotics/BackEnd.php"+stateStr; 
                }
                else{
                    controllerIsReady = true;//alert("ready");
                    bufferDiv = document.getElementById('eventBuffer');
                    bufferDiv.innerHTML = "empty";
                }

            }

            function setControllerState(action){
                leftPressState="up";
                rightPressState="up";
                upPressState="up";
                downPressState="up";
                if (keyBeingHeld[0]){
                    leftPressState="down";
                }
                if (keyBeingHeld[1]){
                    rightPressState="down";
                }
                if (keyBeingHeld[2]){
                    upPressState="down";
                }
                if (keyBeingHeld[3]){
                    downPressState="down";
                }
                var stateStr = "?upPressState="+upPressState+"&downPressState="+downPressState+"&leftPressState="+leftPressState+"&rightPressState="+rightPressState+"&action="+action;

                //add stateStr to fifo and if controllerIsReady call controllerReady
                keyEventBuffer.push(stateStr);
                if(controllerIsReady){
                    controllerReady();
                }
            }

            $(document).keydown(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (!keyBeingHeld[0]){
                            keyBeingHeld[0] = true;
                            setControllerState ("leftArrowPress");
                        } 
                        break;
                    case 38: 
                        if (!keyBeingHeld[2]){
                            keyBeingHeld[2] = true;
                            setControllerState ("upArrowPress");
                        } 
                        break;
                    case 39: 
                        if (!keyBeingHeld[1]){
                            keyBeingHeld[1] = true;
                            setControllerState ("rightArrowPress");
                        } 
                        break;
                    case 40: 
                        if (!keyBeingHeld[3]){
                            keyBeingHeld[3] = true;
                            setControllerState ("downArrowPress");
                        } 
                        break;
                }
            });

            $(document).keyup(function(event) {
                if (!event) var event = window.event;
                switch (event.keyCode) {
                    case 37: 
                        if (keyBeingHeld[0]){
                            keyBeingHeld[0] = false;
                            setControllerState ("leftArrowRelease");
                        } 
                        break;
                    case 38: 
                        if (keyBeingHeld[2]){
                            keyBeingHeld[2] = false;
                            setControllerState ("upArrowRelease");
                        } 
                        break;
                    case 39: 
                        if (keyBeingHeld[1]){
                            keyBeingHeld[1] = false;
                            setControllerState ("rightArrowRelease");
                        } 
                        break;
                    case 40: 
                        if (keyBeingHeld[3]){
                            keyBeingHeld[3] = false;
                            setControllerState ("downArrowRelease");
                        } 
                        break;
                }
            });
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p>
       <iframe id="stateFrame" name="stateFrame" style="width:160px;height:180px;" src="http://www.vdstudios.net/robotics/BackEnd.php?upPressState=up&downPressState=up&leftPressState=up&rightPressState=up&action=none"></iframe>
       <div style="width:160px;padding:2px;padding-top:5px;background-color:#cccccc;text-align:center;">Event buffer<hr /><div id="eventBuffer" style="width:100%;">text</div></div> 
    </body>
</html>

后端.php

<?php
    header("Cache-Control: no-store, no-cache, must-revalidate"); 
    header("Cache-Control: post-check=0, pre-check=0", false); 
    // HTTP/1.0 
    header("Pragma: no-cache");

    $upPressState = cleanupSpecialChars($_GET['upPressState']) or $upPressState = 'up';   
    $downPressState = cleanupSpecialChars($_GET['downPressState']) or $downPressState = 'up';
    $leftPressState = cleanupSpecialChars($_GET['leftPressState']) or $leftPressState = 'up';   
    $rightPressState = cleanupSpecialChars($_GET['rightPressState']) or $rightPressState = 'up';
    $action = cleanupSpecialChars($_GET['action']) or $action = 'none';

    //send message to serial port 
    if($action == "upArrowPress"){
        sendCMD(25);
    }
    else if($action == "downArrowPress"){
        sendCMD(24);
    }
    else if($action == "leftArrowPress"){
        sendCMD(28);
    }
    else if($action == "rightArrowPress"){
        sendCMD(29);
    }
    else if($action == "upArrowRelease"){
        sendCMD(15);
    }
    else if($action == "downArrowRelease"){
        sendCMD(14);
    }
    else if($action == "leftArrowRelease"){
        sendCMD(18);
    }
    else if($action == "rightArrowRelease"){
        sendCMD(19);
    }

    //the rest is to display the state
    $pressedColor = "bbffbb";
    $releasedColor = "bbbbbb";

    $upArrowColor = $releasedColor;
    $downArrowColor = $releasedColor;
    $leftArrowColor = $releasedColor;
    $rightArrowColor = $releasedColor;

    if($upPressState == "down"){
        $upArrowColor = $pressedColor;
    }
    if($downPressState == "down"){
        $downArrowColor = $pressedColor;
    }
    if($leftPressState == "down"){
        $leftArrowColor = $pressedColor;
    }
    if($rightPressState == "down"){
        $rightArrowColor = $pressedColor;
    }

    echo("<html><head><style>");
    echo("body{background-color:#000000;}
          div#container{position:absolute;left:10px;top:10px;background-color:#eeeeee;
              font-size:20px;padding:20px;width:100px;height:92px;text-align:center;}
          div.arrow{position:absolute;width:30px;padding-top:2px;padding-bottom:2px;}
          div#upArrow{left:55px;top:20px;background-color:#".$upArrowColor.";}
          div#downArrow{left:55px;top:82px;background-color:#".$downArrowColor.";}
          div#leftArrow{left:20px;top:50px;background-color:#".$leftArrowColor.";}
          div#rightArrow{left:90px;top:50px;background-color:#".$rightArrowColor.";}
          div#lastAction{position:absolute;left:0px;bottom:2px;font-size:14px;color:#ffffee;}");
    echo("</style></head><body onload='parent.controllerReady();'>");
    echo("<div id='container'>
          <div class='arrow' id='upArrow'>&uarr;</div><div class='arrow' id='downArrow'>&darr;</div>
          <div class='arrow' id='leftArrow'>&larr;</div><div class='arrow' id='rightArrow'>&rarr;</div>
          </div><div id='lastAction'>Last Action:<br />".$action."</div>");
    echo("</body></html>");

//cleanup input
    function cleanupSpecialChars($inStr){
        $tempStr = htmlentities(stripslashes($inStr));
        $retStr = str_replace(array('\\','/'), '', $tempStr);
        return $retStr;
    }
    function sendCMD($cmd){
        if($fp =fopen("com4", "wb")){//windows server
            fwrite($fp,$cmd);
            usleep(15000);
            fclose($fp);
        }
        else if($fp =fopen("/dev/ttyS3", "wb")){//linux server
            fwrite($fp,$cmd);
            usleep(15000);
            fclose($fp);
        }
    }
?>

你可以在这里看到它们在我的服务器上运行: http ://www.vdstudios.net/robotics/FrontEnd.html

如果您向我提供有关设备期望的详细信息,我可以帮助您构建串行端口的消息。

编辑:

添加了构建/发送消息到串行端口的代码。还用相同的方式更新了运行示例。您可以在上面的链接中看到它。

编辑2:

添加了用于缓冲​​ keyEvents 的代码。
添加了用于同步后端和前端状态的代码。

于 2012-01-05T09:56:29.080 回答