Serveur d'impression

Zone de texte HTML pour envoyer du texte au serveur Web Arduino – Bien choisir son serveur d impression

Le 4 juillet 2019 - 11 minutes de lecture

Un bouclier Arduino et Ethernet sont utilisés en tant que serveur Web pour héberger une page Web contenant une zone de texte. Le texte peut être saisi dans la zone de texte de la page Web à l'aide d'un navigateur Web et envoyé à l'Arduino en cliquant sur un bouton de la page Web.

Un HTML textarea est utilisé dans un HTML forme pour créer la zone de texte. JavaScript est utilisé pour envoyer le texte à l'Arduino à l'aide d'une requête HTTP GET lorsque l'utilisateur clique sur le bouton de la page Web. Ceci est utile pour tout projet Arduino ayant besoin de recevoir du texte d'une page Web à l'aide d'une zone de texte.

Le code Arduino de ce projet suit le format du serveur Web Ajax I / O du didacticiel relatif au serveur Web du bouclier Arduino Ethernet, sauf qu'il appelle la fonction JavaScript qui envoie la demande GET lorsque le bouton de la page Web est cliqué plutôt que périodiquement. l'envoi de la requête GET au serveur Web Arduino.

La vidéo ci-dessous montre la page Web Arduino accessible par un navigateur Web et le texte envoyé à l'Arduino.

Configuration matérielle, logicielle et de page HTML pour Arduino

Matériel

Le bouclier Ethernet Arduino Uno et Arduino avec une carte micro SD de 2 Go a été utilisé pour tester le projet. La plupart des cartes Arduino compatibles avec le bouclier Ethernet devraient fonctionner.

Installer

Copiez le code HTML ci-dessous dans un fichier nommé index.htm sur la carte micro SD et insérez-la dans le connecteur de carte micro SD pour bouclier Ethernet. Chargez l'esquisse Arduino d'en bas sur l'Arduino. Commencez par modifier l'adresse MAC et IP de l'esquisse en fonction de votre propre réseau. Dans la fenêtre Arduino IDE Serial Monitor, définissez le débit en bauds au bas de la fenêtre sur 115200.

Lancer le projet

Une fois l’Arduino connecté au réseau Ethernet, ouvrez d’abord la fenêtre Serial Monitor, puis ouvrez un navigateur Web et naviguez jusqu’à l’adresse IP définie dans l’esquisse. Le texte peut être saisi dans la zone de texte de la page Web et envoyé à Arduino. Arduino affichera le texte dans la fenêtre Serial Monitor si la ligne de texte n’est pas trop longue (la longueur est définie par des matrices de mémoire tampon dans le code Arduino).

Croquis de zone de texte Arduino

La liste des croquis de la zone de texte Arduino appelée text_area est montré ci-dessous. Copiez-le et collez-le dans l'IDE Arduino.

/ * ---------------------------------------------------- --------------
    Programme: text_area

    Description: serveur Web Arduino qui récupère le texte d'un fichier HTML
                                zone de texte textarea sur la page Web hébergée.
                                La page Web est stockée sur la carte micro SD.
  
    Date: 23 juin 2015
 
    Auteur: W.A. Smith, http://startingelectronics.org
-------------------------------------------------- ------------ * /

#include <SPI.h>
#include <Ethernet.h>
#include <Dakota du Sud.h>
// taille de la mémoire tampon utilisée pour capturer les requêtes HTTP
#define REQ_BUF_SZ 90
// taille du tampon qui stocke la chaîne entrante
#define TXT_BUF_SZ 50

// adresse MAC de l'autocollant du bouclier Ethernet sous la carte
octet Mac[] = 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED;
Adresse IP    ip (192, 168, 0, 20);   // adresse IP, il peut être nécessaire de changer en fonction du réseau
EthernetServer    serveur (80);       // crée un serveur sur le port 80
Fichier webFile;                    // le fichier de page Web sur la carte SD
carboniser HTTP_req[REQ_BUF_SZ] = 0; // requête HTTP en mémoire tampon stockée sous forme de chaîne terminée par un caractère null
carboniser req_index = 0;              // index dans le tampon HTTP_req
carboniser txt_buf[TXT_BUF_SZ] = 0;  // tampon pour sauvegarder le texte

