2016-11-21 2 views
0

J'utilise un ESP8266 et c'est la partie HTML du programme. Je copie et colle des profondeurs d'Internet et veux changer la page HTML du dossier. Dans quel format puis-je ajouter du code html? Merci! (J'essayais de mettre un champ de saisie de texte, mais je veux mettre beaucoup d'éléments HTML plus tard).ESP8266 code de page html intégré dans le fichier .ino

const String HtmlHtml = "<html><head>" 
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /></head>";` 
const String HtmlHtmlClose = "</html>"; 
const String HtmlTitle = "<h1>Arduino-er: ESP8266 AP WebServer exercise</h1><br/>\n"; 
const String HtmlLedStateLow = "<big>LED is now <b>ON</b></big><br/>\n"; 
const String HtmlLedStateHigh = "<big>LED is now <b>OFF</b></big><br/>\n"; 
const String HtmlButtons = 
"<a href=\"LEDOn\"><button style=\"display: block; width: 100%;\">ON</button></a><br/>" 
"<a href=\"LEDOff\"><button style=\"display: block; width: 100%;\">OFF</button></a><br/>"; 
+0

vous voulez écrire toutes ces chaînes dans le fichier cible. '' n'est pas une première ligne valide dans une page Web HTML. Le bloc '' se termine en bas de la page Web, et non 'habituellement' immédiatement après la fin du bloc ''. Il y a un certain nombre d'autres choses qui sont nécessaires dans le bloc '' en plus de ce qui est posté. Il manque le code "" dans le code qui contient les références . Proposer d'écrire la page HTML souhaitée, puis insérer toutes les instructions nécessaires pour l'enregistrer dans un fichier -ou l'afficher dans un navigateur Web. – user3629249

Répondre

0

Je suppose que vous avez plus tard une partie où vous combinez vos variables et en faites une grande que vous utilisez pour rediffuser html. Vous pouvez faire quelque chose comme ça.

-Ouvrir votre éditeur et copier/coller le code de votre poste

-Edit comme vous voulez

les variables -Supprimer dans le code que vous Affichée et remplacer par un, par exemple

const String wholePage = "INSERT YOUR HTML"; 

-Et que sur la ligne où vous avez ajouté des variables avant d'utiliser votre nouveau code HTML complet

Espérons que ça aide! :)

+0

merci ça rend waaaayyy plus de sens maintenant! Y at-il un moyen que je peux prendre l'information entrée dans un champ de texte

dans le HTML et l'enregistrer dans eeprom et l'amener sur la page Web en entrant un mot de passe dans le même champ de texte? –

1

Vous pouvez diffuser un fichier HTML à partir de SPIFFS. Voici un example:

Vous devez obtenir streamFile() fonction comme indiqué ci-dessous:

String contentType = "text/html"; 
    if(SPIFFS.exists(path)){ 
    File file = SPIFFS.open(path, "r"); 
    size_t sent = server.streamFile(file, contentType); 
    file.close(); 
    return true; 
    } 
+0

puis-je enregistrer les informations saisies dans un à eeprom et avoir un moyen de le voir plus tard –

+0

Cet exemple illustre la manière de servir le fichier, il vous aidera à avoir des fichiers html lisibles. Si vous souhaitez enregistrer la requête qui est reçue sur votre serveur via cette page, vous pouvez bien sûr l'enregistrer dans un autre fichier. Pour ce faire, vous pouvez suivre le [guide] (https://github.com/esp8266/Arduino/blob/master/doc/filesystem.md). – cagdas

+0

est-il un moyen que je peux utiliser SPIFFS.open (chemin, mode) à la place de responseHTML dans ce code snippit: dnsServer.start (DNS_PORT, "*", apIP); // rejouer toutes les demandes avec le même code HTML webServer.onNotFound ([]() { webServer.send (200, "text/html", responseHTML); }); serveur Web.commencer(); } –

0

Vous voudrez peut-être envisager de le nettoyer pour utiliser une syntaxe multi-ligne non échappée:

void handleAbout() { 
    const char* message = R"foo(
    <!doctype html> 
    <html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>test</title> 
    <link rel=stylesheet type=text/css href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' /> 
    </head><body class=container> 
    <h1>testing</h1> 
    <main> 
    <h3>Status</h3> 
     <ul> 
     <li>Mode: <b>[[MODE]]</b> 
     <li><a href=/reset >reboot device</a> 
     </ul> 
    </main> 
    </body> 
    </html> 
    )foo"; 

    String message2= String(message); 
    // templating replaces string-concat functionality: 
    message2.replace("[[MODE]]", String(inputMode)); 
    // prove it's a usable String to the esp: 
    server.send(200, "text/html", message2); 
} // end about section handler 

Vous pouvez également utiliser n'importe quel encodeur texte-à-json en ligne pour créer des littéraux de chaîne à échappement C-friendly à partir de texte arbitraire. ex: my slim's "JSON.stringify" transformation du moteur ...