Make simple web button to send string command to photon

Getting Started
1

I’ve set up and got working the standard make a web connected LED. But now I want to tweak the code so it uses buttons instead of a form.

The main reason for this is simplicity but I also want to get rid of the api feedback confirmation screen it sends.

My current code looks like this

 <body>
  <center>
  <form action="https://api.particle.io/v1/devices/00000/led?access_token=00000" method="POST">
    <input type="radio" name="args" value="flash"> Flash LED
    <br>
    <input type="radio" name="args" value="flash"> Make a sound
    <br>
    <input type="radio" name="args" value="flash"> Spin umbrella
    <br>
    <input type="submit" value="Do it!">
  </form>
  </center>
  </body>

How do I make this into 3 buttons I can then style myself.

2

Have you seen my tutorial here that uses a pair of buttons and a slider to control a servo:

You could adapt that to your needs.

1 Like
3

I have and it did help a lot. However my HTML knowledge is quite limited. I’ve got something working using the following code, however I don’t want to see the return API confirmation

 <body>
<FORM METHOD="POST" ACTION="https://api.particle.io/v1/devices/0000/led?access_token=0000">
<INPUT TYPE="submit" name="args" VALUE="flash">
</FORM>
</body>
4

You should switch to Javascript as in the tutorial, I think. It is not that hard–instead of using a form and POST, you use button click callbacks and some AJAX style code.

1 Like
5

This uses the javascript library:

<html>
  <head>
      <title>Spark function buttons Example</title>
  </head>

  <body>
    
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 1</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 2</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 3</button>
    <button type="button" onclick="functionCall('functionName', 'functionArgument')">function 4</button>
    
    
    
    <script src="http://cdn.jsdelivr.net/sparkjs/1.0.0/spark.min.js"></script>
    <script>
      //you can use your accesstoken, or your email/passsword to log in. Uncomment accordingly below.

      var accessToken = "accesstoken here";
      var deviceID = "deviceID here";
      
      spark.on('login', function(response) {   
        
        console.log(response);
        
      });

      // callback to be executed by each core
      var callback = function(err, data) {
        if (err) {
          console.log('An error occurred while getting core attrs:', err);
        } else {
          console.log('Core attr retrieved successfully:', data);
        }
      };
      
      function functionCall(functionName, functionArgument){
        // The function needs to be defined  in the firmware uploaded to the
        // the Spark core and registered to the Spark cloud, same thing we do
        // with variables. You pass along the name of the function and the params.
        spark.callFunction(deviceID, functionName, functionArgument, callback);  
      }
      
      // Uncomment a line below depending on your preferred log-in method.   
      //spark.login({ username: 'email@example.com', password: 'password' });  
      spark.login({ accessToken: accessToken });
      
    </script>
  </body>
</html>

Edit the values accordingly, and you should be able to trigger your functions. It works for me. Let me know if you face any troubles.

5 Likes
6

This work perfectly! Thanks!

2 Likes
7

If you guys are interested, check out the end result here http://www.morrama.com/content/2015/8/24/iot-connected-flag

2 Likes
8

Good stuff - thanks for sharing your project

9

Thank you!
I’m just starting up and this was a good example to start with.

1 Like
10

The amount of love I have for that post is remarkable!

1 Like
11

This getting started tutorial is awesome!

Now I’m trying to figure out how to use this same Javascript/Ajax method to read variables being published.

12

Hi @mjwilson.ee

Check the Tutorial category here in the forum–there are tutorials for both reading variables and dealing with published event data.

13

Just to clear that up, variables aren't pushed, they're requested. You need to contact the API to tell it that you'd like a variable returned.
SSEs are pushed, to which you only have to subscribe.
There's a big difference between the two, and each has its pros and cons. Check the tutorials by @bko to find out how to use either :smile:

2 Likes
14

And to clear it up a bit more:
Particle.variables() are exposed (made public) by the device (by use of the Particle.variable() function) to be requested via the cloud (by use of an appropriately formatted GET request) :wink:

1 Like