vide installer()

    // désactiver la puce Ethernet
    pinMode(dix, SORTIE)
    digitalWrite(dix, HAUTE)
    
    En série.commencer(115200);       // pour le débogage
    
    // initialise la carte SD
    En série.imprimer("Initialisation de la carte SD ...")
    si (!Dakota du Sud.commencer(4)) 
        En série.imprimer("ERREUR - L'initialisation de la carte SD a échoué!")
        revenir;    // l'initialisation a échoué
    
    En série.imprimer("SUCCESS - Carte SD initialisée.")
    // vérifier le fichier index.htm
    si (!Dakota du Sud.existe("index.htm")) 
        En série.imprimer("ERREUR - Impossible de trouver le fichier index.htm!")
        revenir;  // impossible de trouver le fichier d'index
    
    En série.imprimer("SUCCESS - Fichier index.htm trouvé.")
    
    Ethernet.commencer(mac, ip);  // initialise le périphérique Ethernet
    serveur.commencer();           // commence à écouter les clients


vide boucle()
{
    EthernetClient    client = serveur.disponible();  // essaie d'obtenir un client

    si (client) {  // client obtenu?
        booléen currentLineIsBlank = vrai;
        tandis que (client.connecté()) {
            si (client.disponible()) {   // données client disponibles à lire
                carboniser c = client.lis(); // lit 1 octet (caractère) du client
                // limite la taille de la requête HTTP reçue stockée
                // tampon la première partie de la requête HTTP dans un tableau HTTP_req (chaîne)
                // laisse le dernier élément du tableau sous la forme 0 à une chaîne de terminaison nulle (REQ_BUF_SZ - 1)
                si (req_index <(REQ_BUF_SZ - 1)) 
HTTP_req[req_index] = C;          // sauvegarde le caractère de requête HTTP
                    req_index ++;

                // la dernière ligne de la demande du client est vide et se termine par  n
                // répond au client seulement après la dernière ligne reçue
                si (c == ' n' && currentLineIsBlank) 
                    // envoie un en-tête de réponse http standard
                    client.imprimer("HTTP / 1.1 200 OK")
                    // le reste de l'en-tête suit ci-dessous, selon si
                    // une page Web ou une page XML est demandée
                    // demande Ajax - envoi d'un fichier XML
                    si (StrContains (HTTP_req, "ajax_inputs")) 
                        // envoie le reste de l'en-tête HTTP
                        client.imprimer("Content-Type: text / xml")
client.imprimer("Connexion: garder en vie")
client.imprimer();

                        // affiche le texte reçu dans la fenêtre Serial Monitor
                        // si reçu avec la chaîne HTTP GET entrante
                        si (GetText (txt_buf, TXT_BUF_SZ)) 
                          En série.imprimer(" r  nTexte reçu:")
                          En série.imprimer(txt_buf);


                    autre   // demande de page Web
                        // envoie le reste de l'en-tête HTTP
                        client.imprimer("Content-Type: text / html")
client.imprimer("Connexion: garder en vie")
client.imprimer();
                        // envoyer une page Web
                        webFile = Dakota du Sud.ouvrir("index.htm")        // ouvrir un fichier de page Web
                        si (webFile) 
                            tandis que(webFile.disponible()) 
client.écrire(webFile.lis()); // envoyer une page Web au client
                            
webFile.Fermer();


                    // réinitialise l'index du tampon et tous les éléments du tampon à 0
                    req_index = 0;
StrClear (HTTP_req, REQ_BUF_SZ);
                    Pause;

                // chaque ligne de texte reçue du client se termine par  r  n
                si (c == ' n') 
                    // dernier caractère sur la ligne du texte reçu
                    // commence une nouvelle ligne avec le caractère suivant lu
                    currentLineIsBlank = vrai;
 
                autre si (c! = ' r') 
                    // un caractère de texte a été reçu du client
                    currentLineIsBlank = faux;

} // fin si (client.available ())
        } // fin tout le temps (client.connected ())
        retard(1);      // donne le temps au navigateur Web pour recevoir les données
        client.Arrêtez(); // ferme la connexion
    } // fin si (client)
}

