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
  • 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 choisir 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 mainwindows.cpp mainwindows.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 un 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