Spaces:
Configuration error
Configuration error
| title: Monitoring | |
| emoji: 📊 | |
| colorFrom: blue | |
| colorTo: purple | |
| sdk: static | |
| app_file: index.html | |
| pinned: false | |
| # Monitoring des Appareils ⚡️ | |
| Un tableau de bord moderne et interactif pour la visualisation et l'analyse en temps réel de données électriques (tension et intensité) issues de différents appareils. | |
| ## 🌟 Fonctionnalités | |
| - **Interface Glassmorphism** : Un design moderne, dynamique et visuellement attractif avec mode sombre et animations subtiles. | |
| - **Visualisation de Données** : Graphiques interactifs (via Chart.js) pour la tension (V) et l'intensité (A). | |
| - **Filtrage Avancé** : | |
| - Filtrage temporel (par dates de début et de fin). | |
| - Sélection spécifique par appareil (Appareil 1, Appareil 2, Appareil 3 ou Tous). | |
| - **Calcul en Temps Réel** : Affichage dynamique des sommes de tension et d'intensité en fonction des filtres appliqués. | |
| - **Seuils d'Alerte** : Définition de seuils critiques visuels avec une ligne d'alerte sur les graphiques. | |
| - **Tolérance aux Pannes (Upload CSV)** : Si le fichier de données par défaut n'est pas trouvé (ex: problème de chemin lors du déploiement), l'interface permet d'importer manuellement le fichier CSV local. | |
| ## 🛠 Technologies Utilisées | |
| - **HTML5** : Structure de la page. | |
| - **CSS3 (Vanilla)** : Stylisation avancée avec variables CSS, animations clés (keyframes), et effet Glassmorphism. | |
| - **JavaScript (ES6)** : Logique de l'application et gestion du DOM. | |
| - **Chart.js** : Librairie pour le rendu des graphiques. | |
| - **PapaParse** : Lecture et parsing performant des fichiers CSV côté client. | |
| ## 🚀 Utilisation en Local | |
| Puisque le projet charge un fichier CSV (`donnees_appareils (1).csv`) de manière asynchrone, il est recommandé de l'exécuter via un serveur web local pour éviter les erreurs CORS du navigateur. | |
| 1. Ouvrez un terminal dans le dossier du projet. | |
| 2. Lancez un serveur HTTP, par exemple avec Python : | |
| ```bash | |
| python3 -m http.server 8000 | |
| ``` | |
| 3. Ouvrez votre navigateur à l'adresse `http://localhost:8000`. | |
| ## 🌐 Déploiement (Hugging Face Spaces) | |
| Ce projet est parfaitement adapté pour être hébergé sur les **Spaces Hugging Face** en tant que site statique : | |
| 1. Créez un nouveau Space et sélectionnez l'option **Static**. | |
| 2. Uploadez les fichiers `index.html`, `style.css`, `main.js` et votre fichier `.csv`. | |
| 3. Le site sera instantanément disponible publiquement avec un lien partageable ! | |
| ## 📁 Structure des données (CSV) | |
| Le fichier CSV attendu doit contenir au minimum les colonnes suivantes (séparées par des virgules) : | |
| - `Date` (format YYYY-MM-DD) | |
| - `Heure` (format HH:MM:SS) | |
| - `Tension_Appareil_1`, `Tension_Appareil_2`, `Tension_Appareil_3` | |
| - `Intensite_Appareil_1`, `Intensite_Appareil_2`, `Intensite_Appareil_3` | |
| *(S'il vous manque des données, l'application les ignorera ou mettra la valeur à 0 de manière sécurisée).* 🚀 | |