WASD as input on a HTML/javascript page

Cloud
1

Hey y’all,

I am a complete newbie when it comes to java script and HTML. Currently working on a rc boat that is controlled through a web page and so far I have one set up using range sliders that control direction and power. I want to move on to java script to use WASD as the inputs for direction and power but don’t really know how to implement it due to my lack of java script knowledge. I was wondering how you connect the particle api to a script and use a cloud function within the script because I understand how to use it in HTML in a form. Any help or tips are appreciated because I do not really know where to get started besides using the event function to watch for a keystroke.
Thanks in advance.

2

You can add a key event handler

document.addEventListener("keypress", function(event) {
    if (event.keyCode == 13) {
        alert('Enter pressed.')
    }
})
3

So would the code be something similar to this per say?

<html>
<script src= "https://api.particle.io/v1/devices/DEVICEID/direction?access_token=ACCESSTOKEN" ></script>
<script>
document.addEventListener("KeyApress", function(event){
       if(event.keyCode == 65) {
              alert('a pressed.')

But at this point what would I put to assign a string value for the cloud function direction to return to particle? Because in my HTML program the range slider will return a string of “0” when it is slide to the left so in this script when a is pressed I want to send a value of 0 to the program.

4

Here’s a update of where I am at now.

<html>

<body>
<form id="left" action="https://api.particle.io/v1/devices/DEVICEID/direction?access_token=ACCESSTOKEN" method="POST">
    <input type="hidden" name="left" value="0" />
</form>
<form id="straight" action="https://api.particle.io/v1/devices/DEVICEID/direction?access_token=ACCESSTOKEN" method="POST">
    <input type="hidden" name="staight" value="1" />
</form>
<form id="right" action="https://api.particle.io/v1/devices/DEVICEID/direction?access_token=ACCESSTOKEN" method="POST">
    <input type="hidden" name="right" value="2" />
</form>
<script>
document.onkeydown = function(e) {
    switch(e.keyCode) {
        case 37:
          document.getElementById("left").submit();
        case 39:
      document.getElementById("right").submit();

    }
};
document.onkeyup = function(e) {
    switch(e.keyCode) {
        case 37:
     document.getElementById("straight").submit();
        case 39:
          document.getElementById("straight").submit();    
  
    }
};
</script>
</body>
</html>

The web page is sort of working for me but after every keystroke it detects it brings me to the api.particle.io page telling what value it returned. Is there anyway to stop that from happening because it is causing my code not to perform correctly because it does not detect the on.keyup because it redirects to the api page.

5

I figured out how to by pass the post request page through this youtube video for future reference if anyone is wanting to know how to do this: https://www.youtube.com/watch?v=FRolRmUIqjk&list=PLylMDDjFIp1AbI1cR_IzTu9FDBVgdquWX

1 Like