NEED HELP want to display 2 temperatures on my html page

General
1

Im using my photon and a html page to display my temperatures on my page, but when i try to display both temperatures at the same time, it only displays my second temperature. This is my code for my photon and html:

PHOTON CODE:

int analogvalue = 0;
int analogvalue2 = 0;
int LED_2 = D1;
double tempP = 0;
double tempP2 = 0;
int LED_1 = D0;

void setup()
{
    Particle.function("led",ledToggle);
Particle.function("led2",led2Toggle);
Particle.variable("temp", tempP);
Particle.variable("temp2", tempP2);
Particle.function("fan", FanToggle);
pinMode(A0, INPUT);
pinMode(A1, INPUT);
pinMode(LED_1, OUTPUT);
pinMode(LED_2, OUTPUT);
 
}
void loop()
{
    
analogvalue = analogRead(A0);
tempP = round(((analogvalue * 3.3)/4095)*100);
Serial.print("Le temp interieur est de:" );
Serial.println(tempP );
 //Serial.print("\n");
delay(100);


analogvalue2 = analogRead(A1);
tempP2 = round(((analogvalue2 * 3.3)/4095)*100);
Serial.print("Le temp exterieur est de:" );
Serial.println(tempP2 );
 //Serial.print("\n");
delay(100);

}
int FanToggle(String command) 
{

    if (command=="on") 
    {
        digitalWrite(LED_1,HIGH);
        return 1;
    }
    else if (command=="off") 
    {
        digitalWrite(LED_1,LOW);
        return 0;
    }
    else
    {
        return -1;
    }
    
}
int ledToggle(String command) 
{

    if (command=="on") 
    {
        digitalWrite(LED_1,HIGH);
        return 1;
    }
    else if (command=="off") 
    {
        digitalWrite(LED_1,LOW);
        return 0;
    }
    else
    {
        return -1;
    }
}

int led2Toggle (String command1) 

{
 if (command1=="on") 
    {
        digitalWrite(LED_2,HIGH);
        return 1;
    }
    else if (command1=="off")
    {
        digitalWrite(LED_2,LOW);
        return 0;
    }
    else 
    {
        return -1;
    }
    
}

HTML PAGE CODE:

<!DOCTYPE HTML>
<html>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" charset="utf-8">
 </script>
<body>
 <p> La temp est :
 <span id="analogue"></span></p><br>
 <button id="connectbutton" onclick="myFunction()">Read Temp</button>
 <p> La temp2 est :
 <span id="analogue2"></span></p><br>
 <button id="connectbutton" onclick="myFunction2()">Read Temp</button>



 <script>
 
 var myVar;
 document.getElementById("analogue").innerHTML = "Lecture de la valeur...";
function myFunction() {
 myVar = setInterval(Tstart, 1000);
 }
 function Tstart() {
 var y = Number(document.getElementById("txt1").value);
 var deviceID = "<--redacted-->";
 var accessToken= "<--redacted-->";
 var varName = "temp";
requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
 $.getJSON(requestURL, function(temp1) {
 document.getElementById("analogue").innerHTML = temp1.result + "C";
 document.getElementById("analogue").style.fontSize = "28px";
 if (temp1.result >= y) {
  document.getElementById("analogue").style.color="red";
  
 } else {
 document.getElementById("analogue").style.color="black";
 
  }
 });
 }
 var myVar2;
 document.getElementById("analogue2").innerHTML = "Lecture de la valeur...";
function myFunction2() {
 myVar = setInterval(Tstart, 1000);
 }
 function Tstart() {
 
 var deviceID = "<--redacted-->";
 var accessToken= "<--redacted-->";
 var varName = "temp";
requestURL = "https://api.particle.io/v1/devices/" + deviceID + "/" + varName + "/?access_token=" + accessToken;
 $.getJSON(requestURL, function(temp2) {
 document.getElementById("analogue2").innerHTML = temp1.result + "C";
 document.getElementById("analogue2").style.fontSize = "28px";
 
 });
 }
 </script>
 <p>
  y =
  <input type="text" id="txt1" name="text1" >
  <p>
  <form action="https://api.particle.io/v1/devices/<--redacted-->/led2?access_token=<--redacted-->" method="POST" target="_blank">
Communiquer avec le photon!<br>
    <br>
    <input type="radio" name="arg" value="on">Allumer la fan
    <br>
    <input type="radio" name="arg" value="off">eteindre la fan
    <br>
    <br>
    <input type="submit" value="Valider!">
	</form>
	<br>
	 <form action="https://api.particle.io/v1/devices/<--redacted-->/led?access_token=<--redacted-->" method="POST" target="_blank">
Communiquer avec le photon!<br>
	<br>
    <input type="radio" name="arg2" value="on">Allumer LED 
    <br>
    <input type="radio" name="arg2" value="off">eteindre LED 
    <br>
    <br>
    <input type="submit" value="Valider1!">
	
  </form>
</body>
</html>
2

Salut Fred! I would hide/obscure deviceID and accessToken from your post :wink:
(unless you already did that…)

1 Like
3

@gusgonnet, thanks for the heads-up - I’ve removed the info.

@fred10865, while at it I also noticed that you have several instances where you got the DeviceID and AccessToken hardcoded and are not using the respective variables - you should avoid that too.
Also instead of doubling functions just for the sake of changing some variable names, you should try to reuse one function for both tasks by passing a distinguishing parameter.
And finally in myFunction2() you do request var varName = "temp" where I’d guess you mean temp2 - that’s a very common problem with copy-paste-coding. That’s another reason why parameterised functions are better practice.

2 Likes