Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#1 Le 03/01/2019, à 22:07

jlfh0816

Cysboard, une alternative à Conky ? (testé sur Xubuntu 18.04)

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).

view-img-mini_2019-01-03-192429491conkylikefix.png

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 :

view-img-mini_2019-01-04-10d4061a6conkylikeani.gif

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.

Dernière modification par jlfh0816 (Le 06/01/2019, à 13:50)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#2 Le 04/01/2019, à 11:24

nam1962

Re : Cysboard, une alternative à Conky ? (testé sur Xubuntu 18.04)

Je te reconnais bien là wink
Bonne année !


[ Modéré ]

Hors ligne

#3 Le 04/01/2019, à 11:36

jlfh0816

Re : Cysboard, une alternative à Conky ? (testé sur Xubuntu 18.04)

@nam1962
Merci nam1962 et très bonne année à toi aussi !


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#4 Le 28/01/2019, à 20:25

jlfh0816

Re : Cysboard, une alternative à Conky ? (testé sur Xubuntu 18.04)

Bonjour à toutes et à tous,

Voici un autre petit essai que j'ai bidouillé cette semaine, histoire de montrer qu'on peut aussi faire autre chose que des formes rectangulaires :
view-img-mini_2019-01-28-1e96d0f6a3cercles.png


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#5 Le 10/02/2019, à 21:26

jlfh0816

Re : Cysboard, une alternative à Conky ? (testé sur Xubuntu 18.04)

Dans l'exploration des possibilités de Cysboard, j'ai testé les possibilités d'interactivité (... l'avantage d'utiliser HTML et CSS !).
Ci-dessous, j'ai essayé des cercles qui se chevauchent avec un effet de zoom au survol par le curseur de la souris (je me suis inspiré de cette source) :

view-img-mini_2019-02-10-1ec16f65b3cercleshove.gif

Le lien direct si vous souhaitez voir le gif en un peu plus grand.

Dernière modification par jlfh0816 (Le 10/02/2019, à 21:33)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne