Spoiler Alert
En suivant cet article pour vérifications, je viens de faire 3 installations « From Scratch » en 20 minutes chrono chacune !
Donc oui, vous avez la possibilité d’avoir une borne de jeux tactile OpenSource en moins de 30 minutes 😀
(Pour moi, 20 minutes, mais ma clef USB bootable de Debian était déjà prête et je connais par cœur les étapes/commandes à suivre, donc on part sur un délai de 1/2 heure en vrai.)
Préambule
Tout est parti d’un truc tout bête : j’ai récupéré un vieux PC tactile qui traînait. Vous savez, ce genre de matériel qu’on n’ose pas jeter parce que « ça peut toujours servir », mais qui prend la poussière sur une étagère depuis des mois.
Bon, OK, là, il ne prenait pas la poussière, il m’a été donné par un ami qui a dû le changer car les utilisateurs avaient explosé le bouton power.
En fait, le bouton est carrément défoncé et ils ont même arraché un bout de la carte mère dans l’histoire 😮
Diantre (spéciale dédicace à Marie-Charlotte), les bourrins !!!
Bon,
Bref,
L’idée de départ était simpliste :
Est-ce qu’on peut faire tourner « un petit jeu tactile » dessus, histoire de lui redonner une utilité ?
Rien de plus.
(oui, j’avais pensé à un photobooth tactile avec un APN Reflex qu’on m’a donné, mais j’aimais l’idée d’un truc nouveau ; d’autant que j’étais dans un contexte particulier)
Mise en contexte
Il faut noter que l’idée de base (et ses évolutions) ont germé alors que j’étais hors de mon domicile, juste avec un PC portable de récup (celui qui sert de station nomade) et un téléphone portable.
Il faut aussi dire que j’étais désœuvré puisque j’avais fini mon bouquin et que je ne trouvais pas la suite (petite ville avec justes 2 librairies minuscules).
Vif du sujet
On est donc avec un gars (moi) et un ennui (Non, Florian, je ne suis pas hyperactif ; je n’aime pas rester sans rien faire ; nuance) qui ont dû apprendre à faire face au temps.
Du coup, j’ai mené ce projet en 2 temps :
Idée(s) ; Réflexion ; Premiers tests hors de chez moi.
Puis mise en pratique ensuite.
Sauf que voilà, comme d’habitude chez moi, le « petit truc simple » a fini par devenir un « petit truc simple, mais un peu moins simpliste/minimaliste pour aboutir à un truc avec six jeux, un menu façon borne d’arcade, une IA qui joue au Puissance 4, et une installation Debian from scratch sans le moindre bureau graphique ».
Bref, du Alban classique 😀
Le cahier des charges (qui a un peu gonflé en cours de route)
Comme toujours, ce qui commence petit finit par s’étoffer.
Voici le départ :
Faire un jeu tactile pour recycler un vieux PC tactile basique.
Voici où j’en suis arrivé :
- Le PC doit démarrer, se connecter tout seul, et afficher directement l’écran de la borne en plein écran — pas de bureau, pas de barre des tâches, pas de souris qui traîne.
- Le tactile doit fonctionner nativement, sans calibration à rallonge.
- Un écran d’accueil façon « choisis ton jeu », avec plusieurs tuiles.
- Plusieurs jeux, pas un seul : de quoi occuper un peu tout le monde selon l’humeur (réflexe, réflexion, mémoire…).
- Le tout doit tenir sur une Debian la plus légère possible — pas question d’installer tout un environnement de bureau pour au final ne montrer qu’un navigateur en plein écran. D’autant que le proc est limité et la RAM restreinte.
- L’écran ne doit jamais afficher un vilain écran noir de veille sauvage (le classique bug qui fait peur un dimanche après-midi), mais il ne faut pas non plus le laisser cramer bêtement le rétroéclairage en continu.
- Et, cerise sur le gâteau : autant que ce soit joli, cohérent visuellement, et pas juste « des boutons HTML basiques ».
In fine, six jeux ont fini par sortir du chapeau : Lucioles (un jeu de réflexe où on attrape des lucioles avant qu’elles ne s’envolent ; pure création de Claude… J’avais juste demandé un jeu tactile simple ; il a inventé des lucioles bioluminescentes dans une forêt nocturne, allez comprendre ; aussi tarée que moi cette IA), Morpion (duo ou contre l’ordinateur), Memory, Serpent, 2048, et Puissance 4 (duo ou contre une IA).
Résultat
Comme tout est en html, vous pouvez voir ce que cela donne car j’ai tout collé dans un dossier sur ce site :
00 – Le début du départ du commencement
Bon, avant de parler jeux et bugs, il faut bien commencer quelque part — et ce quelque part, c’est une clé USB et un PC qui n’a encore rien dedans.
Rien de sorcier ici, c’est de l’installateur Debian tout ce qu’il y a de plus classique, mais autant le noter pour ceux qui voudraient reproduire le truc sans deviner les étapes.
La clé USB : On télécharge l’image netinst (l’image « petite installation », environ 700 Mo, qui va chercher le reste sur internet pendant l’install) sur debian.org/distrib, puis on l’écrit sur la clé.
Pour l’écriture, cela dépend de votre environnement (Linux, Mac, Windows), mais je conseille « Imager » (ou « Raspberry Pi Imager » pour son vrai nom) car il existe sur tous ces OS).
Logique générale des étapes
- Installer une Debian minimale (aucune interface graphique cochée)
- Installer un serveur X très léger + Chromium
- Créer un utilisateur dédié kiosk qui se connecte automatiquement au démarrage
- Faire en sorte que la connexion de cet utilisateur lance directement X puis Chromium en plein écran
- Copier les fichiers de la borne (6 jeux) sur le disque
Mais on va automatiser cela avec un script 😀
01 – Le choix de l’OS : Debian minimaliste, sans bureau
Pas de blabla ici : juste une Debian, en installation netinst, sans rien cocher côté environnement de bureau. Juste le strict nécessaire (« utilitaires standards du système ») + un serveur SSH pour pouvoir intervenir à distance sans avoir à rebrancher clavier et souris à chaque fois.
Le principe : pas de GNOME, pas de Xfce, rien. Juste un serveur X minimal (Xorg) qui, à la connexion, lance directement Chromium en mode kiosk. Pas de bureau à cacher puisqu’il n’existe tout simplement pas.
Ensuite, je crée un compte `admin` (ou `alban` ou cequejeveux) avec mot de passe, distinct du futur utilisateur `kiosk` (qui, lui, sera créé plus tard automatiquement par le script, sans mot de passe interactif). Ça permet de toujours pouvoir se connecter en SSH pour la maintenance, même une fois la borne configurée pour démarrer automatiquement.
C’est tout pour l’installation de base.
Paf ; on redémarre.
Une fois le PC redémarré, il faut se connecter en SSH (on fera tout depuis un autre PC) et réaliser ces étapes :
Passer en administrateur et mettre le système à jour :
su -
apt update
apt full-upgrade -y
Puis, s’assurer que sudo est disponible pour la suite :
apt install -y sudo
usermod -aG sudo admin
Là, il faut se déconnecter puis se reconnecter ( exit , puis relogin) pour que l’appartenance au groupe sudo soit prise en compte.
Il faut à présent transférer les éléments utiles sur le PC tactile.
Les fichiers sont disponibles en téléchargement au format « 7z « : borne et install-kiosk.sh (le mot de passe est OpenSource).
Perso, je le fais par sftp comme ça, c’est comme si j’avais une fenêtre du PC tactile (explorateur de fichiers) ouvert sur mon PC. Facile.
Sinon, on le fait par scp :
scp -r borne/ admin@<adresse-ip>:/home/admin/
scp install-kiosk.sh admin@<adresse-ip>:/home/admin/
Cela fait, vous avez fait le plus gros du boulot. Maintenant, moment Fait-Néant : on lance le script 😀
Ce script automatise toute la configuration : installation d’Xorg et Chromium, création de l’utilisateur kiosk , copie de la borne à son emplacement final, autologin, et lancement automatique du navigateur en plein écran.
cd /home/admin
sudo bash install-kiosk.sh /home/admin/borne
Le script affiche sa progression étape par étape.
Voici ce qu’il fait, dans l’ordre :
- Installe xserver-xorg , xserver-xorg-input-libinput (pilote tactile), xinit et chromium
- Crée l’utilisateur kiosk (sans mot de passe interactif) et l’ajoute aux groupes video et input
- Copie le dossier borne/ vers /home/kiosk/borne/
- Configure l’autologin sur le premier terminal virtuel (tty1) pour l’utilisateur kiosk
- Ajoute à ~/.bash_profile de kiosk le lancement automatique de X au login
- Écrit un ~/.xinitrc qui désactive la mise en veille de l’écran et lance Chromium en mode kiosk directement sur accueil.html
Résultat : À la fin du script, tout est en place. On branche, ça « boote », ça arrive direct sur l’écran d’accueil de la borne.
Aucune intervention humaine nécessaire, exactement comme pour n’importe quelle vraie borne d’arcade qui se respecte.
02 – Le tactile : la bonne nouvelle
La bonne nouvelle réside dans le fait que, sur la grande majorité des écrans tactiles USB, depuis les années 2010 (norme HID multitouch), le pilote est déjà dans le noyau Linux.
Rien à installer, ça fonctionne « out of the box » avec juste xserver-xorg-input-libinput en dépendance de Xorg.
03 – L’architecture des jeux : un dossier, un thème commun
Plutôt que six fichiers HTML totalement indépendants et incohérents visuellement, j’ai opté pour une base commune :
borne/
├── accueil.html → écran de menu avec les 6 tuiles
├── style.css → thème visuel partagé
├── common.js → script partagé (ciel étoilé, veille douce...)
├── lucioles.html
├── morpion.html
├── memory.html
├── serpent.html
├── 2048.html
├── puissance4.html
└── images/ → icônes emoji locales (voir crédits)Thème visuel : un fond façon nuit étoilée, une police arrondie et sympathique pour les titres, une couleur d’accent différente par jeu (or pour Lucioles, cyan pour le Morpion, violet pour le Memory, vert pour le Serpent, orange pour 2048, rouge pour Puissance 4). Histoire que chaque tuile de l’accueil se reconnaisse d’un coup d’œil.
04 – Le Puissance 4 qui joue (presque) tout seul
Pour Puissance 4 comme pour le Morpion, l’idée d’un mode Solo contre l’ordinateur s’est imposée assez vite — utile quand il n’y a qu’une seule personne devant la borne.
Le Morpion, sur une grille 3×3, se prête très bien à un algorithme minimax classique : l’ordinateur explore la totalité des coups possibles et ne perd jamais.
Pour Puissance 4, la grille (7×6) est trop grande pour tout explorer à fond, donc minimax avec élagage alpha-bêta et une profondeur limitée (4 coups d’anticipation) — assez costaud pour donner du fil à retordre, mais pas insurmontable, et surtout assez léger en calcul pour ne pas ramer sur un PC qui a quelques années.
05 – Les bugs d’affichage et autres « joyeusetés »
Voici deux bugs amusants rencontrés en cours de route.
J’avais tout testé sur mon PC en local et sur mon vieux smartphone de récup (iPhone 11 Pro) via un de mes hébergements web (puisque tout est en html).
J’avais donc déjà corrigé pas mal de trucs.
Mais j’ai eu confirmation d’un des bugs sur le PC tactile :
Le premier :
Sur le 2048, l’écran de fin de partie (« Perdu ! » ou « Bravo ! ») se retrouvait caché derrière les tuiles du jeu.
Finalement, ce n’était pas un souci en lien avec les tests sur mon téléphone car il était présent sur la borne tactile aussi.
La cause ?
Cet écran de fin était présent dans le code avant les tuiles, et les tuiles étaient ajoutées dynamiquement après lui à chaque coup.
Dans une page web, à défaut d’indication contraire, ce qui arrive en dernier dans le code s’affiche par-dessus le reste.
C’est con, hein ?!? 😀
Oui, c’est le genre d’erreur classique à laquelle on ne pense pas (je ne suis pas dev).
Correction :
Un écran de fin totalement séparé, empilé au-dessus de tout le reste par construction, comme sur les 5 autres jeux.
P.S. : Depuis, le 2048 a été modifié sur le même thème que tout le reste.
Le second :
Plus perfide !
Sur l’écran d’accueil et dans le Memory, toutes les icônes s’affichaient en petits rectangles vides (des « tofu », comme on les appelle dans le jargon).
Rien à voir avec un bug de code cette fois :
Une Debian minimaliste n’a tout simplement aucune police d’émojis installée (logique, elle n’a même pas de bureau). Plutôt que d’aller installer une police d’émojis sur le système, j’ai préféré rapatrier les icônes en local, sous forme d’images SVG (Twemoji), rangées dans un dossier images/.
Zéro dépendance système, ça fonctionne à l’identique sur n’importe quelle Debian, même hors-ligne. C’est vraiment le même principe qu’une bête page web où les images sont servies par un dossier spécifique.
Bon, jusque-là, deux bugs plutôt marrants, vite corrigés.
La suite est plus longue à raconter, parce qu’elle m’a pris plusieurs jours et qu’elle vaut clairement son pesant de cacahuètes.
Round 1 : la traduction qui s’incruste.
Chromium se met en tête, un beau jour, de proposer de traduire ma page (qui est déjà en français, merci bien). J’avais bien mis `–disable-translate` au lancement — sauf que ce flag est visiblement à la retraite sur les versions récentes de Chromium, personne n’a dû prévenir Google de me prévenir. La vraie solution : une politique Chromium (`/etc/chromium/policies/managed/kiosk-policy.json` avec `TranslateEnabled: false`), la méthode « officielle » pour piloter un Chromium en mode kiosk. Bon, une fois que tu le sais… 😉
Round 2 : une barre de défilement fantôme.
Sur l’écran d’accueil, une barre de scroll se met à apparaître, sans raison apparente, sur un écran qui n’a absolument aucune raison de scroller. Je remonte la piste, je trouve un bout de CSS qui ressemble à un doublon inutilisé (`#idle-overlay`), je le supprime en le croyant mort.
Sauf qu’il n’était pas mort du tout. Il habillait un second écran de veille — un « Touchez l’écran pour réveiller » planqué en bas de page — que l’IA avec qui je travaillais avait ajouté de son côté sans forcément le signaler (bon, en même temps, ne jamais faire confiance aux IA).
Résultat : deux systèmes de veille tournaient en parallèle, sans que ni moi ni l’IA ne s’en rende compte, chacun avec son propre minuteur. Le premier (2 minutes) fonctionnait très bien. Le second (3 minutes), une fois son CSS supprimé par erreur, se retrouvait à s’afficher comme un vulgaire bloc de texte en plein milieu de la page plutôt que comme un calque plein écran invisible — d’où la hauteur en trop, d’où la barre de défilement.
Deux systèmes de veille + moitié du CSS manquant = un sacré bazar à démêler. Bonne nouvelle, une fois localisé : suppression du doublon, restauration du bon CSS, et roulez jeunesse.
Round 3 : l’écran qui reste obstinément noir.
Celui-là, le plus coriace. J’avais beau enchaîner les réglages `xset` dans le `.xinitrc` (`s off`, `s noblank`, `-dpms`…), l’écran finissait quand même par passer en noir au bout d’un moment. J’ai creusé du côté du menu OSD de l’écran (les écrans tactiles de type caisse ont souvent leur propre minuterie de veille intégrée, indépendante du PC) — sauf que le mien n’a même pas de menu OSD. Piste dans le mur.
L’IA me proposait des tas de trucs « à la con » dont certains ont cassé des trucs (voir Round2).
Et puis, un dimanche, j’ai eu mon petit Eurêka :
STOP. J’ai trouvé !!!
`sudo apt install x11-xserver-utils`
Et là, plus d’écran noir.
Je vous explique : sans `x11-xserver-utils`, la commande `xset` n’existait tout simplement pas sur le système. Pas installée, pas de paquet, donc toutes mes lignes `xset …` dans `.xinitrc` échouaient en silence depuis le tout premier jour.
Arg ; aucune erreur visible, aucun message, rien.
Le genre de bug bête à pleurer une fois qu’on le trouve, mais qui peut faire tourner en rond pendant des plombes avant.
Et là, merci une autre IA à qui j’ai juste collé le script basique et expliquant succinctement le problème.
Cela prouve encore une fois que les IA ne sont QUE des outils : à nous de savoir les utiliser, mais également à nous de comprendre ce que nous faisons.
Bilan de cette chasse : trois bugs, trois causes complètement différentes (une politique navigateur obsolète, un nettoyage de CSS trop hâtif, un paquet manquant) — et une seule vraie leçon à en tirer : quand un correctif « ne marche pas mieux », le réflexe qui finit par payer, c’est de renvoyer le fichier réel tel qu’il tourne, plutôt que de continuer à deviner sur la base d’une description du symptôme.
06 – La veille douce (parce qu’un écran, ça s’use, mais ça se rassure aussi)
Un écran tactile professionnel n’a — sauf exception — rien à craindre à rester allumé en continu (à la différence d’une dalle OLED, une dalle LCD classique ne « marque » pas).
Reste que ménager un peu le rétroéclairage n’est jamais une mauvaise idée sur une borne destinée à tourner des heures durant sans surveillance.
La solution retenue : pas de vraie extinction, mais une veille douce logicielle. Après quelques minutes sans le moindre toucher (`IDLE_MINUTES` en haut du fichier, 3 par défaut), l’écran s’assombrit avec un message « Touchez l’écran pour réveiller » qui pulse doucement. Le premier toucher réveille instantanément — et renvoie directement à l’accueil, plutôt que de laisser le prochain visiteur retomber en pleine partie abandonnée par le précédent. Plus propre pour tout le monde.
07 – Le bouton d’arrêt caché
Petit rappel du point de départ de tout ce projet : ce PC, on me l’a donné parce que le bouton power a été littéralement explosé par ses anciens utilisateurs… au point d’arracher un bout de la carte mère au passage (les bourrins, on en a parlé).
Donc : pas de bouton d’alimentation. Coup de bol, avec sa config BIOS, le PC démarre tout seul quand on le branche donc il est utilisable (sinon, c’était poubelle).
En plus, c’est très bien pour une borne un « autoboot » (et ça me rappelle les RaspberryPi), mais impossible de l’éteindre proprement autrement qu’en tirant la prise — ce qui, sur la durée, n’est jamais une super idée pour un système de fichiers.
Et là, j’ai eu une idée de génie alors que je n’y travaillais pas.
« Et si on utilisait un geste tactile caché ?!?!?« .
J’avais vu ça dans le temps sur des écrans tactiles d’imprimantes HP : tu tapotes des endroits précis pour passer en mode « admin ».
Mon idée : Toucher en même temps le coin en bas à gauche et le coin en haut à droite de l’écran, pendant 3 secondes.
Rien n’est visible avant ça : pas de bouton, pas d’indice, rien.
Par contre, une fois le geste reconnu, un écran de confirmation apparaît avec deux questions (Arrêter ? / Redémarrer ?), chacune avec un Oui et un Non.
Pas con, hein ?!? 🙂
Techniquement, ça m’a forcé à sortir du simple JavaScript : une page web, même en plein écran kiosk, n’a aucun droit d’éteindre un PC. C’est une histoire de sécurité du navigateur.
Il faut donc un petit programme séparé, qui tourne avec les bons droits, et qui écoute en local (`127.0.0.1`, jamais exposé au réseau).
La page web se contente de lui envoyer une requête toute simple quand on confirme.
Vous voulez essayer ?
Installation du service, à faire une fois à la main (pas automatisé dans le script principal, volontairement ; c’est optionnel, tous les PC n’ont pas ce problème de bouton défoncé).
Voici le lien pour récupérer les 2 fichiers : kiosk-power (le mot de passe est OpenSource). Je vous laisse faire le transfert 😉
On part donc du principe que les fichiers kiosk-power-helper.py et kiosk-power.service sont déjà sur le PC tactile (dans `admin` ou dans le `user` que vous avez créé).
sudo cp kiosk-power-helper.py /usr/local/bin/kiosk-power-helper.py
sudo chmod +x /usr/local/bin/kiosk-power-helper.py
sudo cp kiosk-power.service /etc/systemd/system/kiosk-power.service
sudo systemctl daemon-reload
sudo systemctl enable --now kiosk-power
Testé et validé ; franchement, ça marche nickel. C’est PAAAAAARFAIT sur ce PC-là !
Petit bémol à garder en tête si vous tentez le coup sur un autre écran : ça suppose un écran tactile qui gère le vrai multi-touch (deux doigts en même temps, reconnus séparément).
Sur un modèle plus ancien en simple-touch, le second doigt ne sera tout simplement pas détecté ; il faudrait alors imaginer un autre déclencheur (une séquence de taps comme sur les imprimantes plutôt qu’un maintien à deux doigts, par exemple).
Conclusion
Comme souvent avec ce genre de projet, le plus long n’a pas été d’écrire le code en lui-même, mais tout ce qui gravite autour : établir un cahier des charges + faire les tests en grandeur réelle + écrire l’article (et trouver les conneries pondues par l’IA*.
J’ai vraiment procédé comme pour ce qui est de la méthode agile : par itérations avec livraisons étape par étape.
Un vieux PC tactile récupéré, un cahier des charges qui n’a cessé de grossir, et au final une petite borne d’arcade maison qui démarre toute seule et qu’on peut poser n’importe où.
Rien de révolutionnaire, mais c’est bien tout l’intérêt de ce genre de bidouille : partir de pas grand-chose, et se retrouver avec un objet fini et fonctionnel.
Juste pour le fun ?
Oui, juste pour le fun !
* : même si Claude m’a bien aidé, il faut reconnaître que certains choix démontrent bien une non compréhension ; dans Intelligence Artificielle, je mets des limites au mot « Intelligence » :-D.
Du coup, j’ajoute carrément une section spécifique ci-dessous…
Note importante
Petite particularité de ce projet-là par rapport à mes bidouilles habituelles : je l’ai mené en grande partie en dialoguant avec Claude (l’IA d’Anthropic), plutôt qu’en codant tout seul dans mon coin comme d’ordinaire.
J’ai également envoyé quelques prompts vers ChatGPT (mais je suis plutôt contre cette IA qui aurait des liens avec la ICE, la police américaines « un peu » violente)
Je précise volontiers cet usage de l’IA (et surtout de Claude) ici, par pure transparence.
Oui, le fond de la démarche (cahier des charges, tests, décisions, corrections/adaptations à la main ; lignes directrices) reste le mien, mais la quasi totalité du code HTML/CSS/JS et du script d’installation a été écrite avec cette assistance.
C’est une manière différente de bidouiller, mais c’est de la bidouille quand même.
Je précise que je ne suis pas pour les IA, mais je ne suis pas contre.
Je suis plutôt contre leur usage « sans discernement » et « juste pour le fun ».
Pour le reste, je vois les IA comme des outils : ça ne doit pas faire le job, mais ça peut grandement aider.
Un peu comme des outils ; style on utilise une perceuse/visseuse ou une calculatrice scientifique, mais on sait ce que nous devons faire et comment le faire ; l’outil ne fera rien seul.
Et attention, les IA font des erreurs et inventent des trucs (il y a un article sympa dans un récent Sciences et Vie Junior là-dessus d’ailleurs).
Bon, bref, je m’égare et je parle tout seul (sauf si on admet que je ne suis pas seul dans ma tête, mais, là, je ne suis pas sûr que nous soyons, lui et moi, en accord sur ce concept).
Crédits
- Icônes : Twemoji, par Twitter, Inc, sous licence CC-BY 4.0.
- Polices : Fredoka et Nunito, via Google Fonts, licence SIL Open Font License.
- 2048 : concept original du jeu par Gabriele Cirulli, sous licence MIT — la version présentée ici est une réécriture, mais l’idée lui revient entièrement.
- Assistance à la conception et au code : Claude, d’Anthropic — pour l’essentiel du HTML/CSS/JS des jeux, du script d’installation Debian, et des multiples allers-retours de débogage.
N’hésitez pas à laisser un commentaire si vous tentez l’aventure sur votre propre vieux PC tactile.