SAE Ombrière - Système de supervision - BUT3 - S6


Projet SAE Ombrière - Système de supervision intelligent
Historique des modifications sur l'interface Web

Historique des modifications sur l'interface Web (extrait)

Généralités :
Date de début : Février 2025 - BUT 3 S6
Durée : 4 mois
Groupe : 6 personnes - Chef de projet
Caractéristiques :
Complexité 40%
Recherche 45%
Ouverture 60%
Travail personnel 80%
Compétences travaillées :
Gestion de projet : Méthode SCRUM, coordination équipe, Git workflow, planning tâches
Développement web : PHP/MySQL, JavaScript, Bootstrap, CSS responsive, RGAA
Systèmes embarqués : Linux, serveur Apache, déploiement production, configuration réseau
Streaming vidéo : FFmpeg, streaming HLS, capture temps réel, protocole RTSP

Note : Les niveaux présentés dans "Caractéristiques" sont subjectifs. La signification précise est détaillée dans Détails des caractéristiques des projets universitaires.



J'ai dirigé le développement d'un système de supervision complet pour ombrière automatisée, dans la continuité des travaux d'automatisme du semestre précédent. En tant que chef de projet, j'ai coordonné une équipe de 6 personnes pour créer une interface web de supervision, intégrer un système de livestream, et déployer l'ensemble sur plateforme embarquée LattePanda.

Schéma global système ombrière
Architecture globale du système : intégration supervision, base de données et automatisme
Gestion de projet

J'ai mis en place une méthode SCRUM simplifiée adaptée au contexte universitaire. Le découpage du projet en sous-catégories (interface web, base de données, API météo, livestream) m'a permis d'assigner efficacement les membres selon leurs compétences. L'utilisation d'un tableau physique avec post-it (colonnes À faire/En cours/Terminé) s'est révélée plus efficace que les outils numériques pour maintenir l'engagement de l'équipe.

Tableau SCRUM physique
Méthode SCRUM adaptée : tableau physique pour optimiser l'engagement équipe

J'ai établi un workflow Git rigoureux avec branches dédiées pour chaque fonctionnalité suivant le pattern f-<nom-fonctionnalité>. Cette convention de nommage facilite l'identification des features en développement et maintient la lisibilité de l'historique. Chaque membre dispose de sa propre branche de travail, évitant les conflits lors des développements parallèles.

La protection de la branche main impose des pull requests obligatoires avec review systématique avant fusion. Cette approche garantit la qualité du code et permet la détection précoce des erreurs. J'ai configuré des hooks Git côté client pour automatiser les vérifications syntaxiques et respecter les standards de codage PHP/JavaScript établis.

Le repository "Interface-Web" centralise l'ensemble du projet avec 223 commits représentant 6 204 lignes de code incluant commentaires et documentation. L' historique des commits montre tout les commits réalisés durant ce projet dans les différentes branches. La granularité des commits suit la philosophie "atomic commits" : chaque commit représente une modification logique complète, facilitant les rollbacks et le debugging. Cette méthodologie a permis une collaboration fluide sans conflit majeur sur 4 mois de développement.

Le code source complet est accessible sur GitHub : github.com/SAE601. Cette plateforme centralise l'historique des développements, la documentation technique et facilite la collaboration continue entre les membres de l'équipe.

J'ai mis en place une stratégie de release avec tags sémantiques (v1.0, v1.1) marquant les étapes importantes : prototype fonctionnel, intégration livestream, déploiement production. Les branches de hotfix permettent les corrections urgentes sans perturber le développement des nouvelles fonctionnalités, assurant la stabilité en production.

Livestream et vision

Nous avons développé un système de surveillance vidéo temps réel basé sur FFmpeg et protocole HLS (HTTP Live Streaming). Le flux vidéo est découpé en segments .ts de 10 secondes avec playlist .m3u8 dynamique, optimisant stockage et latence. Cette approche garantit compatibilité navigateurs et appareils mobiles.

L'architecture repose sur un serveur Python (server.py) orchestrant les scripts Bash stream.sh et acquireimg.sh. Le premier gère le streaming via FFmpeg, le second capture images intervalles réguliers pour time-lapse. Les chemins d'accès images sont stockés en base via requêtes SQL pour validation automatique du processus.

Nous avons résolu un problème critique de FFmpeg sur LattePanda nécessitant création d'un fichier .mp4 initial avant streaming. Le script dimw.sh automatise cette initialisation, garantissant fonctionnement sans intervention manuelle. La gestion CORS côté serveur Python simplifie l'intégration web.

Déploiement LattePanda

Nous avons configuré l'environnement complet sur LattePanda avec ouverture ports stratégiques : 3306 (MySQL), 80 (Apache), 20 (FTP). L'installation stack LAMP (Linux, Apache, MySQL, PHP) via gestionnaire de paquets a été complétée par FFmpeg pour traitement vidéo et Python pour scripts backend.

La configuration MySQL pour accès distant nécessitait modification bind-address (0.0.0.0) et création utilisateur dédié avec permissions réseau. PhpMyAdmin a été sécurisé avec utilisateur restreint et configuration Apache adaptée. Ces modifications permettent collaboration équipe avec accès centralisé base de données.

Nous avons documenté l'ensemble des procédures d'installation, commandes maintenance et informations connexion. La connexion IHM via CODESYS a été validée avec requêtes insertion/sélection fonctionnelles. Le contournement proxy universitaire a nécessité réseau alternatif temporaire pour installation.

Interface web et accessibilité

J'ai supervisé le développement d'une interface responsive respectant 10+ normes RGAA (Référentiel Général d'Amélioration de l'Accessibilité). L'implémentation de 7 modes d'affichage (défaut, sombre, contrasté, deuteranope, protanope, tritanope, achromatope) assure accessibilité utilisateurs malvoyants et daltoniens.

L'architecture utilisateur inclut gestion comptes sécurisée (hashage mot de passe, validation regex), droits différenciés membre/administrateur, et persistance préférences affichage. Le système de gestion recettes permet CRUD complet via modals Bootstrap avec validation SQL et messages confirmation.

L'intégration API OpenWeather enrichit données station météo locale avec prévisions externes. Le dashboard centralise informations critiques : météo temps réel, alertes système, visualisation bacs avec onglets données/photos/sommaire. Cette approche modulaire facilite maintenance et extensions futures.

Interface web finale
Interface finale : design responsive avec thème nature et accessibilité RGAA (en m'excusant pour la qualité)