Personnalisez votre Pad Klipper en quelques étapes simples

Vous en avez assez du splashscreen par défaut de votre Pad Klipper ?

Vous souhaitez afficher une image personnelle ou modifier l’apparence de Klipperscreen ?

Ce guide complet vous explique comment personnaliser votre Pad Klipper en quelques étapes simples.

En suivant ce guide étape par étape, vous transformerez votre Pad Klipper en un outil personnel et élégant qui reflète votre style.

Cet article s’adresse aux utilisateurs de tous niveaux, des débutants aux utilisateurs confirmés.

Partie 1 :Splash Screen au démarrage de votre pad

(Tuto réalisé sur un Raspberry pi 4b avec un écran TFT70 de chez Bigtreetech)

connectez vous à votre pad en SSH (Putty ou MobaXterm)

éditer le fichier /boot/config.tx

sudo nano /boot/config.txt

puis ajouter à la fin du fichier la ligne suivante :

disable_splash=1

Appuyez sur Ctrl+X, Y pour enregistrer et Entrée pour revenir à la ligne de commande.

éditer le fichier /boot/cmdline.txt

sudo nano /boot/cmdline.txt

Ajoutez ce qui suit à la fin de la première ligne :

logo.nologo consoleblank=0 loglevel=1 quiet vt.global_cursor_default=0

Il est important de ne pas insérer d’espaces supplémentaires a la fin de la ligne, ni de nouvelles lignes ou quoi que ce soit. Il s’agit d’un fichier d’une seule ligne et doit être conserver ainsi.

Appuyez sur Ctrl+X, Y pour enregistrer et Entrée pour revenir à la ligne de commande.

Pour rendre l’image lisible, installez fbi.

(fbi est une visionneuse d’images)

Installer le FBI

sudo apt install fbi

L’installation prendra quelques secondes.

Créer le fichier splashscreen.service :

sudo nano /etc/systemd/system/splashscreen.service

Ajoutez y les lignes suivantes :

[Unit]
Description=Splash screen
DefaultDependencies=no
After=local-fs.target

[Service]
#ExecStartPre is to workaround a race condition with bullseye. It can be removed in most cases. If an error appears on the screen that says it "cannot open /dev/fb0" then make sure ExecStartPre is used.
ExecStartPre=/usr/bin/sleep 2
ExecStart=/usr/bin/fbi -d /dev/fb0 --noverbose -a /home/pi/boot-image.png
StandardInput=tty
StandardOutput=tty

[Install]
WantedBy=sysinit.target

Appuyez sur Ctrl+X, Y pour enregistrer et Entrée pour revenir à la ligne de commande.

Placez l’image sur le Pi et nommez-la boot-image.png.

L’image doit se trouver dans le répertoire principal de l’utilisateur pi.

Le chemin complet de l’image est /home/pi/boot-image.png

Vous pouvez utiliser un autre nom mais vous devez le modifier dans le fichier ci-dessus.

ExecStart=/usr/bin/fbi -d /dev/fb0 --noverbose -a /home/pi/boot-image.png

Activez le service en exécutant :

sudo systemctl enable splashscreen

Redémarrez maintenant le Pad, votre image devrait apparaitre durant le démarrage.

sudo reboot

Partie 2 : Personnaliser l’affichage de Klipperscreen

Nous allons créer un theme personalisé

connectez vous à votre pad en SSH (Putty ou MobaXterm)

Pour créer notre thème nous allons dupliquer un thème existant qui servira de base à notre nouveau thème.

entrer les commandes suivantes :

cd ~/KlipperScreen/styles
mkdir -p Papy3dTheme
cp -r ./material-dark/* Papy3dTheme/

cd Papy3dTheme
nano style.css

Trouver la ligne :

window {
    background-color: @bg;
}

La remplacer par :

window {
    background-color: @bg; background-image: url("/home/pi/KlipperScreen/styles/Papy3dTheme/background.png");
}

Appuyez sur Ctrl+X, Y pour enregistrer et Entrée pour revenir à la ligne de commande.

Palcer l’image de fond d’écran (background.png) dans le répertoire /home/pi/KlipperScreen/styles/Papy3dTheme/

redémarrer Klipperscreen en entrant la commande :

sudo service KlipperScreen restart

L’image de fond devrait maintenant s’afficher en fond d’écran sur votre Pad.

Vous pouvez pousser un peut plus la personnalisation de l’affichage en modifiant les différentes couleurs définies dans le fichier style.css

@define-color text #e2e2e2;
@define-color bg rgba(0,20,80,0.9);
@define-color buttons-bg #090909;
@define-color color1 #d46900;
@define-color color2 #ed3c63;
@define-color color3 #849900;
@define-color color4 #007db4;

@define-color echo #006412;
@define-color warning #EF6C00;
@define-color error #B71C1C;

@define-color active #d46900;
@define-color active-dark #282828;
@define-color lines #a2a2a2;
@define-color slider #d81549;