L’écran est prêt, les premiers tests d’affichage sont plutôt concluant. Ok… mais il reste toute la partie électronique et logiciel pour que ça soit un vrai objet abouti. Dans ce billet, je vais vous montrer comment j’ai réalisé l’arrière du boitier, comment j’ai intégré l’électronique et l’intégration du premier code Arduino.

Comme dans la première partie, il y aura encore un peu de mécanique et d’usinage mais la grosse partie sera consacrée à la partie électronique. Comme je l’ai expliqué dans l’étude du projet, je pars sur un module NodeMCU à base de ESP8266. C’est un choix de coût et de simplicité. Grâce à ce module et Arduino, On va pouvoir réaliser rapidement un produit fini. De plus, la communauté est tellement importante que c’est aussi un choix de partage !

Si le projet rencontre un fort engouement, je dupliquerai cette partie mais avec un Raspberry Pi zéro W.

Ma note

Votre note

L’écran

Comme je l’avais dit dans l’article précédent, j’ai eu des problèmes avec la dernière partie. A savoir posé le film solaire. J’ai enfin résolu mon problème et j’ai réussi à obtenir les résultats voulus. (Je ne m’y étais pas pris comme il le fallait et j’ai confondu l’utilisation du produit pour les vitres avec de l’eau savonneuse….)

Enfin, j’ai aussi trouvé une bonne méthode pour assembler le dernier plexiglas au boitier bois. Pour cela, on m’a conseillé d’utiliser un mastic/colle noir. La matière est assez extensible et peut corriger certains défaut de niveau (pas mon cas ;)).

Bref. Les erreurs et les doutes sont effacés. Passons pour de bon sur la deuxième partie du projet:

L’électronique !!!

Achats de la partie électronique

		Prix	PU	Action
	NodeMCU	8.39 €	8.39 €
	Photoresistance	1.42€ (20)	0.07€
	Boutons poussoirs	5.6€ (10)	0.56€
	Plaques à trous	3.56€ (10)	0.35€
	Film solaire noir 5% pour voiture	6.9€ (10)	0.69€
	Module micro-usb	1.32€	1.32€
TOTAL			12 €

Étude de la partie électronique

Dans cette partie, nous allons voir comment interfacer tous les composants sélectionnés précédemment. Rien de bien compliqué ou d’éléments qui sorte de l’ordinaire. Voici donc la schématique de l’ESPMetric.

Schématique ESPMetric

Schématique ESPMetric

Description :

VCC : 5VDC
Pullups (R2, R3, R4) : 10kOhms (Alors, j’ai enlevé les résistances de pullups sur le schéma parce que je me suis aperçu dans la partie Arduino que des pullups interne existait  pinMode(PINBTLEFT,INPUT_PULLUP). Donc comme ça simplifie le schéma, j’ai cru intéressant de les supprimer)
R1 : 10kOhms

Comme on peut le voir sur le schéma, nous avons 2 tensions de fonctionnement, 5VDC et 3.3VDC. Le NodeMCU possède un régulateur linéaire qui peut accepter jusqu’à 16 VDC max et délivre du 3.3VDC.

Le 5VDC servira à alimenter:

• Le NodeMCU
• La matrice de LEDs

Le 3.3VDC servira à alimenter :

• La photorésistance
• Les pullups des boutons. Les entrées ne sont compatibles qu’au 3.3VDC
• Les données de la matrice de LEDs. (Même s’il faudrait réellement du 5VDC à l’aide d’un « level shifter » mais les GPIOs du NodeMCU ne délivre que du 3.3VDC)

Voilà le résultat une fois montée :

Face avant de l’électronique sans le NodeMCU

Face arrière de l’ESPMetric

L’électronique de l’ESPMetric avec le NodecMCU

La photorésistance

Comme son nom l’indique, la photo-résistance est une résistance qui va varier en fonction de la luminosité ambiante. Ce n’est pas un élément très précis mais largement suffisant pour les besoins du produit.

