Cours:InterfaceQT : Différence entre versions
(→2ème bouton => notre slot !) |
m (→Utilisation du bouton, signal/slot) |
||
| Ligne 38 : | Ligne 38 : | ||
*une fenêtre s'ouvre | *une fenêtre s'ouvre | ||
**à gauche, on choisit quel événement déclenche une action : c'est un {{Rouge|signal}} émit par l'objet | **à gauche, on choisit quel événement déclenche une action : c'est un {{Rouge|signal}} émit par l'objet | ||
| − | **à droite, on | + | **à droite, on choisit l'action effectuée, la méthode à exécuter : c'est un {{Rouge|slot}} |
*fermons la fenêtre lors de l'appui sur le bouton : | *fermons la fenêtre lors de l'appui sur le bouton : | ||
**cocher : afficher les signaux/slots hérités | **cocher : afficher les signaux/slots hérités | ||
| Ligne 45 : | Ligne 45 : | ||
{{Todo|Valider le fonctionnement}} | {{Todo|Valider le fonctionnement}} | ||
| − | |||
=2ème bouton => notre slot ! = | =2ème bouton => notre slot ! = | ||
Version du 4 novembre 2020 à 10:19
Retour à la liste des Tds
Sommaire
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 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 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
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
