28. Écran de fond

Section démarrée le 2 septembre 2026, dans le prolongement de la réflexion "bureau à l'ancienne" (voir Réflexions stratégiques, section 11) et du pilotage vocal multi-agents (section 27) — les couleurs par agent envisagées ici comme code couleur des post-its sont directement liées au champ couleur que Jean-Marc ajoute en parallèle à la table ASP_Agents.

Origine et objectif

Décision actée en cours de session : le futur écran d'accueil d'ASPIC n'ouvrira plus directement sur la ToDoList ni sur la liste des contacts (comportement actuel depuis la V1.004), mais sur un écran de fond visuel reprenant la métaphore du "bureau à l'ancienne" — un tableau en liège avec un post-it par agent IA nommé, et un bureau sur lequel sont posés les objets/raccourcis fonctionnels de l'application.

Démarche suivie (maquette graphique, Claude Design)

Faute de pouvoir décrire précisément la composition attendue par écrit, Jean-Marc a fourni deux croquis papier photographiés, puis plusieurs photos trouvées sur le web comme références de style (texture de liège et punaises colorées, classeurs à levier avec trou de préhension, ambiance de bureau photographiée). Une première maquette a été construite avec l'outil de canevas de design de Claude (Claude Design), publiée sous forme d'Artifact éditable — ce n'est pas un livrable de code, seulement un support visuel de travail.

Une deuxième itération a corrigé la composition générale (liège en arrière-plan / bureau au premier plan, plutôt que le découpage gauche-droite de la toute première version) et redessiné les classeurs dans l'esprit "classeur à levier" (trou de préhension, pochette d'étiquette) à partir de photos de classeurs réels envoyées par Jean-Marc.

Une troisième itération, dans la même session, s'appuie sur une image trouvée par Jean-Marc (générée par l'outil DeeVid AI) qu'il a jugée très proche de ce qu'il avait en tête ("voilà ce à quoi je pensais"). Claude a reconstruit la maquette à partir de cette référence : liège et bureau réunifiés en une seule composition (le bureau occupe le premier plan sur toute la largeur, les objets hauts — classeurs, micro, boîte à archives — dépassant visuellement au-dessus de la ligne du bureau, devant le mur en liège), classeurs remis à hauteur uniforme (la version précédente avait des hauteurs différentes sans raison fonctionnelle, remarqué à juste titre par Jean-Marc), boîte à archives redessinée en gris avec coins métalliques et porte-étiquette, micro redessiné dans un style "micro de podcast sur pied" plus réaliste. Le logo de l'outil ayant généré l'image de référence (DeeVid AI, visible en haut à droite de la photo) n'a bien sûr pas été repris dans la maquette — utilisé uniquement comme inspiration de style, pas comme contenu.

Composition envisagée à ce stade (maquette Claude Design, jamais codée telle quelle — voir plus bas le changement de cap) : arrière-plan liège sur toute la largeur avec un post-it par agent actif (Viktor, Matilda, Léon, Nikita) ; bande basse bureau en bois clair avec 4 classeurs à levier ("Contacts", "Catalogue", "Affaires en cours", et un 4ᵉ "À faire" proposé par Claude, jamais confirmé), une pile d'enveloppes surmontée du logo Gmail, un agenda fermé surmonté du logo Google Agenda, un téléphone écran éteint, un micro physique à voyant pulsé, une boîte à archives. Point resté ouvert à l'issue de cette phase : garder ou non les enveloppes/Gmail, absentes de la dernière image de référence DeeVid AI mais demandées explicitement plus tôt par Jean-Marc.

Changement de cap : d'une maquette stylisée à un essai fonctionnel sur photo réelle (2 septembre 2026, reprise en soirée)

À la reprise, Jean-Marc a mis de côté la maquette liège/post-its ci-dessus (non tranchée, non codée) au profit d'une approche plus directe pour un premier essai réel : une photo de scène de bureau (classeurs à levier colorés, micro de studio sur pied, carnet, téléphone, chevalet nominatif), qu'il a lui-même fournie, recadrée puis re-recadrée à deux reprises à ses propres proportions d'écran (image finale 1024×457, ecran_fond.jpg). Ce choix remplace, pour ce premier essai, la voie "maquette Claude Design + post-its par agent" — cette dernière n'est pas abandonnée sur le fond (elle reste une piste pour une version plus élaborée), mais l'essai en cours ne s'appuie plus dessus.

Objectif de ce test, explicitement cadré par Jean-Marc dès le départ : "c'est juste un test" — comprendre le rendu réel après identification, avant d'aller plus loin, pas un livrable final. Nouvel écran ecran_fond.html, affiché en plein écran juste après l'identification (redirection modifiée dans identification.html, qui pointait auparavant vers liste_todolist.html).

Choix techniques retenus

background-size:contain, pas cover. Premier essai en cover : sur l'écran réel de Jean-Marc (proportions différentes de l'image), le bas de l'image était rogné. Passage à contain : l'image entière reste toujours visible quelle que soit la proportion d'écran, quitte à laisser une bande de la couleur du mur (échantillonnée sur la photo) de part et d'autre plutôt que de rogner.
Système de coordonnées calé sur l'image de référence. Chaque élément cliquable/affiché est positionné en pixels de l'image de référence (IMG_W/IMG_H, constantes en tête de script), puis converti en position/taille réelle à l'écran par une fonction positionner() qui refait à la main le calcul de background-size:contain (comparaison du ratio image/fenêtre, calcul de la zone réellement affichée et des bandes vides). Appelée au chargement et à chaque redimensionnement. Ce pattern est appelé à être réutilisé pour tout futur objet ajouté sur ce bureau.
Zone cliquable large, séparée de l'icône visuelle précisément positionnée (cas du micro, voir plus bas) : un premier essai avec une seule zone cliquable de la taille de l'icône s'est révélé trop étroit à l'usage réel (infobulle qui ne se déclenchait qu'en survolant précisément quelques pixels) — le pattern retenu sépare un grand bouton invisible (toute la silhouette de l'objet, pour le survol/clic/infobulle) d'un petit élément visuel pointer-events:none posé par-dessus, calé sur le détail précis à afficher (ici le rond noir du micro), reliés par un sélecteur de fratrie CSS (~) pour l'effet visuel au survol.
Aucune donnée figée en dur : tout ce qui s'affiche vient d'un endpoint PHP réel de la session en cours (preferences.php, version.php), jamais de texte statique.

Éléments livrés dans ce test

Classeur "Contacts" cliquable. Zone calée sur la tranche visible (face plate) du premier classeur (bleu-vert sur la photo), lien vers liste_contacts.html, infobulle "Ouvrir le classeur des contacts", léger liseré blanc au survol.
Étiquette "Contacts" sur la tranche, texte tourné (rotate(-90deg), lecture bas → haut, comme demandé — "il faudra tourner la tête sur le côté pour le lire"). Centrage horizontal corrigé à deux reprises après retours de Jean-Marc : une première mesure (encadrement min/max brut des pixels clairs) donnait un centre décalé ; une deuxième mesure par moyenne ligne par ligne a mélangé par erreur l'étiquette du classeur voisin (bleu), collée visuellement à celle du classeur "Contacts" — d'où un texte qui débordait cette fois dans le mauvais sens, vers le classeur voisin. Centrage définitif obtenu en isolant la seule plage claire du classeur "Contacts" (x < 80 sur l'image de référence) sur plusieurs lignes avant d'en prendre le centre. Point de méthode à garder pour la suite : sur cette photo, deux étiquettes voisines ont une couleur de fond quasi identique (blanc/gris clair) — toute mesure automatique par simple seuil de luminosité doit borner la zone de recherche à l'objet visé, sous peine de capter l'objet d'à côté.
Chevalet nominatif (en bas à droite du bureau) : affiche le prénom de l'utilisateur connecté (USR_Prenom, nouvelle colonne ajoutée par Jean-Marc à ASP_Users, exposée par preferences.php). Une seule ligne (le nom de la société, initialement envisagé en 2ᵉ ligne, retiré à la demande de Jean-Marc — "l'utilisateur la connaît déjà"), ellipsis de sécurité si le prénom est long.
Micro cliquable, icône logée dans le rond noir de la grille du micro photographié. Bascule ouvert/fermé au clic (test d'affichage seulement — ne déclenche pas encore la reconnaissance vocale réelle de micro.js) : fermé = glyphe micro gris clair, infobulle "Le micro est fermé, cliquez pour l'ouvrir" ; ouvert = barres façon vu-mètre animées en rouge (couleur proche de --rouge-micro de liste_contacts.html), infobulle "Le micro est ouvert, cliquez pour le fermer". Icônes redessinées en SVG à partir de mic_repos.png/mic_ecoute.png (déjà utilisées pour le bouton micro du bandeau). Position verticale de l'icône ajustée après retour de Jean-Marc ("icônes trop basses") par mesure précise du profil de la calotte du micro sur la photo (pointe du dôme, puis passage à un cylindre à largeur constante) pour recentrer l'icône dans la partie haute du dôme sans déborder au-dessus.
Numéro de version affiché sur le bureau, même source que #statut-version de liste_contacts.html (version.php). Couleur et position ajustées après retour de Jean-Marc : couleur assombrie et rendue opaque (au lieu d'une transparence à 62 %), texte en gras, repositionné bord droit de l'écran, juste au-dessus de la bande claire de la tranche avant du bureau.
Touche Échap conservée comme échappatoire silencieuse vers liste_todolist.html, le temps que cet écran ne porte pas encore d'objet fonctionnel complet.
Version applicative incrémentée à V1.007 pour l'ensemble de ce lot (première modification livrée dans cette étape du travail).

Fichiers touchés

identification.html (redirection post-connexion), ecran_fond.html (nouveau), ecran_fond.jpg (nouveau, image de référence 1024×457 fournie et recadrée par Jean-Marc), preferences.php (ajout de USR_Prenom en lecture), version.php (V1.007). Côté base : colonne USR_Prenom ajoutée à ASP_Users par Jean-Marc directement (voir convention actée en tête de journal sur les exports SQL transmis).

Point ouvert, non tranché

La question enveloppes/Gmail (voir plus haut) portait sur la maquette liège/post-its, mise de côté par le changement de cap ci-dessus — à retrancher le jour où cette piste sera reprise, pas urgent pour l'essai en cours.
Confirmer un jour le libellé du 4ᵉ classeur envisagé dans la maquette liège ("À faire" / ToDoList) — question qui ne se pose plus dans l'immédiat : l'essai en cours n'a pour l'instant qu'un seul classeur fonctionnel ("Contacts").
Nouveau (2 septembre 2026, remonté par Jean-Marc) : la "tranche du bureau" (bord avant du plan de travail, en bas de l'image) n'est pas visible à l'écran chez lui. Jean-Marc précise que ça ne le gêne pas dans l'immédiat, mais que ça pourrait poser problème plus tard — à revoir un jour. Cause non investiguée à ce stade (a priori liée à la proportion réelle de son écran par rapport à l'image, malgré le passage en background-size:contain qui garantit que l'image entière reste visible — reste à vérifier si la bande en question est simplement hors du cadre visible dans son cas, ou une autre cause).

Statut et suite

Essai fonctionnel en cours de test réel par Jean-Marc, sur son environnement de développement (redirection post-identification vers ecran_fond.html, activée). Plusieurs allers-retours de correction fine déjà effectués dans la session (centrage de l'étiquette, position de l'icône micro, couleur/position du numéro de version) à partir des retours directs de Jean-Marc sur son propre écran — plusieurs points ont nécessité plus d'une itération, la mesure de position sur une photo réelle (plutôt que sur un dessin vectoriel) demandant une vérification fine à chaque retour. Fin de session actée le 2 septembre 2026 à la demande de Jean-Marc (changement de fenêtre de conversation) — pas de blocage, juste une pause volontaire.

Reste à faire, noté au passage :

Revoir un jour le sujet de la "tranche du bureau" non visible chez Jean-Marc (voir ci-dessus).
Décider si les autres objets photographiés sur le bureau (carnet, téléphone) doivent devenir cliquables/fonctionnels dans une prochaine étape, ou rester un habillage visuel statique pour l'instant.
Brancher réellement le micro du bureau sur la reconnaissance vocale de micro.js (aujourd'hui : bascule d'affichage seule, sans effet sur l'écoute réelle).
Trancher, un jour, le sort de la piste "maquette liège + post-its par agent" (Claude Design) : abandonnée pour cet essai, mais pas explicitement enterrée pour une version plus aboutie.
Artifact de travail de la maquette liège (dernière version, non utilisée dans l'essai actuel) : https://claude.ai/code/artifact/a647369f-d320-4b21-9f8c-11b20f2ad353 — lien privé à Jean-Marc, à ne pas considérer comme un livrable définitif.

13 KiB Raw Blame History Unescape Escape