Voir la source de Mini écran connecté

{{ {{tntn|Tuto Details}}
|Main_Picture=Mini_écran_connecté_tft_iftt_wiki.jpg
|Licences=Attribution (CC BY)
|Description=Nous allons voir comment afficher des messages depuis un serveur MQTT sur un écran TFT.
|Area=Electronics, House
|Type=Creation
|Difficulty=Medium
|Duration=1
|Duration-type=hour(s)
|Cost=7
|Currency=EUR (€)
|Tags=iftt, mqtt, esp8266, st7789, tft, adafruit.io, iot
|SourceLanguage=none
|Language=fr
|IsTranslation=0
}}
{{ {{tntn|Introduction}}
|Introduction=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és
*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'''.

{{Info|Vous pouvez bien évidemment utiliser votre propre serveur MQTT (la partie IFTT par contre ne marchera plus)}}<br />
}}
{{ {{tntn|Materials}}
|Step_Picture_00=Afficher_une_image_sur_un_écran_ST7789_tft.png
|Material=*ESP8266
*ST7789
*Câble Wrapping 30 AWG
|Tools=*Fer à souder
*Imprimante 3D
|Prerequisites={{ {{tntn|Prerequisites}}
|Prerequisites=Afficher une image sur un écran ST7789
}}
}}
{{ {{tntn|Separator}}}}
{{ {{tntn|Tuto Step}}
|Step_Title=Fabriquer l'écran connecté
|Step_Content=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 />
|Step_Picture_00=Afficher_une_image_sur_un_écran_ST7789_displayFinish.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Paramétrer Adafruit IO
|Step_Content=*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'''
|Step_Picture_00=Mini_écran_connecté_adafruit_io.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Paramétrer les identifiants
|Step_Content=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'''

{{Info|Vous pouvez vérifier sur le moniteur série (Baudrate : 115200) s'il y a un problème.}}

<br />
|Step_Picture_00=Mini_écran_connecté_arduino_secrets.png
|Step_Picture_01=Mini_écran_connecté_adafruit_io_key.png
|Step_Picture_02=Mini_écran_connecté_tft_wifi.jpg
|Step_Picture_03=Mini_écran_connecté_tft_io.jpg
|Step_Picture_04=Mini_écran_connecté_tft_notification.jpg
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Test depuis Adafruit IO
|Step_Content=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
{{Info|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}}

<br />
|Step_Picture_00=Mini_écran_connecté_adafruit_io3.png
|Step_Picture_01=Mini_écran_connecté_tft_io_test.jpg
}}
{{ {{tntn|Tuto Step}}
|Step_Title=IFTTT - Afficher les notifications d'un téléphone
|Step_Content=IFTTT est un service qui permet d'automatiser des tâches, Adafruit IO est compatible avec celui-ci.

{{Info|Si vous voulez utiliser IFTTT avec votre propre serveur, il y a des webhooks qui permettent de faire cela.}}

Nous allons voir comment afficher les notifications qu'un smartphone sur notre écran.

{{Warning|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.}}

*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'''
{{Dont|L'ESP8266 va se déconnecter (puis se reconnecter) du serveur MQTT, si le message est trop long.}}<br />Votre applet devrait ressembler à ceci.

Aller sur votre téléphone, lancer IFTTT et autoriser '''l'accès aux notifications'''.<br />
|Step_Picture_00=Mini_écran_connecté_ifttt.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Cacher vos identifiants dans le logiciel Arduino
|Step_Content=Nous avons utilisé le fichier '''arduino_secrets.h''' qui est dans notre croquis pour '''sauvegarder nos identifiants'''.

{{Warning|Il vaut mieux éviter de faire cela, car vous risquez de partager accidentellement vos mot de passe!}}

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''' !

{{Info|1=C'est Andreas Spiesss qui a eu cette idée
https://www.youtube.com/watch?v=CAGQ8h8PKX4&t=347s}}

*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"

include <arduino_secrets.h></code>
|Step_Picture_00=Mini_écran_connecté_arduino_secrets2.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Changer les images
|Step_Content=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 />
|Step_Picture_00=Mini_écran_connecté_adafruit_io2.png
|Step_Picture_01=Mini_écran_connecté_notifications.png
|Step_Picture_02=Mini_écran_connecté_wifi.png
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Changer la police d'écriture
|Step_Content=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 12pt)

Le 8b signifie que la police utilise 8bytes et contient donc les caractères accentués (entre autres)
}}
{{ {{tntn|Tuto Step}}
|Step_Title=Utiliser son propre serveur MQTT
|Step_Content={{Info|Le croquis est configuré pour un serveur qui utilise SSL pour chiffrer les communications.}}


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 />
|Step_Picture_00=Mini_écran_connecté_ssl.png
|Step_Picture_01=Mini_écran_connecté_ssl2.png
}}
{{ {{tntn|Notes}}
|Notes=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
}}
{{ {{tntn|Tuto Status}}
|Complete=Draft
}}