Dialog creation/fr

Dans cette page nous allons vous montrer comment construire une simple boîte de dialogue avec Qt Designer, Qt Designer, est l'outil officiel de Qt pour la conception d'interfaces (Gui), puis de le convertir en code Python, et l'utiliser à l'intérieur de FreeCAD.

Je vais supposer, que pour l'exemple, vous savez déjà comment modifier et exécuter un script Python, et que vous pouvez travailler avec des choses simples dans une fenêtre de terminal tel que se déplacer, etc. . Bien sûr, vous devez également avoir installé PySide.

Construire une boîte de dialogue
Dans les applications de CAO, bien concevoir une UI (interface utilisateur) est très important.

Tout ce que l'utilisateur fera, se fera à travers un outil de l'interface: la lecture des boîtes de dialogue, appuyer sur les boutons, le choix entre les icônes, etc. .

Il est donc très important de réfléchir attentivement à la conception de votre boîte de dialogue, comment vous voulez que l'utilisateur se comporter avec la boîte, et comment sera le flux de travail de votre action.

Il y a une deux choses à savoir lors de la conception de l'interface:


 * Boîtes de dialogue modales ou non-modale :
 * Une boîte de dialogue modale apparaît en face de votre écran et, arrête l'action de la fenêtre principale, forçant l'utilisateur à répondre à la boîte de dialogue.
 * Une boîte de dialogue non modale ne vous empêche pas de travailler sur la Fenêtre principale, vous pouvez travailler sur les deux fenêtres.

Dans certains cas, le premier est préférable, dans d'autres cas non.
 * Identifier ce qui est nécessaire et ce qui est optionnel:


 * Assurez-vous que l'utilisateur sait ce qu'il doit faire. Prévoyez des étiquettes avec des descriptions appropriées, des info-bulles d'utilisation, etc ..


 * Séparez les commandes à partir de paramètres:


 * Cela se fait habituellement avec des boutons et des champs de saisie de texte.


 * L'utilisateur sait que cliquer sur un bouton va produire une action, tout en changeant une valeur dans un champ de texte, va changer un paramètre quelque part. Cependant, aujourd'hui, les utilisateurs savent généralement bien ce qu'est un bouton, ce qu'est un champ de saisie, etc . ..

La boîte à outils de l'interface Qt que nous utilisons, est une boîte à outils state-of-the-art (interface graphique avancée), et nous n'aurons pas beaucoup d'inquiétudes pour rendre les choses claires, car elles sont déjà très claires par elles-mêmes.

Donc, maintenant que nous avons bien défini ce que nous ferons, il est temps d'ouvrir Qt Designer.

Nous allons concevoir très facilement une simple boîte de dialogue, comme ceci:



Nous allons ensuite utiliser cette boîte de dialogue dans FreeCAD pour produire une belle surface plane rectangulaire.

Vous ne trouverez peut-être pas très utile de produire de beaux plans rectangulaires, mais il sera facile de le changer plus tard et de faire des choses plus complexes. Lorsque vous l'ouvrez, Qt Designer ressemble à ceci:



Il est très simple à utiliser. Sur la barre de gauche vous avez des éléments qui peuvent être glissés sur votre widget (tous les outils). Sur le côté droit vous avez des panneaux d'affichage de propriétés de toutes sortes, des propriétés de certains éléments modifiables.

Donc, commencez par créer un nouveau widget. Sélectionnez "Dialog without buttons", car nous ne voulons pas de boutons par défaut Ok/Annuler. Ensuite, faites glisser sur votre widget 3 labels, un pour le titre, un pour l'écriture "Height" (Hauteur) et l'autre pour l'écriture "Width" (Largeur).

Les labels (étiquettes) sont de simples textes qui apparaissent sur ​​votre widget, il servent a informer l'utilisateur.

Si vous sélectionnez un label, sur le côté droit apparaîssent plusieurs propriétés que vous pouvez modifier, comme le style de police, taille, etc. ..

Ensuite, ajoutez 2 LineEdits, qui sont des champs texte que l'utilisateur peut remplir, un pour la hauteur et l'autre pour la largeur.

Ici aussi, nous pouvons modifier les propriétés. Par exemple, pourquoi ne pas définir une valeur par défaut ? Par exemple 1,00 pour chacun d'eux.

De cette façon, lorsque l'utilisateur verra la boîte de dialogue, les deux valeurs seront déjà remplies et si les valeurs conviennent, il peut directement appuyer sur le bouton, gain de temps précieux.

Ensuite, ajoutez un PushButton, qui est le bouton, que l'utilisateur devra appuyer après avoir rempli les 2 champs.

Notez que j'ai choisi ici des contrôles très simples, mais Qt a beaucoup plus d'options, par exemple, vous pouvez utiliser spinbox au lieu de LineEdits, etc ..

Regardez tout ce qui est disponible, vous aurez sûrement d'autres idées.

C'est à peu près tout ce que nous devons faire dans Qt Designer.

Une dernière chose, nous allons renommer tous nos éléments avec des noms faciles, de sorte qu'il sera plus facile de les identifier dans nos scripts:



Conversion de notre boîte de dialogue en code Python avec "pyuic"
Maintenant, nous allons sauver notre widget quelque part. Il sera sauvegardé dans un fichier .Ui, que nous allons facilement convertir en script Python avec pyuic.

Dans windows, le programme est livré avec pyuic pyqt (à vérifier), sur Linux, vous aurez probablement besoin de l'installer séparément à partir de votre gestionnaire de paquets (sur debian-systèmes basés sur, il fait partie du paquet pyqt4-dev-tools).

Pour faire la conversion, vous aurez besoin d'ouvrir une fenêtre de terminal (ou une fenêtre d'invite de commandes), accédez à l'endroit où vous avez enregistré votre fichier ui :
 * pyuic.py est l'outil qui convertit les fichiers qt-designer .ui (Interface Utilisateur) en fichier .py (code Python), la ligne de commande dans la console DOS est :
 * vous pouvez créer un fichier .bat pour automatiser la commande:
 * copiez cette ligne dans un fichier texte et sauvez le sous le nom "compile.bat"

@"C:\Python27\python" "C:\Python27\Lib\site-packages\PyQt4\uic\pyuic.py" -x %1.ui > %1.py


 * puis tapez à la ligne de commande " compile fichier " sans extension, le nom "fichier" entré .ui, sera le nom sortant avec extension .py
 * ATTENTION: il faut que les fichiers soient présents et accessibles, vérifiez que les fichiers sont présents et que les chemins sont justes !
 * pour cet exemple entièrement automatique et simplifié, "compile.bat" est au même endroit que le fichier.ui à convertir en fichier.py

Autres liens de documentation "Python and Qt", sur Développez.com et bien d'autres.

Sur certains systèmes, le programme est appelé pyuic4 au lieu de pyuic (attention à la compatibilité). Il sert simplement de convertisseur de fichier .Ui en un script python .py.

Si nous ouvrons le fichier mywidget.py, son contenu est très facile à comprendre: Comme vous voyez, il a une structure très simple: une classe nommée Ui_Dialog est créé, qui stocke les éléments de l'interface de notre widget.

Cette classe dispose de deux méthodes, une pour la mise en place du widget, et l'autre pour traduire son contenu, qui fait partie du mécanisme général de Qt pour la traduction des éléments d'interface.

La méthode de configuration, crée simplement, un par un, les widgets tels que nous les avons définis dans Qt Designer, et définit leurs options aussi comme nous avons décidé plus tôt.

Puis, toute l'interface est traduite, et enfin, les "slots" se connectent (nous en reparlerons plus tard).

Nous pouvons maintenant créer un nouveau widget, et utiliser cette classe pour créer son interface.

Nous pouvons déjà voir notre widget en action, en mettant notre fichier mywidget.py dans un endroit où FreeCAD la trouvera (dans le répertoire bin FreeCAD, ou dans l'un des sous-répertoires Mod), et, dans l'interpréteur Python de FreeCAD, faisons: Et notre boîte de dialogue apparaîtra! Notez que notre interpréteur Python fonctionne toujours, nous avons une boîte de dialogue non modale.

Donc, pour la fermer, nous pouvons (à part cliquer sur son icône, bien sûr) faire:

Faire quelque chose avec notre boîte de dialogue
Maintenant que nous pouvons afficher et masquer notre boîte de dialogue, nous avons juste besoin d'ajouter la dernière partie, pour en faire quelque chose !

Si vous explorez un peu Qt Designer, vous découvrirez rapidement toute une section appelée "signaux et slots".

Fondamentalement, cela fonctionne comme ceci, ce sont les éléments sur vos widgets (dans la terminologie de Qt, ces éléments sont eux-mêmes des widgets) qui peuvent envoyer des signaux.

Ces signaux diffèrent selon le type de widget. Par exemple, un bouton peut envoyer un signal quand il est pressé et quand il est relâché.

Ces signaux peuvent être connectés à des créneaux, qui peuvent être des fonctionnalités spéciales d'autres widgets (par exemple une boîte de dialogue a un bouton "Fermer" sur lequel vous pouvez connecter le signal à partir d'un autre bouton "Fermer"), ou, peuvent être des fonctions personnalisées.

La documentation de référence PyQt répertorie tous les widgets Qt, ce qu'ils peuvent faire, ce qu'ils signalent, ce qu'ils peuvent envoyer, etc. ..

Ce que nous allons faire ici, c'est créer une nouvelle fonction qui permettra de créer une surface plane basée sur la hauteur et la largeur, et, relier cette fonction au bouton "Create!".

Donc, nous allons commencer par importer nos modules FreeCAD, en mettant la ligne suivante en haut du script, où nous importons déjà QtCore et QtGui: Ensuite, nous allons ajouter une nouvelle fonction à notre classe Ui_Dialog: Puis, nous avons besoin d'informer Qt pour qu'il se connecte sur le bouton de la fonction, en plaçant la ligne suivante juste avant QtCore.QMetaObject.connectSlotsByName(Dialog): Il s'agit, comme vous le voyez, de relier le signal du bouton enfoncé de l'objet a créer ("Create!" Bouton), à un emplacement nommé createPlane, dont nous venons de définir.

Ça y est ! Maintenant, la touche finale, nous pouvons ajouter une petite fonction, pour créer la boîte de dialogue, elle sera plus facile a appeler.

En dehors de la classe Ui_Dialog class, nous allons ajouter le code suivant: (Rappel sur Python : la méthode __init__ est une classe qui s'exécute automatiquement chaque fois qu'un nouvel objet est créé ! )

Puis, à partir de FreeCAD, nous avons seulement besoin de faire: Voilà, c'est tout ...

Maintenant, vous pouvez essayer toutes sortes de choses, comme par exemple l'insertion de votre widget dans l'interface FreeCAD (voir la page Code snippets), ou, faire des outils personnalisés beaucoup plus avancés, en utilisant d'autres éléments dans votre widget.

Le script complet
Ceci est le script de référence complet:

Méthode 1
Un exemple d'une boîte de dialogue complète avec ses connections. Ici la même fenêtre mais avec un icône sur chaque bouton.

Download associated icons (Click rigth "Copy the image below ...)"



ici le code pour afficher l'icône sur le pushButton, modifiez le nom pour un autre bouton, (radioButton, checkBox) ainsi que le chemin de l'icône. La commande UserAppData donne le chemin utilisateur AppHomePath donne le chemin d'installation de FreeCAD Cette commande inverse le sens horizontal du bouton, droite à gauche

Méthode 2
Une autre méthode pour afficher une fenêtre, ici en créant un fichier QtForm.py qui renferme l'entête du programme (module appelé avec import QtForm), et d'un deuxième module qui renferme le code de la fenêtre tous ces accessoires, et votre code (le module appelant).

Cette méthode nécessite 2 fichiers distincts, mais permet de raccourcir votre programme, en utilisant le fichier QtForm.py en import. Il faut alors distribuer les deux fichiers ensemble, ils sont indissociables.

Le fichier QtForm.py Le fichier appelant, qui contient la fenêtre et votre code.

Le fichier mon_fichier.py

Les connections sont à faire, un bon exercice.

Other example

Are treated :

La page de code et les icônes Qt_Example
 * 1) icon for window : l'icône affiché sur le coin supérieur gauche de la fenêtre principale
 * 2) horizontalSlider : horizontal slider sa connexion et extraction / affectation de données
 * 3) progressBar horizontal : progress bar horizontal sa connexion et extraction / affectation de données
 * 4) verticalSlider : vertical slider sa connexion et extraction / affectation de données
 * 5) progressBar vertical : progress bar verticale sa connexion et extraction / affectation de données
 * 6) lineEdit : line edit sa connexion et extraction / affectation de données
 * 7) lineEdit :
 * 8) doubleSpinBox : double spinbox sa connexion et extraction / affectation de données
 * 9) doubleSpinBox :
 * 10) doubleSpinBox :
 * 11) buttom : buttom et sa connexion
 * 12) buttom :
 * 13) radioButtom : radio button avec icône sa connexion checked
 * 14) checkBox : checkbox with avec icône sa connexion checked and unchecked
 * 15) textEdit : text edit sa connexion et extraction / affectation de données
 * 16) graphicsView : graphic view avec 2 images et la méthode pour changer d'image

Quelques commandes utiles
En utilisant les caractères accentués, dans le cas ou vous obtenez les erreurs suivantes :

plusieurs méthodes sont possibles.

UnicodeDecodeError: 'utf8' codec can't decode bytes in position 0-2: invalid data ou avec la procédure

UnicodeEncodeError: 'ascii' codec can't encode character u'\xe9' in position 9: ordinal not in range(128)

ou avec la procédure ou ou ou