Solution technique – Green Morsel
par Mathieu BOSSART, Ethan GOIRAND, Romain LETELLIER, Abner RODRIGUES, Sheryle TOURE
I. Contexte
Le recyclage des déchets alimentaires est un enjeu très important pour la transition zéro carbone envisagée pour 2050. Représentant 33% des déchets émis par les foyers français, ces déchets sont trop souvent jetés dans les poubelles non recyclage, pour être acheminées vers les centre d’incinération des déchets, ce qui entraîne une perte sèche à l’échelle mondiale, puisque le compostage est l’alternative la plus intéressante pour ces déchets.
Néanmoins, suite à de nombreuses interviews avec de potentiels usagers, il a été remarqué que la question de la praticité des composteurs dans les zones urbaines était un enjeu d’envergure. À cause des mauvaises odeurs, de l’encombrement qu’ils représentent, leur fragilité, beaucoup de citadins se voient obligés d’abandonner leur contribution au compost à la maison.
Des alternatives comme les bacs à compost en plein air ont été construits et envisagés dans les villes, mais les nombreux cas d’envahissement de ces espaces par les rats provoqué par des mauvaises pratiques ont été déclarés dans les villes, rebutant ainsi davantage les citadins à participer à cet effort collectif.
Forts de ces observations, nous avons décidé de tenter de rendre le compostage en appartement accessible, en proposant la solution d’un composteur connecté, en harmonie avec les autres dispositifs de la maison connectée, qui indique l’état du composteur et guide l’utilisateur aux bonnes pratiques de son composteur.
II. Réalisation
1) Les matériaux utilisés lors du projet
Fabrication du boitier
Nom | Caractéristique |
Carte électronique | ESP32 |
Capteur d’humidité | DHT11 |
Alimentation externe | 6V |
4 Piles | AA |
Interrupteur à levier | 2 positions |
Fabrication du composteur
Nom | Caractéristique |
Planche de bois | 0.84 m², 2 cm d’épaisseur |
Plaques de métal rectangulaires | Pliables à 90° |
Plaques de métal en T | Pliables à 90° |
Clips imprimés en 3D | PLA |
Plaque de bois | 376 cm², 2 mm d’épaisseur |
Grille petits carreaux imprimée en 3D | PLA, 2 mm, 11.5×14 cm² |
Grille grands carreaux imprimée en 3D | PLA, 5mm, 11.5×14 cm² |
Outils utilisés
Nom | |
Règle à niveau | Scie à chantreau |
Marteau | Scie circulaire |
Ciseaux à bois | Gants |
Serre-joints | Ponceuse |
Étau | Équerre |
Papier abrasif | Limes |
Imprimante 3D | Perceuse/Visseuse |
2) Les compartiments du composteur
Le composteur est composé de trois compartiments distincts, chacun ayant une fonction bien définie pour optimiser le processus de compostage. À ces compartiments s’ajoutent plusieurs éléments importants : un couvercle, des entonnoirs pour faciliter le transfert des matières, et quatre pieds pour stabiliser l’ensemble. Le volume des compartiments a été déterminé en se basant sur la consommation mensuelle moyenne des foyers français en matière organique, garantissant ainsi une capacité adaptée aux besoins domestiques courants. Une grille pourrait être ajoutée au dernier compartiment, augmentant ainsi la capacité totale en permettant une séparation efficace des matières.
I. Matériaux et fabrication des compartiments
Pour la construction des compartiments, nous avons utilisé des planches en bois composite d’une épaisseur de 2 cm. Bien que cette épaisseur soit excessive pour un composteur, ce choix a été dicté par la disponibilité immédiate et gratuite de ces matériaux sous forme de chutes. L’assemblage des compartiments repose sur des vis, assurant une structure robuste et durable. Les étapes de fabrication comprennent :
- Découpe : Les planches sont taillées selon les dimensions spécifiques des plans.
- Ponçage : Toutes les surfaces sont lissées pour éviter les échardes et améliorer l’ajustement des pièces.
- Assemblage : Les planches sont positionnées à l’aide de serres-joints, puis des trous sont percés pour préparer le vissage.
- Vissage : Les pièces sont solidement fixées pour former des compartiments rigides.
Pour renforcer l’assemblage et assurer une empilabilité fiable des compartiments, deux solutions ont été retenues :
- Plaques en métal : De petites plaques de dimensions 5,5×5,5 cm sont utilisées pour relier parfaitement les boîtiers entre eux.
- Clips imprimés en 3D : Fabriqués en PLA via une imprimante 3D, ces clips permettent de sécuriser l’empilement et d’ajouter une flexibilité au système.
En complément, plusieurs options peuvent être intégrées au composteur pour améliorer son efficacité et sa praticité. Par exemple, un couvercle peut être ajouté pour protéger les matières organiques des intempéries, tout en étant fabriqué à partir des mêmes planches en bois composite que les compartiments. Pour garantir une meilleure stabilité, des pieds réalisés à partir de chutes de bois peuvent être fixés à la base de la structure. Enfin, des entonnoirs peuvent être installés entre les compartiments, facilitant ainsi le transfert des matières d’un niveau à l’autre tout en minimisant les pertes et les débordements.
II. Focus sur le fond des compartiments
Le fond de chaque compartiment a été conçu pour garantir une gestion optimale des matières organiques. Les grilles, mesurant 14 cm x 12 cm, comportent des perforations adaptées (3 mm x 3 mm et 12 mm x 12,75 mm) pour assurer une bonne circulation de l’air et un drainage efficace. Ces grilles, imprimées en PLA pour sa résistance à l’humidité, ont été nettoyées, collées sur leurs supports, puis fixées aux compartiments à l’aide de clous.
3) Étapes de fabrication des compartiments
I. Découpages
Découpez à l’aide d’une scie sauteuse ou d’une scie circulaire 12 planches de bois 20×30 cm², il est aussi possible de découper ces planches à l’aide de la scie à chantreau tant que l’épaisseur du bois n’est pas trop importante, 1cm étant assez dangereux pour la scie à chantreau, la scie circulaire est plus sécurisée mais elle est aussi plus agressive auprès du bois.
II. Légère étape de ponçage
Juste afin de prévenir toute blessure liée au échardes formées par la découpe, on ponce rapidement toutes les planches avec une ponceuse au avec du papier abrasif
III. Fixation des pièces
A l’aide de serre-joints ou d’autres outils pour stabiliser et contraindre les mouvements des pièces, mettez en place le système décrit dans l’illustration suivante :
|
IV. Perçage des trous
Percez ensuite deux trous comme indiqué dans le schéma ci-après. Faites attention à faire des trous assez long pour que la vis que vous mettez ensuite puisse traverser la première planche et qu’elle soit assez longue pour maintenir la seconde planche de manière stable
V. Vissage
Insérez ensuite les deux vis en s’assurant que celles-ci soient assez longues.
Une fois cela fait, appliquez quelques contraintes à la structure en tirant vers différentes directions pour vérifier la solidité de la structure
VI. Répétition des étapes III, IV et V
Répétez ensuite les étapes III, IV et V avec de nouvelles planches que vous ajoutez afin d’obtenir la structure suivante :
VII. Répétez
Répétez ensuite toutes les étapes précédentes 2 fois avoir d’obtenir 3 compartiments différents
4) Mise en place des grilles
I. Découpage
A l’aide de la découpeuse laser, nous coupons des plaques fines de bois afin de pouvoir ensuite y entreposer grilles qui permetteront de laisser passer les déchets plus ou moins volumineux
Nous utilisons au total 2 plaques qui ont les mêmes dimensions (30cm x 34cm) avec des trous carrés tous de dimensions 11,5cm x 14cm. Il est important de prendre en compte l’épaisseur du composteur lors de la conception de la grille autrement certaines parties des trous risquent de se trouver entre la jointure de deux compartiments.
II. Grilles
Pour faciliter le passage des vers d’un compartiment à l’autre tout en entretenant le compost dans le compartiment, deux grilles ont été créées pour être fixées à la base des deux premiers compartiments. Les dimensions de la grille du compartiment supérieur présentent des trous plus grands (Figure : Grille 1), précisément pour faciliter l’enlèvement du matériau. La deuxième grille a des trous plus petits (Figure : Grille 2), pour empêcher le compost de passer à travers, mais pour permettre au liquide de compost de passer librement.
Pour réaliser l’impression, nous l’avons découpée dans le logiciel Maker Cura, avec un remplissage à 100 % et une température de table à 210°C
Base de la grille :
En raison des limites de l’imprimante 3D, la grille a été créée dans des dimensions réduites. Pour faciliter la fixation des grilles sur la boîte, une base en bois a été construite pour les grilles. Un laser Découpeuse a été utilisé à cet effet. Quatre coupes rectangulaires ont ainsi été réalisées.
Les images suivantes montrent les grilles respectives déjà fixées à la base.
III. Installation de la grille au composteur
La grille étant déjà dans les bonnes dimensions pour notre composteur, il nous a simplement suffit de clouer la plaque trouée aux plaques du compartiment. La plaque trouée étant assez fine, l’utilisation de clous était assez judicieuse et plus rapide. Vous avez le choix entre installer la grille en haut des compartiments ou en bas, cela importe peu, pour notre part, nous avons décidé d’installer la grille au bas des compartiments, elles se trouvent alors respectivement au bas des compartiments 1 et 2. Il est aussi important d’installer des grilles par ordre de décroissance en taille de grille, la grille la plus espacée doit se trouver tout en haut et au fur et à mesure que nous descendons, les grilles doivent être de moins en moins espacées.
Vous trouverez ci-dessous une représentation de la jonction avec la boîte :
5) Compartiments modulables
Afin de rendre les compartiments modulables, nous avons opté sur l’impression de loquets (en anglais latches) ainsi que des plaques de métal insérées aux quatres coins des compartiments afin d’empêcher le mouvement planaire des boîtes, assuré par les plaques de métal, mais aussi du mouvement vertical qui lui est assuré par les loquets.
I. Impression 3D des loquets
Le modèle 3D du loquet est disponible vers le lien suivant : https://www.thingiverse.com/thing:4605432
Il nous a suffit de l’imprimer avec l’imprimante 3D du fablab
II. Ajout des plaques de métal
Chaque plaque de métal est similaire et possède un structure bien particulière lui permettant d’être pliée facilement
Chaque plaque de métal est en réalité constituée de deux petites plaques soudées entre elles avec trois points de soudures. Ces trois points de soudures sont entourés en rouge sur l’illustration. L’idée est donc de plier à 90 degré chaque plaque, de percer si nécessaire (ce n’était pas le cas pour nous) le métal puis de le visser sur les coins.
Il est important de préciser que seuls les compartiments 2 et 3 nécessitent ces plaques, il en faut alors 8.
Placez chaque plaque dans un coin en s’assurant que chacune d’entre elle épouse parfaitement la forme de votre compartiment et installez-la en vérifiant que le haut du compartiment se situe plus ou moins au niveau du second point de soudure (celui au centre).
Vous pouvez par ailleurs ajuster la hauteur de la plaque selon vos envies, une plaque légèrement plus haute garantira davantage le blocage du composteur mais peut rendre difficile le démontage et inversement, le montage des compartiment peut s’avérer plus simple pour une plaque légèrement descendue cependant il est possible d’avoir un petit peu de jeu (qui pourra être compensé par les loquets).
III. Ajout des loquets
Les loquets maintenant imprimés, nous pouvons les installer. Par ailleurs, il est important de définir un côté avant et arrière au composteur lors de sa réalisation de manière à ce que tout s’emboîte parfaitement à la fin.
Les loquets seront situés sur les deux faces latérales des compartiments 2 et 3. Il est important de les placer au milieu pour mieux répartir la force du poids qu’ils soutiennent.
Les loquets sont composés en deux parties. Nommons respectivement les parties M et F pour la partie grande et petite
6) L’entonnoir
La conception et la fabrication de l’entonnoir fait partie de l’étape la plus difficile et chronophage de la fabrication du composteur. La découpe de l’entonnoir se doit d’être assez précise et, par manque d’outils de précision et aussi de matériel permettant la découpe angulaire, cette étape peut s’avérer être la plus ardue en termes de réflexion.
I. Découpe
Il faut d’abord découper les planches selon les dimensions que nous avons précisées dans les plans de fabrication. L’entonnoir se décompose en deux paires de deux trapèzes ayant respectivement les mêmes dimensions. La découpe est assez simple et linéaire, il n’est pas nécessaire ici de faire de découpe en angle.
II. Ajustements
L’étape d’ajustement est quant à elle très difficile, elle consiste à s’assurer que l’entonnoir et que chaque trapèze épousera la forme du compartiment auquel il sera attaché. En effet, nous avons jusqu’ici découpé des plaques de bois, nous avons alors à l’heure actuelle des plaques illustrées ci-après
L’illustration suivante permet de mieux imaginer la forme que le trapèze doit avoir pour faciliter sa jointure. Il s’agit d’une vue de profil sur laquelle on voit la plaque d’un compartiment sur la gauche et le trapèze qui doit venir se déposer sur la plaque
L’angle du trapèze est assez difficile à estimer à l’œil nu donc c’est assez difficile de savoir s’il est trop ou pas assez penché pour les mesure. Afin de limiter les risques que cela ne fonctionne pas, il faut s’y prendre en plusieurs parties.
a. S’assurer que chaque trapèze est droit et qu’il puisse facilement se coller à ses voisins.
En effet, lorsque nous penchons notre trapèze, son épaisseur est un problème car celui-ci entre en collision avec l’épaisseur de son voisin, il faut alors enlever une partie de l’épaisseur sur le côté comme l’indique le schéma suivant :
La structure est désormais censée pouvoir être capable de tenir d’elle-même. Il est donc possible de la déposer sur une surface plane (vérifier avec la règle à niveau avant) et donc de supprimer le surplus créé par l’épaisseur au niveau du bas (revoir fig X). Une fois cela fait, il sera donc possible pour votre entonnoir d’épouser la forme plate du compartiment 3.
III. Ajout de l’entonnoir au composteur
Si l’entonnoir épouse correctement la forme des plaques sur lesquelles il repose, il est alors maintenant temps de visser l’entonnoir au compartiment. Pour cela nous avons décidé d’enlever une petite partie des trapèzes au ciseau à bois de manière à pouvoir y insérer verticalement une vis.
Trapèze vu du haut | Trapèze vu de profil |
IV. Ajout des pieds
L’ajout des pieds est assez rapide et elle n’est pas difficile non plus, il est cependant important de s’assurer que le composteur est coplanaire et qu’il ne tangue pas sur le sol. Il faut donc se munir de 4 pieds en bois qui ont la même hauteur dans l’idéal même si ce n’est pas primordial et les ajouter aux quatres coins du composteur. Nous avons décidé, pour s’assurer de cette contrainte, de visser un pied à la fois et d’ensuite ajuster le reste en fonction de ce qu’il manque pour que le composteur soit droit.
7) Récupérateur d’eau
Pour faciliter la récupération de l’eau, une pièce a été développée pour être fixée à l’extrémité de la boîte, avec un trou fileté de 28 mm (comme une bouteille de boisson gazeuse). Le fichier a été imprimé en PLA, avec une température de table de 210°C et un taux de remplissage de 40%. Il a été pensé de manière à pouvoir insérer par dessous une bouteille en plastique qu’on viendrait « visser » pour pouvoir la bloquer en dessous et ainsi récupérer le thé à compost.
Cette pièce a été modélisée sur SolidWorks et voici les différentes mesures
8) Boîtier & Circuit Électronique
Conception du boitier en bois contenant le matériel électrique
Le boîtier destiné à accueillir les composants électroniques a été conçu pour garantir leur protection contre l’humidité. Les composants électroniques sont montés sur une plaque de prototypage perforée, qui facilite le câblage et les connexions. Cette plaque est solidement fixée au boîtier à l’aide de colle chaude, évitant les vibrations ou mouvements susceptibles de détériorer le montage. La robustesse du circuit repose sur des soudures qui maintiennent les connexions électriques et réduisent le risque de déconnexions accidentelles.
Le boîtier est fabriqué à partir de différentes planches en bois, choisies pour leur légèreté et leur résistance. Deux planches de 7,5 x 14 cm en bois fin de 0,5 cm d’épaisseur forment les côtés, tandis que deux planches de 7,5 x 7,5 cm en bois épais de 1,8 cm d’épaisseur assurent une base solide. Une dernière planche de 8,5 x 14 cm, également en bois fin, est utilisée pour compléter la structure. Ces éléments sont assemblés avec des clous et renforcés avec de la colle à bois pour une meilleure étanchéité.
Après avoir découpé les planches selon les dimensions spécifiées, celles-ci sont poncées pour éliminer les aspérités. Les serres-joints sont ensuite utilisés pour maintenir les planches en position pendant que des clous les fixent solidement entre elles. Une fois le boîtier assemblé, il est collé directement sur le composteur à l’aide de colle à bois, garantissant une fixation durable et stable.
Le Choix des composants
I. Carte électronique polyvalente (ESP-32)
La carte ESP32 est choisie dans le cadre de ce projet puisqu’elle permet d’effectuer des communications de haut niveau comme des requêtes HTTP, ce qui permet de fournir une interface pour consulter les données du composteur. De plus, la capacité élevée de
II. Le capteur d’humidité
La capteur d’humidité choisi est le DHT11. Il permet de capter à la fois l’humidité et la température ambiante du composteur. L’humidité du compost croît avec l’humidité ambiante du compartiment supérieur du compost. Pour des raisons pratiques, il n’est pas possible de placer un capteur dans les compartiments 2 et 3 du composteur, puisque celui-ci doit rester étanche pour éviter d’être endommagé.
III. L’alimentation
L’alimentation est assurée par quatre piles AA, délivrant une tension de 6V adaptée au fonctionnement de l’ensemble des composants. Pour garantir la sécurité et la stabilité du circuit, deux résistances de 220 ohms sont intégrées aux cathodes des DEL, limitant l’intensité du courant et préservant leur durée de vie. Les DEL offrent un retour visuel sur l’état du composteur, tandis que l’interrupteur à bascule permet une gestion efficace de l’alimentation.
La conception du circuit électronique
La conception du circuit électronique repose sur des choix stratégiques pour optimiser le fonctionnement et la durabilité du composteur. Un interrupteur à bascule a été intercalé entre la borne 5V de l’alimentation et la patte Vin de la carte ESP32, permettant à l’utilisateur de contrôler l’alimentation et ainsi préserver l’état de charge des batteries. La connexion de la sonde DHT11 a été planifiée : elle est alimentée via le pin central en 3V, connectée à la masse par un pin dédié et reliée à la patte 23 de l’ESP32 pour transmettre les données mesurées. Une ligne de masse commune relie tous les composants (DEL, alimentation, DHT11 et ESP32), garantissant un circuit cohérent tout en évitant les risques de court-circuit.
La fabrication du circuit électronique suit une méthodologie rigoureuse. Les composants sont soudés sur la plaque PCB en respectant le schéma électrique défini. Le code nécessaire au fonctionnement du composteur est ensuite téléversé sur la carte ESP32. Une fois les connexions établies, les composants sont fixés sur leur support à l’aide de colle chaude pour garantir leur stabilité et éviter tout mouvement qui pourrait affecter leur performance. Ce processus assure un montage compact, fiable et durable, parfaitement adapté aux exigences du composteur.
IV. Code
Ce projet repose sur le développement d’un système embarqué à l’aide d’une carte ESP, intégrant des fonctionnalités web pour interagir avec l’utilisateur. Le code fourni inclut non seulement le programme destiné à l’ESP, mais également deux pages HTML, des styles CSS intégrés, ainsi qu’un script JavaScript. Ces éléments permettent d’offrir une interface utilisateur accessible via un navigateur web.
Dans ce projet, le code web (HTML, CSS, JavaScript) n’a pas été séparé du code ESP. Cependant, il est tout à fait possible, et recommandé pour des projets de plus grande envergure, d’utiliser des outils comme PlatformIO pour séparer ces deux aspects. Cette approche facilite la maintenabilité et la mise à jour des différentes parties du projet.
Cette partie de la documentation se concentre uniquement sur le fonctionnement du code ESP, en décrivant les principales étapes, telles que la déclaration des variables, l’initialisation, la connexion au Wi-Fi, la gestion des routes, et la récupération des données via une API REST. La partie concernant l’interface web sera abordée dans une section ultérieure intitulée Interface Web.
a. Importation des bibliothèques utiles
b. Déclaration des variables relatives au matériel
Ici les broches de l’ESP qui sont reliées aux deux LED, au DHT sont spécifiées. LED_HIGH et LED_LOW correspondent respectivement aux LEDs bleue et jaune. |
c. Déclaration des variables nécessaires au fonctionnement du serveur et à la gestion du réseau
- SSID et mot de passe
Ces constantes stockent les informations de connexion au réseau Wi-Fi local |
- Serveur asynchrone
Un objet de type AsyncWebServer est créé sur le port 80 pour gérer les requêtes HTTP. |
- Variables de données
- L’encapsulation de deux pages HTML dans le code
“const char index_html[] PROGMEM = R”rawlitteral()rawliteral” permet d’encapsuler les pages html telles qu’elles ont été développées dans notre IDE.
d. La fonction setup() de l’ESP
Elle est appelée au démarrage de l’ESP
- Configuration du moniteur série
Permet d’afficher des messages dans le moniteur série pour faciliter le débogage. |
- Connexion au Wi-Fi
Cette section connecte l’ESP au réseau Wi-Fi en utilisant les informations fournies. Le code établit une connexion au réseau local en utilisant les constantes ssid et password. Une boucle while garantit que l’ESP reste en attente jusqu’à ce qu’il soit correctement connecté. Une fois connecté, l’adresse IP locale est affichée. Dans notre cas c’était: 192.168.171.23 . Cette adresse varie en fonction de l’ESP et du téléphone utilisé. Pensez à bien noter le votre pour pouvoir accéder à l’interface web de l’ESP.
- Gestion en mode asynchrone
Le mode asynchrone est géré par la bibliothèque ESPAsyncWebServer. Ce mode permet à l’ESP de traiter plusieurs requêtes en parallèle sans blocage.
exemple de gestion d’une requête GET:
Cette route retourne des données au format JSON (il s’agit d’une API qui affiche les données du capteur d’humidité) lorsque l’URL /data est appelée.
La gestion des routes repose sur la définition de chemins spécifiques qui peuvent être appelés via un navigateur ou une API REST. Les routes peuvent répondre à plusieurs types de méthodes HTTP, telles que GET, POST, etc
- Configuration du serveur HTTP
-
- Ajout d’une route racine / qui sert le fichier HTML principal (index_html).
- Ajout d’une route /infographie qui sert une autre page HTML (infographie_html).
- Ajout d’une route /data pour fournir les données du capteur (température et humidité) sous format JSON.
- Lancement du serveur
Une fois toutes les routes définies, le serveur HTTP est lancé. Cela permet de commencer à accepter des connexions entrantes |
e. La fonction loop()
La fonction loop() est principalement utilisée pour les tâches répétitives ou les mises à jour continues des données.
Lecture des capteurs :
-
- Lecture de la température et de l’humidité à partir du capteur DHT.
- Vérification des valeurs obtenues pour déterminer l’état du composteur.
Gestion des LEDs :
-
- Si l’ humidité dépasse un seuil prédéfini, les LEDs LED_HIGH ou LED_LOW sont allumées pour signaler un problème.
- Si l’humidité est trop basse(inférieure à 40%), LED_LOW s’allume pour indiquer que le composteur a besoin d’humidité;
- Si l’humidité est trop haute(supérieure à 60%), LED_HIGH s’allume pour indiquer qu’on doit baisser le taux d’humidité du composteur.
- Les données sont envoyées chaque 2 secondes.
- Si l’ humidité dépasse un seuil prédéfini, les LEDs LED_HIGH ou LED_LOW sont allumées pour signaler un problème.
Mise à jour des données :
-
- Les données mesurées (température et humidité) sont utilisées pour mettre à jour la route /data du serveur HTTP.
f. Interface web
La structure de l’interface web est simple: deux pages web index.html et infographie.html; le code css et javascript sont directement dans le html. On pourrait les séparer à l’avenir pour mieux organiser et faciliter la maintenance.
La page d’accueil: index.html
Cette page est accessible depuis un navigateur sur un téléphone ou un ordinateur connecté au même réseau WiFi que l’ESP. C’est celle qu’on voit dès qu’on saisit l’adresse “http://192.168.171.23/” dans notre cas. Dans le cas d’un autre dispositif, ça sera: “http://X.X.X.X/” où X.X.X.X correspond à l’adresse IP de votre carte ESP
- Éléments principaux de la structure HTML
- <head>
Contient les métadonnées de la page comme l’encodage, le titre, et les liens vers les styles CSS.
- Éléments principaux de la structure HTML
- <head>
Contient les métadonnées de la page comme l’encodage, le titre, et les liens vers les styles CSS.
-
- <body>
- Contient la structure principale de la page, divisée en plusieurs sections qui sont des “div” :
- main : Conteneur principal regroupant tous les contenus.
- content : Affiche le titre de la page.
- logo : Section pour afficher un logo.
- data : Blocs affichant la température et l’humidité.
- contentInfo : Lien vers une infographie.
- bas : Pied de page avec les crédits.
- Contient la structure principale de la page, divisée en plusieurs sections qui sont des “div” :
- <body>
Remarque importante:
-
- L’image pour background de la page de garde utilisée a été hébergée sur le site i.imgur.com. L’autre alternative serait de charger vos médias directement dans l’ESP si vous ne voulez pas utiliser cette plateforme.
- Dans le code de l’ESP, le lien “infographie.html” devra être changé par “/infographie” pour correspondre effectivement à la route qui a été définie dans l’ESP pour la page d’infographie. Si celà n’est pas fait, il y aura une erreur; la page infographie ne sera pas renvoyée.
- Apparence (CSS)
Styles généraux
Utilisation de * pour réinitialiser les marges et les paddings et modification de la police des écritures sur notre page:
Section principale (.main)
Arrière-plan avec une image et un dégradé :
Blocs de données (.data)
Contient des cartes affichant les valeurs du composteur :
Disposition flexible :
Lien vers l’infographie (.contentInfo)
Animation pour une flèche verte et un texte :
Bas de la page
Adaptation pour les petits écrans :
- Scripts (JavaScript)
Fonctionnalités principales
-
- Mise à jour des données en temps réel
Exemple de requête au serveur pour récupérer la température et l’humidité :
Fonctionnement
- Récupère les données depuis un serveur (endpoint /data).
- Met à jour les éléments HTML identifiés par id avec les nouvelles valeurs.
La page d’infographie: infographie.html
Cette page est accessible depuis un navigateur sur un téléphone ou un ordinateur connecté au même réseau WiFi que l’ESP. C’est celle qu’on voit dès qu’on saisit l’adresse “http://192.168.171.23/infographie” dans notre cas. Dans le cas d’un autre dispositif, ça sera: “http://X.X.X.X/infographie” où X.X.X.X correspond à l’adresse IP de votre carte ESP.
- Éléments principaux de la structure HTML
Il a la même structure que la page d’accueil.
Ici il n’y a pas de script javascript
Remarque importante:
- L’image de l’ infographie utilisée a été hébergée sur le site i.imgur.com. L’autre alternative serait de charger vos médias directement dans l’ESP si vous ne voulez pas utiliser cette plateforme.
- Dans le code de l’ESP, le lien “index.html” devra être changé par “/” pour correspondre effectivement à la route qui a été définie dans l’ESP pour la page d’accueil. Si celà n’est pas fait, il y aura une erreur; la page d’accueil ne sera pas renvoyée.
III. Résultats
IV. Perspectives
Pour ce projet, il subsiste encore quelques idées qui pourraient potentiellement être mises en place pour aller plus loin.
Parmi elles, on trouve :
– La mise en place d’un broyeur à déchets
– La modification du circuit électronique pour pouvoir consulter l’état de charge du composteur en plus des autres informations importantes,
– La mise en place une application téléchargeable qui récupère et cache les informations, plutôt que proposer ces informations sur l’interface graphique
– La mise en place un système pour étanchéifier le composteur.