L'objectif de ce tutoriel est de mettre en place le framework et de tester certains éléments (bouton, tableau, badge, interaction avec le code Arduino depuis l'interface Web). Pour aller plus loin en HTML, voici quelques blogs très bien faits : Alsa Création (en français), w3schools .
Noter. Vous pouvez suivre la même procédure si vous utilisez un Shield Ethernet ou WiFi pour Arduino. Les bibliothèques sont identiques
Qu'est-ce que Bootstrap ?
Bootstrap est un framework HMTL réactif, ce qui signifie que l'affichage s'adapte à la taille de l'écran. Bootstrap est un projet open source très populaire parmi les concepteurs de sites Web et les applications Web (c'était le projet le plus populaire sur GitHub en 2014). Il a été initié par un développeur travaillant chez Tweeter.
Cela peut sembler difficile à première vue mais en fait c'est très simple à mettre en œuvre. N'oubliez pas que la puissance d'un ESP8266 est très limitée, nous n'allons pas faire des interfaces très compliquées. L'essentiel de la « programmation » HTML sera d'indiquer les classes (class en anglais) que le moteur de rendu doit utiliser pour afficher un élément.
Prenons l'exemple d'un bouton. Pour afficher un bouton, vous devez le faire en HTML
ON
Ce qui donne ça. Pas difficile de faire mieux !
Maintenant, allez sur le site d' amorçage et descendez aux exemples dans la section glyphicon . Pour modifier l'apparence d'un élément HTML, vous devez lui affecter des classes Bootstrap.
Par exemple, nous ajouterons les classes btn , btn-success (couleur verte), btn-lg (large). Voici ce que cela donne. Plus amusant non !
Ce n'est rien de bien compliqué. Le plus difficile est d'avoir une vue d'ensemble de toutes les classes disponibles et du rendu obtenu. Heureusement,.
Comment ajouter le framework Bootstrap à un projet ESP8266 Arduino
Nous allons maintenant rentrer dans le vif du sujet.
Il existe deux façons d'ajouter le framework Bootstrap à un projet Arduino / ESP8266. La première consiste à embarquer tout le nécessaire dans la mémoire de l'ESP8266. Ce sera le thème du prochain tutoriel sur le sujet. Ici, nous allons récupérer les sources sur Internet. Cela oblige l'ESP8266 à se connecter à Internet. Pour que cela fonctionne, il ne peut pas être utilisé comme point d'accès.
Nous indiquerons donc dans l'entête de la page HTML les ressources à télécharger sur Internet.
Noter. Seule la feuille de style bootstrap.min.css est requise, mais si vous devez créer des interactions avec du code Arduino ou utiliser certains composants Bootstrap avec Javascript, vous devez tout installer.
