Cours:InterfaceQT

Retour à la liste des Tds

Projet QtCreator pour raspberryPi

• Nouveau Projet
• application Qt avec Widgets
• select kits
  • Rpi
  • cliquer sur manage
  • appareil mobiles
  • choisir périphérique rpi
  • modifier nom d'hôte : ras-pi-xx (ou utiliser la correspondance carte n°1 => 10.98.9.20)
  • xx est le numéro de la carte : par ex 05
  • valider
• ajouter dans le fichier .pro les lignes suivantes après la ligne target= :

target.path = /root
INSTALLS = target

Consulter cette page pour des explications plus détaillées

Lancer l'application pour vérifier la configuration

Premier bouton

Partie Graphique

• Navigateur de projet
• Forms
• mainwindows.ui
• glisser un pushbutton sur la fenêtre
• redimensionner éventuellement

Terminé ! Lancer l'application

Utilisation du bouton, signal/slot

• ouvrir au besoin l'interface graphique, de son petit nom qtDesigner
• dans les icônes du haut, cliquer sur Edit signals/slots
• cliquer sur le bouton, et relâcher lorsque lorsque vous voyez un symbole de "masse"
• une fenêtre s'ouvre
  • à gauche, on choisit quel événement déclenche une action : c'est un signal émit par l'objet
  • à droite, on choisit l'action effectuée, la méthode à exécuter : c'est un slot
• fermons la fenêtre lors de l'appui sur le bouton :
  • cocher : afficher les signaux/slots hérités
  • signal : clicked()
  • slot : 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.
• On repasse en édition de signaux
  • au signal clicked
  • on associe le slot :
    • il n'apparaît pas dans la liste !
    • editer
    • bouton + dans la liste de slots
    • nom du slot : monAction()

Let's try it and see

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