Afficher des messages où que vous soyez avec cet écran connecté à internet. +
Medium +
hour(s) +
Précédemment, nous avons vu comment affich … 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'''.
re serveur MQTT (la partie IFTT par contre ne marchera plus)</div> </div><br/> +
re serveur MQTT (la partie IFTT par contre ne marchera plus)</div> </div><br/> +
vrai +
Mini_écran_connecté_tft_iftt_wiki.jpg +
Voilà ce tutoriel est fini, j'espère que c … 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/m4dnerdls en avance : https://twitter.com/m4dnerd +
none +
IFTTT est un service qui permet d'automati … IFTTT est un service qui permet d'automatiser des tâches, Adafruit IO est compatible avec celui-ci.
Nous allons voir comment afficher les notifications d'un smartphone sur notre écran.
*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'''
Votre applet devrait ressembler à ceci. Aller sur votre téléphone, lancer IFTTT et autoriser '''l'accès aux notifications'''.
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ée … 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:
ne avec cette commande <code>tft.drawString(HOME_SSID, 25, 20);</code> <br/> +, <div class="icon-instructions info-icon … 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)
:8883</code> Récupérer le dernier certificat affiché et copier le dans '''connection.h'''<br/> +, Suivez le tutoriel sur l'écran ST7789, ava … 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]]
her 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 … 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'''
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é … 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
de garder en mémoire les messages avec la fonction Retain</div> </div> <br/> +, Nous avons utilisé le fichier '''arduino_s … Nous avons utilisé le fichier '''arduino_secrets.h''' qui est dans notre croquis pour '''sauvegarder nos identifiants'''. 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''' ! *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
ice utilise 8bytes et contient donc les caractères accentués (entre autres)</div> </div><br/> +
Votre applet devrait ressembler à ceci. Aller sur votre téléphone, lancer IFTTT et autoriser '''l'accès aux notifications'''.
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ée … 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:
tft.pushImage(0,0,240,240,adafruit_io);
Pour écrire du texte sur plusieurs lignes, positionnez le texte puis écrivez le
tft.setCursor(0,50);
tft.println(data); //Print text
Vous pouvez aussi écrire une seule ligne avec cette commande
tft.drawString(HOME_SSID, 25, 20);
ne avec cette commande <code>tft.drawString(HOME_SSID, 25, 20);</code> <br/> +, <div class="icon-instructions info-icon … 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)
openssl s_client -showcerts -connect io.adafruit.com:8883
Récupérer le dernier certificat affiché et copier le dans '''connection.h''':8883</code> Récupérer le dernier certificat affiché et copier le dans '''connection.h'''<br/> +, Suivez le tutoriel sur l'écran ST7789, ava … 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]]
her 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 … 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'''
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é … 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
de garder en mémoire les messages avec la fonction Retain</div> </div> <br/> +, Nous avons utilisé le fichier '''arduino_s … Nous avons utilisé le fichier '''arduino_secrets.h''' qui est dans notre croquis pour '''sauvegarder nos identifiants'''. 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''' ! *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
//#include "arduino_secrets.h"
include er
Dans le croquis, changez l'include au début du code
<code>//#include "arduino_secrets.h"</code>
<code>include <arduino_secrets.h></code> + et Vous avez peut-être remarqué que la police … 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:
fontconvert arial.ttf 12 32 255 > arial12pt8b.h
Pour changer la taille de la police, '''changer le premier chiffre''' (ici 12)
ice 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 + et Utiliser son propre serveur MQTT +
Display title of« Display title of » est une propriété prédéfinie qui peut affecter un titre affiché distinct à une entité, et est fournie par Médiawiki Sémantique.
Mini écran connecté +
Date de modification« Date de modification (Modification date) » est une propriété prédéfinie qui correspond à la date de la dernière modification d’un sujet et est fournie par MédiaWiki Sémantique.
10:44:03, 9 décembre 2019 +
⧼cs-comments⧽Cette propriété est une propriété spéciale dans ce wiki.
0 +
Créateur de la pageCette propriété est une propriété spéciale dans ce wiki.
Aucune propriété ne pointe vers cette page.
Français
English
Deutsch
Español
Italiano
Português