Needed helps on html button to trigger a function


#1

Hello everyone,

I’m new to HTML and Particle cloud service. I was trying to make a button that control a LED over website without redirecting the website when clicked the button. I was searching and reading a lot topic on particle and got this code so far. However this doesn’t work.

<!DOCTYPE HTML>
<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 id="on"  onclick="switchLED(1)">LED 1 On</button>
    <button id="off"  onclick="switchLED(2)">LED 1 Off</button>
    <br><br>
    <br><br>
    <script type="text/javascript">
      var deviceID    = "NUMBER1";
      var accessToken = "NUMBER2";
      var setFunc = "led";
      var paramStr;
     

      function switchLED(newValue) {
      if (newValue == 1){
        paramStr = "on";
      } else{
        paramStr = "off";
      }

	var requestURL = "https://api.particle.io/v1/devices/NUMBER1/led?access_token=NUMBER2";
        $.post( requestURL, { params: paramStr, access_token: accessToken });
      }
    </script>
</body>
</html>

HERE IS CODE ON PROTON:

int led1 = D2;


// Last time, we only needed to declare pins in the setup function.
// This time, we are also going to register our Particle function

void setup()
{
   
   // Here's the pin configuration, same as last time
   pinMode(led1, OUTPUT);

   // We are also going to declare a Particle.function so that we can turn the LED on and off from the cloud.
   Particle.function("led",ledToggle);
   // This is saying that when we ask the cloud for the function "led", it will employ the function ledToggle() from this app.

   // For good measure, let's also make sure both LEDs are off when we start:
   digitalWrite(led1, LOW);
  
   

}


// Last time, we wanted to continously blink the LED on and off
// Since we're waiting for input through the cloud this time,
// we don't actually need to put anything in the loop

void loop()
{
   
   // Nothing to do here
}

// We're going to have a super cool function now that gets called when a matching API request is sent
// This is the ledToggle function we registered to the "led" Particle.function earlier.


int ledToggle(String command) {
    int state = 0;
    /* Particle.functions always take a string as an argument and return an integer.
    Since we can pass a string, it means that we can give the program commands on how the function should be used.
    In this case, telling the function "on" will turn the LED on and telling it "off" will turn the LED off.
    Then, the function returns a value to us to let us know what happened.
    In this case, it will return 1 for the LEDs turning on, 0 for the LEDs turning off,
    and -1 if we received a totally bogus command that didn't do anything to the LEDs.
    */
    if (command.substring(0,2)=="on") state = 1;
       
    else if (command.substring(0,3)=="off") state = 0;
    else return -1;
    
    digitalWrite(led1, state);
    return 1;
    

}

#2

Hi @Genius

Please take a look at this (older) tutorial, particularly the HTML/Javascript part.

First off, you probably need to load JQuery to use $.post.

Second, your URL format is not correct for a POST request to call a function. You should have just the function name “led” at the end of the URL. You are already passing the access_token in the parameters.


#3

thanks a lot. it worked now. I forgot to load JQuery to use $.post.