Affichage Page Web

Bonjour j’ai un problème j’aimerai que mon site web s’affiche correctement j’ai donc fait une boucle pour faire appel a toutes les images .htm. Mais le problème est que ma boucle prends en compte uniquement la page index.htm, le style.css et l’image de fond (fond.png). Est ce que vous savez pourquoi mes autres images et page ne s’affiche pas merci.

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

// MAC address from Ethernet shield sticker under board
byte mac[] = { 0x90, 0xA2, 0xDA, 0x0F, 0x1F, 0xED };
IPAddress ip(169, 254, 73, 50); // IP address, may need to change depending on network
EthernetServer server(80);  // create a server at port 80

File webFile;

String HTTP_req = "";     // stores the received HTTP request

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("index.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
                HTTP_req += c;          // save HTTP request character
                // print HTTP request character to serial monitor
                Serial.print(c);
                // last line of client request is blank and ends with \n
                // respond to client only after last line received
                if (c == '\n' && currentLineIsBlank) {
                    // send web page
                    if ((HTTP_req.indexOf("GET / ") > -1) ||
                                   (HTTP_req.indexOf("GET /index.htm") > -1)) {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connnection: close");
                        client.println();
                        webFile = SD.open("index.htm");        // open web page file
                    }
                    else if (HTTP_req.indexOf("GET /style.css") > -1) {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connnection: close");
                        client.println();
                        webFile = SD.open("style.css");        // open web page file
                    }
                    else if (HTTP_req.indexOf("GET /en_index.htm") > -1) {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connnection: close");
                        client.println();
                        webFile = SD.open("en_index.htm");        // open web page file
                    }
                     else if (HTTP_req.indexOf("GET /en_style.css") > -1) {
                        client.println("HTTP/1.1 200 OK");
                        client.println("Content-Type: text/html");
                        client.println("Connnection: close");
                        client.println();
                        webFile = SD.open("en_style.css");        // open web page file
                    }
                    else if (HTTP_req.indexOf("GET /fond.png") > -1) {
                        webFile = SD.open("fond.png");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println();
                        }
                    }
                     else if (HTTP_req.indexOf("GET /logo.png") > -1) {
                        webFile = SD.open("logo.png");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println();
                        }
                    }
                    else if (HTTP_req.indexOf("GET /en.png") > -1) {
                        webFile = SD.open("en.png");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println();
                        }
                    }
                    else if (HTTP_req.indexOf("GET /fr.png") > -1) {
                        webFile = SD.open("fr.png");
                        if (webFile) {
                            client.println("HTTP/1.1 200 OK");
                            client.println();
                        }
                    }
                    
                    if (webFile) {
                        while(webFile.available()) {
                            client.write(webFile.read()); // send web page to client
                        }
                        webFile.close();
                    }
                    HTTP_req = "";  // empty the string
                    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’ai mis toutes les images de mon site sur une seul image (fond.png). Maintenant j’ai réussi a afficher mes valeurs dans le index.htm mais le problème que j’ai c’est que je n’arrive pas a placer c’est valeur a l’endroit ou je veux.

J’ai essayé d’utiliser du PHP avec <?php echo $fTemperature; ?> mais rien ne s’affiche

Mise à Jours

J’ai mis ma température dans

                             client.print("<h4>");                        
                             client.print(" Temperature: ");
                             client.print(weatherData.fTemperature);
                             client.print("C (");
                             client.print(weatherData.shTemperature);
                             client.print(")");
                             client.print("</h4>");

J’ai essayé de modifier dans le css

h4 {
	font-size:20px;
	position:absolute;
	color:#5c5f61;
        left: 380px; 
	top: -50px; */
         }

Mais ma valeur ne change pas de position mais change de couleur et de taille.

Bonjour,

En HTML tu ne donnes pas des coordonnées …
Tu fait ta page suivant une logique “en arbre” (le HTML) et des proportions par rapport à la largeur/hauteur de l’écran (dans le CSS).

Voir :
http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3/le-positionnement-en-css

Oui c’est ce que j’ai fait, j’ai mis en place le header, le body ainsi que le founder, avec dans ces parties des blocks (

). Mais je n’arrive pas a transmettre a mon code qui est sur la carte Arduino d’afficher ma valeur à un endroit précis sur le Site Web. Enfaite je souhaite rajouter une ligne dans mon code html qui est hébergé sur ma carte SD via mon programme arduino.

Le plus simple c'est d'utiliser une librairie pour gérer le protocole HTTP et de faire de l'ajax (en javascript) pour ajouter les info côté client.

Exemple : https://github.com/sirleech/Webduino/blob/master/examples/Web_Demo/Web_Demo.ino