HTML code not working

I want to come up with a very simple webpage that allows the user the option to request a temperature reading from my Photon, and also change the color of the RGB LED through the webpage. I’m really new to HTML, so I"m a little confused. The request temperature part of my webpage does not work, so I hope you guys can help me out.

Here is my Photon code:

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

#define PIXEL_PIN D1
#define PIXEL_COUNT 1
#define PIXEL_TYPE WS2811

Adafruit_NeoPixel strip = Adafruit_NeoPixel(PIXEL_COUNT, PIXEL_PIN,PIXEL_TYPE);


int temp, temperature, i;

int LEDPin=D1;



enum  thermostat_mode_t {
    COOL,
    OFF,
    HEAT,
    REDALERT,
    UNDER_CONTROL
};
thermostat_mode_t mode = OFF;

int setModeFromString(String inputString);


void warning(const char *name, const char *data);

void setup() { Particle.variable("Temp_reading", temperature);

pinMode(LEDPin, INPUT);
 Particle.function("setMode", setModeFromString);
 
 Particle.subscribe("REDALERT", warning, "26003c000a47343232363230");
Serial.begin(9600);

strip.begin();
}
    
void loop() {             
  
 
   temp = analogRead (A0);
    temperature = ((temp-620)/12.4);
   
    
    Serial.print (temp);
    Serial.print(",");
Serial.print((temp-620)/12.4); 
 
Serial.println(";"); 
delay(2000);
}


  
 int setModeFromString(String inputString)
{
    Serial.println(inputString);
    if        (inputString=="Cool") {
         mode = COOL;
         strip.setPixelColor(0, strip.Color(0, 0, 128));
            strip.show();
        return 1;
    } else if (inputString=="Off" ) {
        mode = OFF;
         strip.setPixelColor(0, strip.Color(0, 128, 0));
            strip.show();
        
    } else if (inputString=="Heat") {
        mode = HEAT;
         strip.setPixelColor(0, strip.Color(128, 0, 0));
             strip.show();
        
    } else if (inputString=="REDALERT"){
        mode = REDALERT;
         strip.setPixelColor(0, strip.Color(128, 0, 0));
             strip.show();
        Particle.publish("REDALERT");
        delay ( 1000 );
    }
    
    else if (inputString=="UNDER_CONTROL"){
        mode = UNDER_CONTROL;
        strip.setPixelColor(0, strip.Color(0, 0, 128));
            strip.show();
    }
    else {
        Serial.print("Invalid Mode: ");
        Serial.println(inputString);
        return -1;
    }
    
   delay(2000);


 }
 
 void warning( const char *name, const char *data )
 {
     Serial.println("REDALERT mode was triggered by user\n");
     delay(2000);
 }

Here is my HTML code:

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

   Current Temperature:<span id="current_temp"></span>&deg; C

   
   <button id="connectbutton" onclick="start()">Refresh Data</button>
   
    <script type="text/javascript">
    function start(objButton) {
        var deviceID = "26003c000a47343232363230";
        var accessToken = "8a6ebc5fa016c271055deec136c4b9b74c73dcc1";
        var baseURL = "https://api.particle.io/v1/devices/"

        var varName = "temperature";
        requestURL = baseURL + deviceID + "/" + varName + "/?access_token=" + accessToken;
        $.getJSON(requestURL, function(json) {
                 document.getElementById("temperature").innerHTML = + json.result;
                 });

    }
    </script>


<form action="https://api.particle.io/v1/devices/26003c000a47343232363230/set_temp?access_token=8a6ebc5fa016c271055deec136c4b9b74c73dcc1" method="POST">

<input type="radio" name="REDALERT" value="REDALERT"> REDALERT

  <input type="radio" name="UNDER_CONTROL" value="UNDER_CONTROL"> UNDER_CONTROL  
</form> 

</body>
</html>

So, I’m wondering why the request temperature part of my HTML code does not work? Am I missing ant lines of code there?

And also, for setting the color of my LED based on the modes, must name=“value” in the input part of my code be inputString matching that in my Photon code? I’m confused as to what variable should be in those paranthesis after the name.

Thanks!

your HTML is not correct...

which document element is called "temperature"? I see one with a different name...

Did you try to console.log(json) and see what is being returned?

document.getElementById("temperature").innerHTML = + json.result;

??
what is that "+" doing there?

lots of wrong...

Oh I was thinking that it needs to query the value of the temperature variable in the cloud. So should it be Temp_reading instead? I'm confused as to which one I should register in the HTML code from the Particle.variable function.

Also, I don't understand any of the code, I took it off from a Google Doc of my lab session. What is the correct way instead? Could you link me to a tutorial or something?

Thanks!

limxx518:
Oh I was thinking that it needs to query the value of the temperature variable in the cloud. So should it be Temp_reading instead? I'm confused as to which one I should register in the HTML code from the Particle.variable function.

Also, I don't understand any of the code, I took it off from a Google Doc of my lab session. What is the correct way instead? Could you link me to a tutorial or something?

Thanks!

you may want to start with the actual demo on the Particle Forum... it after all a Particle device (which is not an Arduino device).

Thanks so much!