# Affichage des Informations USB Détaillées - Frontend ## Vue d'ensemble Section dynamique ajoutée au formulaire de périphériques pour afficher toutes les informations techniques USB extraites lors de l'import. ## Comportement ### Affichage Conditionnel La section **"Informations USB Détaillées"** est : - ✅ **Visible** : Si le périphérique contient des données USB (`vendor_id`, `product_id`, `usb_type`, ou `interface_classes`) - ❌ **Cachée** : Si aucune donnée USB n'est présente (périphériques non-USB) ### Déclenchement La section est automatiquement remplie lors de : 1. **Import USB CLI** (`lsusb -v`) → Fonction `importSelectedUSBDevice()` 2. **Import USB Structuré** (info formatée) → Fonction `importUSBStructured()` 3. Édition d'un périphérique existant avec données USB ## Champs Affichés ### Grille Responsive (12 champs) | Champ | Description | Exemple | Source USB | |-------|-------------|---------|------------| | **Vendor ID** | Identifiant hexadécimal du fabricant | `0x0781` | `idVendor` | | **Product ID** | Identifiant hexadécimal du produit | `0x55ab` | `idProduct` | | **Fabricant** | Nom du fabricant | `SanDisk Corp.` | `iManufacturer` | | **Type USB Réel** | Type basé sur vitesse négociée | `USB 3.0` | Vitesse → Type | | **Version USB Déclarée** | Version déclarée par le périphérique | `USB 3.20` | `bcdUSB` | | **Vitesse Négociée** | Vitesse réelle de connexion | `SuperSpeed (5 Gbps)` | Détection vitesse | | **Puissance Max** | Consommation maximale | `896 mA` | `MaxPower` | | **Mode Alimentation** | Type d'alimentation | `Bus Powered` | `bmAttributes` | | **Alimentation Suffisante** | Suffisance du port | `✅ Oui` / `⚠️ Non` | Calcul normatif | | **Firmware Requis** | Nécessite pilote spécifique | `✅ Non` / `⚠️ Oui` | Classe 255 | | **Device Class** | Classe du périphérique | `0 [unknown]` | `bDeviceClass` | | **Interface Classes** | Classes d'interface (normative) | `8 (Mass Storage)` | `bInterfaceClass` | ## Indicateurs Visuels ### Alimentation Suffisante - ✅ **Oui** : Le port peut alimenter le périphérique - USB 2.0 : MaxPower ≤ 500 mA - USB 3.x : MaxPower ≤ 900 mA - ⚠️ **Non** : Risque d'alimentation insuffisante ### Firmware Requis - ✅ **Non** : Utilise des classes USB standard - ⚠️ **Oui (classe 255)** : Nécessite pilote + microcode spécifique (Vendor Specific) ## Implémentation Technique ### HTML Structure ```html ``` ### CSS Grid ```css .usb-details-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .usb-details-grid .form-group input[readonly] { background-color: #1e1e1e; color: #a9b7c6; border: 1px solid #3a3a3a; cursor: default; } ``` **Avantages** : - Grille responsive s'adaptant à la largeur d'écran - Minimum 250px par colonne - Remplissage automatique de l'espace disponible ### JavaScript Logic ```javascript function fillUSBDetails(caracteristiques) { if (!caracteristiques) { // Hide section if no data document.getElementById('usb-details-section').style.display = 'none'; return; } // Check if we have USB-specific fields const hasUSBData = caracteristiques.vendor_id || caracteristiques.product_id || caracteristiques.usb_type || caracteristiques.interface_classes; if (!hasUSBData) { document.getElementById('usb-details-section').style.display = 'none'; return; } // Show section and fill fields document.getElementById('usb-details-section').style.display = 'block'; // Set all fields setField('usb_vendor_id', caracteristiques.vendor_id); setField('usb_product_id', caracteristiques.product_id); // ... etc // Format interface classes if (caracteristiques.interface_classes?.length > 0) { const interfaceClassesStr = caracteristiques.interface_classes .map(ic => `${ic.code} (${ic.name})`) .join(', '); setField('usb_interface_classes', interfaceClassesStr); } } ``` ## Workflows Utilisateur ### Workflow 1 : Import USB CLI (lsusb -v) 1. Utilisateur clique **"Importer USB (lsusb)"** 2. Colle la sortie de `sudo lsusb -v` 3. Sélectionne un périphérique 4. Click **"Finaliser"** 5. ✅ **Formulaire pré-rempli** avec section USB détaillée visible 6. Utilisateur vérifie les informations techniques 7. Enregistre le périphérique ### Workflow 2 : Import USB Structuré (Info) 1. Utilisateur clique **"Importer USB (Info)"** 2. Colle les informations formatées 3. Click **"Importer"** 4. ✅ **Formulaire pré-rempli** avec section USB détaillée visible 5. Utilisateur complète et enregistre ### Workflow 3 : Périphérique Non-USB 1. Utilisateur crée un périphérique manuel (câble, console, etc.) 2. Remplit les champs généraux 3. ❌ **Section USB masquée** (pas de données USB) 4. Enregistre normalement ## Exemples de Rendu ### Exemple 1 : Clé USB SanDisk ``` ┌─────────────────────────────────────────────────────────────┐ │ Informations USB Détaillées │ ├─────────────────────────────────────────────────────────────┤ │ Vendor ID │ Product ID │ │ 0x0781 │ 0x55ab │ ├────────────────────────┼────────────────────────────────────┤ │ Fabricant │ Type USB Réel │ │ SanDisk Corp. │ USB 3.0 │ ├────────────────────────┼────────────────────────────────────┤ │ Version USB Déclarée │ Vitesse Négociée │ │ USB 3.20 │ SuperSpeed (5 Gbps) │ ├────────────────────────┼────────────────────────────────────┤ │ Puissance Max │ Mode Alimentation │ │ 896 mA │ Bus Powered │ ├────────────────────────┼────────────────────────────────────┤ │ Alimentation Suffisante│ Firmware Requis │ │ ✅ Oui │ ✅ Non │ ├────────────────────────┼────────────────────────────────────┤ │ Device Class │ Interface Classes │ │ 0 [unknown] │ 8 (Mass Storage) │ └────────────────────────┴────────────────────────────────────┘ ``` **Observations** : - Type USB 3.0 détecté depuis vitesse SuperSpeed - Alimentation suffisante : 896 mA ≤ 900 mA (USB 3.x) - Classification normative via `bInterfaceClass = 8` ### Exemple 2 : Adaptateur WiFi Realtek (Firmware Requis) ``` ┌─────────────────────────────────────────────────────────────┐ │ Informations USB Détaillées │ ├─────────────────────────────────────────────────────────────┤ │ Vendor ID │ Product ID │ │ 0x0bda │ 0x8176 │ ├────────────────────────┼────────────────────────────────────┤ │ Fabricant │ Type USB Réel │ │ Realtek Semiconductor │ USB 2.0 │ ├────────────────────────┼────────────────────────────────────┤ │ Puissance Max │ Mode Alimentation │ │ 500 mA │ Bus Powered │ ├────────────────────────┼────────────────────────────────────┤ │ Alimentation Suffisante│ Firmware Requis │ │ ✅ Oui │ ⚠️ Oui (classe 255) │ ├────────────────────────┼────────────────────────────────────┤ │ Interface Classes │ │ │ 255 (Vendor Specific) │ │ └────────────────────────┴────────────────────────────────────┘ ``` **Observations** : - ⚠️ **Firmware Requis** : Nécessite pilote Realtek spécifique - Classe 255 (Vendor Specific) détectée ## Fichiers Modifiés ### Frontend 1. **[frontend/peripherals.html](../frontend/peripherals.html)** - Lignes 241-325 - Nouvelle section `id="usb-details-section"` - 12 champs en lecture seule 2. **[frontend/css/peripherals.css](../frontend/css/peripherals.css)** - Lignes 668-685 - Classe `.usb-details-grid` - Styles pour champs `readonly` 3. **[frontend/js/peripherals.js](../frontend/js/peripherals.js)** - Lignes 32-107 : Fonction `fillUSBDetails()` - Ligne 459 : Appel depuis import CLI - Ligne 629 : Appel depuis import structuré ## Avantages ✅ **Transparence** : Toutes les informations USB visibles ✅ **Pédagogique** : Explications inline (tooltips) ✅ **Diagnostic** : Détection problèmes alimentation/firmware ✅ **Normative** : Affichage `bInterfaceClass` (critique) ✅ **Responsive** : Adaptation automatique à la taille d'écran ✅ **Conditionnel** : Masqué pour périphériques non-USB ## Limitations ⚠️ **Champs en lecture seule** : Informations extraites automatiquement, non éditables ⚠️ **Pas de validation** : Les données proviennent directement de l'import ⚠️ **Langue française** : Labels en français uniquement ## Améliorations Futures 1. **Tooltips explicatifs** : Au survol, explication détaillée de chaque champ 2. **Copie rapide** : Bouton pour copier vendor_id:product_id 3. **Liens externes** : Lien vers USB ID Database pour vendor/product 4. **Codes couleur** : Rouge/Orange/Vert selon type USB et puissance 5. **Export** : Bouton pour exporter les infos USB en JSON/YAML 6. **Comparaison** : Afficher différences avant/après mise à jour