Signaler

Affichage données arduino sur page web [Résolu]

Posez votre question SyGMaTixX254 55Messages postés mercredi 9 juillet 2014Date d'inscription 13 septembre 2017 Dernière intervention - Dernière réponse le 11 juin 2017 à 13:49 par SyGMaTixX254
Bonjour,

Je cherche à afficher les données d'un capteur BMP085 d'un arduino sur une page Web.

J'utilise un Serveur Web Arduino (avec un Ethernet Shield) connecté à mon ordinateur.
J'ai créé un programme pour le BMP085 qui est fonctionnel ! J'ai des résultats dans le moniteur série du logiciel Arduino.
J'arrive à afficher une page Web depuis la carte SD du shield Arduino sur mon navigateur mais je ne sais pas comment lié les 2 programmes !

Apres des recherches, j'ai cru comprendre qu'il fallait créer une fonction dans le programme arduino et un script dans le code HTML.
Il faut insérer des requêtes GET dans le script du code HTML afin de récupérer les valeurs du capteur mais je ne sais pas du tout comment le faire.

Pour résumer :
Je veux que les informations acquises par mon capteur BMP085 soit affichées sur une page Web se trouvant sur la carte SD du shield Arduino.
(Pour être plus clair : Actuellement ma page sur la carte SD est juste une interface avec des champs vides, et je veux que ces champs soient remplis par les valeurs acquises par le capteur quand j'ouvre la page sur mon navigateur)

Est-ce que quelqu'un connaissant le code Arduino et HTML à créer pourrait m'aider pour mon projet :)

Merci d'avance.
Utile
+0
plus moins
bonjour, ceci va peut-être t'inspirer:
https://www.arduino.cc/en/Tutorial/WebServer
Donnez votre avis
Utile
+0
plus moins
J'arrive à créer le Serveur Web ! Ce tuto explique comme lancer le serveur mais ce n'est pas ma question.
Je veux savoir comment afficher les données acquises par le capteur branché à l'arduino sur le page Web du serveur Arduino
yg_be 3536Messages postés lundi 9 juin 2008Date d'inscription ContributeurStatut 14 octobre 2017 Dernière intervention - 10 juin 2017 à 15:55
je pense que le tuto explique comment réaliser un serveur web qui affiche les données acquises par un capteur:
Dans cet exemple, vous utiliserez votre Ethernet Shield et votre carte Arduino ou Genuino pour créer un serveur Web simple. En utilisant la bibliothèque Ethernet, votre appareil pourra répondre à une requête HTTP avec votre Ethernet Shield. Après avoir ouvert un navigateur et navigué vers l'adresse IP de votre écran Ethernet, votre Arduino répondra avec suffisamment de HTML pour qu'un navigateur affiche les valeurs d'entrée des six broches analogiques.
n'est-ce pas ce que tu veux réaliser?
Répondre
Donnez votre avis
Utile
+0
plus moins
ici, un autre tuto:
https://startingelectronics.org/tutorials/arduino/ethernet-shield-web-server-tutorial/
Donnez votre avis
Utile
+0
plus moins
peux-tu partager le code des 2 programmes que tu souhaites lier?
je pense que tes recherches t'ont induit en erreur.
Donnez votre avis
Utile
+0
plus moins
D'après ce que j'ai compris il faut écrire un script dans le code HTML afin d'afficher la valeur du capteur.

Mon programme Arduino pour le capteur est celui ci, il marche et j'ai les résultats sur le moniteur série :

#include <Wire.h>
#include <Adafruit_BMP085.h>

Adafruit_BMP085 bmp;

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

void loop() {
Serial.print("Temperature = ");
Serial.print(bmp.readTemperature());
Serial.println(" *C");

Serial.print("Pressure = ");
Serial.print(bmp.readPressure());
Serial.println(" Pa");

Serial.println();
delay(500);
}

Mon programme pour afficher une page Web présente sur la carte SD du shield Ethernet, qui marche également aussi :

