Help - Search - Members - Calendar
Full Version: How to run .py in html
HTMLHelp Forums > Programming > Server-side Scripting
Kristijan1392
I want to control dc motor with raspberry,keys up(W) and down(S),this is code i am using but it doesn't run my python script when i press the key W on keyboard,it works when i use buttons on click to run the scripts,i don't know how to execute it via key press(keyboard)
CODE
<!DOCTYPE html>
<script>
document.onkeydown = function(event) {
   var key_press = String.fromCharCode(event.keyCode);
   var key_code = event.keyCode;
   document.getElementById('kp').innerHTML = key_press;
    document.getElementById('kc').innerHTML = key_code;
   var status = document.getElementById('status');
   status.innerHTML = "DOWN Event Fired For : "+key_press;
   <?php
      if(key_press == "W"){                                                    //this two lines are
      exec("sudo python /home/pi/forward.py");                      //not working
   } else if (isset($_POST['forward'])){
                exec("sudo python /home/pi/forward.py");
   } else if(key_press == "A") {
      alert("Put script to run specific for 'A' key here");
   }
?>
}
document.onkeyup = function(event){
    var key_press = String.fromCharCode(event.keyCode);
   var status = document.getElementById('status');
   status.innerHTML = "UP Event Fired For : "+key_press;
}
</script>
<h2>Javascript Capture Keyboard Input Example</h2>
<h3>onkeydown - onkeyup</h3>
Key Pressed : <span id="kp"></span>
<br />
Key Code : <span id="kc"></span>
<p id="status">Keyboard Event Status</p>

<form method="post">
<button name="forward" class="btn">forward</button> 
</form>
</body></html>
pandy
You can't use PHP inside JavaScript. For one thing, the PHP will be parsed before the page is sent to the browser which is where JS runs. PHP simply isn't aware of what happens after the page has loaded, pressed keys or whatnot. If I understand your script right you take it even one step furher and use JavaSript in the PHP that's already inside JavaScript...

I'm not sure how to do it, jQuery maybe, but I'm sure this is not the way.
pandy
I move this to the server side scipting forum. You have a better chance to get an answer there. smile.gif
Christian J
QUOTE(pandy @ Mar 7 2016, 12:25 PM) *

If I understand your script right you take it even one step furher and use JavaSript in the PHP that's already inside JavaScript...

No, it seems the PHP script executes an external Python script:

CODE
if (isset($_POST['forward'])){
                exec("sudo python /home/pi/forward.py");
   }

I suppose that could work. unsure.gif

QUOTE
I'm not sure how to do it, jQuery maybe, but I'm sure this is not the way.

Ajax lets (client side) javascript communicate with (server side) PHP, but it seems unnecessarily complicated. Why not use form buttons (like the Forward button) for Up and Down too, instead of javascript?
pandy
QUOTE(Christian J @ Mar 7 2016, 01:37 PM) *

QUOTE(pandy @ Mar 7 2016, 12:25 PM) *

If I understand your script right you take it even one step furher and use JavaSript in the PHP that's already inside JavaScript...

No, it seems the PHP script executes an external Python script:


Yes, I can see that. This is what I referred to.

CODE
<?php
      if(key_press == "W"){
      ^^^^^^^^^^^^^^^^^^^^^^

      exec("sudo python /home/pi/forward.py");
...


That's a JS conditional in the PHP snip that's in the JS. glare.gif
Christian J
QUOTE(pandy @ Mar 7 2016, 04:05 PM) *

That's a JS conditional in the PHP snip that's in the JS. glare.gif

You're right, sorry. blush.gif

Only way to make JS (indirectly) run PHP is with Ajax (or perhaps by loading an iframe that in turn runs a PHP script).
Kristijan1392
Thank you very much for your effort and time,could you please explain me how to do this by loading an iframe
Christian J
Let the javascript change the framed page's URL querystring, then let a PHP script in the framed page make different Python script calls depending on the querystring. Here's a simplified example.

Parent page with javascript and iframe:

CODE
<iframe src="iframe.php" id="iframe"></iframe>

<script>
var iframe=document.getElementById('iframe');

/* code to get key presses goes somewhere here... */

if(key_press == "W")
{
    iframe.src='iframe.php?w';
}

else if(key_press == "A")
{
    iframe.src='iframe.php?a';
}
</script>


Framed page (iframe.php):

CODE
<?php
if(isset($_GET['w']))
{
    exec("sudo python /home/pi/w.py");
}

else if(isset($_GET['a']))
{
    exec("sudo python /home/pi/a.py");
}
?>

Note that you use $_GET and not $_POST when reading querystrings.

Also note that I know nothing about Python, maybe there are better ways than calling separate scripts like "w.py" or "a.py"? unsure.gif

CharlesEF
This is how I would approach this. This code should work on most modern browsers, execpt IE which requires IE10 or up. This approach uses ajax and I used buttons instead of keys but you should get the idea.

control.html
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
function control(action)
{
var formData = new FormData();
formData.append("moveit", action);
var xhr = new XMLHttpRequest();
xhr.open("POST", "controlit.php", true);
xhr.onload = function()
{
  if(xhr.readyState == 4 && xhr.status == 200)
  {
   alert(xhr.responseText);
  }
}
xhr.send(formData);
}
</script>
</head>
<body>
<input type="button" name="up" title="Click to move up." value="Up" onclick="control(this.value);">
<input type="button" name="down" title="Click to move down." value="Down" onclick="control(this.value);">
<input type="button" name="left" title="Click to move left." value="Left" onclick="control(this.value);">
<input type="button" name="right" title="Click to move right." value="Right" onclick="control(this.value);">
</body>
</html>

This php file must be in the same directory as the HTML. If you move it then you must change the path in the javascript. You need to change the 4 echo commands with the actual code to run the python code.

controlit.php
CODE
<?php
if(isset($_POST["moveit"]))
{
switch($_POST["moveit"])
{
  case 'Up':
   echo('Up');
   break;
  case 'Down':
   echo('Down');
   break;
  case 'Left':
   echo('Left');
   break;
  case 'Right':
   echo('Right');
   break;
}
}
?>
Kristijan1392
QUOTE(Christian J @ Mar 7 2016, 08:12 PM) *

Let the javascript change the framed page's URL querystring, then let a PHP script in the framed page make different Python script calls depending on the querystring. Here's a simplified example.

Parent page with javascript and iframe:

CODE
<iframe src="iframe.php" id="iframe"></iframe>

<script>
var iframe=document.getElementById('iframe');

/* code to get key presses goes somewhere here... */

if(key_press == "W")
{
    iframe.src='iframe.php?w';
}

else if(key_press == "A")
{
    iframe.src='iframe.php?a';
}
</script>


Framed page (iframe.php):

CODE
<?php
if(isset($_GET['w']))
{
    exec("sudo python /home/pi/w.py");
}

else if(isset($_GET['a']))
{
    exec("sudo python /home/pi/a.py");
}
?>

Note that you use $_GET and not $_POST when reading querystrings.

Also note that I know nothing about Python, maybe there are better ways than calling separate scripts like "w.py" or "a.py"? unsure.gif


Still doesn't work :/ this is what i have now:
test.php
CODE
<html>
<iframe src="iframe.php" id="iframe"></iframe>

<script>
var iframe=document.getElementById('iframe');
document.onkeydown = function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    var key_code = event.keyCode;
    document.getElementById('kp').innerHTML = key_press;
    document.getElementById('kc').innerHTML = key_code;
    var status = document.getElementById('status');
    status.innerHTML = "DOWN Event Fired For : "+key_press;
}
document.onkeyup = function(event){
    var key_press = String.fromCharCode(event.keyCode);
    var status = document.getElementById('status');
    status.innerHTML = "UP Event Fired For : "+key_press;
}
if(key_press == "W")
{
    iframe.src='iframe.php?rikverc';
}

else if(key_press == "A")
{
    iframe.src='iframe.php?stop';
}
</script>
<h2>Javascript Capture Keyboard Input Example</h2>
<h3>onkeydown - onkeyup</h3>
Key Pressed : <span id="kp"></span>
<br />
Key Code : <span id="kc"></span>
<p id="status">Keyboard Event Status</p>
</html>


iframe.php:
CODE
<?php
if(isset($_GET['W']))
{
    exec("sudo python /home/pi/rikverc.py");
}

else if(isset($_GET['A']))
{
    exec("sudo python /home/pi/stop.py");
}
?>
Kristijan1392
QUOTE
This php file must be in the same directory as the HTML.
this means that i need to have left.py,right.py.... in same directory as html?
QUOTE
You need to change the 4 echo commands with the actual code to run the python code.

In the start i had working button script,but i didn't know witch command to use to replace echo sad.gif
CharlesEF
QUOTE(Kristijan1392 @ Mar 7 2016, 01:52 PM) *

QUOTE
This php file must be in the same directory as the HTML.
this means that i need to have left.py,right.py.... in same directory as html?
QUOTE
You need to change the 4 echo commands with the actual code to run the python code.

In the start i had working button script,but i didn't know witch command to use to replace echo sad.gif

It doesn't matter where your .py file are. As long as your exec() command contains the correct path.

One correction: control.html needs to be changed to control.php and it needs to be run from a web server. Then when you click on a button you will see an alert telling you which button was clicked. In your final code you most likely don't need the alert at all so it can be removed.
CharlesEF
Here is what I think should be your final code. Be sure to change the commands in the controlit.php page to match your needed commands.

control.php
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
function controlit(action)
{
var formData = new FormData();
formData.append("moveit", action);
var xhr = new XMLHttpRequest();
xhr.open("POST", "controlit.php", true);
xhr.send(formData);
}
</script>
</head>
<body>
<input type="button" name="up" title="Click to move up." value="Up" onclick="controlit(this.value);">
<input type="button" name="down" title="Click to move down." value="Down" onclick="controlit(this.value);">
<input type="button" name="left" title="Click to move left." value="Left" onclick="controlit(this.value);">
<input type="button" name="right" title="Click to move right." value="Right" onclick="controlit(this.value);">
</body>
</html>

controlit.php
CODE
<?php
if(isset($_POST['moveit']))
{
switch($_POST['moveit'])
{
  case 'Up':
   exec("sudo python /home/pi/up.py");
   break;
  case 'Down':
   exec("sudo python /home/pi/down.py");
   break;
  case 'Left':
   exec("sudo python /home/pi/left.py");
   break;
  case 'Right':
   exec("sudo python /home/pi/right.py");
   break;
}
}
?>
Christian J
QUOTE(Kristijan1392 @ Mar 7 2016, 08:46 PM) *

CODE
if(key_press == "W")
{
    iframe.src='iframe.php?rikverc';
}

else if(key_press == "A")
{
    iframe.src='iframe.php?stop';
}


iframe.php:
[code]<?php
if(isset($_GET['W']))
{
    exec("sudo python /home/pi/rikverc.py");
}

else if(isset($_GET['A']))
{
    exec("sudo python /home/pi/stop.py");
}
?>


The $_GET must match the URL's querystring. For example, if the URL is "iframe.php?stop", then you need to use $_GET['stop'] in the PHP script.
Kristijan1392

QUOTE
The $_GET must match the URL's querystring. For example, if the URL is "iframe.php?stop", then you need to use $_GET['stop'] in the PHP script.

I did that but it still wont work,when i execute .py scripts via ssh sudo python it works :/
Kristijan1392
CharlesEF thank you it works biggrin.gif but still not what i wanted,i want it to read my keyboard input and depending on it to execute .py
Thank you a lot anyway you are the best!! smile.gif
Christian J
QUOTE(Kristijan1392 @ Mar 7 2016, 10:11 PM) *

QUOTE
The $_GET must match the URL's querystring. For example, if the URL is "iframe.php?stop", then you need to use $_GET['stop'] in the PHP script.

I did that but it still wont work,when i execute .py scripts via ssh sudo python it works :/

The key_press variable is only defined inside the two functions, so you must put the iframe.src part inside one of the functions as well:

CODE
var iframe=document.getElementById('iframe');
document.onkeydown = function(event) {
    var key_press = String.fromCharCode(event.keyCode);
    var key_code = event.keyCode;
    document.getElementById('kp').innerHTML = key_press;
    document.getElementById('kc').innerHTML = key_code;
    var status = document.getElementById('status');
    status.innerHTML = "DOWN Event Fired For : "+key_press;

    if(key_press == "W")
    {
        iframe.src='iframe.php?rikverc';
    }

    else if(key_press == "A")
    {
        iframe.src='iframe.php?stop';
    }
}
document.onkeyup = function(event){
    var key_press = String.fromCharCode(event.keyCode);
    var status = document.getElementById('status');
    status.innerHTML = "UP Event Fired For : "+key_press;
}


CharlesEF
Well, that can be done also. In fact you can have both methods working like this:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
document.onkeydown = function(event)
{
var key = String.fromCharCode(event.keyCode);
switch(key)
{
  case 'U':
   controlit('Up');
   break;
  case 'D':
   controlit('Down');
   break;
  case 'L':
   controlit('Left');
   break;
  case 'R':
   controlit('Right');
   break;
}
}

function controlit(action)
{
var formData = new FormData();
formData.append("moveit", action);
var xhr = new XMLHttpRequest();
xhr.open("POST", "controlit.php", true);
xhr.send(formData);
}
</script>
</head>
<body>
<input type="button" name="up" title="Click to move up." value="Up" onclick="controlit(this.value);">
<input type="button" name="down" title="Click to move down." value="Down" onclick="controlit(this.value);">
<input type="button" name="left" title="Click to move left." value="Left" onclick="controlit(this.value);">
<input type="button" name="right" title="Click to move right." value="Right" onclick="controlit(this.value);">
</body>
</html>
In this code only the U, D, L and R keys are allowed.
CharlesEF
Something was bugging me about 'event.keyCode' and I finally remembered what is was. IE before version 9 only supported 'event.keyCode' but it only returned upper case letters. Since my code will work in most modern browsers except IE, which requires IE10 and up. I thought I would change the code to work with both upper and lower case letters, which uses 'event.which'. I also changed the event from onkeydown to onkeypress. This version works with both upper and lower case letters:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
document.onkeypress = function(event)
{
var key = String.fromCharCode(event.which);
switch(key)
{
  case 'u':
  case 'U':
   controlit('Up');
   break;
  case 'd':
  case 'D':
   controlit('Down');
   break;
  case 'l':
  case 'L':
   controlit('Left');
   break;
  case 'r':
  case 'R':
   controlit('Right');
   break;
}
}

function controlit(action)
{
var formData = new FormData();
formData.append("moveit", action);
var xhr = new XMLHttpRequest();
xhr.open("POST", "controlit.php", true);
xhr.send(formData);
}
</script>
</head>
<body>
<input type="button" name="up" title="Click to move up." value="Up" onclick="controlit(this.value);">
<input type="button" name="down" title="Click to move down." value="Down" onclick="controlit(this.value);">
<input type="button" name="left" title="Click to move left." value="Left" onclick="controlit(this.value);">
<input type="button" name="right" title="Click to move right." value="Right" onclick="controlit(this.value);">
</body>
</html>
If you don't want the buttons at all then you can delete the 4 <input type="button"> lines.
Kristijan1392
Almost there biggrin.gif,if it could only run the motor when key is pressed,and stop when i release the key,that would be perfect,but this is perfect to! thank you very very much,finally it works smile.gif))))
this is what i am trying to do now,i can see which key is temporary pressed,and i have two functions,keydown and keyup,in keydown i can start motor forward,backward and stop it,but when i press W for example it runs no no matter i released the key,and it runs until i press A or D to stop it,i put stop as a direction in second function keyup because i want motor to stop no matter which of the keys is released. this is the code:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
document.onkeydown = function(event)
{
var key_press = String.fromCharCode(event.keyCode);
var key_code = event.keyCode;
    document.getElementById('kp').innerHTML = key_press;
    document.getElementById('kc').innerHTML = key_code;
var status = document.getElementById('status');
    status.innerHTML = "DOWN Event Fired For : "+key_press;
switch(key_press)
{
  case 'W':
   controlit('Up');
   break;
  case 'A':
   controlit('Down');
   break;
  case 'S':
   controlit('Stop');
   break;
  case 'D':
   controlit('Stop');
   break;
}
}
document.onkeyup = function(event){
      var key_press = String.fromCharCode(event.keyCode);
    var status = document.getElementById('status');
    status.innerHTML = "UP Event Fired For : "+key_press;
switch(status)
{
  case 'W':
   controlit('Stop');
   break;
  case 'A':
   controlit('Stop');
   break;
  case 'S':
   controlit('Stop');
   break;
  case 'D':
   controlit('Stop');
   break;
}
}
status.innerHTML = "UP Event Fired For : "+key_press;
function controlit(action)
{
var formData = new FormData();
formData.append("moveit", action);
var xhr = new XMLHttpRequest();
xhr.open("POST", "controlit.php", true);
xhr.send(formData);
}
</script>
</head>
<body>
<input type="button" name="up" title="Click to move up." value="Up" onclick="controlit(this.value);">
<input type="button" name="down" title="Click to move down." value="Down" onclick="controlit(this.value);">
<input type="button" name="left" title="Click to move left." value="Left" onclick="controlit(this.value);">
<input type="button" name="right" title="Click to move right." value="Right" onclick="controlit(this.value);">
</body>
<h2>Javascript Capture Keyboard Input Example</h2>
<h3>onkeydown - onkeyup</h3>
Key Pressed : <span id="kp"></span>
<br />
Key Code : <span id="kc"></span>
<p id="status">Keyboard Event Status</p>
</html>

And it would be great if i could use key_code to start the motor,then i could use arrows to control it,now the symbol to go right is ',and when i write case(''') it wont work
CharlesEF
Let me be sure I understand. You have a .py command that starts the moter and continues to run. You have another .py command to stop the motor. Is that correct? Can you post the actual exec() commands and the keys you want to activate them, a complete list for all commands you want to use.
Kristijan1392
QUOTE
switch(status)
this was mistake,this is corect:
switch(key_press)
everything works perfectly,thank you a lot Charles,could you explin me how to use switch(key_Code) so i could use arrows
Kristijan1392
QUOTE(CharlesEF @ Mar 8 2016, 07:58 AM) *

CODE
switch(key_code)
{
  case '38':
   controlit('Up');
   break;
  case '40':
   controlit('Down');
   break;
  case '37':
   controlit('Left');
   break;
  case '39':
   controlit('Right');
   break;
}

