Plante connectée avec capteur d’humidité, écran digital et LED d’avertissement

Il y a quelques temps j’avais commandé un kit de démarrage Arduino qui contient un Arduino UNO et une quinzaine de capteurs et périphériques (température, humidité, RFID, bluetooth, LEDs, résistances, etc…) enfin bon, le kit complet pour démarrer et commencer quelques projets sympa. J’ai donc décidé d’utiliser ce qui me restait pour faire…

Le projet

Ce projet concerne donc la mise en place d’un capteur d’humidité, relié à une LED et un écran 4 digits / 7 segments. Cet ensemble permet donc d’avoir une « plante connectée » qui affiche le taux d’humidité de la terre sur l’écran et qui allume la LED rouge, synonyme d’avertissement si la terre est trop sèche : il faut arroser!

A propos de l’écran

La difficulté la plus importante que j’ai rencontré a été pour le branchement et la programmation de l’écran. Après avoir essayé plusieurs librairies sans succès, j’ai laissé tomber et je me suis tourné vers un bout de code chinois que j’ai trouvé au fin fond des résultats Google : http://www.cnblogs.com/kaixuanpisces/p/4542176.html. C’est un peu brouillon mais pour moi c’est le seul qui a fonctionné.

Connection de l’écran 4 digits / 7 segments : SH5461AS

screen_4digits_7segments_connection_SH5461AS

Premier et dernier projet que j’ai fait avec cet écran, il utilise 12 (DOUZE!) pins et c’est une vraie galère pour le faire fonctionner. Sinon, je n’utilise aucune librairie externe puisque toute la gestion de l’écran (allumage/extinction d’un segment, réinitialisation complet, etc…) est codée ci-dessous.

Le code

[javascript]
int y[8] = {1,2,3,4,5,6,7,8};
int d[4] = {12,11,10,9};

// Digital screen map
int digital[10][8] = {
{6,y[0],y[1],y[2],y[3],y[4],y[5]}, // 0
{2,y[1],y[2]}, // 1
{5,y[0],y[1],y[3],y[4],y[6]}, // 2
{5,y[0],y[1],y[2],y[3],y[6]}, // 3
{4,y[1],y[2],y[5],y[6]}, // 4
{5,y[0],y[2],y[3],y[5],y[6]}, // 5
{6,y[0],y[2],y[3],y[4],y[5],y[6]}, // 6
{3,y[0],y[1],y[2]}, // 7
{7,y[0],y[1],y[2],y[3],y[4],y[5],y[6]}, // 8
{6,y[0],y[1],y[2],y[3],y[5],y[6]} // 9
};

long n = 1;
int x = 100;
double del = 200000;

void setup()
{
// Serial init on 9600 baud
Serial.begin(9600);

pinMode(A0, INPUT); // Moisture sensor
pinMode(13, OUTPUT); // Led

// Initialize segments
for (int i=0;i<8;i++) {
pinMode(y[i],OUTPUT);
}

// Initialize digits
for(int i=0;i<4;i++) {
pinMode(d[i],OUTPUT);
}
}

void loop()
{
// Retrieve moisture sensor value
int SensorValue = analogRead(A0);
String sValue = String(SensorValue);

// Split sensor value to write specific number on digital screen
int first = sValue.substring(0, 1).toInt();
int secon = sValue.substring(1, 2).toInt();
int third = sValue.substring(2, 3).toInt();

// State: DRY
if (SensorValue < 1000 && SensorValue >= 600) {
digitalWrite(13, HIGH);
}

// State: HUMID
if (SensorValue < 600 && SensorValue >= 370) {
digitalWrite(13, LOW);
}

// State: WATER
if (SensorValue < 370) {
digitalWrite(13, LOW);
}

// Write digital screen numbers
clearLEDs();
pickDigit(2);
showDigital(first);
delayMicroseconds(del);

clearLEDs();
pickDigit(3);
showDigital(secon);
delayMicroseconds(del);

clearLEDs();
pickDigit(4);
showDigital(third);
delayMicroseconds(del);
}

/*
* This function clears all LEDs
*/
void clearLEDs(){
for(int i=0;i<8;i++) {
digitalWrite(y[i],LOW);
}
}

/*
* Select a digit (1 to 4)
*/
void pickDigit(int x){
for(int i=0;i<4;i++) { digitalWrite(d[i],HIGH); } if(x>4) {
x=4;
}
digitalWrite(d[x-1],LOW);
}

/*
* Switch ON specific segment to display the exected number
*/
void showDigital(int x){
for(int i=1;i<=digital[x][0];i++) {
digitalWrite(digital[x][i], HIGH);
}
}
[/javascript]

Pour ceux qui souhaitent contribuer ou télécharger la dernière version du code (celui-ci ne sera pas mis à jour), voilà le repository Github : https://github.com/joeybronner/moisturedigitalplant

Javascript : Savoir si deux élements du DOM se chevauchent ou se superposent

Les méthodes isOverlapping() et isInside() ont déjà le premier avantage d’être en pur javascript. Leurs fonctionnalités sont donc de déterminer si deux éléments se chevauchent ou se superposent. C’est très pratique lorsque qu’on veut gérer la superposition des labels pour masquer ceux qui sont partiellement visibles par exemple.

getBoundingClientRect

La méthode getBoundingClientRect() est appliquée sur chacun des éléments du DOM afin de déterminer leurs propriétés (en pixels) :

  • left
  • top
  • right
  • bottom

Ces valeurs sont propres au viewport (zone de visualisation) du client sur lequel cette fonction est exécutée.

isOverlapping

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}[/javascript]

La fonction isOverlapping() renvoie donc true si elem1 et elem2 se chevauchent.

isInside

[javascript]function isOverlapping (elem1, elem2) {
var rect1 = elem1.getBoundingClientRect();
var rect2 = elem2.getBoundingClientRect();

return (
((rect2.top <= rect1.top) && (rect1.top <= rect2.bottom)) &&
((rect2.top <= rect1.bottom) && (rect1.bottom <= rect2.bottom)) &&
((rect2.left <= rect1.left) && (rect1.left <= rect2.right)) &&
((rect2.left <= rect1.right) && (rect1.right <= rect2.right))
);
}[/javascript]

La fonction isInside() renvoie donc true si elem1 est entièrement à l’intérieur de elem2 (ou inversement…).

Activer le compteur FPS dans votre navigateur Chrome

A quoi ça sert ?

Cet outil, intégré au navigateur Google Chrome, permet de connaître le nombre d’images par secondes (FPS ou Frame Per Seconds) affichées par un site web : ce qui équivaut à la latence… Il est mis à jour en temps réel et s’affiche en sur-impression d’un site ce qui vous permet de mesurer le niveau de latence via 3 indicateurs :

  • Frame rate (nombre d’images par secondes)
  • GPU (Graphical Process Unit) Raster
  • GPU (Graphical Process Unit) Memory

Les deux indicateurs liés au GPU permettent de voir le niveau de saturation de la carte graphique. Elle l’est rarement puisque les performances des cartes de nos jours nous permettent de faire de nombreux calculs en parallèle (largement suffisant pour nos sites webs)

Activation

  1. Tapez chrome://flags/ dans votre barre d’adresse
  2. Recherchez l’extension FPS counter
  3. Activez le flag en cliquant sur “Enable”
  4. Relancez Chrome

Et voilà le travail, le compteur FPS s’affiche en haut à droite de chacune de vos pages (voir ci-dessous):

Capture d’écran 2016-03-08 à 07.29.16

Rien ne s’affiche ?

  1. Ouvrir le Chrome Dev Tools
  2. Options > More tools > Rendering Settings
  3. Activer le flag “Show FPS meter”

Capture d’écran 2016-03-08 à 07.34.25

Debugger Node.js avec node-inspector (Chrome Dev Tools)

La première solution pour débugger la partie serveur en Node est de créer des traces via des console.log, console.info, console.error etc… mais ce n’est pas le but de cet article puisqu’il existe une autre manière beaucoup plus efficace de debugger ce code là grace au plugin node-inspector (Chrome Dev Tools).

Au cas où, je mets quand même les différentes options pour ceux qui souhaitent débugger dans la console :

  • console.log([data], […]);
  • console.info([data], […]);
  • console.error([data], […]);
  • console.warn([data], […]);
  • console.dir(obj);
  • console.time(label);
  • console.timeEnd(label);
  • console.trace(label);
  • console.assert(expression, [message]);

Utiliser son browser

Le gros avantage de debugger dans le Chrome Dev Tools c’est de faire du pas à pas et de pouvoir examiner les variables, objets etc à la volée! Pour en profiter, il suffit d’installer le package node-inspector (à propos de package).

[javascript]npm install -g node-inspector[/javascript]

Au moment du démarrage du serveur, il faudra simplement rajouter le flag –debug

[javascript]node –debug server.js[/javascript]

Ou pour mettre un break sur le serveur dès son démarrage…

[javascript]node –debug-brk server.js[/javascript]

Le serveur a été démarré en mode debug, dernière étape, il faut maintenant lancer node-inspector qui va démarrer sur un autre port : 8080

[javascript]node-inspector &amp;[/javascript]

nodeinspector_command_line

Votre debugger est prêt à l’URL : http://127.0.0.1:8080/debug?port=5858

node_inspector_debugger_tool

Et voilà! Vous pouvez debugger côté serveur like a boss.

Hacker le graph des contributions de Github

A quoi ça sert ?

Si vous voulez faire le record du monde de la plus longue série de commits, combler les trous du graph ou tout simplement pour faire passer un message… J’ai créé un petit repo qui contient le script qu’il vous faut : https://github.com/joeybronner/script-hack-github-commit-graph

Instructions step by step

Pour accompagner le tout, j’ai hébergé une petite page web qui montre step by step comment faire.
Les 10 étapes sont très faciles : en 2 minutes chrono vous pouvez compléter les 365 commits de votre graph de contributions.

LIEN

Preview

hack_it_github
687474703a2f2f6a6f657962726f6e6e65722e66722f6861636b2d6769746875622d636f6d6d69742d67726170682f696d672f322e4a5047687474703a2f2f6a6f657962726f6e6e65722e66722f6861636b2d6769746875622d636f6d6d69742d67726170682f696d672f332e4a5047687474703a2f2f6a6f657962726f6e6e65722e66722f6861636b2d6769746875622d636f6d6d69742d67726170682f696d672f342e4a5047