#include <Ethernet.h>
#include <EthernetClient.h>
#include <EthernetServer.h>
#include <EthernetUdp.h>
#include <Time.h>
#include <TimeLib.h>
#include <SPI.h>
#include <SD.h>

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xXX, 0xXX, 0xXX, 0xXX, 0xXX, 0xXX };
IPAddress ip(172, 16, 20, 2); //
EthernetServer server(80); // create a server at port 80

File webFile;

void setup()
{
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
Serial.begin(9600); // for debugging

// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("controle.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
}

void loop()
{
EthernetClient client = server.available(); // try to get client

if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
// last line of client request is blank and ends with \n
// respond to client only after last line received
if (c == '\n' && currentLineIsBlank) {
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
// send web page
webFile = SD.open("controle.htm"); // open web page file
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
webFile.close();
}
break;
}
// every line of text received from the client ends with \r\n
if (c == '\n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != '\r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)

J'arrive à afficher cette page quand je tape l'adresse IP de mon Arduino dans mon navigateur :


Ce que je cherche c'est d'afficher les valeurs acquises par le capteur sur le page Web à coté de "Température"
Donnez votre avis
Utile
+0
plus moins
suggestion, adaptation de https://www.arduino.cc/en/Tutorial/WebServer:
/*
  Web Server

 A simple web server that shows the value of the analog input pins.
 using an Arduino Wiznet Ethernet shield.

 Circuit:
 * Ethernet shield attached to pins 10, 11, 12, 13
 * Analog inputs attached to pins A0 through A5 (optional)

 created 18 Dec 2009
 by David A. Mellis
 modified 9 Apr 2012
 by Tom Igoe
 modified 02 Sept 2015
 by Arturo Guadalupi
  ...modified again...

 */

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

// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
};
IPAddress ip(172, 16, 20, 2);

Adafruit_BMP085 bmp;

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);

void setup() {
  // Open serial communications and wait for port to open:
  Serial.begin(9600);
  bmp.begin(); 
  }


  // start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}


void loop() {
  // listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        Serial.write(c);
        // if you've gotten to the end of the line (received a newline
        // character) and the line is blank, the http request has ended,
        // so you can send a reply
        if (c == '\n' && currentLineIsBlank) {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type: text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
          // client.println("Refresh: 5");  // refresh the page automatically every 5 sec
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html>");
	client.print("Temperature = "); 
	client.print(bmp.readTemperature()); 
	client.print(" *C"); 
	client.println("<br />");
	client.print("Pressure = "); 
	client.print(bmp.readPressure()); 
	client.print(" Pa"); 

            client.println("<br />");
     
          client.println("</html>");
          break;
        }
        if (c == '\n') {
          // you're starting a new line
          currentLineIsBlank = true;
        } else if (c != '\r') {
          // you've gotten a character on the current line
          currentLineIsBlank = false;
        }
      }
    }
    // give the web browser time to receive the data
    delay(1);
    // close the connection:
    client.stop();
    Serial.println("client disconnected");
  }
}
Donnez votre avis
Utile
+0
plus moins
Merci beaucoup de ta réponse. Le code marche et affiche bien la valeur du capteur, mais néanmoins je n'ai pas résolu le problème de la page sur la carte SD.
Le projet complet est composé de plusieurs pages HTML stockés sur une carte SD qui affichent différentes données et qui servent d'interface de contrôle.

Je voudrais que ce soient ces pages HTML qui affichent la valeur (comme montré dans mon message précédent).
J'ai vu qu'il fallait insérer une fonction dans le code HTML ainsi que dans le code Arduino.
Le tutoriel expliquant cela :
https://startingelectronics.org/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-AJAX-web-server/

