261 lines
12 KiB
Markdown
Executable File
261 lines
12 KiB
Markdown
Executable File
# 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
|
|
<div class="form-section full-width" id="usb-details-section" style="display: none;">
|
|
<h3>Informations USB Détaillées</h3>
|
|
<div class="usb-details-grid">
|
|
<div class="form-group">
|
|
<label for="usb_vendor_id">
|
|
Vendor ID
|
|
<span class="help-text-inline">(idVendor)</span>
|
|
</label>
|
|
<input type="text" id="usb_vendor_id" readonly>
|
|
</div>
|
|
<!-- ... 11 autres champs ... -->
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
### 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
|