Débuter avec l'ESP8266 : Intégrer un framework CSS (ici Milligram) pour de belles pages Web

Dans cette vidéo, je vous propose de découvrir comment intégrer un framework CSS Responsive dans votre ESP8266 pour améliorer le look des pages Web embarquées dans votre objet connecté et optimiser leur présentation sur différents périphériques.
Le choix s'est porté sur le framework Milligram (milligram.io/) et la même méthode permettrait d'intégrer Bootstrap par exemple.
Le suivi de cette vidéo suppose d'avoir vu les vidéos de ma Playlist "Débuter avec l'ESP8266".
Le lien de téléchargement des fichiers du projet est fourni dans une fiche qui apparaît vers la fin de la vidéo. Merci de cliquer sur J'aime si vous avez aimé cette vidéo et télécharger les fichiers du projet.

[@anthonyduriez9204]

Si comme moi vous êtes embêtés pour la ligne je vous la renseigne, sinon elle est visible dans la vidéo suivante :

[@profredstone]

merci !

[@michelhamon5667]

Bonjour Eric, très bien et celà ouvre beaucoup de possiblités. Merci

[@achraf2699]

Merci beaucoup

[@cantor0305]

Encore une super video. J'ai tester en mode point d'accès avec smarphone, le module répond bien moins bien qu'en mode wifi.

[@nagchampa4476]

Bonjour Pour commencer et comme d'habitude, excellente vidéo ! Merci Le point est peut-être traité plus loin dans les vidéos mais comme il n'a pas encore été abordé, je pose la question. Même pour de l'IOT, il semble délicat en 2024 de monter des systèmes accessibles sur ou depuis internet sans chiffrer les échanges client serveur . Est il possible de monter le serveur Web en TLS et de proposer des communications chiffrées entre le client et le serveur web de l'esp8266 ? Merci Cordialement

[@pascaldubois6962]

Bonjour Éric Très intéressant vos vidéos, j'ai appris beaucoup surtout les tutos pour débuté avec l'ESP8266. J'ai une question est-il possible d'ajouter un minuteur lorsqu'on appui sur le boutton LED On et que celle-ci ferme automatiquement après un laps de temps donné?

[@susinijd3014]

Bonjour Eric et merci vraiment pour toutes ces vidéos, j'en suis à cette étape tout à fonctionner jusque là, j'ai beaucoup appris. Petite remarque concernant la deuxième partie de la vidéo pour tester la grille, cela fonctionne bien sur l'ordinateur mais pas sur mon téléphone alors que sans faire la partie "class container ... " cela fonctionnait bien sur les 2 supports. Surement un pb de paramètre de grille ou une version de navigateur sur mon téléphone obsolète?

[@jean-jacquescolin2697]

Quel bonheur d'avoir pu télécharger le code. Merci et en plus ça fonctionne super.

[@EricPeronnin]

Super ! Il y aura une suite à cette série prochainement.

[@emilecosta8177]

Bonjour, peut-on placer le fichier Milligram.min.css dans la mémoire SPIFFS et ne pas passer par l'intégration de ce CSS dans la mémoire via PROGMEM?

[@EricPeronnin]

Bien sûr. Simplement il faut passer par l'outil adapté pour ça. Je ferai aussi une vidéo pour montrer cette possibilité avec un framework plus lourd comme bootstrap. Pour de petites applications, je trouve la solution du tableau PROGMEM assez simple et elle permet de se limiter à un seul téléversement.

[@emilecosta8177]

@@EricPeronninDès que le fichier CSS est placé dans le SPIFFS (lors du 1er téléversement), on n'aura plus qu'un seul téléversent à exécuter à chaque changement du code. Le principe de placer les fichiers HTML et CSS en dehors du code me semble une solution plus "souple"; non? Par rapport à Bootstrap, j'avais regardé un comparatif justement entre différents Framework: codeburst.io/evaluating-css-frameworks-bulma-vs-foundation-vs-milligram-vs-pure-vs-semantic-vs-uikit-503883bd25a3

[@EricPeronnin]

@@emilecosta8177 Je sais cela. En fait, on retouche souvent le fichier html et, si on met le framework dans le SPIFFS, il apparaît normal de faire de même pour l'ensemble des fichiers ... Merci pour le comparatif. Je les ai tous testés. J'ai retenu Milligram pour son extrême légèrement. Je n'aime pas le système de grille de pure. La légèreté a été l'argument maître pour les ESP.

