Feuilles de style : s'affranchir de la résolution
Bonjour à tous et à toutes.
Dans le cadre de mon travail, j'étudie la possibilité d'utiliser des thèmes grâce à des fichier de styles (css).
Déjà, partout, il faut utiliser un fichier qrc qui nous embarque toutes les ressources dans l'exécutable. Très bien, rapide à l'exécution, mais si on veut laisser le choix à l'utilisateur d'ajouter un style par la suite, on est mort car tout est dans l'exe !
Après de longues recherches, j'ai trouvé une solution :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| /* Fichier CSS pour Theme 1 */
QPushButton#PushButtonStyled
{
font-weight: bold;
color: rgb(200, 200, 200);
background-image: url(:/Theme1/Btn5757);
width: 57px;
height: 57px;
min-width: 57px;
min-height: 57px;
max-width: 57px;
max-height: 57px;
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| /* Fichier CSS pour Theme 2 */
QPushButton#PushButtonStyled
{
font-weight: bold;
color: rgb(200, 200, 200);
background-image: url(Theme2:/Btn5758.png);
width: 57px;
height: 57px;
min-width: 57px;
min-height: 57px;
max-width: 57px;
max-height: 57px;
} |
Le thème 1 est dans le qrc :
Code:
1
2
3
4
5
6
7
8
| <RCC>
<qresource prefix="/Theme1">
<file alias="Application.css">Resources/Theme1/Application.css</file>
<file alias="Btn5757">Resources/Theme1/Btn5757.png</file>
<file alias="Btn5757Off">Resources/Theme1/Btn5757Off.png</file>
<file alias="Btn5757On">Resources/Theme1/Btn5757On.png</file>
</qresource>
</RCC> |
Dans le main, il suffit d'ajouter le Theme2 dans searchPath du QDir et d'utiliser partout Theme2:/nom_de_ma_ressource.
Le thème2 est alors uniquement sur le disque et ne fait pas parti du qrc (d'ailleurs les liens vers les images dans les deux css sont écrit différemment).
Code:
1
2
3
4
5
6
7
| QDir::addSearchPath("Theme2",QString("%1/%2").arg(qApp->applicationDirPath()).arg("Resources/Theme2"));
// QFile styleFile("Theme2:/Application.css");
QFile styleFile(QString(":/Theme1/Application.css"));
if (styleFile.open(QIODevice::ReadOnly | QIODevice::Text))
{
qApp->setStyleSheet(QString::fromUtf8(styleFile.readAll()));
} |
Ce code fonctionne parfaitement.
Il suffit de mettre en commentaire le chargement du css du thème 1 ou deux pour que cela fonctionne.
Voilà, je donne ça comme ça, au cas où ce n'est pas la bonne façon de faire... S'il y a des solutions plus élégantes !!
Passons aux choses sérieuses : le problème c'est que l'application peut-être lancée sur plusieurs type de machines ayant des résolutions différentes...
Et donc un PPI (pixel per inch) différent. Le but ? Définir la taille d'un bouton de tel sorte qu'il ai toujours la même taille quelque soit la résolution et la taille de l'écran. Pourquoi ?
Notre application est tactile et il faut au moins une certaine taille pour que les boutons et autres widgets soient utilisable avec les doigts.
J'ai remarqué dans les exemples de Qt (C:\Qt\4.8.4\examples\widgets\stylesheet) que le fichier coffee.qss défini un QPushButton comme ceci :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| /* We provide a min-width and min-height for push buttons
so that they look elegant regardless of the width of the text. */
QPushButton {
background-color: palegoldenrod;
border-width: 2px;
border-color: darkkhaki;
border-style: solid;
border-radius: 5;
padding: 3px;
min-width: 9ex;
min-height: 2.5ex;
} |
Or, je ne trouve nulle part comment est défini ce ex (pour min-width et min-height). A quoi ex correspond-il ?
Y-a-t-il un moyen de travailler en ppi ?
Une des solutions est de mettre ppi dans le fichier css et à la relecture de le parser et de faire des calculs en fonction du ppi courant, mais ça m'étonnerais que Qt n'ai pas prévu ce type de problème.
Vous avez une idée ?
