Bonjour,
J’ai profité des congés de fin d’année (au fait,
très bonne année 2019 à toutes et à tous!) pour chercher sur la toile une alternative à Conky en utilisant ma Voyager-Xubuntu 18.04. J’en ai trouvé une qui me paraît très intéressante car elle utilise du code HTML/CSS pour afficher un tas de choses. Bon, elle ne parvient pas encore à utiliser toutes les ressources du vrai HTML mais c’est un peu normal car elle est encore bien jeune (2016) et seulement en cours de développement. Elle s’appelle Cysboard et, pour ceux qui connaissent (ce qui n’est pas mon cas), elle utilise le moteur HTML Sciter. Son concepteur est Michael Osei (son pseudo est mike168m).
Je précise d’emblée que, n’étant pas du tout informaticien, il y a beaucoup de choses qui me dépassent allègrement. En particulier, mes lignes de code HTML sont sûrement très approximatives ... Malgré tout, je suis parvenu à réaliser un premier jet bien modeste mais qui fonctionne. Je me permets de vous le soumettre :
Si vous souhaitez voir le gif animé de ce widget en grand format, voici
le lien direct.
Je précise que :
- le gif animé du haut (fleur_bleue.gif) est librement téléchargeable
ici.
Ses dimensions d'origine pour l’utilisation dans le main.html n’ont pas à être modifiées (largeur 240 px et hauteur 320 px);
- le gif animé du bas (BB8.gif) a été téléchargé
ici.
Ses dimensions d’origine (500 x 208 px) doivent être modifiées pour devenir largeur 238 px et hauteur 99 px.
Le site en ligne que j’ai utilisé pour modifier les dimensions est
celui-ci (c’est facile, rapide et gratuit);
- enfin, le gif animé (snow.gif) qui fait le fond des différentes sections (des flocons de neige qui tombent) est librement téléchargeable
ici.
Ses dimensions pour l’utilisation dans le main.html n’ont pas à être changées (largeur 200 px et hauteur 200 px);
Je précise que Cysboard ne fonctionnera que si on utilise les adresses locales sur le disque dur des trois gifs animés et non leurs url de téléchargement. Il faut donc bien télécharger ces trois gifs et les stocker en local sur le disque dur. J’ignore pourquoi mais comme je vous l’ai dit, il y a un tas de trucs qui me dépassent et ça en fait partie.
Alors, pour installer Cysboard, il faut d’abord se rendre
sur le site Github pour y télécharger le logiciel compressé (bouton vert «clone or download» en haut à droite de la page). L’archive compressée s’appelle Cysboard-master.zip
Une fois rapatriée sur le disque dur, on la dézippe : on obtient le nouveau dossier Cysboard-master. Avec le terminal, on se rend dedans et on procède à la compilation des sources :
mkdir build
cmake .
make
Le résultat de la compilation va générer deux fichiers dans le répertoire build. Il s’agit du binaire Cysboard et de sa librairie libsciter-gtk-64.so
Ensuite, avec les droits administrateur (sudo), on transfère ou on copie ces deux fichiers dans usr/local/bin
Tant qu’on a les droits administrateur, on en profite pour donner la permission à Cysboard d’être exécuté comme un programme (clic D > onglet «permissions» > autoriser l’exécution du fichier comme un programme).
Ensuite, pour que Cysboard puisse être lancé par le couple USER / HOSTNAME (chez moi, c’est jlfh0816 / Voyager1804) sans avoir à passer à chaque fois par sudo et entrer le mot de passe, on ajoute ceci (en mode administrateur) dans le fichier /etc/sudoers
#pour l'utilisation du programme Cysboard :
jlfh0816 Voyager1804 = (root) NOPASSWD: /usr/local/bin/Cysboard
La suite consiste à créer un nouveau dossier cysboard dans le dossier caché /home/jlfh0816/.config
Dans ce nouveau dossier /home/jlfh0816/.config/cysboard, on doit impérativement trouver :
- le fichier main.html (sinon, Cysboard exécutera default.html pour afficher un widget basique) ;
- les trois gifs animés dont nous avons parlé au début ;
- tous les scripts (scripts shell bash) qui vont permettre de récupérer les diverses informations que vous souhaitez voir ensuite affichées sur le widget.
Ne pas oublier d’autoriser les scripts à être exécutés comme des programmes.
Pour ma part, les scripts que j’ai mis dedans sont les suivants :
- horaire.sh pour afficher la date et l’heure en haut du widget;
- get_ip_local pour afficher l’IP locale en bas du widget;
- get_ip_public pour afficher l’IP publique en bas du widget.
Voici le code de mes trois scripts :
1°)
horaire.sh
#!/bin/bash
echo $(date +%A)" "$(date +%d)" "$(date +%B)" "$(date +%Y)" "$(date +%T)
2°)
get_ip_local.sh
#!/bin/bash
ip addr | grep 'state UP' -A2 | tail -n1 | awk '{print $2}' | cut -f1 -d'/'
3°)
get_ip_public.sh
#!/bin/bash
curl ifconfig.me
Et maintenant, voici le code du fichier de configuration principal, c’est à dire main.html, que j’ai bidouillé pour ce premier essai :
<html>
<head>
<title>Cysboard</title>
<meta name="position_x" content="900">
<meta name="position_y" content="50">
<meta name="width" content="400">
<meta name="height" content="900">
<meta name="time" content="1">
<!-- ci-dessous, dans html, si on veut transparent total, on met l'opacité à 0 ou encore on met background: transparent. Pour l’instant, je l’ai mise à 0.05 ce qui est très très clair, presque transparent) -->
<style>
html {
background-color: rgba(255, 255, 255, 0.05);
}
header {
width : 240px;
height : auto;
background-color: rgba(255, 255, 255, 0.05);
}
body {
color: white;
border-width: 3px;
border-color: rgba(10, 10, 22, 0.9);
border-style: solid;
border-radius: 5px;
padding: 5px;
margin:*;
font-family: "Segoe UI", Tahoma, Arial, Helvetica, sans-serif;
width: 240px;
height: auto;
background: rgba(10, 10, 15, 0.8);
box-shadow: 0px 0px 20px rgba(10,10, 10, 0.8);
}
.section {
background: rgba(10, 10, 20, 0.3);
background-image:url(/home/jlfh0816/.config/cysboard/snow.gif);
height: auto;
width: 100%;
position: relative;
padding: 3px;
margin-bottom: 5px;
border-radius: 5px;
}
.section > p {
margin: 1px;
padding: 1px;
}
.section-header {
background: rgba(70, 226, 22, 0.9);
color: rgba(10, 10, 20, 0.8);
font-weight: 900;
border-radius: 2px 2px 0px 0px;
}
footer {
width : 240px;
height : auto;
background-image:url(/home/jlfh0816/.config/cysboard/snow.gif);
}
</style>
</head>
<!--
Ci-dessous, c'est le code que je voudrais bien voir fonctionner pour afficher l'heure ... mais ça ne marche pas, les balises frame et iframe ne sont pas reconnues correctement !
<div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/fr/city/3030300"><span style="color:gray;">Heure actuelle</span><br />Brest, France</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=fr&size=small&timezone=Europe%2FParis" width="100%" height="90" frameborder="0" seamless></iframe> </div> -->
<header>
<!-- pas de header pour l’instant -->
</header>
<body>
<p style="background: url(/home/jlfh0816/.config/cysboard/fleur_bleue.gif); text-align:center; vertical-align:top; width: 240px; height: 300px; margin:*;"id="exec_0" cmd="/home/jlfh0816/.config/cysboard/horaire.sh"></p>
<!-- you can create your own with the rendering engine's javascript implementation -->
<!-- os info -->
<div .section #osinfo>
<div .section-header>OS</div>
<p>name: <span #os_name></span></p>
<p>distro: <span #os_distro_name></span></p>
<p>uptime: <span #os_uptime></span></p>
<p>no. procs: <span #os_num_procs></span></p>
</div>
<!-- cpu info -->
<div .section #cpuinfo>
<div .section-header>CPU</div>
<p>model: <span #cpu_name></span></p>
<p>vendor: <span #cpu_vendor></span></p>
<p>arch: <span #cpu_arch></span></p>
<p>total usage: <span #cpu_usage></span>%</p>
<p>core 1 usage: <span #cpu_usage_0></span>%</p>
<p>core 2 usage: <span #cpu_usage_1></span>%</p>
</div>
<!-- mem info -->
<div .section #meminfo>
<div .section-header>RAM</div>
<p>free: <span #mem_free mul="MB"></span>MB</p>
<p>used: <span #mem_used mul="MB"></span>MB</p>
</div>
<div .section #externalProgram>
<div .section-header>IP</div>
<!-- you can replace the path with your on path to scripts -->
<p>IP locale: <span id="exec_0" cmd="/home/jlfh0816/.config/cysboard/get_ip_local.sh"></span></p>
<p>IP publique: <span id="exec_0" cmd="/home/jlfh0816/.config/cysboard/get_ip_public.sh"></span></p>
<footer>
<p style="background: url(/home/jlfh0816/.config/cysboard/BB8.gif);width: 238px; height: 113px;text-align:center; vertical-align:bottom;">Voyager 18.04.1 LTS</p>
</footer>
</body>
</html>
Et sinon, pour une question de confort personnel, j’ai créé un lanceur du widget dans le tableau de bord de ma Xubuntu 18.04
Un clic dessus, le widget se lance. Un nouveau clic, il s’arrête. Pratique. Regardez dans le gif animé, on le voit en action.
Ce lanceur exécute un petit script essai.sh que j’ai placé dans un dossier essai que j’ai créé pour l’occasion dans /home/jlfh0816/
Le chemin du script est donc : /home/jlfh0816/essai/essai.sh
Voici le code du
script essai.sh :
#!/bin/bash
#vérifie si Cysboard est déjà lancé ou pas
ps ax | grep "Cysboar[d]" > /dev/null
#si Cysboard est déjà lancé, alors sortie avec le statut $?=0
if [ $? -eq 0 ]; then
pkill Cysboard
else
Cysboard start
fi
Et voici la commande à placer dans le lanceur du tableau de bord :
sh /home/jlfh0816/essai/essai.sh
Voilà, je pense ne rien avoir oublié.
Je vais essayer de faire d’autres fichiers de configuration main.html mais maintenant que les congés sont terminés, je vais être très pris par le temps alors je le ferai quand je pourrai.
Surtout, je serai très reconnaissant à ceux qui maîtrisent le sujet s’ils pouvaient jeter un œil sur mon fichier main.html ainsi que sur les scripts autour afin qu’ils me corrigent ou me disent ce qui ne va pas ou ce qu’il faudrait vraiment changer.
Et aussi pourquoi Cysboard ne reconnaît pas correctement les balises <frame> et <iframe> alors que le concepteur de Sciter sous-entend qu’elles sont en principe reconnues ...
Merci beaucoup par avance.
