Trouble with POST function in HTML connecting to Photon [SOLVED]

Troubleshooting
1

Hi All,
I have written code for the photon to control a servo and NeoPixel. Now with Postman, I can get it to work over the air. However, it does not seem to be working with the HTML code. I am using the POST function, but it just seems to not work. Could someone please take a look over the code and let me know what I may be doing wrong?
That would be greatly appreciate.
Photon and HTML code included. (I have removed the Device ID & Token)

Photon Code:

// This #include statement was automatically added by the Particle IDE.
#include "neopixel/neopixel.h"

#define NEO_PIN D2
#define NEO_COUNT 7
#define NEO_TYPE WS2812B

Servo myServo;

int const serWrite = D1;
int potVal;
int angle;

//int butRead = D2;
//int butResult;
//int butState = 0;


Adafruit_NeoPixel neoRing = Adafruit_NeoPixel(NEO_COUNT, NEO_PIN, NEO_TYPE);

void setup() {

    neoRing.begin();
    neoRing.setBrightness(128); //NeoPixel Brightness set to half
    neoRing.show(); // Initialize all pixels to 'off'

     //setup REST service for servo contol
    Particle.function("serControl", serControl);

    //setup REST service for NeoPixel control
    Particle.function("neoLight", neoLight);

    //setup REST service for NeoPixel colour
    Particle.function("pixelColor", pixelColor);

    myServo.attach(serWrite);
    //pinMode(butRead, INPUT);

    Serial.begin(9600);
    delay(1000);

    serControl ("close");

    //potVal = 900;
    //angle = map(potVal, 0, 1023, 0, 179);
    //myServo.write(angle);
    delay(1000);

    //Show that set up is done by turning on the NeoPixel's for 2 seconds
    pixelColor ("blue");

    //for (int i = 0; i < 7; i++){
    //  neoRing.setPixelColor(i, 0, 0, 255);
    //}
    //neoRing.show(); //refresh the NeoPixel color
    delay(2000);

    //Turn off NeoPixel
    lightOff ();
    //for (int i = 0; i < 7; i++){
    //  neoRing.setPixelColor(i, 0, 0, 0);
    //}
    //neoRing.show(); //refresh the NeoPixel color

}

void loop() {

    /*butResult = digitalRead(butRead);

    if (butResult == HIGH) {
        if (butState == 0) {
            cyanLight ();
            butResult = 1;
        } else if (butState == 1) {
            lightOff ();
            butResult = 0;
        }
        butResult = LOW;
        delay(2000);
    }*/


}

int serControl (String state) {

    if (state == "open") {
        potVal = 0;
        angle = map(potVal, 0, 1023, 0, 179);
        myServo.write(angle);
        return 1;
    }

    if (state == "close") {
        potVal = 900;
        angle = map(potVal, 0, 1023, 0, 179);
        myServo.write(angle);
        return 1;
    }

    //return 0;
}

int neoLight (String state) {

    if (state == "onLight") {
        cyanLight ();
        return 1;
    } else if (state == "offLight") {
        lightOff ();
        return 1;
    }

    //return 0;
}


int pixelColor (String color) {
    if (color == "red") {
        for (int i = 0; i < 7; i++){
            neoRing.setPixelColor(i, 255, 0, 0); //Red Colour
                neoRing.show(); //refresh the NeoPixel color
        }
        return 1;

    } else if (color == "green") {
        for (int i = 0; i < 7; i++){
            neoRing.setPixelColor(i, 0, 255, 0); //Green Colour
                neoRing.show(); //refresh the NeoPixel color
        }
        return 1;

    } else if (color == "blue") {
        for (int i = 0; i < 7; i++){
            neoRing.setPixelColor(i, 0, 0, 255); //Blue Colour
                neoRing.show(); //refresh the NeoPixel color
        }
        return 1;

    } else if (color == "cyan") {
        for (int i = 0; i < 7; i++){
            neoRing.setPixelColor(i, 0, 255, 255); //Cyan Colour
                neoRing.show(); //refresh the NeoPixel color
        }
        return 1;

    } else if (color == "magenta") {
        for (int i = 0; i < 7; i++){
            neoRing.setPixelColor(i, 255, 0, 255); //Magenta Colour
                neoRing.show(); //refresh the NeoPixel color
        }
        return 1;

    } else if (color == "yellow") {
        for (int i = 0; i < 7; i++){
            neoRing.setPixelColor(i, 255, 255, 0); //Yellow Colour
                neoRing.show(); //refresh the NeoPixel color
        }
        return 1;
    }
    return 0;
}

void cyanLight () {
    for (int i = 0; i < 7; i++){
        neoRing.setPixelColor(i, 0, 255, 255); //Cyan Colour
    }
    neoRing.show(); //refresh the NeoPixel color
}