Photorésistance

Comme je l’avais expliqué dans un article précédent, le patte A0 du microcontrôleur possède un convertisseur analogique de 10 bits avec une tension référence de 1V.

Le montage est donc un pont diviseur de tension afin de rendre les valeurs de la photorésistance exploitable.

La photorésistance a une valeur de 1MOhm. On ne pourra jouer que sur la résistance R1. Afin de trouver la bonne valeur, il est pratique de remplacer R1 par un potentiomètre … Bref c’est ce que j’ai fait… et finalement une valeur de 10kOhms pour R1 semble convenir… (Tout ça pour ça !! 😉

D’ailleurs, le principe de la photorésistance est que : plus il y a de lumière, moins il y a de résistance. En pratique, dans le noir, on a une résistance avoisinant les 600kOhm et à la lumière du jour, on est plutôt à 50kOhm. En fait, on s’aperçoit que l’on a surtout besoin d’être précis sur la luminosité quand elle est basse.

Bien entendu, on peut utiliser plein d’autres choses que la photorésistance (un peu obsolète et pas RoHS) comme une photodiode ou phototransistor … etc mais je n’avais que cette technologie sous la main.

Réalisation du fond du boitier

L’arrière du boitier est assez simple à réaliser puisqu’il faut couper le même type de planche que la partie avant mais en enlevant complètement l’intérieur en laissant 1 à 2 cm de bord. (j’ai utilisé une scie sauteuse pour découper l’intérieur.

Arrière du boitier brut

Ensuite il va falloir réaliser 4 trous:

• 3 sur un côté
• 1 sur le dessus

Sur le côté ce sera les boutons et sur la partie haute la photorésistance afin de mieux capter la lumière ambiante.

J’ai ensuite pris les deux partie en bois (face avant et face arrière) pour les assembler et les coller à la colle à bois:

Collage des deux faces

En attendant (24 heures de séchage), j’ai préparé 3 boutons avec fils et gaine thermorétractable. Une fois le séchage terminé, j’ai disposé les 3 boutons dans les trous de côté.

J’ai laissé sortir le bouton de 1mm et comblé le trou de colle chaude.

Après collage + insertion des 3 boutons de côté

Une fois terminé, (sur un coup de tête), je me suis dit que le pin, c’était pas terrible niveau esthétique (j’aurais peut-être dû le faire avec un bois plus noble). Du coup, j’ai décidé de coller un champ blanc tout autour du boitier.

Champ blanc + les 3 boutons avant d’être recouverts

Voilà ce que cela donne avec la partie écran posé simplement dessus.

Aspect général de l’ESPMetric avant collage de l’écran

Comme on peut le remarquer, l’écran est un véritable miroir, plus de bulle. (A force de faire et refaire, on s’améliore hein ?!).

Il ne me reste plus qu’à coller mon écran avec le mastic/colle noir.

Collage de l’écran

PS : Surtout ne faites pas comme sur la photo (pour éviter les marques sur l’écran utilisez un chiffon sous les serres-joints.

J’ai mis beaucoup de serres-joint car il y a une légère pression de l’écran. C’est reparti pour 24heures de séchage… c’est long … surtout quand on est curieux de voir le résultat.

Enfin il reste à fermer l’arrière du boitier. Pour cela, j’ai décidé d’utiliser l’ancien écran (avec des bulles) et d’usiner un trou pour y placer un connecteur micro-usb.

Voici le résultat:Collage à la colle chaude du module USB

Résultat à l’extérieur

L’alimentation de l’appareil se fera donc à l’aide d’un chargeur de téléphone (5VDC 2A). Pratique… on en trouve presque partout.

Résultat final du fond de boitier :

Pour refermer le boitier il suffit de faire 1 trou à chaque angle et de visser la plaque arrière. N’oubliez pas de connecter le Micro-usb à la carte électronique !

Un Logiciel pour débuter

Bien entendu, je n’allais pas vous laisser pour la deuxième fois sans vous montrer un bout de logiciel pour piloter l’ESPMetric. J’ai donc décidé de vous montrer comment je vois les choses pour cet objet et comment je vais développer la partie logicielle.

D’ailleurs j’en profite pour ouvrir un github pour l’ESPMetric où je poserai mes développements et mises à jours

Voici les fonctionnalités que je vais vous présenter dans cet article:

• Gestion des fonctions
• Développement des icônes

Bien entendu, je ne vais pas systématiquement pas réinventé le fil à couper le beurre. Donc,pour les parties :

• Configuration WiFi
• Mise à jour OTA

Je vais utiliser du code de mes projets précédent. En effet, je vais utiliser la partie configuration (partie Web) du capteur de température WiFi.

Je vais plutôt insister sur la partie fonctionnelle de l’ESPMetric

Gestion des fonctions

Pour faire un bon ESPMetric avec Arduino, il vous faut :

• Une bonne librairie pour gérer l’écran. J’ai utilisé la librairie Adafruit à savoir : Adafruit_GFX.h, Adafruit_NeoMatrix.h et Adafruit_NeoPixel.h
• Un timer
• Des interruptions pour les boutons
• Une gestion des différentes applications que vous souhaitez insérer dans l’ESPMetric

La matrice de LED

[pastacode lang= »c » manual= »Adafruit_NeoMatrix%20matrix%20%3D%20Adafruit_NeoMatrix(32%2C8%2C%20PINMATRIX%2C%0A%20%20NEO_MATRIX_TOP%20%20%20%20%2B%20NEO_MATRIX_LEFT%2B%0A%20%20NEO_MATRIX_COLUMNS%20%2B%20NEO_MATRIX_ZIGZAG%2C%0A%20%20NEO_GRB%20%20%20%20%20%20%20%20%20%20%20%20%2B%20NEO_KHZ800)%3B%0A%0Auint16_t%20colors%5B%5D%20%3D%20%7B%0A%20%20matrix.Color(255%2C%200%2C%200)%2C%20matrix.Color(0%2C%20255%2C%200)%2C%20matrix.Color(255%2C%20210%2C%200)%2Cmatrix.Color(0%2C%200%2C%20255)%2C%20matrix.Color(255%2C%200%2C%20255)%2C%20matrix.Color(0%2C%20255%2C%20255)%2C%20matrix.Color(255%2C%20255%2C%20255)%2Cmatrix.Color(91%2C%2068%2C%2043)%2Cmatrix.Color(0%2C%200%2C%200)%7D%3B » message= »Matrice de LEDs » highlight= » » provider= »manual »/]

La création de la matrice se résume à cette fonction. Pour les couleurs, il suffit d’ajouter dans le tableau toutes les couleurs RGB que vous souhaitez.

Pour afficher quelques chose dans la matrice, il faut suivre le principe suivant :

[pastacode lang= »c » manual= »%20%20matrix.fillScreen(0)%3B%0A%20%20matrix.setTextColor(colors%5B0%5D)%3B%0A%20%20matrix.setCursor(X%2C%20Y)%3B%0A%20%20matrix.print(F(%22test%22))%3B%0A%20%20matrix.drawBitmap(0%2C%20positionReel%2C%20%20rond%2C%208%2C8%2Ccolors%5B0%5D)%3B%0A%20%20matrix.show()%3B » message= »Test affichage » highlight= » » provider= »manual »/]

Ça sera toujours pareil: on efface l’écran, on associe une couleur, on positionne ce que l’on veut afficher, on remplit la matrice et on l’affiche.

Le timer

Le timer va servir a gérer tous les défilements des applications de l’ESPMetric. En effet, c’est lui qui va cadencer toute la partie fonctionnelle.

[pastacode lang= »c » manual= »extern%20%22C%22%20%7B%0A%23include%20%22user_interface.h%22%0A%7D%0A%0Aos_timer_t%20myTimer%3B%0A%0A%0Auint8_t%20sec%3D0%3B%0Auint8_t%20minute10%3D0%3B%0Abool%20minOccured%3B%0Abool%20min10Occured%3B%0Avoid%20timerCallback(void%20*pArg)%20%7B%0A%20%20%20%20%20%20sec%2B%2B%3B%0A%20%20%20%20%20%20if%20(sec%3D%3D60)%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20minute10%2B%2B%3B%0A%20%20%20%20%20%20%20%20minOccured%20%3D%20true%3B%0A%20%20%20%20%20%20%20%20sec%3D0%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20if%20(minute10%3D%3D10)%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20min10Occured%3Dtrue%3B%0A%20%20%20%20%20%20%20%20minute10%3D0%3B%0A%20%20%20%20%20%20%7D%0A%7D%0A%0Avoid%20user_init(void)%20%7B%0A%0A%20%20%20%20%20%20os_timer_setfn(%26myTimer%2C%20timerCallback%2C%20NULL)%3B%0A%20%20%20%20%20%20os_timer_arm(%26myTimer%2C%201000%2C%20true)%3B%0A%7D%20%0A%0Avoid%20setup()%0A%7B%0A%09%20user_init()%3B%0A%7D%0A%0Avoid%20loop()%0A%7B%0Aif%20(minOccured%20%3D%3D%20true)%0A%20%20%7B%0A%20%20%20%20minOccured%20%3D%20false%3B%0A%20%20%20%20%2F%2FACTION%0A%20%20%7D%0A%20%20if%20(min10Occured%20%3D%3D%20true)%0A%20%20%7B%0A%20%20%20%20min10Occured%3Dfalse%3B%0A%20%20%20%20%2F%2FACTION%0A%20%20%7D%0A%7D » message= »Timer » highlight= » » provider= »manual »/]

Avec ce code, vous pourrez donc gérer un timer d’une minute et de 10 minutes. Bien entendu, rien ne vous empêche de changer les délais.

Les boutons

La gestion des boutons est importante puisqu’elle vous permettra de gérer les menus, le défilement des applications ou tout simplement une action sur l’ESPMetric.

[pastacode lang= »c » manual= »%23define%20PINBTLEFT%205%0A%23define%20PINBTCENTER%204%0A%23define%20PINBTRIGHT%2015%0A%0Abool%20debounce%3B%0A%0Avoid%20leftButton()%0A%7B%0A%20%20if%20(!debounce)%0A%20%20%7B%0A%20%20%20%20%20debounce%3Dtrue%3B%0A%20%20%20%20%20action%3D2%3B%0A%20%20%20%20%20%0A%20%20%7D%0A%20%20%0A%7D%0A%0Avoid%20centerButton()%0A%7B%0A%20%20if%20(!debounce)%0A%20%20%7B%0A%20%20%20%20%20debounce%3Dtrue%3B%0A%20%20%20%20%20action%3D1%3B%0A%20%20%20%20%0A%20%20%7D%0A%7D%0A%0Avoid%20rightButton()%0A%7B%0A%20%20%20if%20(!debounce)%0A%20%20%20%7B%0A%20%20%20%20%20debounce%3Dtrue%3B%0A%20%20%20%20%20action%3D0%3B%0A%20%20%20%7D%0A%20%20%20%0A%7D%0A%0Avoid%20setup()%0A%7B%0A%09pinMode(PINBTLEFT%2CINPUT_PULLUP)%3B%0A%09pinMode(PINBTCENTER%2CINPUT_PULLUP)%3B%0A%09pinMode(PINBTRIGHT%2CINPUT_PULLUP)%3B%0A%0A%09attachInterrupt(PINBTLEFT%2C%20leftButton%2C%20CHANGE)%3B%20%0A%09attachInterrupt(PINBTCENTER%2C%20centerButton%2C%20CHANGE)%3B%20%0A%09attachInterrupt(PINBTRIGHT%2C%20rightButton%2C%20CHANGE)%3B%20%0A%7D%0A%0Avoid%20loop()%0A%7B%0A%09if%20(action%3D%3D0)%0A%09%7B%0A%09%09%2F%2FACTION%0A%09%09debounce%3Dfalse%3B%0A%09%7Delse%20if%20(action%3D%3D1)%0A%09%7B%0A%09%09%20%2F%2FACTION%0A%09%09debounce%3Dfalse%3B%0A%09%7Delse%20if%20(action%3D%3D2)%0A%09%7B%0A%09%09%20%2F%2FACTION%0A%09%09debounce%3Dfalse%3B%0A%09%7D%0A%0A%7D » message= »Gestion des boutons » highlight= » » provider= »manual »/]

Voilà la structure du code simplifié. A noter la gestion (très sommaire) des rebonds sur les boutons ainsi que les pullups dans la configuration des pattes si vous n’avait pas de pullups physique.

Gestion des applications

[pastacode lang= »c » manual= »%0Avoid%20hours(void)%3B%0Avoid%20meteo(void)%3B%0Avoid%20rss(void)%3B%0A%0Atypedef%20void%20(*SimpleApplicationsList%5B%5D)()%3B%0ASimpleApplicationsList%20Applications%20%3D%20%7B%20hours%2C%20rss%2Cmeteo%20%7D%3B%0A%23define%20ARRAY_SIZE(A)%20(sizeof(A)%20%2F%20sizeof((A)%5B0%5D))%0A%0Avoid%20nextAppli()%0A%7B%0A%20%20nbAppli%20%3D%20(nbAppli%20%2B%201)%20%25%20ARRAY_SIZE(%20Applications)%3B%0A%7D%0A%0Avoid%20prevAppli()%0A%7B%0A%20%20nbAppli%20%3D%20(nbAppli%20-%201)%20%25%20ARRAY_SIZE(%20Applications)%3B%0A%7D%0A%0Avoid%20hours()%0A%7B%0A%09%2F%2FACTION%20D’AFFICHAGE%0A%7D%0A%0Avoid%20meteo()%0A%7B%0A%09%2F%2FACTION%20D’AFFICHAGE%0A%7D%0A%0Avoid%20rss()%0A%7B%0A%09%2F%2FACTION%20D’AFFICHAGE%0A%7D%0A%0Avoid%20loop()%0A%7B%0A%0A%09%20nextAppli()%3B%0A%09%20Applications%5BnbAppli%5D()%3B%0A%09%20delai(2000)%3B%0A%0A%7D » message= »Applications » highlight= » » provider= »manual »/]

Ce principe montre comment j’ai procédé dans la gestion des applications. C’est un tableau tournant contenant le nom de la fonction à exécuter.

Voici les grands principes de l’application de l’ESPMetric. J’ai volontairement simplifié le code pour que ce ne soit pas trop pompeux et plus clair (pas facile :(). Si vous êtes aguerri, vous pouvez allez voir directement le code source.

Développement des icônes

Pour créer des icônes et les afficher sur la matrice, je procède en plusieurs étapes :

J’utilise le site dot2pic.com pour transformer une image matricielle en tableau d’hexadécimal

 

Je sélectionne le nombre de colonnes et de rangées puis je sélectionne le tableau monochromatique en mode vertical.

Puis je dessine avec la souris l’image ou j’importe un BMP (plus complexe) et je converti en mode tableau.

C’est une méthode comme une autre. Vous pouvez très bien faire une matrice binaire et dessiner une icône par ce biais.

static unsigned char heart[] =
{ B01100011, B00000000,
B11111111, B10000000,
B11111111, B10000000,
B01111111, B00000000,
B00111110, B00000000,
B00011100, B00000000,
B00001000, B00000000, };

Bref, il ne reste plus qu’à utiliser la fonction de la librairie Adafruit pour l’afficher sur votre matrice comme suit:

[pastacode lang= »c » manual= »%0AAdafruit_NeoMatrix%20matrix%20%3D%20Adafruit_NeoMatrix(32%2C8%2C%20PINMATRIX%2C%0A%20%20NEO_MATRIX_TOP%20%20%20%20%2B%20NEO_MATRIX_LEFT%2B%0A%20%20NEO_MATRIX_COLUMNS%20%2B%20NEO_MATRIX_ZIGZAG%2C%0A%20%20NEO_GRB%20%20%20%20%20%20%20%20%20%20%20%20%2B%20NEO_KHZ800)%3B%0A%0Auint16_t%20colors%5B%5D%20%3D%20%7B%0A%20%20matrix.Color(255%2C%200%2C%200)%2C%20matrix.Color(0%2C%20255%2C%200)%2C%20matrix.Color(255%2C%20210%2C%200)%2Cmatrix.Color(0%2C%200%2C%20255)%2C%20matrix.Color(255%2C%200%2C%20255)%2C%20matrix.Color(0%2C%20255%2C%20255)%2C%20matrix.Color(255%2C%20255%2C%20255)%2Cmatrix.Color(91%2C%2068%2C%2043)%2Cmatrix.Color(0%2C%200%2C%200)%7D%3B%0A%0Astatic%20unsigned%20char%20cloud%5B%5D%3D%7B0x00%2C0x00%2C0x00%2C0x06%2C0x6f%2C0xef%2C0xff%2C0x7e%7D%3B%0Avoid%20loop()%0A%7B%0A%09matrix.fillScreen(0)%3B%0A%09matrix.drawBitmap(0%2C%20positionReel%2C%20%20rond%2C%208%2C8%2Ccolors%5B0%5D)%3B%0A%09matrix.show()%3B%0A%7D » message= »icone » highlight= » » provider= »manual »/]

Et voici un résultat :

Example d’icône sur l’ESPMetric

Enfin une petite vidéo complète ou je montre le résultat final :

PS : Pour les applications j’ai utilisé du code provenant la station météo Adafruit. Donc, merci à eux ou lui, je ne sais pas…

Bon ok, ce n’est qu’un prototype, il y a encore des problèmes d’encodage sur les accents … Mais ce n’est pas encore terminé. Je tenais, tout de même, à vous présenter un produit abouti dans sa globalité et c’est pour cette raison que j’ai été un peu long pour sortir l’article 🙂

Conclusion

Comme je l’ai dit plus haut, voici un projet qui prend du temps (à étudier et concevoir) mais qui regroupe tout un tas de compétences intéressantes à mettre en œuvre. On a vu dans la première partie la réalisation de l’écran, qui a été pour moi le plus contraignant.

Cette fois-ci, ça a été beaucoup moins compliqué mais plus d’attente (séchage de la colle) et beaucoup de développement. En effet, le matériel est prêt et il nous tarde de voir le résultat final. Il faut alors tester toutes les fonctionnalités et parfois re adapté le matériel. Petit à petit, on s’aperçoit du résultat et c’est là que la magie du « faire soi même » fait son effet (ou pas).

Il est évident qu’il y a énormément d’améliorations à faire mais si je devais les appliquer, je n’aurai jamais sorti d’article. Tout ça pour vous dire que je suis conscient que ce n’est qu’un prototype,

Bref, je partage tout mon travail sur mon github. N’hésitez pas à faire vos remarques et contribuer au projet si vous le souhaitez. De mon côté, je vais continuer (selon mes besoins domotiques) à développer ce projet qui m’est très utile et je ferai des mises à jour de code sur le github.

Je referai surement un article beaucoup plus orienté logiciel sur ce produit et vous tenir informé de mon ressenti à l’utilisation.