Shield Ethernet HTML image

Bonjour à tous,

J’utilise un shield Ethernet pour actionner une LED à distance. J’aimerais perfectionner mon code HTML afin de rendre l’interface plus professionnelle. Je souhaiterais y ajouter une image stockée sur la carte SD ainsi que de changer le lien “change” par un bouton poussoir. Une idée de comment je peux procéder ? :slight_smile: Merci !!

Voici mon code ;

#include <SPI.h> //bibliothèqe pour SPI

#include <Ethernet2.h> //bibliothèque pour Ethernet

byte mac = {0x90, 0xA2, 0xDA, 0x0F, 0xDF, 0xAB}; //adresse mac de votre carte

//byte ip = {192, 168, 1, 123}; //adresse IP
byte ip = {139, 165, 27, 64}; //adresse IP

int pinRelais = 7; //variable de pin pour le Relais

boolean etatRelais = 0; //etat du pin

EthernetServer serveur(80); // déclare l’objet serveur au port d’écoute 80

void setup() {

pinMode(pinRelais, OUTPUT); //pin en mode OUTPUT

Serial.begin (9600); //initialisation de communication série

Ethernet.begin (mac, ip); //initialisation de la communication Ethernet

Serial.print("*\n-> Le serveur est sur l’adresse : ");

Serial.println(Ethernet.localIP()); //on affiche l’adresse IP de la connexion

serveur.begin(); // démarre l’écoute

}

void loop() {

gestionClient(); // fonction qui gère toute la communication avec le client

}

//----------------------Fonctions----------------------

//fonction qui gère la communication avec le client

void gestionClient() {

EthernetClient client = serveur.available(); //on écoute le port

if (client) { //si client existe

Serial.println(“Client en ligne”); //on le dit…

if (client.connected()) { // si le client est connecté

GET(client); //appel de la fonction de décodage

//réponse au client

entete(client); // fonction pour l’entête de la page HTML

corps(client); // fonction pour le corps

piedPage(client); // fonction pour le pied de page

Serial.println(“Fin de communication avec le client\n”);

client.stop(); //on déconnecte le client

}

}

}

//fonction de fabrication de l’entête HTML

void entete(EthernetClient cl) {

//infos pour le navigateur

cl.println(“HTTP/1.1 200 OK”); // type du HTML

cl.println(“Content-Type: text/html; charset=ascii”); //type de fichier et encodage des caractères

cl.println(“Connection: close”); // fermeture de la connexion quand toute la réponse sera envoyée

cl.println();

//balises d’entête

cl.println("");

cl.println("");

cl.println(“Relais”);

cl.println("

Relais P. DENEYE mars 2017



");

}

//fonction de fabrication du corps de page

void corps(EthernetClient cl) {

cl.println("
"); // saut de ligne

cl.print("
Relais ");

if (etatRelais) { //si état sur 1

cl.print("ON "); // on l’écrit

}

else { // sinon

cl.print("OFF "); //on l’écrit aussi :wink:

}

cl.print(" <a href=?"); //création du lien inutile de répéter l’adresse du site

cl.print(‘c’); //code à recevoir

cl.println(" target=_self >Change
");

}

//fonction de fabrication du pied de page

void piedPage(EthernetClient cl) {

//balises de pied de page

cl.println("


");

cl.println("");

cl.println("");

}

//fonction décodage GET

void GET(EthernetClient cl) {

boolean lu = 0; //variable pour indiquer l’état de lecture

while (cl.available()) { // tant qu’il a des infos à transmettre

char c = cl.read(); // on lit le caractère

delay(1); //delai de lecture

if (c == ‘?’ && lu == 0) { //si “?” repéré

c = cl.read(); //on lit le caractère suivant qui contient la donnée

if (c == ‘c’) { //si code reçu

etatRelais = !etatRelais; //on change l’état du relais

digitalWrite(pinRelais, etatRelais); //on met à jour le pin

Serial.println(etatRelais);

}

delay(10);

lu = 1; // on dit qu’on a lu l’info

}

}

}

bonjour,
une idée?
oui LIRE ICI BALISE CODE

Merci effectivement de corriger votre post

Avez vous joué avec une carte SD sur arduino? (Lire Le contenu d'un fichier)
Avez vous lu un peu comment fonctionne le HTML ? Comment une image arrive sur l'affichage?
Avez vous compris comment traiter une requête HTTP sur votre arduino (et les différentier)?

Une fois que ces 3 éléments seront compris, la réponse est assez simple