void lightOff () {
    for (int i = 0; i < 7; i++){
        neoRing.setPixelColor(i, 0, 0, 0);
    }
    neoRing.show(); //refresh the NeoPixel color
}

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> -->
  <script src="//code.jquery.com/jquery-1.12.0.min.js" type="text/javascript"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
  <script>

  var particleID = "PARTICLE PHOTON DEVICE ID HERE";
  var particleToken = "PARTICLE.IO TOKEN HERE";

  function servoMode(servoState) {
    //call rest service to change the servo mode
    $.post("https://api.particle.io/v1/devices/" + particleID + "/serControl/", { params: servoState, access_token: particleToken },
    function(data){
    });
  }

  function neoPixelMode(neoPixelState) {
    //call rest service to change the NeoPixel State
    $.post("https://api.particle.io/v1/devices/" + particleID + "/neoLight/", { params: neoPixelState, access_token: particleToken },
    function(data){
    });
  }

  function neoPixelColor(neoColor) {
    //call rest service to change the NeoPixel Color
    $.post("https://api.particle.io/v1/devices/" + particleID + "/pixelColor/", { params: neoColor, access_token: particleToken },
    function(data) {
    });
  }


  </script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-md-offset-3"><H1 class="text-center">KOTOR Crate Contol</H1></div>
    </div>
    <div class="row">
      <div class="col-md-12"><h2 class="text-center">Top Control</h2></div>
    </div>
    <div class="row">
      <div class="col-md-2 col-md-offset-4" align=center><button type="button" class="btn btn-success" style="height:50px;width:100px" onclick="javascript:servoMode('open');">Open</button></div>
      <div class="col-md-2" align=center><button type="button" class="btn btn-danger" style="height:50px;width:100px" onclick="javascript:servoMode('close');">Close</button></div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12"><h2 class="text-center">Light Control</h2></div>
    </div>
    <div class="row">
      <div class="col-md-2 col-md-offset-4" align=center><button type="button" class="btn btn-info" style="height:50px;width:100px" onclick="javascript:neoPixelMode('on');">On</button></div>
      <div class="col-md-2" align=center><button type="button" class="btn btn-warning" style="height:50px;width:100px" onclick="javascript:neoPixelMode('off');">Off</button></div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12"><h2 class="text-center">Light Color</h2></div>
    </div>

    <div class="row">
      <div class="col-md-2 col-md-offset-4" align=center><button type="button" class="btn" style="height:50px;width:100px;background-color:red;color:white" onclick="javascript:neoPixelColor('red');">Red</button></div> <!-- 255,0,0 -->
      <div class="col-md-2" align=center><button type="button" class="btn" style="height:50px;width:100px;background-color:magenta;color:black" onclick="javascript:neoPixelColor('magenta');">Magenta</button></div> <!-- 255,0,255 -->
    </div>
    <br>
    <div class="row">
      <div class="col-md-2 col-md-offset-4" align=center><button type="button" class="btn" style="height:50px;width:100px;background-color:blue;color:white" onclick="javascript:neoPixelColor('blue');">Blue</button></div> <!-- 0,0,255 -->
      <div class="col-md-2" align=center><button type="button" class="btn" style="height:50px;width:100px;background-color:cyan;color:black" onclick="javascript:neoPixelColor('cyan');">Cyan</button></div> <!-- 0,255,255 -->
    </div>
    <br>
    <div class="row">
      <div class="col-md-2 col-md-offset-4" align=center><button type="button" class="btn" style="height:50px;width:100px;background-color:green;color:white" onclick="javascript:neoPixelColor('green');">Green</button></div> <!-- 0,255,0 -->
      <div class="col-md-2" align=center><button type="button" class="btn" style="height:50px;width:100px;background-color:yellow;color:black" onclick="javascript:neoPixelColor('yellow');">Yellow</button></div> <!-- 255,255,0 -->
    </div>
  </div>
</body>
</html>

Thank you,
Stuart

2

I really dislike posts with a generic title like this one

1 Like
3

Thanks for the feedback. I hope the new heading is more appropriate.

1 Like
4

What does not work? Are any of the Particle functions called?

5

Is there a reason for not using the official [ParticleJS][1] for that?
Or you could look in the open sources to see how they do things.

You could also look at these sites for testing your firmware and inspiration
http://suda.github.io/particle-web-interface/
http://jordymoors.nl/interface/

BTW: There seems to be an Arduino residue in your firmware code (twice)

  angle = map(potVal, 0, 1023, 0, 179);

The Particle devices sport a 12bit ADC, so you’d use 4095 instead of 1023.
[1]: https://docs.particle.io/reference/javascript/

1 Like
6

I am not using the ParticleJS, because honestly I’m not sure how too. This is my first build with a Particle board (or anything really), so I have been putting the code together by looking at other projects found on hackster.io and using a simulation to test it, before putting it together. That is why there is Arduino code in there, thank you for pointing that out.
I will take a look through the ParticleJS and see if I can make heads or tails of it.

7

When I run the HTML in a browser, and push the buttons, non of the functions are called… At least to my knowledge.
With Postman I can get the function to be called and make the photon do what I need it to do, but not with the HTML code. My guess is that either I am writing the function wrong, or I am not making a connection. (Inputting the Device ID and/or Token incorrectly)

8

Take a look at this tutorial to see how you could do it with HTML:

As to calling functions with ParticleJS, I've got a small 'demo' over here which you can take a look at: http://jordymoors.nl/particle/demos/function_button.html
(right click to see the source code)

Let us now if you require further help.

4 Likes