249 lines
7.8 KiB
Markdown
249 lines
7.8 KiB
Markdown
# 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)
|