Template HTML sur arduino

Bonjour,

Voilà j'ai réalisé un projet me permettant de recueillir des valeurs de capteur d'humidité et température, des ouvertures de portes grâce à des requêtes http ainsi que de la surveillance de la pièce grâce à des capteurs de mouvement et de lumières, j'affiche donc sur une page html toute ses statiques tout ceci fonctionne super bien !

Maintenant je voudrais faire des finissions sur mon projet histoire d'avoir un beau rendu, et je me posais la question suivantes: est-il possible de créer un Template pour ma page html et de le traiter avec Arduino ?

je dispose d'une arduino Mega 2560 avec mon programme qui utilise 30% de mémoire dynamique et d'un shield ethernet avec une carte sd de 8Go j'attend votre avis !

1 Like

Ça ne serait pas plus simple de le faire en php sur ton serveur ?

Je n'ai jamais utilisé le php encore c'est la première fois que je me lance dans une interface web :slight_smile: peux-tu m'expliquer comment cela fonctionne et le rapport avec le template html si celà ne te dérange pas. Je vais de mon coté faire quelque recherche pour essayer de comprendre !

Malheureusement, non, car je connais très peu. Je ne l'ai fait qu'une seule fois et j'ai dû apprendre sur le tas pour y arriver (j'ai tout oublié aussitôt...). L'idée c'est que l'Arduino envoie ses données dans un fichier du serveur web. La page php lit le fichier et assure la mise ne page de l'interface d'affichage.

Php c'est un langage de programmation comme un autre, il suffit d'apprendre la syntaxe (ça ressemble à java je crois) : il y a des forums spécialisés pour ça...

En cherchant un peu tu trouveras des infos : ici et ici avec un exemple de J-M-L.

Super Merci je pense que cela va m'occuper un bon moment :wink:

Oulah, mettons un peu d'ordre dans tout ça, histoire de donner les grandes lignes qui peuvent ensuite être approfondies grâce aux tonnes d'informations disponibles sur le net.

Là tout de suite, sur cette page que vous êtes en train d'afficher dans votre navigateur favori, faites donc un clic droit puis "afficher le code source"

Vous voyez alors le code de la page html, tel que le site arduino l'a envoyé à votre PC.
Ce code est juste du texte.
Le format général est du xml.
La norme html ajoute en plus une dénomination précise de certaines balises.

Et en regardant le code un peu plus en détail, vous verrez qu'il contient aussi des liens URL vers des ressources externes, que le navigateur va aussi aller chercher (sauf s'il les a déjà dans son cache local).
Il y a des images, mais aussi des feuilles de style .css et des sources en javascript .js
D'ailleurs vous pouvez cliquer sur chaque lien pour afficher son contenu.

Toutes ces ressources sont des fichiers que votre navigateur récupère auprès d'un serveur, par une requête http.

Ce serveur peut très bien être un arduino, avec les fichiers stockés sur sa carte SD.
Et il les envoie à la demande.

Et un template de site, c'est juste un ensemble de fichiers ressources déjà codés, que l'on adapte ensuite pour y ajouter son propre contenu.

D'ailleurs pour la mise au point, le plus simple est de stocker ces fichiers en local sur son disque dur, pour les modifier avec un éditeur de texte et visualiser le résultat directement dans le navigateur.

Problème : tous ces fichiers ont un contenu statique.
En général il y a toujours des parties variables dans une page html.

Si l'arduino est le serveur de page html, les possibilités de faire varier le contenu sont assez limitées. On peut par exemple retourner une page dans laquelle on insère à la volée la température mesurée par une sonde.

Les possibilités s'ouvrent considérablement quand on passe sur un serveur plus abouti.
Le cas classique et facile d'accès (et libre de droits) est de monter un serveur LAMP sur un un raspberry pi.
LAMP = Linux + Apache + Mysql + PHP

PHP est un langage de programmation proche du c++, qui va être exécuté sur le serveur à chaque demande provenant d'un client web, et qui permet de générer le html qui sera retourné au client.

MySQL est un système de base de données.

Avec par exemple comme résultat final :

Un serveur LAMP avec une base de données dans laquelle sont stockés les relevés de température, et deux types d'accès client :

  • un accès depuis l'arduino qui, en tant que client du serveur, va lui transmettre régulièrement les relevés de température (le relevé est passé en complément d'url, récupéré par le code PHP qui le stocke en base et retourne une page html vide).
  • un accès standard qui retourne une belle page avec une courbe de température construite à partir de la base de données

Pour arriver à ce résultat, le programme d'auto-apprentissage est :

  1. XML & HTML
  2. CSS (CSS3 et HTML5)
  3. Javascript (avec un petit tour par ajax)
  4. Linux & Raspberry
  5. Apache (limité à comment configurer un serveur web)
  6. PHP
  7. Mysql

