Cours:InterfaceQT

Retour à la liste des Tds

Premier bouton

Partie Graphique

• Navigateur de projet
• Forms
• mainwindows.ui
• glisser un pushbutton sur la fenêtre
• dans la liste des objets (à droite), le renommer : bpQuitter
• redimensionner éventuellement

Terminé ! Lancer l'application

Utilisation du bouton, signal/slot

• dans le constructeur de la classe MainWindow
• après la mise en place de l'interface : ui->setupui(this)
• ajouter :

connect(ui->pushButton,&QPushButton::clicked,
        this,&MainWindow::close);

Valider le fonctionnement

2ème bouton => notre slot !

N'oublions par que nous faisons de la Programmation Orientée Objet.

Si nous regardons dans l'arborescence du projet, il y a 2 fichiers mainwindow.cpp mainwindow.h qui définissent la classe MainWindow.

La fenêtre qui s'affiche est un objet de la classe MainWindow, comme vous pouvez le constater dans le fichier main.cpp :

    ...
    MainWindow w;
    w.show();
    ...

Un slot, c'est une méthode particulière, c'est donc une fonctionnalité que nous ajoutons à notre objet.

On va donc ajouter un slot à la classe MainWindow pour associer une action particulière à un 2ème bouton

Le code :

On ajoute dans le fichier mainwindows.h la déclaration de ce slot juste avant la fin de la classe:

...
class MainWindow : public QMainWindow
{
...
public slots:
    void monAction();
};

On définit ensuite ce slot dans le fichier mainwindows.cpp

...
//permet d'afficher des messages :
#include <QDebug>
...
void MainWindow::monAction()
{
    qDebug() << "clic !";
}

Le graphisme

• On repasse sur l'interface graphique, passer en mode "Edit widget" au besoin (les boutons du haut).
• On ajoute un 2ème bouton.
• le renommer, par ex : bpAction

graphisme, à vous de jouer

Modifier la couleur d'un bouton

Voici le principe général pour changer la couleur d'un bouton

 monBouton.setStyleSheet("background-color: black;");

Dans une application graphique QT classique, l'objet ui représente le "conteneur" des widgets. On aura donc :

 ui->myPushButton->setStyleSheet("background-color: red;");

La liste des couleurs prédéfinies se trouve sur le site de documentation de QT.

Pour choisir dans l'espace RGB la couleur désirée, on peut faire de la façon suivante :

 QString style = "background-color: rgb(%1, %2, %3);";
 ui->myPushButton->setStyleSheet(style.arg(valRouge).arg(valeurVerte).arg(valeurBleu));

Utilisation

Modifier votre slot monAction pour changer la couleur d'un des 2 boutons.

4 boutons

On place sur l'interface graphique 4 boutons :

• 1 pour quitter l'application
• 1 qui ne servira à rien mais dont la couleur pourra changer : on l’appellera bpLampe
• 1 bouton qui mettra en rouge le bouton bpLampe
• 1 bouton qui mettra en noir le bouton bpLampe

Il faudra nécessairement ajouter un second slot, faire les modifications

bouton toggle

On souhaite ajouter un bouton supplémentaire qui devra faire basculer la couleur de rouge à noir.

Il faudra pour cela ajouter un attribut dans la classe MainWindow qui permettra de "mémoriser" l'état de la lampe.

Vous pouvez par exemple ajouter un attribut de type booléen avec une valeur initiale :

bool allumee=false;

Ajouter la gestion de ce bouton supplémentaire

Pb sur la carte rpi

Si le message suivant apparaît :

QFontDatabase: Cannot find font directory /usr/local/qt5pi/lib/fonts

• se connecter sur la pi : ssh root@10.98.35.xxx
• lancer la commande : ln -snf /usr/share/fonts/truetype/dejavu /usr/local/qt5pi/lib/fonts