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