Bonne route :slight_smile:

Jetez un œil effectivement à un de mes tutos sur les techniques avancées avec Ajax (pas encore fini)

Salut, merci pour vos super réponse je vais sérieusement étudiez cela pour mes futurs projets de domotique, j'avais aussi vu que Jeedom pouvais être utilisé pour faire des choses sympa dans le même style.

Pour l'instant j'aurais aimez réussir l'utilisation des Templates sur arduino(ça me fruste de ne pas réussir :slight_smile: ) j'ai pensez à une solution seulement il me reste une énigme je pense que je pourrais lire mon Template situé sur ma carte sd et dès que je rencontre un %xxxx% le remplacer par un Client.Print(mavariable).

Je sais qu'il est possible de lire des caractère 1 par 1 mais est-il possible de reconnaître la chaîne de caractère ?
Pensez vous que cette solution soit viable ?

Scroum:
Pour l'instant j'aurais aimez réussir l'utilisation des Templates sur arduino(ça me fruste de ne pas réussir :slight_smile: ) j'ai pensez à une solution seulement il me reste une énigme je pense que je pourrais lire mon Template situé sur ma carte sd et dès que je rencontre un %xxxx% le remplacer par un Client.Print(mavariable).

Je sais qu'il est possible de lire des caractère 1 par 1 mais est-il possible de reconnaître la chaîne de caractère ?
Pensez vous que cette solution soit viable ?

si vous lisez mon tuto sur l'ESP vous y verrez dans le post #10 le commentaire suivant

j'ai hacké un petit goodie supplémentaire dans la fonction qui lit le HTML stocké en mémoire flash: Je regarde avant d'envoyer le code si la ligne contient (un seul) "$$$x$$$". si c'est le cas la génération de code est modifié et on remplace le "$$$x$$$" par le contenu d'une variable stockée à la position x dans un tableau global. ça permet de rendre le code HTML statique en mémoire flash, mais de générer un truc un peu plus dynamique. par exemple la ligne HTML qui affiche la température est
Température = $$$0$$$°C

et le $$$0$$$ est replacé par variables[0] lors de l'envoi à l'ESP.

Ça devrait vous mettre sur le bon chemin

pour les templates, ou faire un peu de design, tu as le Css qui permet de donner un beau rendu, Par la suite, tu as bootstrap, qui est une librairie Css ou tu as deja des templates deja tout fait qu'on utilise en general avec du javascript..

Merci pour vos infos, je vais étudier ça se soir :wink:

Bonjour j'ai réussi à lire mes fichiers Templates html en lisant caractère par caractère dès que que je vois des balises %XXXX% je peux ensuite changer les caractères situé à l'intérieur.

conf=SD.open("footer.tmp", FILE_READ);
    char c=' ';
    String readString;
    if (conf) {
      while(conf.available()){
        while(c!='%' && conf.available())
        {
            c = conf.read(); // on lit le caractère  
            readString += c;
            if(c!='%')
            Serial.print(c);// on l'écrit sur le moniteur série
        }
         c = conf.read(); // on lit le caractère  
         readString += c;
         
        while(c!='%' && conf.available())
        {
            c = conf.read(); // on lit le caractère  
            
            readString += c;
            delay(1); //délai de lecture
        }
        if(conf.available()){
          Serial.print(" mavariable  ");
          c = conf.read(); // on lit le caractère  
          readString += c;
          Serial.print(c);// on l'écrit sur le moniteur série
        }
      }
    }

Voilà je vais maintenant essayer d'incorporer du CSS au code en espérant que cela se passe bien :slight_smile:

Bonne journée et merci pour votre aide !

Attention % c’est quand même assez fréquent dans une page web...
Votre mode de lecture est assez câblé en dur (que se passe-t-il si pas de % => plantage)
L’usage de la classe String est déconseillé sur nos petits arduinos

Attention le traitement "caractère par caractère" donne souvent des temps d'exécution considérabelement allongés.

Ceci est valable aussi bien pour la lecture d'un flux depuis une carte SD, que pour l'envoi de la réponse HTTP au client web.

Sur ce dernier point, on trouve sur le net de nombreux exemples de serveur web arduino qui font exactement ce qu'il ne faudrait pas faire : retourner au client chaque caractère dans une trame à part entière.

Pour peu qu'il y ait un wifi un peu lent entre les deux, le temps de réponse perçu du client peut être de plusieurs secondes, pour seulement quelques centaines d'octets utiles transmis.

=> privilégier les read/write(buf, size) partout où c'est possible