AbulEduPageAccueilV1¶
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
Le principe est assez simple une QGraphicsView dérivée en AbuleduPageAccueilV1 accueille une image de décor dont les proportions sont fixes. La taille de cette AbuleduPageAccueilV1 est la plus grande possible compte tenu des dimensions de la fenêtre du logiciel.
Sur cette image, viennent se superposer des AbuleduZoneV1 (QGraphicsRectItem) transparents aux positions définies par le graphiste et des AbuleduBulleV1 (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 actives 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ù !
Code source¶
Pour l'ajouter à votre projet en tant que branche externe
git submodule add http://redmine.abuledu.org/ryxeo/leterrier-developpeurs/abuledupageaccueilv1.git src/lib/abuledupageaccueilv1
Mainteneur de la lib:
git clone ssh://gitolite3@redmine.abuledu.org/repositories-redmine/ryxeo/leterrier-developpeurs/abuledupageaccueilv1.git
Utilisation¶
- Modification du fichier .pro de votre projet
#AbulEduPageAccueilV1 include(lib/abuledupageaccueilv1/abuledupageaccueilv1.pri)
- Dans votre fichier d'entête
#include "abuledupageaccueilv1.h"
- Ensuite, l'utilisation dans un logiciel se résume à ceci (dans votre fichier .cpp):
//Mettez ce qu'il faut en fonction de votre menu d'accueil //Note: ces quelques lignes permettent aux étiquettes de passer dans la moulinette des traductions m_texteBulles.clear(); m_texteBulles.insert(0, trUtf8("Flash")); m_texteBulles.insert(1, trUtf8("Ordre alphabétique 2")); m_texteBulles.insert(2, trUtf8("Closure")); m_texteBulles.insert(3, trUtf8("Ordre alphabétique 1")); m_texteBulles.insert(4, trUtf8("Paragraphes mélangés")); m_texteBulles.insert(5, trUtf8("Phrases sans espaces")); m_texteBulles.insert(6, trUtf8("Mots mélangés")); m_texteBulles.insert(7, trUtf8("Rapido")); m_texteBulles.insert(8, trUtf8("Phrases mélangées")); m_texteBulles.insert(9, trUtf8("PushButton")); QSettings *m_config = new QSettings("conf/abuledupageaccueil/settings.conf", QSettings::IniFormat); AbulEduPageAccueilV1 *gv_accueil = new AbulEduPageAccueilV1(m_config, &m_texteBulles, ui->fr_principale); connect(gv_accueil, SIGNAL(boutonPressed(int)), this, SLOT(abeLanceExo(int)));
Note: Pensez à ajouter dans votre UI une frame qui porte le nom de fr_principale vu que c'est elle qui est le parent de gv_accueil ou modifiez ui->fr_principale de façon à passer le widget parent qui accueillera la page d'accueil (ce pourrait être ui->centralWidget ou une "place" dans un layoutBox)
et à un appel au redimensionnement :
gv_accueil->setDimensionsWidgets();
Pensez tout de même à¶
- Dans votre fichier .h définir le slot abeLanceExo(int)
private slots:
void abeLanceExo(int numero);
private :
QMap<int, QString>m_texteBulles;
- Dans le .cpp l'implémentation du slot
void VOTRECLASSE::abeLanceExo(int numero)
{
switch (numero) {
case 0:
qDebug()<<"Exercice No :"<< numero<<" Editeur";
break;
case 1:
qDebug()<<"Exercice No :"<< numero<<" Exeo";
{
ExerciceOrdreAlpha2 *b = new ExerciceOrdreAlpha2();
b->show();
}
break;
}
}
Note : Attention aux accolades autour de ExerciceOrdreAlpha2 *b = new ExerciceOrdreAlpha2(); b->show();
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=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] size=10 1\rect=@Variant(\0\0\0\x14@\0\0\0\0\0@x\0\0\0\0\0@bÀ\0\0\0\0\0@_@\0\0\0\0\0) 1\cheminBulle=flash.png 1\posBulle=@Variant(\0\0\0\x1a@È\0\0\0\0\0@¸\0\0\0\0\0) 1\texteBulle=Flash 1\offsetV=38 1\actif=true 1\police=@Variant(\0\0\0@\0\0\0\x1a\0\x43\0o\0m\0i\0\x63\0 \0S\0\x61\0n\0s\0 \0M\0S¿ð\0\0\0\0\0\0\0\0\0&\x5\x1\0K\x10)
Puis vient la partie concernant les zones sensibles et les bulles.
zone est un QVariant représentant un QRectF 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ésentant un QPointF 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 true ou false suivant que la zone sensible est ou non réactive.
Les bulles peuvent avoir une police ainsi qu'une taille de police individuelle.
Puis on passe au deuxième bouton !
À faire : faire que la pointe des languettes des bulles reste à une position fixe quand la taille du texte change.
Personnalisation - Thèmes prêts à l'emploi¶
Les thèmes disponibles sont accessibles ici (section AbulEduPageAccueilV1): https://redmine.abuledu.org/projects/leterrier-developpeu/files