[@doubytchou4254]

Bonjour, Merci pour toutes ces informationssss que vous partagez avec nous!! J'aurais aimé avoir une courbes (température) sur ma page en webserver, mais je ne sais pas par quel bout y prendre si vous avez des pistes à explorer. En vous remerciant

[@EricPeronnin]

Bonjour. Comme pour le framework CSS, vous pouvez utiliser une bibliothèque javascript pour afficher des courbes. Il en existe plusieurs plus ou moins facile à utiliser. Je travaille parfois avec celle-ci : humblesoftware.com/flotr2/documentation Bon courage.

[@doubytchou4254]

@@EricPeronnin Merci beaucoup je vais me pencher la dessus

[@in2theair67]

Merci pour cette vidéo. Pourquoi le CSS de milligram n'est pas copié en tant que fichier sur la carte, au lieu de mappage en mémoire ? Pour gagner en taille et en vitesse de chargement ?

[@fabriceplanche630]

Bonjour, au lieu de copier-coller le code html, n'est-il pas possible, même si ça n'est pas très orthodoxe, d'inclure directement son fichier avec une directive "#include"? Merci pour vos vidéos!

[@EricPeronnin]

Bonjour. Le code html seul, non. En revanche, on peut tenter d'inclure un fichier avec extension html contenant au moins les lignes de C contenant la déclaration du tableau qui recueille le code html. Est-ce que le compilateur acceptera un include du type : #include "index.html" A voir ...

[@Tibrus74]

Il est indiqué dans la description une fiche qui contiendrait un lien ..... Je n'ai pas vu de fiche à ce sujet et donc pas de lien non plus, moyen de mettre à jour cela ? Merci d'avance

[@EricPeronnin]

Bonjour. La fiche est présente en 18:15

[@Tibrus74]

@@EricPeronnin Honte à moi avec le logo blanc de l'université de Nantes je l'avais mais alors pas vu du tout. Merci Eric pour le retour.

[@hydrehydre131]

bonjour, j'ai téléchargé le code pour voir /faire en même temps. J'ai un problème :si je le charge avec l'ide pas de soucis. par contre si je le charge avec vscode il me met des erreurs 1° le terme Wifi lors de la configuration de la connexion n'est pas reconnue ( j'ai rien touché) 2° il me mets qu'il manque un point virgule dans le fichier css et dans le fichier index ? je ne'y comprend rien .merci de votre aide. bonne soirée

[@jean-mariedeladeriere4024]

Bonjour , où peux-t-on télécharger le code ? ... grand merci d'avance !

[@EricPeronnin]

Bonjour. J'ai déjà expérimenté des soucis avec certaines versions de VS Code. J'en suis resté à la 2.41. Peut-être que ça vaudrait la peine d'essayer. Eric

[@papaaliouneciss1828]

Bonjour Eric je vous remercie pour ces tutos de hautes facture. J'ai eu à réécrire le même code ça marche parfaitement et pour ma page web j'ai voulu inséré une image de fond en essayant ceci: mais ça ne marche pas j'aimerai obtenir votre coup de pousse. Merci !

[@francoisguillou9995]

Bonjour, à la minute 6, il n'est pas possible de suivre le code (la caméra étant devant). Est-il possible de l'avoir en document ? Merci.

[@EricPeronnin]

Bonjour. Il y a une petite fiche qui s'affiche en haut à droite vers la fin de la vidéo qui fournit un lien pour télécharger le projet complet.

[@alberthgsm]

Bonjour, Le sujet est très intéressant et merci pour les vidéos. Cependant,comme l'a déjà relevé un commentaire pour une des vidéos précédentes, on y voit presque rien au niveau de l'éditeur de code. Du coup çà '' refroideur les hardirs ''.

[@EricPeronnin]

J'agrandirai encore la police. Merci pour le retour

[@MoviePropElectronics]

Bonjour. J'ai téléchargé le programme et ça fonctionne hormis un petit défaut: Si le LED est déjà allumée quand on recharge la page, on a le message par défaut "LED éteinte". Je ne vois pas bien comment corriger cela.

[@EricPeronnin]

Bonjour. Je regarde et mets une nouvelle version en ligne quand c'est fait.