Aide pour page web dynamique

Bonjour à tous,

J’aimerais afficher une température qui se rafraîchit sur une page web dynamique, seulement pour l’instant je n’arrive qu’a créer une page web statique qui se rafraîchit toute les x secondes.

Voici mon code :

// Ces deux bibliothèques sont indispensables pour le shield
#include <SPI.h>
#include <Ethernet.h>

// L'adresse MAC du shield
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0E, 0xA5, 0x7E };
// L'adresse IP que prendra le shield ( changer cette IP en fcontion de votre réseaux )
IPAddress ip( 172, 27, 11, 254);

// Initialise notre serveur
// Ce dernier écoutera sur le port 80
EthernetServer serveur(80);

float temp; // variable temp pour stocker la température

void setup()
{
  // On démarre la voie série pour déboguer
  Serial.begin(9600);
   Serial.print("Parametrage avec ip fixe... : ");
   Serial.println(ip);
   // on paramètre la carte en IP FIXE 
   Ethernet.begin(mac, ip);
  
   Serial.println("Init...");
  // Donne une seconde au shield pour s'initialiser
  delay(1000);
  // On lance le serveur
  serveur.begin();
  Serial.println("Serveur Prêt !");
}

void loop()
{
  EthernetClient client = serveur.available();   //on écoute le port
  
  if (client) //Si client connectée 
         {  
           Serial.println("Client en ligne\n");  //on le dit...
           if (client.connected()) // Si le client est en statut connecté
                    { 
                       while (client.available()) // tant qu'il a des infos à transmettre
                           {   
                       char c=client.read(); // on lit le caractère  
                       Serial.write(c);// on l'écrit sur le moniteur série
                       delay(1); //délai de lecture
                           }
                                 
                                //réponse au client
                                client.println("<!DOCTYPE HTML>"); // informe le navigateur du type de document à afficher
                                client.println("<html>"); // DEBUT DU HTML
                                
                                
                                client.println("<head>");
                                client.println("<meta charset=\"utf-8\" />"); // encodage 
                                client.println("<title> MESURE D'UNE PIECE </title>");
                                client.println("<meta http-equiv=\"refresh\" content=\"3\">"); // rafraichit la page HTML toutes les x secondes
                                client.println("<style>");  // BALISE QUI PERMET D'INSERER DU CODE CSS //
                                client.println("body { background-color : #ad836e; }"); // couleur de la page internet
                                client.println("h1 { font-size: 3em; text-align: center; }"); // 
                                client.println("h2 { font-size: 2em; border: 1px solid black; width: 500px; margin: auto; margin-bottom: 100px; padding-left: 150px; }");
                                client.println("#time { line-height: 50px; }");
                                client.println("</style>");
                                
                                client.println("</head>");


                                temp = analogRead(0)*5/1024.0; // Convertit la valeur analogique en Tension
                                temp = temp -0.5; // Calibrage de la température à 0°C car à 0°C le capteur délivre 500mV
                                temp = temp /0.01; // 10mV par °C
                                
                                
                                client.println("<body>");
                                client.println("<header> <h1> Récupération des mesures de la pièce </h1> </header>");
                                client.println("
");
                                client.println("
");
                                client.println("<section> <h2> TEMPERATURE : ");
                                client.println(temp);
                                client.println(" °C </h2> <h2> HUMIDITE : % </h2> </section>");
                                client.println("
");
                                client.println("
");
                                client.println("<section> <h2 id=\"time\"> DATES DES MESURES :");
                                
                                client.println("<script type=\"text/javascript\" language=\"javascript\">");   // Scrypt pour afficher la date
                                client.println("d = new Date();");
                                client.println("document.write(d.toLocaleDateString()+'   '+d.toLocaleTimeString());");
                                client.println("</script> </h2>");
                                client.println("<footer> <p> Page Web réalisée par Quentin dans le cadre du Stage de BTS </p> </footer>");
                                client.println("<script src=\"http://code.jquery.com/jquery.js\"></script>");
                                
                                client.println("</body>");
                                client.println("</html>"); // FIN DU HTML
                                
                               
                                delay(500); // delai pour les infos
                                client.stop(); //on déconnecte le client.
                                Serial.println("Fin de communication avec le client");
                   }
        }      
}

Et enfin le résultat sur la page web :

Voilà j’espère que quelqu’un auras une solution !

Bonjour,
Voici un code html avec fonctions javascript pour mettre à jour la date et l’heure dans un champ de formulaire ou entre deux div.

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>
Exercice affiche date et heure en javascript avec refresh de la valeur
</title>
<script language="JavaScript">
var mois = ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "aout", "septembre", "octobre", "novembre", "decembre"];
function affichTime()
{
	var d = new Date();
	
	// affiche dans un input de formulaire
	document.form1.heures.value=d.getDate()+" "+mois[d.getMonth()]+" "+d.getFullYear()+" - "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
	
	// affiche entre 2 div
	document.getElementById("affiche_date_heure").innerHTML = d.getDate()+" "+mois[d.getMonth()]+" "+d.getFullYear()+" - "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
	
	compte=setTimeout('affichTime()',1000); // refresh 1 fois/seconde
}
</script>
</head>
<body>
<center>
<form name="form1">
<input type="text" name="heures" value="">
</form>
<div id="affiche_date_heure"></div>
</center>
<script language="JavaScript">
affichTime();
</script>
</body>
</html>

Il suffit à mon avis d’insérer la valeur de la température et du % d’humidité dans des variables au niveau de la fonction affichTime() et de définir 2 autres div ou 2 autres champs de formulaire pour afficher dans la page html.

Bonjour

Sur le principe : ta page web doit contenir du javascript qui va retourner interroger ton serveur à intervalles réguliers pour récupérer les nouvelles valeurs et les rafraichir, sans reconstuire toute la page.

Ce qui veut dire aussi que ton code côté serveur arduino doit prévoir les deux types de sollicitation (page html complète ou données seules en format json de préférence).

Renseigne toi sur AJAX, tu trouveras des tonnes d'infos sur le net.
Ce n'est pas très compliqué mais très instructif.

Dans les exemples disponibles dans l'IDE tu as une démo d'un serveur qui lit les entrées analogiques et sert une page qui se rafraîchit toutes les 5 secondes.
Fichier --> Exemples --> Ethernet --> WebServer

aladec:
Bonjour,
Voici un code html avec fonctions javascript pour mettre à jour la date et l’heure dans un champ de formulaire ou entre deux div.

<html>
Exercice affiche date et heure en javascript avec refresh de la valeur

> ``` > > > > Il suffit à mon avis d'insérer la valeur de la température et du % d'humidité dans des variables au niveau de la fonction affichTime() et de définir 2 autres div ou 2 autres champs de formulaire pour afficher dans la page html.

J’ai essayer de faire ce que tu m’a dit mais quand je modifie la valeur de température, la div ne se refresh pas sur la page. :confused:

bricoleau:
Bonjour

Sur le principe : ta page web doit contenir du javascript qui va retourner interroger ton serveur à intervalles réguliers pour récupérer les nouvelles valeurs et les rafraichir, sans reconstuire toute la page.

Ce qui veut dire aussi que ton code côté serveur arduino doit prévoir les deux types de sollicitation (page html complète ou données seules en format json de préférence).

Renseigne toi sur AJAX, tu trouveras des tonnes d'infos sur le net.
Ce n'est pas très compliqué mais très instructif.

J'avais déjà essayé de me plonger sur l'Ajax seulement j'avait vite due changer de solution car Ajax utilise du php pour fonctionner seulement l'arduino n'est pas compatible avec php.

euhh non ajax n'a aucun rapport avec le php...

ajax c'est pour nettoyer la cuisine

ajax c'est seulement du javascript.....

tu as un exemple ici

entre javascript et ardiuno

https://startingelectronics.org/tutorials/arduino/ethernet-shield-web-server-tutorial/web-server-read-switch-automatically-using-AJAX/

fdufnews:
Dans les exemples disponibles dans l'IDE tu as une démo d'un serveur qui lit les entrées analogiques et sert une page qui se rafraîchit toutes les 5 secondes.
Fichier --> Exemples --> Ethernet --> WebServer

Oui c'est l'exemple que j'ai utilisé pour lancer le serveur web via mon shield ethernet seulement ce script produit une page dite statique qui se refresh toutes les x secondes et moi je voudrais passer à une page dynamique afin de ne rafraîchir que mes données de température et d'humidité sans rafraîchir toutes la pages.

hazerty565:
euhh non ajax n’a aucun rapport avec le php…

ajax c’est pour nettoyer la cuisine

ajax c’est seulement du javascript…

Ah autant pour moi alors, j’ai tendance à me perdre avec tout ces langages ^^" , je vais allez voir ton exemple !

Merci pour ton exemple j'arrive enfin à afficher ma température dynamiquement ! :slight_smile:

J’ai essayer de faire ce que tu m’a dit mais quand je modifie la valeur de température, la div ne se refresh pas sur la page. :confused:

Même quand la nouvelle valeur de la température est prise dans la fonction afficheTime() ?

Salut

Sou63, peux tu stp donner ton code qui fonctionne ?

Merci d'avance

sancho119:
Salut

Sou63, peux tu stp donner ton code qui fonctionne ?

Merci d’avance

Oui pas de problème, je te donne la première version de mon code car je n’ai toujours pas finit la version finale, il permet d’afficher la température sur une page web très simple :

/*--------------------------------
Programme mis en place par Quentin
dans le cadre du stage de BTS à l'Institut Pascal.

Ce programme s'utilise avec un shield ethernet, il permet
d'afficher des valeurs en continue sur une page Web 
dynamique.

Dans ce programme la Fonction F() dans les prints
permet d'économiser de la mémoire vive. 
---------------------------------*/

#include <SPI.h>
#include <Ethernet.h>

byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED }; // Adresse mac du shield 
IPAddress ip(172, 27, 11, 254); // Adresse Ip ( à changer en fonction de son réseaux )
EthernetServer server(80);  // ici on créer un serveur sur le port 80


String HTTP_req;            // on store la requete HTTP


void setup()
{
Serial.begin(9600);       // on démarre la liaison série a 9600 Bps

Serial.print(F("Parametrage avec ip fixe... : "));
   Serial.println(ip);
   delay(1000);
   // on paramètre la carte en IP FIXE 

  
    Ethernet.begin(mac, ip);  // Initialisation du shield Ethernet 
    Serial.println(F("Init..."));
    delay(1000); 
 
    server.begin();           // On démarre le serveur
    Serial.println(F("Serveur Prêt !"));
    delay(1000);
  
}

void loop()
{
    EthernetClient client = server.available();  // On essaye d'avoir des clients

    if (client) {  // Si un client est disponible
        boolean currentLineIsBlank = true;
        while (client.connected()) {     //  et qu'il est connecté
            if (client.available())     // et qu'il envoie des données
                      {  
                char c = client.read();  // lire 1 byte (character) du client
                HTTP_req += c;      // on sauvegarde les requette HTTP 1 char à la fois
                // la dernière ligne de la requette client est blanche et finit par \n
                // On repond au client seulement quand la dernière ligne est recue
                if (c == '\n' && currentLineIsBlank) {
                  
                    // envoyer un en-tête de réponse http standard
                    client.println(F("HTTP/1.1 200 OK"));
                    client.println(F("Content-Type: text/html"));
                    client.println(F("Connection: keep-alive"));
                    client.println(); // ligne indispensable
                     
                    // Requette AJAX pour les états 
                    if (HTTP_req.indexOf("ajax_analog") > -1) {
                        // lit l'état de l'entrée analogique 
                        GetAjaxData(client);
                    }
                    else {  // requette HTTP pour la page WEB
                        // envoie la page WEB - contient le JavaScrypt avec les appels AJAX
                        client.println(F("<!DOCTYPE HTML>"));
                        client.println(F("<html>"));
                        client.println(F("<head>"));
                        
                        client.println(F("<meta charset=\"utf-8\" />")); // encodage 
                        client.println(F("<title> MESURE D'UNE PIECE </title>"));
                        
                        client.println(F("<script>"));
                        client.println(F("function GetSwitchAnalogData() {"));
                        client.println(F("nocache = \"&nocache=\" + Math.random() * 1000000;"));
                        client.println(F("var request = new XMLHttpRequest();"));
                        client.println(F("request.onreadystatechange = function() {"));
                        client.println(F("if (this.readyState == 4) {"));
                        client.println(F("if (this.status == 200) {"));
                        client.println(F("if (this.responseText != null) {"));
                        client.println(F("document.getElementById(\"sw_an_data\").innerHTML = this.responseText;"));
                        client.println(F("}}}}"));
                        client.println(F("request.open(\"GET\", \"ajax_analog\" + nocache, true);"));
                        client.println(F("request.send(null);"));
                        client.println(F("setTimeout('GetSwitchAnalogData()', 1000);"));
                        client.println(F("}"));
                        client.println(F("</script>"));
                        
                        client.println(F("</head>"));
                        
                        client.println(F("<body onload=\"GetSwitchAnalogData()\">"));
                        client.println(F("<h1> Récupération des mesures de la pièces </h1>"));

                        client.println(F(" <h2> TEMPERATURE : <div id=\"sw_an_data\"></div> °C </h2>  "));
                                
                        client.println(F("</body>"));
                        client.println(F("</html>"));
                    }
                    
                    Serial.print(HTTP_req);    // Affiche les requette HTTP recue sur le port série
                    HTTP_req = "";            // finished with request, empty string
                    break;                    // sortir de la boucle
                }
                // toutes les lignes de textes recue par le client finissent par \r\n
                if (c  == '\n') {
                    // dernier caractère en ligne du texte reçu
                    // début de la nouvelle ligne avec le prochain caractère lu
                    currentLineIsBlank = true;
                } 
                else if (c != '\r') {
                    // un caractère de texte a été reçu du client
                    currentLineIsBlank = false;
                }
            } // end if (client.available())
        } // end while (client.connected())
        
        delay(1);      // On donne le temps au navigateur internet de recevoir les informations.
        client.stop(); // On ferme la connection
    } // end if (client)
}

// Envoie l'état de l'analogique au serveur web 
void GetAjaxData(EthernetClient cl)
{
    float temp;  
    
    temp = analogRead(0)*5/1024.0; // on lit le pin Analog 2 
    temp = temp -0.5; // Calibrage de la température à 0°C car à 0°C le capteur délivre 500mV
    temp = temp/0.01; // 10mV par °C 

    cl.print(temp); // écrit la valeur de l'analog sur la div

}

aladec:
Même quand la nouvelle valeur de la température est prise dans la fonction afficheTime() ?

Oui cette méthode n'a pas fonctionné :confused: mais du coup je suis passé au requete AJAX et c'est bon :slight_smile:

Bonjour

Si tu veux faire plus propre au niveau arduino, je te conseille de retourner une réponse au format json pour les sollicitations ajax.
Cela permet de retourner plusieurs valeurs simultanément (par ex : température + humidité + date/heure).
C'est aussi plus standard donc plus facile à intégrer.

Par ailleurs, tu n'es pas obligé d'utiliser l'arduino comme serveur de la page html.
Celle-ci pourrait être statique (un simple fichier html posé sur ton PC) avec du js qui interroge l'arduino.

Imagine que tu aies plusieurs capteurs de température similaires chez toi.
Tu voudras probablement afficher toutes les températures sur une seule page, au lieu d'avoir un serveur html par capteur.

L'étape d'après, c'est de monter un serveur web centralisé (par ex sur un raspberry pi) et des échanges de données avec tous les capteurs présents sur le réseau local. Avec une base de données pour sauvegarder tous les relevés et générer les courbes d'historiques.

Bref plein de bidouilles instructives en perspective :slight_smile:

Salut Bricoleau

Tu aurais un exemple d'un projet de ce type?

J'essaie de faire quelque chose de similaire (voir mon post sur un programmateur d'arrosage), mais je bloque sur la communication entre ma page html et mon arduino.

Oui cette méthode n'a pas fonctionné :confused: mais du coup je suis passé au requete AJAX et c'est bon

Ok, l'exemple que j'avais fournis ne travaille que du côté client (l'heure s'actualise au niveau du navigateur du client). Pour la température, il faut questionner le serveur (communication serveur/client par requête Ajax).

Pour un projet de thermostat commandé via Internet, j'ai travaillé avec un Arduino Yun qui offre la possibilité de travailler avec un système Linux embarqué (avec serveur web et php). La communication entre la partie Linux et la partie Arduino s'effectue avec un Bridge (Pont), les données peuvent s'échanger par une architecture REST (facile à programmer).
L'Arduino Yun existe maintenant en REV2 à un prix qui devient intéressant (à examiner).