add go bench client
This commit is contained in:
Gilles Soulier
248
docs/UPDATE_MEMORY_DISPLAY_DETAILS.md
Normal file
248
docs/UPDATE_MEMORY_DISPLAY_DETAILS.md
Normal file
@@ -0,0 +1,248 @@
|
||||
# Update: Amélioration de l'affichage des détails RAM
|
||||
|
||||
**Date:** 2026-01-10
|
||||
**Version:** 1.1
|
||||
**Type:** Enhancement
|
||||
|
||||
## Problème
|
||||
|
||||
La fréquence des barrettes mémoire était affichée, mais manquait de visibilité et de détails techniques.
|
||||
|
||||
## Solution
|
||||
|
||||
### 1. Fréquence mise en évidence
|
||||
|
||||
**Avant :**
|
||||
```
|
||||
Vitesse: 2400 MHz
|
||||
```
|
||||
|
||||
**Après :**
|
||||
```
|
||||
⚡ Fréquence: 2400 MHz ← Plus gros, coloré, avec icône
|
||||
DDR4-2400 ← Référence technique
|
||||
```
|
||||
|
||||
### 2. Modifications apportées
|
||||
|
||||
#### JavaScript ([device_detail.js](frontend/js/device_detail.js))
|
||||
|
||||
**Améliorations :**
|
||||
- Icône ⚡ pour la fréquence
|
||||
- Fréquence en gras et colorée (couleur primaire)
|
||||
- Ajout d'une ligne technique `DDR4-2400` (format standard)
|
||||
- Icône 📦 pour le Part Number
|
||||
|
||||
**Code ajouté :**
|
||||
```javascript
|
||||
${dimm.speed_mhz ? `
|
||||
<div class="memory-slot-spec">
|
||||
<span class="memory-slot-spec-label">⚡ Fréquence</span>
|
||||
<span class="memory-slot-spec-value" style="font-weight: 700; color: var(--color-primary);">
|
||||
${dimm.speed_mhz} MHz
|
||||
</span>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${dimm.type && dimm.speed_mhz ? `
|
||||
<div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem;">
|
||||
${escapeHtml(dimm.type)}-${dimm.speed_mhz}
|
||||
</div>
|
||||
` : ''}
|
||||
```
|
||||
|
||||
#### CSS ([memory-slots.css](frontend/css/memory-slots.css))
|
||||
|
||||
**Améliorations :**
|
||||
- Taille de la capacité augmentée : 1.5rem → 1.75rem
|
||||
- Labels agrandis : 70px → 85px
|
||||
- Font-size des specs : 0.85rem → 0.9rem
|
||||
- Padding ajouté pour meilleure lisibilité
|
||||
- Gap entre icône et texte dans les labels
|
||||
|
||||
**Changements :**
|
||||
```css
|
||||
.memory-slot-size {
|
||||
font-size: 1.75rem; /* Avant: 1.5rem */
|
||||
font-weight: 700;
|
||||
line-height: 1.2; /* Nouveau */
|
||||
}
|
||||
|
||||
.memory-slot-spec {
|
||||
font-size: 0.9rem; /* Avant: 0.85rem */
|
||||
padding: 0.35rem 0; /* Nouveau */
|
||||
}
|
||||
|
||||
.memory-slot-spec-label {
|
||||
min-width: 85px; /* Avant: 70px */
|
||||
display: flex; /* Nouveau */
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. Aperçu visuel
|
||||
|
||||
**Slot occupé - Affichage amélioré :**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────┐
|
||||
│ 💾 DIMM0 [Occupé] │
|
||||
├─────────────────────────────────┤
|
||||
│ │
|
||||
│ 8 GB ← Plus gros │
|
||||
│ │
|
||||
│ [DDR4] ← Badge coloré│
|
||||
│ │
|
||||
│ ⚡ Fréquence: 2400 MHz │
|
||||
│ ^^^^^^^^^^^^^^^^ │
|
||||
│ En gras + coloré │
|
||||
│ │
|
||||
│ DDR4-2400 ← Référence │
|
||||
│ │
|
||||
│ Ⓢ Samsung ← Fabricant │
|
||||
│ │
|
||||
│ 📦 P/N: M378A1K43CB2-CTD │
|
||||
│ ^^^^^ Icône ajoutée │
|
||||
└─────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 4. Informations affichées (ordre)
|
||||
|
||||
Pour chaque slot occupé :
|
||||
|
||||
1. **En-tête**
|
||||
- 💾 Nom du slot
|
||||
- Badge "Occupé"
|
||||
|
||||
2. **Capacité**
|
||||
- Taille en GB (1.75rem, gras)
|
||||
|
||||
3. **Type de RAM**
|
||||
- Badge coloré DDR3/DDR4/DDR5
|
||||
|
||||
4. **Fréquence** ⭐ NOUVEAU STYLE
|
||||
- ⚡ Icône éclair
|
||||
- Valeur en **gras** et **colorée**
|
||||
- Format : `2400 MHz`
|
||||
|
||||
5. **Référence technique** ⭐ NOUVEAU
|
||||
- Format compact : `DDR4-2400`
|
||||
- Texte grisé, petit
|
||||
|
||||
6. **Fabricant**
|
||||
- Icône circulaire avec initiale
|
||||
- Nom complet
|
||||
|
||||
7. **Part Number** (si disponible)
|
||||
- 📦 Icône paquet
|
||||
- Code produit en monospace
|
||||
|
||||
### 5. Exemple complet
|
||||
|
||||
**Machine avec 2 barrettes DDR4 :**
|
||||
|
||||
```
|
||||
🎰 Configuration des slots mémoire
|
||||
|
||||
┌──────────────────────┐ ┌──────────────────────┐
|
||||
│ 💾 DIMM0 │ │ 💾 DIMM2 │
|
||||
│ [Occupé] │ │ [Occupé] │
|
||||
├──────────────────────┤ ├──────────────────────┤
|
||||
│ 8 GB │ │ 8 GB │
|
||||
│ [DDR4] │ │ [DDR4] │
|
||||
│ ⚡ Fréquence: 2400MHz│ │ ⚡ Fréquence: 2666MHz│
|
||||
│ DDR4-2400 │ │ DDR4-2666 │
|
||||
│ Ⓢ Samsung │ │ Ⓒ Crucial │
|
||||
│ 📦 M378A1K43CB2-CTD │ │ 📦 CT8G4DFS824A │
|
||||
└──────────────────────┘ └──────────────────────┘
|
||||
|
||||
┌──────────────────────┐ ┌──────────────────────┐
|
||||
│ 📭 DIMM1 │ │ 📭 DIMM3 │
|
||||
│ [Vide] │ │ [Vide] │
|
||||
├──────────────────────┤ ├──────────────────────┤
|
||||
│ Slot libre │ │ Slot libre │
|
||||
│ Aucune barrette │ │ Aucune barrette │
|
||||
│ installée │ │ installée │
|
||||
└──────────────────────┘ └──────────────────────┘
|
||||
```
|
||||
|
||||
### 6. Avantages
|
||||
|
||||
✅ **Fréquence plus visible** : Icône + couleur + gras
|
||||
✅ **Format technique** : DDR4-2400 (standard industrie)
|
||||
✅ **Icônes** : Visuellement plus clair (⚡, 📦)
|
||||
✅ **Lisibilité** : Texte plus gros, meilleur espacement
|
||||
✅ **Professionnalisme** : Présentation type fiche technique
|
||||
|
||||
### 7. Données collectées
|
||||
|
||||
Rappel des informations disponibles via `dmidecode -t 17` :
|
||||
|
||||
- ✅ **Slot** : DIMM0, DIMM1, etc.
|
||||
- ✅ **Size** : en MB/GB
|
||||
- ✅ **Type** : DDR3, DDR4, DDR5
|
||||
- ✅ **Speed** : en MHz (fréquence)
|
||||
- ✅ **Manufacturer** : Samsung, Crucial, Kingston, etc.
|
||||
- ✅ **Part Number** : Référence constructeur
|
||||
|
||||
**Données additionnelles possibles** (non implémentées) :
|
||||
- ⚠️ **Voltage** : 1.2V, 1.35V, 1.5V (nécessite modification script)
|
||||
- ⚠️ **CAS Latency** : CL16, CL18, etc. (nécessite modification script)
|
||||
- ⚠️ **Form Factor** : DIMM, SO-DIMM (nécessite modification script)
|
||||
- ⚠️ **Data Width** : 64-bit (nécessite modification script)
|
||||
|
||||
### 8. Compatibilité
|
||||
|
||||
- ✅ Rétrocompatible avec données existantes
|
||||
- ✅ Dégradation gracieuse si fréquence manquante
|
||||
- ✅ Tous navigateurs (CSS standard)
|
||||
- ✅ Responsive (mobile, tablette, desktop)
|
||||
|
||||
### 9. Fichiers modifiés
|
||||
|
||||
1. `frontend/js/device_detail.js`
|
||||
- Fonction `renderMemorySlot()` améliorée
|
||||
- Ajout icônes ⚡ et 📦
|
||||
- Ajout ligne technique DDR4-2400
|
||||
|
||||
2. `frontend/css/memory-slots.css`
|
||||
- Taille capacité augmentée
|
||||
- Specs agrandies et mieux espacées
|
||||
- Labels avec gap pour icônes
|
||||
|
||||
### 10. Pour aller plus loin
|
||||
|
||||
**Idées d'amélioration futures :**
|
||||
|
||||
1. **Ajout du voltage**
|
||||
- Modifier `bench.sh` pour extraire voltage via dmidecode
|
||||
- Afficher : "⚡ 2400 MHz @ 1.2V"
|
||||
|
||||
2. **CAS Latency**
|
||||
- Extraire via dmidecode (Configured Memory Speed)
|
||||
- Afficher : "DDR4-2400 CL16"
|
||||
|
||||
3. **Dual/Quad channel**
|
||||
- Détecter configuration multi-canal
|
||||
- Afficher pairs de barrettes ensemble
|
||||
- Code couleur par canal
|
||||
|
||||
4. **Graphique de répartition**
|
||||
- Diagramme de la capacité par fabricant
|
||||
- Vue d'ensemble de la configuration
|
||||
|
||||
5. **Recommandations d'upgrade**
|
||||
- Détecter slots vides
|
||||
- Suggérer barrettes compatibles
|
||||
- Calculer capacité max possible
|
||||
|
||||
## Conclusion
|
||||
|
||||
Ces améliorations rendent l'affichage des caractéristiques RAM plus **professionnel** et plus **lisible**, avec une mise en évidence particulière de la **fréquence** qui est une spécification technique importante.
|
||||
|
||||
---
|
||||
|
||||
**Voir aussi :**
|
||||
- [FEATURE_MEMORY_SLOTS_VISUALIZATION.md](FEATURE_MEMORY_SLOTS_VISUALIZATION.md)
|
||||
- [CHANGELOG.md](../CHANGELOG.md)
|
||||
Reference in New Issue
Block a user