Notifications
Retirer tout

Interface HTML pour ESP8266. Améliorer le design avec Bootstrap


fe36ca0d4d6bdcc500dbd432c3c08731?s=80&d=mm&r=g
Posts: 509
Admin
Début du sujet
(@christophe)
Membre
Inscription: Il y a 6 ans
wpf-cross-image

Dans le tutoriel précédent, nous avons vu comment créer un interface HTML pour accéder au serveur web embarqué sur un ESP8266. Dans ce tutoriel, nous allons découvrir comment utiliser le framework Bootstrap pour donner un aspect moderne à l'interface HTML.    Tutoriel actualisé le 7 août 2020 L'objectif de ce tutoriel est…

Répondre
4 Réponses
a28ed89c9688caf7ed660278d1eacadc?s=80&d=mm&r=g
Posts: 12
 gandolfi
Anonyme
(@gandolfi)
Inscription: Il y a 5 ans

Salut,

Bravo quel travail !!!!! je ne sais pas où tu trouves le temps et toutes ces compétences.

Il y a tellement de possibilités que je voudrais résumer ce que j'ai compris.

Quand on utilises l'ESP8266 comme SERVEUR WEB
- on le code comme Arduino (pas de nodemcu ou espeasy) ?
- il communique directement avec les GPIO ou PWM dans les 2 sens ?
- on peut se passer de MQTT, Open HAB et Node-RED pour afficher les infos des sondes et interagir sur les appareils reliés (moteur, servo, led...) comme dans ton tuto mqtt- nodered- espeasy ?

Si c'est le cas c'est beaucoup plus léger pour le meme résultat non ?

Mais il manque le coté "simple" de node-red pour relier les sondes, agir sur les objets connectés et faire des affichages

Merci.

Ps: Il y a tellement de possibilités et de manière que ce n'est pas évident de faire le tri.
il faut presque un tuto pour informer sur les différents "combo logiciel + technique" possible avec ESP8266.

Répondre
1 Répondre
2ef56dc296e30d22301058353a8b8600?s=80&d=mm&r=g
 Projets DIY
Anonyme
(@Projets DIY)
Inscription: Il y a 6 ans

Posts: 80

Bonsoir. Merci beaucoup. Pour le moment j'essai de tester toutes les technos à notre disposition pour nos projets DIY. Pour répondre à tes questions :
- On le code comme Arduino (pas de nodemcu ou espeasy) ? => comme un Arduino. ESP Easy est un programme de configuration qui permet de communiquer avec un serveur domotique ou un dashboard (tableau de bord) en ligne
- il communique directement avec les GPIO ou PWM dans les 2 sens ? C'est du code Arduino classique. C'est à nous de tout faire. Les prochains tutos iront beaucoup plus loin. Sinon oui, dans les 2 sens. Le PWM c'est un peu différent, c'est un train d'impulsions qui permet de controler un moteur ou une Led.
- on peut se passer de MQTT, Open HAB et Node-RED pour afficher les infos des sondes et interagir sur les appareils reliés (moteur, servo, led...) comme dans ton tuto mqtt- nodered- espeasy ? => Absolument mais disons plutot que c'est complémentaire. Ca permet de faire une mini-interface d'administration / controle
- Si c'est le cas c'est beaucoup plus léger pour le meme résultat non ? => idem, c'est complémentaire. Avec un serveur domotique tu vas pourvoir controler beaucoup d'appareils et créer des scénarios complexes (en fonction du language disponible). Sur l'ESP, l'avantage c'est qu'on peut faire des traitements locaux. A la limite il n'y a pas besoin de serveur domotique. Par exemple un système d'irrigation, un portail électrique...
Mais il manque le coté "simple" de node-red pour relier les sondes, agir sur les objets connectés et faire des affichages => tu as raison. Node-RED est vraiment top pour ça. Par contre pour des gros projets, Avec Node-RED, ça va vite devenir une usine à gaz. Un peu comme avec Labview (si tu connais).
il faut presque un tuto pour informer sur les différents "combo logiciel + technique" possible avec ESP8266. => Oui, c'est vrai. Je suis en train de réfléchir à des articles plus généraux mais il faut déjà que je termine tout ce qui est en cours. Peut être un livre sur le sujet l'année prochaine si ça vous dit ?
Bonne soirée

Répondre
0ede24058af0571e96b6be3c402f6347?s=80&d=mm&r=g
Posts: 2
 qcvictor
Anonyme
(@qcvictor)
Inscription: Il y a 5 ans

Excellent comme d'habitude, j’essaie de piloter deux carte relai qui contrôle un moteur. j'envoie un url http://192.168.1.111/control?cmd=GPIO,0,0 pour l'ouvrir puis un autre pour le fermer http://192.168.1.111/control?cmd=GPIO,0,1
J'ai fait un bouton avec mousedown et mouseup pour qu'il reconnaisse l'appuie sur le bouton fonctionne bien avec la souris mais pas avec les tablet/telephone.
Connais tu une fonction du bootstrap qui ferait cela ?

Répondre
1 Répondre
2ef56dc296e30d22301058353a8b8600?s=80&d=mm&r=g
 Projets DIY
Anonyme
(@Projets DIY)
Inscription: Il y a 6 ans

Posts: 80

Bonsoir Victor. Merci beaucoup. Effectivement, c'est possible que ça ne fonctionne pas sur smartphone ou tablette car il n'y a pas de souris donc les commandes ne sont pas gérées. Si tu as absolument besoin d'utiliser cette fonction, il faut "bricoler" (ça tombe bien !) une solution de contournement. J'ai trouvé cette solution http://stackoverflow.com/questions/24025165/simulating-a-mousedown-click-mouseup-sequence-in-tampermonkey. Sinon, le plus facile est encore d'utiliser le déclencheur onClick. Il faut regarder du coté jQuery ou Javascript pour la gestion des événements. Bootstrap s'occupe surtout de l'habillage J'espère avoir bien répondu à ta question,. Si j'ai mis à coté, n'hésite pas à m'envoyer un morceau de code. Bonne soirée.

Répondre
Share:
Rejoignez nous!
Chercher sur le forum
Derniers tutoriels
Derniers messages postés sur le forum
Domotique et objets connectés à faire soi-même
Domotique et objets connectés à faire soi-même
Vous avez aimé ce tutoriel

Ne manquez plus les prochains projets

Recevez chaque semaine le récapitulatif des tutoriels et projets.

Vous pouvez vous désabonner à tout moment.