HTML Call Function on Photon

<html>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<body>
    <br><br> 
      <button type = "button" id="fbtn" onclick="setDir(f)" > Forward </button>
    <br><br>

    <script type="text/javascript">
      var deviceID    = "An ID";
      var accessToken = "A Token Thanks for letting me know";
      var func = "Direction";

      function setDir(value) {
     var requestURL = "https://api.particle.io/v1/devices/" +deviceID + "/" + func + "/";
        $.post( requestURL, { params: value, access_token: accessToken });
      }

    </script>
</body>
</html>

I have a google site that I am using to try and run my Otto 3D printed Robot that is controlled by a particle Photon, I am trying to debug this so it works, I went over the tutorials on moving the servo and somehow I messed it up, I’m hoping this is just me being a little bit dumb. Thank you in advance!

You might want to sanitize your post to remove the access token.

Smart Man

I guess you mean HTML page or web site, but google site gives a bit too much credit to the company which uses the web :wink:

Can you also post your setup() function? (providing a link to the tutorial you are trying to follow would help too)

BTW, the Chrome console does complain with this error running your HTML page

Uncaught ReferenceError: f is not defined at HTMLButtonElement.onclick (test.html:5)

Looking at the browser output when a page isn’t behaving as expected is a good first debugging step.

I guess the respective line should be something like

     <button type = "button" id="fbtn" onclick="setDir('f')" > Forward </button>
3 Likes

Good Morning! thank you very much with that, the void setup is below, and I suppose you are correct, I am just very limited in my knowledge of web-based programming, I really have only written code is C++ and Java. Thank you for your patience and help!
void setup() { Particle.function("Direction" , CMD); RU.attach(0); RL.attach(1); LU.attach(2); LL.attach(3); Adjust(); delay(2000); }

I also looked at the Chrome Console for the output, and it says that the script I try to load at the top is blocked because it needs to be served over HTTPS, here is the actual output -

Mixed Content: The page at 'https://sites.google.com/' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.

This error gets fixed when I changed the http: to https: before loading that library but what is the difference?

https:// denotes a secure HTTP connection, while http:// is unencrypted/insecure.

This error isn’t really that different from what would happen in C++ or Java, especially since the function called in that statement is a JavaScript function (which acts very similar to Java)

If you try to call a function you’d need to pass the parameter in the expected form.
When you have a function

     function setDir(value) {
       ...
     }

you need to either pass a defined variable (e.g. when using setDir(f)) or a literal value (e.g. setDir('f')).
Since your code does not declare a variable f the former won’t work - irrespective of language (apart from auto-declaring/defining languages of course).

Thank you so much for your help! You helped me get it to work, I’m assuming it was fairly simple for you but to me it means the world! I also was able to figure out where my next learning path will be so I know what to research to get further in project. Thanks again!

1 Like