HTML Call Function on Photon

General
1 
<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!

2

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

3

Smart Man

4

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
5

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); }

6

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.
7

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

8

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).

9

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