Files
serv_benchmark/erreur_restore.md
2026-01-11 23:41:30 +01:00

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> par data-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.js
  • frontend/js/icon-manager.js
  • frontend/js/utils.js
  • frontend/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.css
  • frontend/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.py
  • backend/app/api/devices.py
  • frontend/js/devices.js
  • frontend/js/device_detail.js
  • frontend/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 :
    1. Capacité max carte mère
    2. RAM totale
    3. RAM libre
    4. RAM utilisée
    5. RAM partagée
    6. Slots utilisés / total
    7. ECC (oui/non)

Fichiers modifiés

  • frontend/js/devices.js
  • frontend/js/device_detail.js
  • frontend/css/memory-slots.css
  • frontend/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: fixed pour éviter masquage par sections

Fichiers modifiés

  • frontend/css/memory-slots.css
  • frontend/js/devices.js
  • frontend/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.py
  • backend/app/api/devices.py
  • backend/migrations/018_add_device_ip_url.sql
  • frontend/js/devices.js
  • frontend/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.js
  • frontend/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 fixed au 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.js
  • frontend/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.js
  • frontend/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.js
  • frontend/js/device_detail.js
  • frontend/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.js
  • frontend/js/icon-manager.js
  • frontend/html/settings.html
  • frontend/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.html
  • frontend/js/settings.js
  • frontend/css/main.css
  • frontend/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.html
  • frontend/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 onclick inline (remplacés par data-* + 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.py
  • frontend/html/devices.html
  • frontend/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.sh
  • backend/app/api/benchmark.py
  • frontend/version.json

Migrations à appliquer

sqlite3 backend/data/data.db < backend/migrations/018_add_device_ip_url.sql

Prochaines étapes possibles

  1. Tester le changement de pack d'icônes dans Settings
  2. Lancer un bench avec raw_info.dmidecode complet pour vérifier l'affichage
  3. Vérifier le placement des popups (score, motherboard, mémoire) en bas de page
  4. Ajuster les seuils de score si nécessaire
  5. Étendre la même édition d'URL IP dans device_detail.html
  6. Migrer les icônes de sections (carte mère, CPU, etc.) vers des packs personnalisables

Fichiers principaux modifiés

Backend

  • backend/app/main.py
  • backend/app/models/device.py
  • backend/app/models/hardware.py
  • backend/app/api/devices.py
  • backend/app/api/benchmark.py
  • backend/migrations/018_add_device_ip_url.sql
  • scripts/bench.sh

Frontend

  • frontend/html/devices.html
  • frontend/html/settings.html
  • frontend/test-icons.html
  • frontend/js/devices.js
  • frontend/js/device_detail.js
  • frontend/js/settings.js
  • frontend/js/icon-manager.js
  • frontend/js/utils.js
  • frontend/css/main.css
  • frontend/css/components.css
  • frontend/css/memory-slots.css
  • frontend/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