Webserver with Photon

Connectivity WiFi
1

Dear all,
I am trying to create a web server with photon and DHT11 to get local informations.
The program generates the page but cannot update the temperature and humidity data. I've tried several small modifications but nothing has worked so far. I haven't found anything like this that works this way. So I would be grateful if anyone could give me some advice. To see the page I justo put the IP of Photon in the address bar.


#include <PietteTech_DHT.h>

#define DHTTYPE DHT11
#define DHTPIN D6

PietteTech_DHT DHT(DHTPIN, DHTTYPE);

TCPServer server = TCPServer(80);

void setup() {
  Serial.begin(9600);
  server.begin();
}

void loop() {
  TCPClient client = server.available();

  if (client) {
    float humidity = DHT.getHumidity();
    float temperature = DHT.getCelsius();
    String webpage = generateWebpage(DHT.getCelsius(), humidity);

    client.print("HTTP/1.1 200 OK\r\n");
    client.print("Content-Type: text/html\r\n");
    client.print("Connection: close\r\n");
    client.print("Content-Length: ");
    client.print(webpage.length());
    client.print("\r\n\r\n");
    client.print(webpage);
    delay(10);
    client.stop();
  }

  int result = DHT.acquireAndWait(2000);

  Serial.print("Humidade: ");
  Serial.print(DHT.getHumidity());
  Serial.print("%\t");

  Serial.print("Temperatura: ");
  Serial.print(DHT.getCelsius());
  Serial.println("°C");

  delay(2000); // Aguarda 2 segundos antes de ler novamente
}

String generateWebpage(float temperature, float humidity) {
  String webpage = "<!DOCTYPE html><html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'><title>Boletim meteorológico Particle Photon</title><style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}p {font-size: 24px;color: #444444;margin-bottom: 10px;}</style><script>function atualizarDados() {var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {var dados = JSON.parse(this.responseText);document.getElementById('temperatura').innerHTML = 'Temperatura: ' + dados.temperatura + '°C';document.getElementById('umidade').innerHTML = 'Umidade: ' + dados.umidade + '%';}};xhttp.open('GET', '/dados', true);xhttp.send();}function piscarValores() {setInterval(function() {var temperatura = document.getElementById('temperatura');var umidade = document.getElementById('umidade');temperatura.style.visibility = (temperatura.style.visibility == 'visible') ? 'hidden' : 'visible';umidade.style.visibility = (umidade.style.visibility == 'visible') ? 'hidden' : 'visible';}, 1000);}setInterval(atualizarDados, 5000);window.onload = piscarValores;</script></head><body><div id='webpage'><h1>Boletim meteorológico Particle Photon</h1><p id='temperatura'>Temperatura: " + String(temperature) + "°C</p><p id='umidade'>Umidade: " + String(humidity) + "%</p></div></body></html>";
  return webpage;
}
2

You are not calling DHT.begin() in setup as it would be shown in the examples provided with the library.

For the sake of responsiveness you might also want to drop the delay(2000) in your loop and make it non-blocking as shown in this example

1 Like
3

There is no any difference.The system behavior remains the same, i.e. it does not update automatically. The only way to update is to manually refresh the page.

4

That's to be expected. You have implemented a static web page, which will never update on its own. You either need to add the meta tag to have the page refresh itself, or implement a server-sent-events (SSE) stream on the Photon and a web page that takes advantage of it to automatically update the values without refreshing like this example.

2 Likes
5

Dear rickkas,I have been studying your files regarding the problem. I am facing two difficulties in working with your files. The first problem I noticed was that when I download the zipped files, the index content disappears completely, meaning the index page is completely blank. The second problem is that when I copy the content from github to the index page there the system generates a webpage with just the html text.
What could I be doing wrong?

Thanks,

Cesar

6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.