// extraire le texte de la chaîne de données HTTP GET entrante
// renvoie true uniquement si du texte a été reçu
// la chaîne doit commencer par "& txt =" et se terminer par "& end"
// si la chaîne est trop longue pour le tampon HTTP_req et
// "& end" est coupé, la fonction retourne alors false
booléen GetText (carboniser *SMS, int len)
{
  booléen got_text = faux;    // indicateur de texte reçu
  carboniser * str_begin;             // pointeur vers le début du texte
  carboniser * str_end;               // pointeur vers la fin du texte
  int str_len = 0;
  int txt_index = 0;
  
  // obtient un pointeur au début du texte
  str_begin = strstr (HTTP_req, "& txt =")
  si (str_begin! = NULL) {
str_begin = strstr (str_begin, "=")  // passe à la =
    str_begin + = 1;                      // saute le =
    str_end = strstr (str_begin, "&fin")
    si (str_end! = NULL) {
str_end[0] = 0;  // termine la chaîne
      str_len = strlen (str_begin);

      // copie la chaîne dans le tampon txt et remplace% 20 par un espace ''
      pour (int i = 0; i <str_len; i ++) 
        si (str_begin[i] ! = '%') 
          si (str_begin[i] == 0) 
            // fin de chaîne
            Pause;

          autre 
SMS[txt_index++] = Str_begin[i];
            si (index_txt> = (len - 1)) 
              // garde la chaîne de sortie dans les limites
              Pause;



        autre 
          // remplace% 20 par un espace
          si ((str_begin[i + 1] == '2') && (str_begin[i + 2] == '0')) 
SMS[txt_index++] = '';
i + = 2;
            si (index_txt> = (len - 1)) 
              // garde la chaîne de sortie dans les limites
              Pause;




      // termine la chaîne
      SMS[txt_index] = 0;
got_text = vrai;
}
}

  revenir got_text;
}

// met tous les éléments de str à 0 (efface le tableau)
vide StrClear (carboniser * str, carboniser longueur)

    pour (int i = 0; je < longueur; i ++) 
str[i] = 0;



// recherche la chaîne sfind dans la chaîne str
// retourne 1 si une chaîne est trouvée
// retourne 0 si la chaîne est introuvable
carboniser StrContains (carboniser * str, carboniser * sfind)

    carboniser trouvé = 0;
    carboniser indice = 0;
    carboniser len;

len = strlen (str);
    
    si (strlen (sfind)> len) 
        revenir 0;

    tandis que (index <len) 
        si (str[index] == sfind[found]) 
trouvé ++;
            si (strlen (sfind) == trouvé) 
                revenir 1;


        autre 
trouvé = 0;

index ++;


    revenir 0;



Page HTML de la zone de texte

Copiez le code HTML ci-dessous et enregistrez-le dans un fichier nommé index.htm sur la carte SD.

    
        
        Zone de texte utilisant textarea
        
    

    
        

Fonctionnement de l'esquisse de zone de texte

JavaScript intégré à la page Web envoie le texte de la zone de texte à l'Arduino dans le cadre d'une demande HTTP GET lorsque l'utilisateur clique sur le bouton de la page Web.

Format de la chaîne

Cette image montre l'aspect de la chaîne avant son envoi à l'Arduino.

Zone de texte HTML et chaîne de texte

Zone de texte HTML et chaîne de texte

Le texte de la zone de texte est mis entre & txt = et & fin = fin avant d'être envoyé. L'Arduino utilise ce texte pour trouver la chaîne dans la requête HTTP GET entrante.

Lorsque le texte atteint l’Arduino, il a été modifié en remplaçant les espaces dans le texte par % 20 comme indiqué dans l'image ci-dessous.

Chaîne de la zone de texte reçue par Arduino

Chaîne de la zone de texte reçue par Arduino

L'esquisse Arduino doit remplacer% 20 dans le texte par des espaces.

Traitement de la chaîne dans l'esquisse Arduino

La fonction GetText () est utilisé pour obtenir la chaîne de zone de texte à partir de la requête HTTP GET entrante. le HTTP_req Le tableau contient le début de la requête GET entrante, comme indiqué dans l'image ci-dessus – en commençant par GET / ajax_inputs & txt…

le GetText () la fonction obtient d'abord un pointeur vers le début de la chaîne de la zone de texte en recherchant & txt = puis en terminant la chaîne quand il trouve &fin. Une boucle for est utilisée pour copier la chaîne dans le SMS tableau (qui est un pointeur sur le global txt_buf tableau). Pendant la copie, le code recherche les espaces codés sous la forme% 20 et les convertit en espaces.

Limitations de l'esquisse de la zone de texte Arduino

L'esquisse est limitée par la taille du tampon qui enregistre la demande HTTP GET entrante ainsi que par la taille du tableau qui stocke la chaîne à partir de la zone de texte. Ces deux mémoires tampon de tableaux ont été réduites afin que le code puisse être exécuté sur un Arduino Uno.

Si la chaîne de la zone de texte est trop grande pour le tampon HTTP sur l’Arduino, la chaîne est tronquée avant la fin. &fin, le texte ne sera pas affiché dans la fenêtre Serial Monitor car le GetText () la fonction retournera faux.

Ceci est juste une démonstration simple qui utilise GET pour envoyer du texte. Il serait préférable d’envoyer le texte en utilisant POST à ​​la place. Ce texte sera ajouté ultérieurement sous forme de didacticiel.

Commentaires

Laisser un commentaire

Votre commentaire sera révisé par les administrateurs si besoin.