(key_code)37=%(key_press) (Left arrow) if i write case '%'; left arrow works
38=& (Up arrow) if i write case '&'; up arrow works
39=' (Right arrow) if i write case '''; nothing works
40=( (Down arrow) if i write case '('; up arrow works
So i think solution is in using key_code :/
CharlesEF
QUOTE(Kristijan1392 @ Mar 8 2016, 02:13 AM) *

QUOTE(CharlesEF @ Mar 8 2016, 07:58 AM) *

CODE
switch(key_code)
{
  case '38':
   controlit('Up');
   break;
  case '40':
   controlit('Down');
   break;
  case '37':
   controlit('Left');
   break;
  case '39':
   controlit('Right');
   break;
}

(key_code)37=%(key_press) (Left arrow) if i write case '%'; left arrow works
38=& (Up arrow) if i write case '&'; up arrow works
39=' (Right arrow) if i write case '''; nothing works
40=( (Down arrow) if i write case '('; up arrow works
So i think solution is in using key_code :/

So, this means you don't want to catch the W or A key at all? Also, I don't think the onkeyup event will do what you want. Think about it, if you press the UP arrow and hold it the keyboard buffer will continue to hold that value. By the time you release the key you might have to wait for the keyboard buffer to empty before the stop action kicks in. You may be better off without the onkeyup function and just define another onkeydown key, like "S", to stop. If you do want to stick with the onkeyup function then key_code is NOT the way to go. Because then you have no way to tell when the key is released.

Here is my recent attempt, you can use the W key for UP, the A key for DOWN and the 4 arrow keys for UP, DOWN, LEFT and RIGHT. When you release the key the STOP command should kick in, after awhile, because of keyboard buffering.

control.php
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
document.onkeydown = function(event)
{
var key_press = 'd' + String.fromCharCode(event.which);
var key_code = event.keyCode;
kp.innerHTML = key_press;
kc.innerHTML = key_code;
stat.innerHTML = "DOWN Event Fired For : " + key_press;
controlit(key_press);
}

document.onkeyup = function(event)
{
var key_press = 'u' + String.fromCharCode(event.which);
var key_code = event.keyCode;
kp.innerHTML = key_press;
kc.innerHTML = key_code;
stat.innerHTML = "UP Event Fired For : " + key_press;
controlit(key_press);
}

function controlit(key)
{
switch(key)
{
  case "dW": // W Key - key press (Down)
  case "d&": // Up arrow key - key press (Down)
   action = 'Up';
   break;
  case "dA": // A key - key press (Down)
  case "d(": // Down arrow key - key press (Down)
   action = 'Down';
   break;
  case "d%": // Left arrow key - key press (Down)
   action = 'Left';
   break;
  case "d'": // Right arrow key - key press (Down)
   action = 'Right';
   break;
  case "uA": // A key - key up (Up)
  case "uW": // W Key - key up (Up)
  case "u%": // Left arrow key - key up (Up)
  case "u'": // Right arrow key - key up (Up)
  case "u&": // Up arrow key - key up (Up)
  case "u(": // Down arrow key - key up (Up)
   action = 'Stop';
   break;
}
var formData = new FormData();
formData.append("moveit", action);
var xhr = new XMLHttpRequest();
xhr.open("POST", "controlit.php", true);
xhr.send(formData);
}
</script>
</head>
<body>
<input type="button" name="up" title="Click to move up." value="Up" onclick="controlit(this.value);">
<input type="button" name="down" title="Click to move down." value="Down" onclick="controlit(this.value);">
<input type="button" name="left" title="Click to move left." value="Left" onclick="controlit(this.value);">
<input type="button" name="right" title="Click to move right." value="Right" onclick="controlit(this.value);"><br>
<h2>Javascript Capture Keyboard Input Example</h2>
<h3>onkeydown - onkeyup</h3>
Key Pressed : <span id="kp"></span><br>
Key Code : <span id="kc"></span><br>
<p id="stat">Keyboard Event Status</p>
<script type="text/javascript">
window.onload=function()
{
var action = null;
var kp = document.getElementById('kp');
var kc = document.getElementById('kc');
var stat = document.getElementById('stat');
}
</script>
</body>
</html>

controlit.php
CODE
<?php
if(isset($_POST['moveit']))
{
switch($_POST['moveit'])
{
  case 'Up':
   exec("sudo python /home/pi/up.py");
   break;
  case 'Down':
   exec("sudo python /home/pi/down.py");
   break;
  case 'Left':
   exec("sudo python /home/pi/left.py");
   break;
  case 'Right':
   exec("sudo python /home/pi/right.py");
   break;
  case 'Stop':
   exec("sudo python /home/pi/stop.py");
   break;
}
}
?>

Be sure to change the exec() commands to match your needs. Also, because of the changes the 4 buttons will not work anymore. They need to be changed a little but I leave that for you. If you need any help or have questions then just post again.
Kristijan1392
CharlesEF you are Godlike!! Thank you very very much,you are the best biggrin.gif
CharlesEF
QUOTE(Kristijan1392 @ Mar 8 2016, 05:08 AM) *

CharlesEF you are Godlike!! Thank you very very much,you are the best biggrin.gif

Does this mean the keyboard buffer was not a problem after all?
Kristijan1392
yes,but everything else is working,i will look into the buttons
CharlesEF
QUOTE(Kristijan1392 @ Mar 8 2016, 05:27 AM) *

i guess it does,everything works great now,thank you a lot! smile.gif

Great, have fun. And you're welcome. If you need help with the buttons just post again.
CharlesEF
Here is a new version of control.php, which should address the keyboard buffer problem (I think). Also, I have changed the buttons so they should work like keydown and keyup. This version should allow you to hold the key or button and fire the stop command when you release. Give it a try and let me know if it is any better.
control.php
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
document.onkeydown = function(event)
{
var key_press = 'd' + String.fromCharCode(event.which);
var key_code = event.keyCode;
kp.innerHTML = key_press;
kc.innerHTML = key_code;
stat.innerHTML = "DOWN Event Fired For : " + key_press;
controlit(key_press);
}

document.onkeyup = function(event)
{
var key_press = 'u' + String.fromCharCode(event.which);
var key_code = event.keyCode;
kp.innerHTML = key_press;
kc.innerHTML = key_code;
stat.innerHTML = "UP Event Fired For : " + key_press;
controlit(key_press);
}

function controlit(key)
{
if(key == prekey)
{
  return(false);
}
switch(key)
{
  case "dW": // W Key - key press (Down)
  case "d&": // Up arrow key - key press (Down)
   action = 'Up';
   break;
  case "dA": // A key - key press (Down)
  case "d(": // Down arrow key - key press (Down)
   action = 'Down';
   break;
  case "d%": // Left arrow key - key press (Down)
   action = 'Left';
   break;
  case "d'": // Right arrow key - key press (Down)
   action = 'Right';
   break;
  case "uA": // A key - key up (Up)
  case "uW": // W Key - key up (Up)
  case "u%": // Left arrow key - key up (Up)
  case "u'": // Right arrow key - key up (Up)
  case "u&": // Up arrow key - key up (Up)
  case "u(": // Down arrow key - key up (Up)
   action = 'Stop';
   break;
}
prekey = key;
var formData = new FormData();
formData.append("moveit", action);
var xhr = new XMLHttpRequest();
xhr.open("POST", "controlit.php", true);
xhr.send(formData);
}
</script>
</head>
<body>
<input type="button" name="up" title="Click to move up." value="Up" onmousedown="controlit('d&');" onmouseup="controlit('u&');">
<input type="button" name="down" title="Click to move down." value="Down" onmousedown="controlit('d\(');" onmouseup="controlit('u\(');">
<input type="button" name="left" title="Click to move left." value="Left" onmousedown="controlit('d%');" onmouseup="controlit('u%');">
<input type="button" name="right" title="Click to move right." value="Right" onmousedown="controlit('d\'');" onmouseup="controlit('u\'');"><br>
<h2>Javascript Capture Keyboard Input Example</h2>
<h3>onkeydown - onkeyup</h3>
Key Pressed : <span id="kp"></span><br>
Key Code : <span id="kc"></span><br>
<p id="stat">Keyboard Event Status</p>
<script type="text/javascript">
var action = null, prekey = null, kp = null, kc = null, stat = null;

window.onload=function()
{
kp = document.getElementById('kp');
kc = document.getElementById('kc');
stat = document.getElementById('stat');
}
</script>
</body>
</html>
Kristijan1392
Much better,earlier it would stuck if i held the key,now it works perfect,i have a feeling that you are doing the same thing as I,but you do it way better smile.gif
CharlesEF
QUOTE(Kristijan1392 @ Mar 11 2016, 07:07 PM) *

Much better,earlier it would stuck if i held the key,now it works perfect,i have a feeling that you are doing the same thing as I,but you do it way better smile.gif

Glad it worked out for you. If you have any questions about the code, just ask.
Kristijan1392
can case be two buttons for example up left or up right arrows?
CharlesEF
QUOTE(Kristijan1392 @ Mar 12 2016, 08:19 AM) *

can case be two buttons for example up left or up right arrows?

Yes, it can. But it would also depend on what you want to happen. It would be better if you tell me what you want. Do you want up left to do 2 commands, up then left, or do you want up left to do the same command?
Kristijan1392
to do the same command,3 motors on,one off
Kristijan1392
up turns all motors on forward,left turns one front motor on forward and one back motor on backward,up left turns 3 motors on forward etc..
CharlesEF
QUOTE(Kristijan1392 @ Mar 12 2016, 03:09 PM) *

up turns all motors on forward,left turns one front motor on forward and one back motor on backward,up left turns 3 motors on forward etc..

Sorry, I still don't understand. What should happen if you press up and left together? Should both the up and left command be issued or do you have a different program to run for this?
Kristijan1392
i have a different command if left and up are pressed together
CharlesEF
QUOTE(Kristijan1392 @ Mar 13 2016, 10:40 AM) *

i have a different command if left and up are pressed together

Sorry for the delay, I was out of town and offline for the last week. Anyway, the reason I need to understand what you want to happen is because the current working script I posted will need the logic changed. Currently, the logic is based on a single key.

What if you approached this as the SHIFT key being used as the UP key and ALT key being used as the DOWN key? What should happen if only 1 key is released?
Kristijan1392
other command should execute,i will send you the new code and the part i want to change
Kristijan1392
here are all cases
CODE
switch(key)
{
  case "d&": // Up arrow key - key press (Down)
   action = 'Up';
   break;
  case "d(": // Down arrow key - key press (Down)
   action = 'Down';
   break;
  case "d%": // Left arrow key - key press (Down)
   action = 'Left';
   break;
  case "d'": // Right arrow key - key press (Down)
   action = 'Right';
   break;
  case "dg": // Up and left Key press together - I want this case to execute different command but when i pres UP and LEFT arrows together,case "dg" should be replaced with case "d&" && "d%": action is good,and i would like to leave one key press for up down left and right,but two keys pressed for upleft,upright etc..
   action = 'UpLeft';
   break;
  case "di": // Up and right - key press (Down)  I want this case to execute different command but when i pres UP and RIGHT arrows together
   action = 'UpRight';
   break;
  case "da": // Down and left - key press (Down)  I want this case to execute different command but when i pres DOWN and LEFT arrows together
   action = 'DownLeft';
   break;
  case "dc": // Down and right - key press (Down)  I want this case to execute different command but when i pres DOWN and RIGHT arrows together
   action = 'DownRight';
   break;
  case "de": // Up and down - key press (Down)  I want this case to execute different command but when i pres UP and DOWN arrows together
   action = 'UpDown';
   break;
  case "ue": // Up and down - key up (Up)
  case "uc": //Down and right - key up (Up)
  case "ua": //Down and left - key up (Up)
  case "ui": // Up and right - key up (Up)
  case "ug": // Up and left Key up together   case "u&" && "u%": should be combined instead of case "ug":
  case "u%": // Left arrow key - key up (Up)
  case "u'": // Right arrow key - key up (Up)
  case "u&": // Up arrow key - key up (Up)
  case "u(": // Down arrow key - key up (Up)
   action = 'Stop';
   break;
}

Thank you very much for your time
Is it possible if i for example hold up and left together one action is executed,and when i release up only left action is executed,and when i release left stop is executed
CharlesEF
Ok, give me a few days. I need to catch up on a few things and I need to think about your requirements.
Kristijan1392
thank you for effort and everything
CharlesEF
Ok, I think this takes care of all your requirements. If you hold 2 keys down, say left-right, then you release the left key then the right command will be executed. If you then press the up key then the right-up command will be executed. There is 1 gotcha with this code, you can't repeat the same command one after the other. If you press and hold the up key then release it the stop will run. Now you can't press the up key again, at least until you press another key first. If you press and hold the up-left keys and then you release the left key then you can't press the left key again, until you press a different key first. This is a side effect of the code I used to trap multiple keystrokes (and filling up the keyboard buffer). Be sure to change the commands, if needed.

control.php
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Control Module</title>
<script type="text/javascript">
var key_seq = null, cur_key = null, pre_key = null, pre_seq = null;

document.onkeydown = function(event)
{
if(event.which != pre_key)
{
  key_seq.value += 'd' + event.which;
  cur_key.value = 'd' + event.which;
  pre_key = event.which;
}
setTimeout("controlIt(key_seq.value)", 500);
}

document.onkeyup = function(event)
{
key_seq.value = key_seq.value.replace('d' + event.which, '');
cur_key.value = 'u' + event.which;
setTimeout("controlIt(key_seq.value)", 500);
}

function controlIt(key_sequence)
{
var cont = true;

if(pre_seq == key_sequence)
{
  return(false);
}
switch(key_sequence)
{
  case "d38d37": // Up-Left arrow keys - key down
   action = 'UpLeft';
   break;
  case "d38d40": // Up-Down arrow keys - key down
   action = 'UpDown';
   break;
  case "d38d39": // Up-Right arrow keys - key down
   action = 'UpRight';
   break;
  case "d37d38": // Left-Up arrow keys - key down
   action = 'LeftUp';
   break;
  case "d37d40": // Left-Down arrow keys - key down
   action = 'LeftDown';
   break;
  case "d37d39": // Left-Right arrow keys - key down
   action = 'LeftRight';
   break;
  case "d40d38": // Down-Up arrow keys - key down
   action = 'DownUp';
   break;
  case "d40d37": // Down-Left arrow keys - key down
   action = 'DownLeft';
   break;
  case "d40d39": // Down-Right arrow keys - key down
   action = 'DownRight';
   break;
  case "d39d38": // Right-Up arrow keys - key down
   action = 'RightUp';
   break;
  case "d39d40": // Right-Down arrow keys - key down
   action = 'RightDown';
   break;
  case "d39d37": // Right-Left arrow keys - key down
   action = 'RightLeft';
   break;
  case "d87": // W Key - key down
  case "d38": // Up arrow key - key down
   action = 'Up';
   break;
  case "d65": // A key - key down
  case "d40": // Down arrow key - key down
   action = 'Down';
   break;
  case "d37": // Left arrow key - key down
   action = 'Left';
   break;
  case "d39": // Right arrow key - key down
   action = 'Right';
   break;
  case "": // Empty key_sequence value - key up
   action = 'Stop';
   break;
  default:
   cont = false;
   break;
}
pre_seq = key_sequence;
if(cont)
{
  var formData = new FormData();
  formData.append("moveit", action);
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "controlit.php", true);
  xhr.send(formData);
}
}
</script>
</head>
<body>
<input type="hidden" id="key_seq" title="Key Sequence" value="">
<input type="hidden" id="cur_key" title="Current Key" value=""><br>
<input type="button" name="up" title="Click to move up." value="Up" onmousedown="controlIt('d38');" onmouseup="controlit('');">
<input type="button" name="down" title="Click to move down." value="Down" onmousedown="controlIt('d40');" onmouseup="controlit('');">
<input type="button" name="left" title="Click to move left." value="Left" onmousedown="controlIt('d37');" onmouseup="controlit('');">
<input type="button" name="right" title="Click to move right." value="Right" onmousedown="controlIt('d39');" onmouseup="controlit('');"><br>
<script type="text/javascript">
window.onload=function()
{
key_seq = document.getElementById('key_seq');
cur_key = document.getElementById('cur_key');
}
</script>
</body>
</html>

controlit.php
CODE
<?php
if(isset($_POST['moveit']))
{
switch($_POST['moveit'])
{
  case 'UpLeft':
   exec("sudo python /home/pi/upleft.py");
   break;
  case 'UpDown':
   exec("sudo python /home/pi/updown.py");
   break;
  case 'UpRight':
   exec("sudo python /home/pi/upright.py");
   break;
  case 'LeftUp':
   exec("sudo python /home/pi/leftup.py");
   break;
  case 'LeftDown':
   exec("sudo python /home/pi/leftdown.py");
   break;
  case 'LeftRight':
   exec("sudo python /home/pi/leftright.py");
   break;
  case 'DownUp':
   exec("sudo python /home/pi/downup.py");
   break;
  case 'DownLeft':
   exec("sudo python /home/pi/downleft.py");
   break;
  case 'DownRight':
   exec("sudo python /home/pi/downright.py");
   break;
  case 'RightUp':
   exec("sudo python /home/pi/rightup.py");
   break;
  case 'RightDown':
   exec("sudo python /home/pi/rightdown.py");
   break;
  case 'RightLeft':
   exec("sudo python /home/pi/rightleft.py");
   break;
  case 'Up':
   exec("sudo python /home/pi/up.py");
   break;
  case 'Down':
   exec("sudo python /home/pi/down.py");
   break;
  case 'Left':
   exec("sudo python /home/pi/left.py");
   break;
  case 'Right':
   exec("sudo python /home/pi/right.py");
   break;
  case 'Stop':
   exec("sudo python /home/pi/stop.py");
   break;
}
}
?>
CharlesEF
Seems I forgot to change the function name for the 4 onmouseup button events. Swap the 4 buttons code with this:
CODE
<input type="button" name="up" title="Click to move up." value="Up" onmousedown="controlIt('d38');" onmouseup="controlIt('');">
<input type="button" name="down" title="Click to move down." value="Down" onmousedown="controlIt('d40');" onmouseup="controlIt('');">
<input type="button" name="left" title="Click to move left." value="Left" onmousedown="controlIt('d37');" onmouseup="controlIt('');">
<input type="button" name="right" title="Click to move right." value="Right" onmousedown="controlIt('d39');" onmouseup="controlIt('');"><br>
Kristijan1392
Thank you a loot,I will try this in a few days,and let you know how it works,i will send you a link so you can try it by your self smile.gif
CharlesEF
Here is another version that includes buttons. The buttons with 2 directions (like 'Up-Down') requires both the left and right mouse buttons to be pressed and held. Be sure to press the left mouse button before the right button in order to get the 'Up-Down' movement. If you press the right mouse button before the left then you will get 'Down-Up' movement. Let's say you press the left mouse button and then the right (for 'Up-Down'). Now, if you release the right mouse button then the 'Up' command will run. When you release the left mouse button the 'Stop' command will run. Let's say you still have both buttons pressed and held. If you release the left mouse button then the 'Down' command will run. When you release the right button the 'Stop' command will run. Also, let's say you still have both left and right buttons pressed and held (for 'Up-Down'). If you release the right mouse button then the 'Up' command will run. If you press and hold the right mouse button again then the 'Up-Down' command will run again. In other words, the buttons don't have the same problem as the arrow keys (you can repeat the same key sequence).
Click to view attachment
CharlesEF
Here is a corrected version. I forgot to change the functions for the first 4 buttons and they didn't work. Now they do.
Click to view attachment
Kristijan1392
thank you very much,i still need to find appropriate wheels and then i will send you my domain in inbox so you can try hoe it works,thank you for everything
CharlesEF
I fixed the repeat command problem and I removed some code I was using during testing. I also made the W,S,A and D keys to act like arrow keys. W=UP, S=DOWN, A=LEFT and D=Right.
Click to view attachment
CharlesEF
I should mention that if you want to limit the browser used to IE only then you could use Active-X to run the commands directly. No need for a web server
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.