10 KiB
10 KiB
Synthèse de la session - Corrections et améliorations
Date
11 janvier 2026
1. Système d'icônes personnalisables
Problème initial
Les boutons utilisaient des chemins d'images codés en dur (<img src="icons/icons8-save-48.png">), empêchant le changement de pack d'icônes.
Solution appliquée
- Remplacement des
<img>pardata-icon="..."+<span class="btn-icon-wrapper"></span> - Ajout de
initializeButtonIcons()après chaque rendu dynamique - Passage aux SVG inline pour FontAwesome avec
currentColor(permet la coloration selon le thème) - Migration des boutons : save, edit, delete, close, check, download, image, pdf
Fichiers modifiés
frontend/js/devices.jsfrontend/js/icon-manager.jsfrontend/js/utils.jsfrontend/css/components.css
2. Modernisation des boutons icon-btn
Problème
Cercle autour des boutons, style daté, icônes forcées en blanc.
Solution appliquée
- Forme rectangulaire arrondie avec coins doux
- Ombres légères et effets hover/active/focus modernes
- Taille responsive via variables CSS
- Suppression du forçage blanc sur les icônes
- Coloration automatique via
currentColor(SVG FontAwesome)
Fichiers modifiés
frontend/css/main.cssfrontend/css/components.css
3. Intégration complète des données mémoire (dmidecode)
Objectif
Stocker et afficher toutes les informations dmidecode -t memory en base de données.
Implémentation
- Stockage du résultat brut complet dans
raw_info_json - Affichage divisé en :
- Général : capacité max, ECC, nombre de slots (en gras)
- Par barrette : détails spécifiques à chaque DIMM (en gras)
- Valeurs non renseignées : conservées et affichées barrées dans un popup au survol de l'icône "Mémoire"
Fichiers modifiés
backend/app/models/hardware.pybackend/app/api/devices.pyfrontend/js/devices.jsfrontend/js/device_detail.jsfrontend/css/memory-slots.css
4. Barres de visualisation RAM/SWAP
Implémentation
- Barre RAM segmentée : utilisée / partagée / libre, avec couleurs du thème
- Barre SWAP : utilisée / libre
- Pourcentages affichés au-dessus de la jauge
- Légende en dessous
- Réorganisation des cartes mémoire :
- Capacité max carte mère
- RAM totale
- RAM libre
- RAM utilisée
- RAM partagée
- Slots utilisés / total
- ECC (oui/non)
Fichiers modifiés
frontend/js/devices.jsfrontend/js/device_detail.jsfrontend/css/memory-slots.cssfrontend/css/components.css
5. Affichage des slots mémoire
Design appliqué
+-----------------------------------------+
dimm0 | 16GB | occupé
+------------------------------------------+
DDR4 3200 MT/s | Unregistered
Form Factor | Voltage | Fabricant
Serial Number (petit)
Part Number (petit)
+-------------------------------------------+
Tooltip complet
- Toutes les infos dmidecode au survol du slot
- Placement intelligent (gauche/droite selon position sur la page)
- Popup en
position: fixedpour éviter masquage par sections
Fichiers modifiés
frontend/css/memory-slots.cssfrontend/js/devices.jsfrontend/js/device_detail.js
6. Adresses IP et URL personnalisées
Fonctionnalités ajoutées
- Affichage des IP (hors 127.0.0.1) dans l'en-tête du panneau détail
- Bouton "Éditer lien" sous l'IP pour saisir une URL personnalisée
- Sauvegarde en base de données (champ
ip_url) - Clic sur l'IP ouvre l'URL dans un nouvel onglet
- Auto-préfixe
http://si non spécifié
Fichiers modifiés
backend/app/models/device.pybackend/app/api/devices.pybackend/migrations/018_add_device_ip_url.sqlfrontend/js/devices.jsfrontend/css/main.css
7. Score global avec affichage étoilé
Design
- Badge avec valeur numérique du score
- Barre de 4 étoiles (pleines/demi/vides)
- Couleur du fond et des étoiles selon le niveau (high/medium/low) et le thème
- Bordure fine colorée selon le résultat
Calcul
- Échelle 0-4 étoiles selon score / seuil high
- Pas de 0,5 étoile
Fichiers modifiés
frontend/js/devices.jsfrontend/css/main.css
8. Popup détail du score
Contenu
- Tableau comparatif "Ce PC" vs "PC standard"
- Lignes : CPU, Mémoire, Disque, Réseau
- Explications de la configuration PC standard en dessous
Références PC standard (base 100)
REF_CPU_SINGLE = 2000
REF_CPU_MULTI = 3500
REF_RAM_SPEED = 2500
REF_DISK_SPEED = 1.5
REF_NETWORK_SPEED = 950
Placement intelligent
- Position
fixedau premier plan (z-index: 10002) - Voile d'ombre sur le reste de la page
- Ajustement automatique gauche/droite/haut selon place disponible
- Recalcul au frame suivant pour éviter tronquage en bas de page
Fichiers modifiés
frontend/js/devices.jsfrontend/css/components.css
9. Section Motherboard (carte mère)
Champs indispensables (affichés en dur, cochés)
- ✅ Fabricant système
- ✅ Nom du produit
- ✅ Famille
- ✅ Type
- ✅ Châssis
- ✅ BIOS fabricant
- ✅ Version BIOS
- ✅ Date publication
- ✅ Révision BIOS
- ✅ UEFI supporté
- ✅ État démarrage
- ✅ État alimentation
- ✅ État thermique
- ✅ Sécurité
- ✅ Nombre câbles alimentation
- ✅ Langue installée
Autres infos
Affichées dans un popup au survol de l'icône "Motherboard" (placement intelligent).
Fichiers modifiés
frontend/js/devices.jsfrontend/js/device_detail.js
10. Support multi-CPU
Détection
- Parsing de tous les processeurs (dmidecode type 4)
- Détection multi-socket (Proc 1, Proc 2, etc.)
Affichage
- Grille de CPU avec pour chaque socket :
- Désignation socket
- Modèle CPU
- Cores / Threads
- Fréquences (max / actuelle)
- Tension
Champs CPU ajoutés
- ✅ Signature CPU : Family, Model, Stepping
- ✅ Socket
- ✅ Famille
- ✅ Fréquence maximale
- ✅ Fréquence actuelle
- ✅ Tension
Fichiers modifiés
frontend/js/devices.jsfrontend/js/device_detail.jsfrontend/css/main.css
11. Recherche Web du modèle
Fonctionnalité
- Bouton "recherche web" (icône globe) à droite du modèle
- Tooltip "Recherche sur le Web"
- Moteur de recherche paramétrable dans Settings (Google par défaut, DuckDuckGo, Bing)
- Ouverture dans un nouvel onglet avec le texte du modèle
Fichiers modifiés
frontend/js/devices.jsfrontend/js/icon-manager.jsfrontend/html/settings.htmlfrontend/js/settings.js
12. Scrollbars personnalisées
Style appliqué
- Couleurs cohérentes avec le thème actif
- Largeur confortable (10px)
- Séparation fine (1px)
- Effet hover (couleur --color-info)
Fichiers modifiés
frontend/css/main.css
13. Page Settings modernisée
Améliorations
- Style moderne des boutons (gradient, bordure, ombre légère, hover fluide)
- Aperçu des icônes corrigé (inline SVG via
IconManager.inlineSvgIcons()) - Toast déplacé sous le header dynamique
Fichiers modifiés
frontend/html/settings.htmlfrontend/js/settings.jsfrontend/css/main.cssfrontend/js/utils.js
14. Page test-icons.html
Modernisation
- Structure revue avec classes dédiées
- Style cohérent avec le thème
- Interface user-friendly
- Aperçu compact des icônes par pack
Fichiers modifiés
frontend/test-icons.htmlfrontend/css/main.css
15. Gestion des images
Amélioration
- Affichage en entier dans la case (
object-fit: contain) - Clic ouvre un popup avec l'image en grand
- Suppression des
onclickinline (remplacés pardata-*+ binding JS)
Fichiers modifiés
frontend/js/devices.js
16. Corrections diverses
CORS backend
- Fix allow_credentials=False pour autoriser allow_origins=["*"]
Header non permanent
- Suppression du scroll interne "plein écran" dans devices.html pour permettre le scroll de page normal
Bouton "Éditer lien IP"
- Déplacé sous l'IP (et non à droite)
Fichiers modifiés
backend/app/main.pyfrontend/html/devices.htmlfrontend/css/main.css
17. Versions
Incrémentation appliquée
- Script bench : v2.2.0 (dans
scripts/bench.sh) - Backend : v2.2.0
- Frontend : v2.2.0 (dans
frontend/version.json) - Affichage des versions dans le header
Fichiers modifiés
scripts/bench.shbackend/app/api/benchmark.pyfrontend/version.json
Migrations à appliquer
sqlite3 backend/data/data.db < backend/migrations/018_add_device_ip_url.sql
Prochaines étapes possibles
- Tester le changement de pack d'icônes dans Settings
- Lancer un bench avec
raw_info.dmidecodecomplet pour vérifier l'affichage - Vérifier le placement des popups (score, motherboard, mémoire) en bas de page
- Ajuster les seuils de score si nécessaire
- Étendre la même édition d'URL IP dans
device_detail.html - Migrer les icônes de sections (carte mère, CPU, etc.) vers des packs personnalisables
Fichiers principaux modifiés
Backend
backend/app/main.pybackend/app/models/device.pybackend/app/models/hardware.pybackend/app/api/devices.pybackend/app/api/benchmark.pybackend/migrations/018_add_device_ip_url.sqlscripts/bench.sh
Frontend
frontend/html/devices.htmlfrontend/html/settings.htmlfrontend/test-icons.htmlfrontend/js/devices.jsfrontend/js/device_detail.jsfrontend/js/settings.jsfrontend/js/icon-manager.jsfrontend/js/utils.jsfrontend/css/main.cssfrontend/css/components.cssfrontend/css/memory-slots.cssfrontend/version.json
Notes techniques
- Les icônes PNG (Icons8) ne peuvent pas être teintées via
currentColor- utiliser les packs FontAwesome pour la coloration thème - Les popups utilisent
position: fixed+z-indexélevé pour rester au premier plan - Le placement "intelligent" des tooltips utilise
getBoundingClientRect()+requestAnimationFrame() - Les scrollbars personnalisées utilisent les pseudo-éléments
::-webkit-scrollbar(WebKit uniquement)
Fin de la synthèse