]> 2026-04-12T08:22:14+02:00 Mini écran connecté 0 fr Electronics House Published 7 EUR (€) Afficher des messages où que vous soyez avec cet écran connecté à internet. Medium 1 hour(s) Précédemment, nous avons vu comment afficher une image sur un ST7789, un écran TFT à 3€. ( [[Afficher une image sur un écran ST7789]] ) Nous allons exploiter cette connaissance pour faire un mini écran connecté. *Cet écran va afficher les messages reçus depuis un serveur MQTT *Les messages peuvent contenir des caractères accentués *La transmission sera chiffrée *Afin d'éviter les attaques MITM (man in the middle), nous allons vérifier l'identité du serveur MQTT à l'aide de son certificat. À partir de là nous pouvons même utiliser '''IFTT''' (ou '''tasker''') afin de transmettre des informations du '''web''' / de notre '''installation domotique''' ou de notre '''téléphone''' sur le serveur MQTT. Afin de simplifier la partie MQTT, nous allons utiliser '''Adafruit IO''' qui permet d'avoir un '''serveur MQTT gratuitement'''. <div class="icon-instructions info-icon"> <div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div> <div class="icon-instructions-text">Vous pouvez bien évidemment utiliser votre propre serveur MQTT (la partie IFTT par contre ne marchera plus)</div> </div><br/> true fr Attribution (CC BY) Mini_écran_connecté_tft_iftt_wiki.jpg *ESP8266 *ST7789 *Câble Wrapping 30 AWG Voilà ce tutoriel est fini, j'espère que cela vous donnera des idées pour faire des applications sympas avec. Évidemment dans l'idéal *Il faudrait pouvoir '''paramétrer notre écran''' depuis une '''interface web''' *Éviter d'utiliser des '''images''' de la '''taille de l'écran''' quand ce n'est pas nécessaire Mais cela devrait vous donner un bon point de départ. '''Suivez-moi sur Twitter''' si vous voulez être au courant des prochains tutoriels en avance : https://twitter.com/m4dnerd none IFTTT est un service qui permet d'automatiser des tâches, Adafruit IO est compatible avec celui-ci. <div class="icon-instructions info-icon"> <div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div> <div class="icon-instructions-text">Si vous voulez utiliser IFTTT avec votre propre serveur, il y a des webhooks qui permettent de faire cela.</div> </div> Nous allons voir comment afficher les notifications d'un smartphone sur notre écran. <div class="icon-instructions caution-icon"> <div class="icon-instructions-icon"><i class="fa fa-exclamation-triangle"></i></div> <div class="icon-instructions-text">Bien que ce soit amusant comme projet, n'oubliez pas que vous allez donner accès à vos notifications à deux services sur internet. Même si les communications sont en théorie sécurisée, niveau vie privée c'est une très mauvaise idée.</div> </div> *Créer un compte sur IFTTT *Installer l'application android '''if''' *Sur l'interface web d'IFTTT, cliquer sur '''My Applets''' *Cliquer sur '''New Applet''' *Choisissez le service '''Android Device''' *Choisissez '''Notification Received''' '''then''' *Choisissez '''Adafruit''' *Choisissez '''Send data to Adafruit IO''' *Dans '''Feed Name''' mettez '''notifications''' *Dans '''Data to save''' choisisez '''AppName''' et '''Notification''' '''Title''' <div class="icon-instructions dont-icon"> <div class="icon-instructions-icon"><i class="fa fa-hand-paper-o"></i></div> <div class="icon-instructions-text">L'ESP8266 va se déconnecter (puis se reconnecter) du serveur MQTT, si le message est trop long.</div> </div><br/>Votre applet devrait ressembler à ceci. Aller sur votre téléphone, lancer IFTTT et autoriser '''l'accès aux notifications'''.<br/> Si vous voulez changer les images affichées, elles sont sauvegardées dans '''bitmaps.h''' Pour convertir vos images en code, suivez ce tutoriel [[Afficher une image sur un écran ST7789]] Les images en version vectorielle SVG et PNG sont disponibles dans le dossier '''images''' Pour afficher une image, il faut juste utiliser cette commande: <code>tft.pushImage(0,0,240,240,adafruit_io);</code> Pour écrire du texte sur plusieurs lignes, positionnez le texte puis écrivez le <code>tft.setCursor(0,50);</code> <code>tft.println(data); //Print text</code> Vous pouvez aussi écrire une seule ligne avec cette commande <code>tft.drawString(HOME_SSID, 25, 20);</code> <br/> <div class="icon-instructions info-icon"> <div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div> <div class="icon-instructions-text">Le croquis est configuré pour un serveur qui utilise SSL pour chiffrer les communications.</div> </div> En plus de changer les identifiants / le serveur / le port dans '''arduino_secrets.h''', il faut récupérer le certificat SSL de votre serveur. Pour cela il vous faut openssl, vous pouvez le télécharger ici (Windows) : https://slproweb.com/products/Win32OpenSSL.html Puis tapez cette commande (avec l'adresse de votre serveur mqtt) <code>openssl s_client -showcerts -connect io.adafruit.com:8883</code> Récupérer le dernier certificat affiché et copier le dans '''connection.h'''<br/> Suivez le tutoriel sur l'écran ST7789, avant toute chose, En résumé, *il faut installer la '''bibliothèque tft_espi''' *Changer le fichier '''User_Setup.h''' directement dans la bibliothèque *Reliez l'écran à l'esp8266 [[Afficher une image sur un écran ST7789]] <br/> *Créer un compte sur Adafruit IO: https://io.adafruit.com/ *Cliquer sur '''Feeds''' *Cliquer sur '''Actions''' / '''Create a New Feed''' *Dans '''Name''' mettez '''notifications''' Tout d'abord il nous faut '''récupérer le programme''' *Télécharger le croquis ici : https://github.com/maditnerd/st7789_mqtt *Il nous faut aussi la bibliothèque : '''Adafruit_MQTT''' Cette bibliothèque va nous permettre de communiquer avec notre '''serveur MQTT'''. Dans le programme, il y a un fichier '''arduino_secrets.h''', c'est ici que nous allons stocker nos identifiants pour le '''Wi-Fi''' et le '''serveur MQTT''' Les identifiants sur Adafruit IO se trouvent en cliquant sur '''View AIO Key''' *Dans '''HOME_SSID''' mettez le nom de votre réseau WI-FI *Dans '''HOME_PASS''' mettez le mot de passe de votre réseau WI-FI *Dans '''ADAFRUIT_MQTT_USERNAME''' mettez le '''Username''' d'adafruit IO *Dans '''ADAFRUIT_MQTT_PASS''' mettez l''''Active Key''' d'adafruit IO Téléverser le croquis pour tester si tout marche bien. Normalement vous devriez arriver jusqu'à l'écran '''Notifications''' <br/> <div class="icon-instructions info-icon"> <div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div> <div class="icon-instructions-text">Vous pouvez vérifier sur le moniteur série (Baudrate : 115200) s'il y a un problème.</div> </div> <br/> Adafruit IO nous permet de créer une donnée qui sera affichée sur l'écran. *Cliquer sur '''Feeds''' / '''Notifications''' *Puis cliquer sur '''Add Data''' *Écrivez un message <div class="icon-instructions info-icon"> <div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div> <div class="icon-instructions-text">Si un message est envoyé alors que l'écran n'est pas connecté, celui-ci sera ignoré. MQTT permet toutefois de garder en mémoire les messages avec la fonction Retain</div> </div> <br/> Nous avons utilisé le fichier '''arduino_secrets.h''' qui est dans notre croquis pour '''sauvegarder nos identifiants'''. <div class="icon-instructions caution-icon"> <div class="icon-instructions-icon"><i class="fa fa-exclamation-triangle"></i></div> <div class="icon-instructions-text">Il vaut mieux éviter de faire cela, car vous risquez de partager accidentellement vos mot de passe!</div> </div> Une solution pour éviter ça et de créer une '''bibliothèque''' pour nos identifiants. L'autre avantage c'est que nos identifiants seront '''accessibles pour tous nos croquis''' ! <div class="icon-instructions info-icon"> <div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div> <div class="icon-instructions-text">C'est Andreas Spiesss qui a eu cette idée https://www.youtube.com/watch?v=CAGQ8h8PKX4&t=347s</div> </div> *Créer dans '''Documents/Arduino/libraries''' un dossier '''arduino_secrets''' *Copier '''arduino_secrets.h''' dans ce dossier Dans le croquis, changez l'include au début du code <code>//#include "arduino_secrets.h"</code> <code>include <arduino_secrets.h></code> Vous avez peut-être remarqué que la police d'écriture est incluse dans le croquis sous le nom '''arial12pt8b.h''' Il se trouve que par défaut, il n'y a pas de police d'écriture avec les accents qui puissent être intégrés directement dans le code. J'ai donc dû la générer à partir d'une police d'écriture ('''.ttf'''). Vous pouvez télécharger une police d'écriture (par ex: sur https://www.dafont.com/), et la convertir en code. Pour cela il vous faut '''fontconvert''', le code source est disponible dans Adafruit_GFX mais vous pouvez trouver une version prêt à l'usage (pour Windows) dans la description de cette vidéo https://www.youtube.com/watch?v=L8MmTISmwZ8 Pour générer la police d'écriture il vous suffit de taper cette commande: <code>fontconvert arial.ttf 12 32 255 > arial12pt8b.h</code> Pour changer la taille de la police, '''changer le premier chiffre''' (ici 12) <div class="icon-instructions info-icon"> <div class="icon-instructions-icon"><i class="fa fa-info-circle"></i></div> <div class="icon-instructions-text">Le 8b signifie que la police utilise 8bytes et contient donc les caractères accentués (entre autres)</div> </div><br/> Fabriquer l'écran connecté Paramétrer Adafruit IO Paramétrer les identifiants Test depuis Adafruit IO IFTTT - Afficher les notifications d'un téléphone Cacher vos identifiants dans le logiciel Arduino Changer les images Changer la police d'écriture Utiliser son propre serveur MQTT iftt mqtt esp8266 st7789 tft adafruit.io iot *Fer à souder *Imprimante 3D Creation Youtube Mini écran connecté 2019-12-09T10:44:03Z 2458826.9472569 Mini écran connecté 0 0 0