Affichage données arduino sur page web
Résolu/Fermé
SyGMaTixX254
Messages postés
58
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
18 octobre 2022
-
10 juin 2017 à 12:54
pp - 11 avril 2018 à 14:34
pp - 11 avril 2018 à 14:34
A voir également:
- Arduino web page
- Supprimer une page word - Guide
- Traduire une page web - Guide
- Instagram web - Guide
- Page d'accueil iphone - Guide
- Capture page web - Guide
9 réponses
yg_be
Messages postés
22720
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 avril 2024
1 476
10 juin 2017 à 18:59
10 juin 2017 à 18:59
suggestion, adaptation de https://www.arduino.cc/en/Tutorial/LibraryExamples/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");
}
}
SyGMaTixX254
Messages postés
58
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
18 octobre 2022
5
10 juin 2017 à 19:45
10 juin 2017 à 19:45
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:
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 ^^
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
Messages postés
22720
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 avril 2024
1 476
10 juin 2017 à 20:41
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.
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.
SyGMaTixX254
Messages postés
58
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
18 octobre 2022
5
Modifié le 10 juin 2017 à 17:02
Modifié le 10 juin 2017 à 17:02
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"
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"
SyGMaTixX254
Messages postés
58
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
18 octobre 2022
5
10 juin 2017 à 23:48
10 juin 2017 à 23:48
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.
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.
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
Messages postés
22720
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 avril 2024
1 476
11 juin 2017 à 00:58
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
exemples: http://b.kostrzewa.free.fr/javascript/td-depart/affiche_date.html
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
yg_be
Messages postés
22720
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 avril 2024
1 476
10 juin 2017 à 13:49
10 juin 2017 à 13:49
bonjour, ceci va peut-être t'inspirer:
https://www.arduino.cc/en/Tutorial/LibraryExamples/WebServer/
https://www.arduino.cc/en/Tutorial/LibraryExamples/WebServer/
SyGMaTixX254
Messages postés
58
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
18 octobre 2022
5
10 juin 2017 à 14:56
10 juin 2017 à 14:56
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
Je veux savoir comment afficher les données acquises par le capteur branché à l'arduino sur le page Web du serveur Arduino
yg_be
Messages postés
22720
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 avril 2024
1 476
10 juin 2017 à 15:55
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?
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?
yg_be
Messages postés
22720
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 avril 2024
1 476
10 juin 2017 à 16:02
10 juin 2017 à 16:02
yg_be
Messages postés
22720
Date d'inscription
lundi 9 juin 2008
Statut
Contributeur
Dernière intervention
23 avril 2024
1 476
10 juin 2017 à 16:06
10 juin 2017 à 16:06
peux-tu partager le code des 2 programmes que tu souhaites lier?
je pense que tes recherches t'ont induit en erreur.
je pense que tes recherches t'ont induit en erreur.
SyGMaTixX254
Messages postés
58
Date d'inscription
mercredi 9 juillet 2014
Statut
Membre
Dernière intervention
18 octobre 2022
5
11 juin 2017 à 13:49
11 juin 2017 à 13:49
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
Merci encore de ton aide :D
