AbulEduAccueil¶

Depuis un bout de temps, nous cherchions des pistes pour avoir des écrans d'accueils redimensionnables, conservant les proportions, avec des zones cliquables, des zones de texte traduisibles et tout cela facilement :-D

Je viens de commettre une première ébauche fonctionnelle que nous allons utiliser dans la réécriture du logiciel Aller 5.0.
Le principe est assez simple une QGraphicsView dérivée en AbuleduAccueil accueille une image de décor dont les proportions sont fixes. La taille de cette AbuleduAccueil est la plus grande possible compte tenu des dimensions de la fenêtre du logiciel.

Sur cette image, viennent se superposer des AbulEduZoneSensible (QGraphicsRectItem) transparents aux positions définies par le graphiste et des AbulEduBulles (QGraphicsObject) composées de l'image d'une bulle et d'un texte le tout à l'emplacement défini par le graphiste (encore lui)

Les positions de ces objets et la taille de la police sont recalculés à chaque redimensionnement afin de toujours rester au même endroit sur le décor.

Le passage sur une zone sensible affiche la bulle correspondante, un clic émet un signal qui est destiné à être récupéré pour lancer l'exercice correspondant.
Un clic droit affiche toutes les bulles idem pour un appui sur espace.

Les positions des diverses zones, ainsi que les chemins des images (decor et bulles) et les textes plus deux trois bricoles sont stockés dans un fichier de conf dont l'emplacement, pour respecter l'arborescence d'un logiciel du terrier devrait être le répertoire conf (original non ? ) mais peut être n'importe où !

Il reste de grosses faiblesses dans cette classe prévue à l'origine pour Aller. Telle qu'elle est, le nombre de type d'exercices est fixé en dur à 10 et leur nom, codé en dur dans le fichier de conf, sert à mapper une chaine traduisible dans le corps de la classe. (Pas clair, mais le code est sur la forge) elle s'améliore !
Au vu de ceci, elle ne mérite pas le V1

Code source¶

Pour l'ajouter à votre projet en tant que branche externe

git submodule add http://redmine.abuledu.org/ryxeo/leterrier-developpeurs/abuleduaccueil.git src/lib/abuleduaccueil

Mainteneur de la lib:

git clone ssh://gitolite3@redmine.abuledu.org/repositories-redmine/ryxeo/leterrier-developpeurs/abuleduaccueil.git

Utilisation¶

• Modification du fichier .pro de votre projet

#AbulEduAccueil
include(lib/abuleduaccueil/abuleduaccueil.pri)

• Dans votre fichier d'entête

#include "abuleduaccueil.h" 

Sinon, l'utilisation dans un logiciel se résume à :

    QSettings *m_config = new QSettings("conf/default/default.conf", QSettings::IniFormat );
    m_gvAccueil = new AbuleduAccueil(m_config, this);   
    ui->centralWidget->setStyleSheet((m_config->value("couleurContour")).toString()); // Couleur de fond harmonisée avec l'image sous forme de css
    connect(m_gvAccueil, SIGNAL(boutonPressed(int)), this, SLOT(abeLanceExo(int)));

et à un appel au redimensionnement :

m_gvAccueil->abeAccueilResize(QSize(dimensions qui vont bien));

Aller plus loin !¶

La classe AbulEduAccueil s'appuie sur un fichier de conf contenant tous les paramètres des zones sensibles et des bulles de texte.

[General]
cheminFond=conf/default/fondAccueil.jpg
couleurContour="background-color: rgb(82, 30, 18);" 
police=Arial
pixelSize=38

Tout d'abord des paramètres d'intérêt général, dont le chemin vers l'image de fond ainsi que la couleur de remplissage (qui pourrait être autre chose comme une image de texture : modifier la css en conséquence).
Tous les paramètres de taille sont définis par rapport à la taille de l'image à l'échelle 1. Ils seront automatiquement recalculés lors du redimensionnement.
olice et pixelSize définissent la Font et la taille en pixels du texte des bulles.

[zone]
1\zone=@Variant(\0\0\0\x14@\x8c\xe0\0\0\0\0\0@\x83\x80\0\0\0\0\0@b\x80\0\0\0\0\0@b\x80\0\0\0\0\0)
1\cheminBulle=conf/default/bulles/phrase-melange.png
1\posBulle=@Variant(\0\0\0\x1a@\x8a\xb8\0\0\0\0\0@\x86\xc8\0\0\0\0\0)
1\offsetV=58
1\actif=1
2\zone=@Variant(\0\0\0\x14@\x82x\0\0\0\0\0@w\xa0\0\0\0\0\0@Z@\0\0\0\0\0@`\xc0\0\0\0\0\0)
2\cheminBulle=conf/default/bulles/mots-melanges.png

Puis vient la partie concernant les zones sensibles et les bulles.
zone est un QVariant représentant un QRect définissant la position et la taille de la zone sensible.
cheminBulle : comme son nom l'indique ! Le dessin de la bulle doit pouvoir supporter une variation de proportion car la largeur de l'image est recalculée pour s’adapter au texte (plus une marge de 20px avant et après), ceci est rendu nécessaire par l’internationalisation.
posBulle est un QVariant représantant un QPos définissant la position de la bulle dans l'image de fond. Cette position est indépendante de la position de la zone sensible.
offsetV est le décalage vertical du texte par rapport au haut de l'image de la bulle.
actif prend la valeur 1 ou 0 suivant que la zone sensible est ou non réactive.

Puis on passe au deuxième bouton !

Et un petit exemple ci-dessous :