ESPMetric_arduino_esp8266

ESPMetric – Afficheur domotique – ESP8266 et Arduino

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

[Total : 7    Moyenne : 3.7/5]

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

  PrixPUAction
NodeMCU8.39 €8.39 €
Photoresistance1.42€ (20)0.07€
Boutons poussoirs5.6€ (10)0.56€
Plaques à trous3.56€ (10)0.35€
Film solaire noir 5% pour voiture6.9€ (10)0.69€
Module micro-usb1.32€1.32€
TOTAL12 €

É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

Schematique_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 :

electronique_espmetric_avantFace avant de l’électronique sans le NodeMCU

Electronique_espmetric_arriereFace arrière de l’ESPMetric

ESPmetric_face_avant_nodemcuL’é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ésistancePhotoré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.

arriere_boitier_creuseArriè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 facesCollage 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.

Apres_collage_espmetric_boitier

apres_collage_espmetric_boitier_2Aprè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_boutonsChamp blanc + les 3 boutons avant d’être recouverts

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

avant_collage_de_lecranAspect 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_lecranCollage 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:connecteur micro-usbCollage à la colle chaude du module USB

connecteur_micro_usbRé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 :

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

Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(32,8, PINMATRIX,
  NEO_MATRIX_TOP    + NEO_MATRIX_LEFT+
  NEO_MATRIX_COLUMNS + NEO_MATRIX_ZIGZAG,
  NEO_GRB            + NEO_KHZ800);

uint16_t colors[] = {
  matrix.Color(255, 0, 0), matrix.Color(0, 255, 0), matrix.Color(255, 210, 0),matrix.Color(0, 0, 255), matrix.Color(255, 0, 255), matrix.Color(0, 255, 255), matrix.Color(255, 255, 255),matrix.Color(91, 68, 43),matrix.Color(0, 0, 0)};
Matrice de LEDs

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 :

  matrix.fillScreen(0);
  matrix.setTextColor(colors[0]);
  matrix.setCursor(X, Y);
  matrix.print(F("test"));
  matrix.drawBitmap(0, positionReel,  rond, 8,8,colors[0]);
  matrix.show();
Test affichage

Ç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.

extern "C" {
#include "user_interface.h"
}

os_timer_t myTimer;


uint8_t sec=0;
uint8_t minute10=0;
bool minOccured;
bool min10Occured;
void timerCallback(void *pArg) {
      sec++;
      if (sec==60)
      {
        minute10++;
        minOccured = true;
        sec=0;
      }
      if (minute10==10)
      {
        min10Occured=true;
        minute10=0;
      }
}

void user_init(void) {

      os_timer_setfn(&myTimer, timerCallback, NULL);
      os_timer_arm(&myTimer, 1000, true);
} 

void setup()
{
	 user_init();
}

void loop()
{
if (minOccured == true)
  {
    minOccured = false;
    //ACTION
  }
  if (min10Occured == true)
  {
    min10Occured=false;
    //ACTION
  }
}
Timer

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.

#define PINBTLEFT 5
#define PINBTCENTER 4
#define PINBTRIGHT 15

bool debounce;

void leftButton()
{
  if (!debounce)
  {
     debounce=true;
     action=2;
     
  }
  
}

void centerButton()
{
  if (!debounce)
  {
     debounce=true;
     action=1;
    
  }
}

void rightButton()
{
   if (!debounce)
   {
     debounce=true;
     action=0;
   }
   
}

void setup()
{
	pinMode(PINBTLEFT,INPUT_PULLUP);
	pinMode(PINBTCENTER,INPUT_PULLUP);
	pinMode(PINBTRIGHT,INPUT_PULLUP);

	attachInterrupt(PINBTLEFT, leftButton, CHANGE); 
	attachInterrupt(PINBTCENTER, centerButton, CHANGE); 
	attachInterrupt(PINBTRIGHT, rightButton, CHANGE); 
}

void loop()
{
	if (action==0)
	{
		//ACTION
		debounce=false;
	}else if (action==1)
	{
		 //ACTION
		debounce=false;
	}else if (action==2)
	{
		 //ACTION
		debounce=false;
	}

}
Gestion des boutons

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


void hours(void);
void meteo(void);
void rss(void);

typedef void (*SimpleApplicationsList[])();
SimpleApplicationsList Applications = { hours, rss,meteo };
#define ARRAY_SIZE(A) (sizeof(A) / sizeof((A)[0]))

void nextAppli()
{
  nbAppli = (nbAppli + 1) % ARRAY_SIZE( Applications);
}

void prevAppli()
{
  nbAppli = (nbAppli - 1) % ARRAY_SIZE( Applications);
}

void hours()
{
	//ACTION D'AFFICHAGE
}

void meteo()
{
	//ACTION D'AFFICHAGE
}

void rss()
{
	//ACTION D'AFFICHAGE
}

void loop()
{

	 nextAppli();
	 Applications[nbAppli]();
	 delai(2000);

}
Applications

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

 

dot2pic

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

dot2pic_code

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:


Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(32,8, PINMATRIX,
  NEO_MATRIX_TOP    + NEO_MATRIX_LEFT+
  NEO_MATRIX_COLUMNS + NEO_MATRIX_ZIGZAG,
  NEO_GRB            + NEO_KHZ800);

uint16_t colors[] = {
  matrix.Color(255, 0, 0), matrix.Color(0, 255, 0), matrix.Color(255, 210, 0),matrix.Color(0, 0, 255), matrix.Color(255, 0, 255), matrix.Color(0, 255, 255), matrix.Color(255, 255, 255),matrix.Color(91, 68, 43),matrix.Color(0, 0, 0)};

static unsigned char cloud[]={0x00,0x00,0x00,0x06,0x6f,0xef,0xff,0x7e};
void loop()
{
	matrix.fillScreen(0);
	matrix.drawBitmap(0, positionReel,  rond, 8,8,colors[0]);
	matrix.show();
}
icone

Et voici un résultat :

Example_icone_meteoExample 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.

 

14 comments

  1. Merci !!
    Ca fait un moment que je lorgne lametric mais comme toi je la trouve trop cher et trop cloud.
    J’espère que tu pousseras l’expérience plus loin avec RPI

  2. Superbe !
    Ca me tente bien, y a juste le pb de la matrice, n’ayant pas de CNC, c’est bloquant pour me lancer…
    Beau travail en tout cas et bien détaillé.

  3. Bonjour,
    Très joli projet – Félicitations.
    Pourquoi utilses-tu la lib Adafruit pour les WS2812 alors que fastLed est bien plus performante ?
    @+

    1. J’ai testé les deux librairies, notamment FastLED sur mon projet de décoration de Noël. C’est peut-être une question d’habitude mais je la trouve plus complexe à utiliser et puis je n’avais pas besoin de tout ce que peut offrir FastLED… Mais à terme peut-être que je changerai … ou pas 🙂

  4. super realisation je pense a faire +/- la même chose depuis un moment 😉
    mais j’ai un probleme avec le code (comme d’habitue 🙂 )
    In file included from /home/dede/Arduino/ESPMetric-master/ESPMetric/ESPMetric.ino:11:0:
    sketch/WorldClockClient.h:28:26: fatal error: JsonListener.h: No such file or directory
    #include

  5. Bonjour,

    Article génial qui s’est fait attendre. J’ai hâte de mettre en application vos trouvailles.
    Par contre je suis étonné de voir que vous arriviez à commander une matrice de 37×8 leds avec un simple chargeur de téléphone de 5v 2A… Cela m’arrange aussi, sauf que par mesure de précaution j’avais prévu une alimentation de 5V à 4A…
    Vivement mon retour.

    1. La matrice fait 32×8. 2A suffisent parce que je baisse énormément la luminosité et les 256 LEDs ne sont jamais allumés en même temps. En tout cas avec mon alimentation de bureau, je ne passe pas les 1,5A.

  6. J’adore ce projet ! Bravo pour votre travail !
    Effectivement, j’aimerais beaucoup avoir le guide pour faire la même chose à base de Raspberry Pi zéro W !

  7. Super job, on a hâte de voir la V2 (avec un RPI zero W ?) pour la salle de bains 🙂
    Pour moi (c’est à dire mes petites mains et mon outillage), le problème c’est la grille, mais avec du carton epais (2 ou 3mm), un cuter pointu et de la patience cela doit être faisable. Sinon peut être que les grilles pour essuyer les rouleaux de peinture ont (avec un gros coup de bol) la même taille/espacement ? Autre possibilité: une plaque de 1cm de bois et percer des trous à la perceuse colonne dedans.

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *