HTML code not working

Using Arduino Programming Questions
#1

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!

#2

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

#3

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!

#4

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).

#5

Thanks so much!

#6