Particle API JS newbie question

Cloud
1

Hi there. First post.

I’ve been a programmer for about 20 years now (C, VB, C++, .NET, etc), but am brand new to web programming. I would like to create a website I can use to read and update configuration settings for my Particle project (the settings will be stored in the EEPROM). I read the Particle Reference Doc about the Particle API JS, and I found a good code sample here.

But the Particle doc uses particle.min.js, while the sample code I linked to uses spark.min.js (which I assume is older). When I changed the sample code to match the Particle doc I got an error: “ReferenceError: Particle is not defined”.

Here are my questions:

  1. Are there any good code examples using particle.min.js?

  2. Should I even be using particle.min.js? Is there a better way for me to build a website? (All I want to do is read values from the Photon and display them in text boxes, allow updates, and send those updated values back to the Photon)

  3. Like I said, I’m totally new at this. Do you have any recommendations as to where to start learning how to build such a website? (document links, books, code examples, etc)

  4. Hey. How do you post code? I can’t figure out the Preformatted Text button?

Thanks,
Dan

2

I’ll answer a few of the questions:

Yes, particle.min.js is the script file to include from your HTML.

You need to insert a line like this in your .js code file, or if you’re mixing your Javascript and HTML, within the script tag containing your js code:

var particle = new Particle();
3

To insert a block of code, I type this:

```cpp

```

Then paste the code between the two lines. That’s the grave accent/backtick character, the one under the tilde.

4

Thanks @rickkas7.

I had tried that before. I tried again and I get this:

ReferenceError: Particle is not defined

5

Oh, and here is the code I’ve been using:

<html>
  <head>
      <title>Test</title>
  </head>

  <body>
    
    <input type="text" class="form-control" placeholder="Start Hour" id="startHour">
    <input type="text" class="form-control" placeholder="Start Minute" id="startMinute">
    <input type="text" class="form-control" placeholder="Length" id="length">
    
    <br>
    
    <button type="button" onclick="sendValues()">Send values</button>

    <script type="text/javascript" src="//cdn.jsdelivr.net/particle-api-js/5/particle.min.js"></script>
    <script>

    var accessToken = "my_token";
    var deviceID = "my_ID";
  
    var startHour;
    var startMinute;
    var length;
    var stopMinute;

    var combinedTime;

    var particle = new Particle();
    
  function sendValues(){
    startHour = document.getElementById('startHour');
    startMinute = document.getElementById('startMinute');
    length = document.getElementById('length');

    combinedTime = startHour.value + '~' + startMinute.value + '~' + length.value;
    
    functionCall('getZone1Set', combinedTime);
    
  }
    
  function functionCall(functionName, functionArgument){
    particle.callFunction(deviceID, functionName, functionArgument, accessToken);  
  }
  
  //particle.login({ username: 'me@something.com', password: 'pwd' });  
  particle.login({ accessToken: accessToken });
  
</script>
  </body>
</html>

Thanks for any help you can give.

Dan

6

I’m not exactly sure why it’s not working for you. I pasted the code into a file on a web server and loaded it (in Chrome and Safari) and I don’t get the Reference Error.

7

Oh, wait. Are you just double clicking the file on your computer and opening it as a file:// URL instead of loading it from a web server? If so, you must change the URL to specify http.

<script type="text/javascript" src="http://cdn.jsdelivr.net/particle-api-js/5/particle.min.js"></script>

The reason the http is omitted in the example is that if you’re using a server that can use https, explicitly specifying http will cause a browser warning. But the problem is that you can’t load the particle.min.js file using a file:// URL with that URL, so it fails.

2 Likes
8

That was it! Thanks!

Now I’m able to call my function. I also tried the “listDevices” command and I have it working too. Good – now I can play around and learn how it all works. Awesome.

Thanks again.