Je n'arrive pas à adapter cette exemple à mon projet. Je ne sais pas comment utiliser les fonctions avec mon capteur BMP085.
Voici le code de ma page HTML:
<html>

	<head>
		<meta charset="UTF-8" />
		<title>Contrôle</title>
		<h1>Contrôle de la serre</h1>

		<script>
			function afficherDonnees()
			{
				var request = new XMLHttpRequest();
				request.onreadystatechange = function(){
					if (this.temperature > 25){
					request.open();
					}
				}
				request.send();
			}
		</script>

	</head>

	<body onload="afficherDonnees()">
		<div class="date">
			<ul>Date : JJ/MM/AAAA</ul>
			<ul>Il est "heure:minutes"</ul>
		</div>
		<div class="infos">
			<ul>Température :  °C </ul>
			<ul>Luminosité :   </ul>
			<ul>Humidité:    %</ul>

		</div>
		<div class="controle">
		    <ul><form>Contrôle de la température : <input type="range" min="0" max="100" step="5"></ul>
			<ul><form>Contrôle de la lumière : <input type="range" name="Luminosité" min="0" max="10"></ul>
			<ul><form>Contrôle de l'arosage : <input type="range" name="Humidité" min="0" max="10"></ul>
		</div>
		<div id="mode">
		<ul>Sélection du mode : <input type="radio" name="auto" value="Mode manuel"><input type="radio" value="Mode automatique"></ul>
		<ul><a href="Mode manu.htm" rel="nofollow noopener noreferrer" target="_blank">Configuration mode manuelle</a></ul>
		</div>

	</body>

</html>


Je te remercie pour ton aide que tu m'as déjà apporté et pas grave si tu n'en sais pas plus, j'en demande déjà beaucoup ^^
yg_be 3536Messages postés lundi 9 juin 2008Date d'inscription ContributeurStatut 14 octobre 2017 Dernière intervention - 10 juin 2017 à 20:41
si tu veux réellement faire comme tu le décris, je te suggère de partir du tuto que tu as mentionné en #8, et de modifier petit à petit pour arriver à ce que tu veux.
j'essaierais, pour commencer, de modifier uniquement le code du "Arduino sketch", en t'inspirant des adaptations que j'ai fait pour ma suggestion en #7, surtout les lignes 80 à 86.
ensuite, j'adapterais le code de la "Web Page", pour me rapprocher de ce que tu cherches.
cela va te permettre de développer tes compétences en HTML et en Ajax.
Répondre
Donnez votre avis
Utile
+0
plus moins
J'ai suivi tes conseils et essayé d'adapter petit à petit le code du tutoriel. J'ai un peu galéré car je devais afficher plusieurs valeurs du même capteur et donc de la meme fonction du code arduino mais en magouillant un peu et en ajoutant des balises HTML (des <br />) dans le code Arduino j'ai réussi à avoir l'affichage que je voulais.


Je voudrais juste savoir une dernière chose :
Est-ce que tu sais comment afficher l'heure et la date de mon ordinateur sur la page Web comme tu peux le voir sur le screenshot.
J'avais fait des recherches à ce sujet et j'avais trouvé une librarie Time.h qui se synchronise avec l'heure d'un serveur (mon PC) et j'avais commencé à écrire un bout de code mais je ne sais pas comment l'utiliser.
#include <Ethernet.h>
#include <EthernetClient.h>
#include <EthernetServer.h>
#include <EthernetUdp.h>
#include <Time.h>
#include <TimeLib.h>
#include <SPI.h>
#include <SD.h>

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0x9C, 0x5C, 0x8E, 0xDC, 0xCC, 0xE7 };
IPAddress ip(172, 16, 20, 2); // IP address, may need to change depending on network
IPAddress timeServer(172, 16, 20, 1);
EthernetServer server(80);  // create a server at port 80

File webFile;


Sais-tu quel code il faut utiliser pour implémenter ensuite dans le Sketch Arduino et le script dans le code HTML pour que l'arduino affiche l'heure de mon PC sur la page.

Encore merci pour ton aide.
yg_be 3536Messages postés lundi 9 juin 2008Date d'inscription ContributeurStatut 14 octobre 2017 Dernière intervention - 11 juin 2017 à 00:58
je te suggère d'ajouter dans ta page html des instructions qui ordonneront au navigateur d'afficher l'heure de l'ordi sur lequel tourne le navigateur. donc rien à faire dans le sketch arduino.
exemples: http://b.kostrzewa.free.fr/javascript/td-depart/affiche_date.html
Répondre
Donnez votre avis
Utile
+0
plus moins
C'est bon pour la date et l'heure :) J'essayerai peut-etre une fois d'essayer avec le TimeServer en programme Arduino mais pour l'instant ça marche et j'ai ce que je veux avec le script dans le code HTML.

Merci encore de ton aide :D
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !