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:



Création de la boîte de dialogue
Qt Designer est très simple à utiliser. Sur la barre de gauche, vous avez des éléments qui peuvent être glissés sur votre widget. Sur le côté droit, vous avez des panneaux de propriétés affichant toutes sortes de propriétés modifiables des éléments sélectionnés. Commencez donc par créer un nouveau widget.
 * 1) Sélectionnez "Dialog without buttons" car nous ne voulons pas des boutons / par défaut.
 * 2) Nous avons besoin de Labels. Les étiquettes sont de simples chaînes de texte qui apparaissent sur votre widget pour informer l'utilisateur final. Si vous sélectionnez une étiquette, notez que sur le côté droit apparaîtront plusieurs propriétés que vous pouvez modifier telles que: le style de police, la hauteur, etc ... Permet donc de faire glisser 3 étiquettes distinctes sur notre widget:
 * 3) * Une étiquette pour le titre
 * 4) * Une autre étiquette pour écrire "Height"
 * 5) * Une autre étiquette pour écrire "Width"
 * 6) Nous avons maintenant besoin de LineEdits (2 d'entre eux en fait). Faites-en glisser deux sur le widget. LineEdits sont des champs de texte que l'utilisateur final peut remplir. Nous avons donc besoin d'un LineEdit pour la Height et un pour la Width. Ici aussi, nous pouvons éditer les propriétés. Par exemple, pourquoi ne pas définir une valeur par défaut, par exemple: 1.00 pour chacun. De cette façon, lorsque l'utilisateur verra la boîte de dialogue, les deux valeurs seront déjà remplies. Si l'utilisateur final est satisfait, il peut appuyer directement sur le bouton, ce qui lui fait gagner un temps précieux.
 * 7) Ensuite, ajoutons un PushButton. Il s'agit du bouton sur lequel l'utilisateur final devra appuyer après avoir rempli les deux champs.

Remarque: nous avons choisi ici des commandes très simples. Qt a beaucoup plus d'options, par exemple on pourrait utiliser Spinboxes au lieu de '' LineEdits etc ... Jetez un œil à ce qui est disponible, explorez ... 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 :

Dans Windows pyuic.py est présent dans "C:\Python27\Lib\site-packages\PyQt4\uic\pyuic.py" Créez un fichier batch "compQt4.bat" pour automatiser la tâche:

Dans la console Dos tapez sans extension

Dans Linux : à venir

Depuis la version 0.13, FreeCAD migre progressivement de PyQt à PySide (Choisissez votre installateur PySide suivant votre système building PySide),

Dans Windows le fichier uic.py se trouve dans "C:\Python27\Lib\site-packages\PySide\scripts\uic.py" Créez un fichier batch "compSide.bat"

Dans la console Python tapez sans extension:

Dans Linux: faites

Sur certains systèmes, le programme est appelé pyuic4 lieu de pyuic. Il sert uniquement de convertisseur du fichier .ui pour l'utiliser dans un script Python. 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.

Téléchargez les icônes associés (Faites clic droit sur l'icône "Enregistrer l'image sous ...)"



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.

Autre exemple

Sont traités :

La page de code et les icônes Qt Exemples
 * 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) button : button et sa connexion
 * 12) button :
 * 13) radioButton : 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

Icônes personnalisés dans la Vue combinée
Ici un exemple de création d'un objet avec quelques propriétés associé à un icône personnel.

Téléchargez l'icône exemple et placez le dans votre répertoire de macro.

Trois méthodes d'affectation d'un icône à un objet sont traitées, un icône fichier au format .png présent sur le disque, un icône sauvé au format .xpm inclus dans la macro elle même et un icône disponible dans les ressources FreeCAD.



Exemple complet de création d'un cube avec son icône

Utiliser QFileDialog pour écrire dans un fichier
Code complet :

Utiliser QFileDialog pour lire un fichier
Code complet:

Utiliser QColorDialog pour utiliser une couleur
Code complet:

Utilisation de QColorDialog et création de votre palette couleurs (Base et Personnalisée)
This example modify the Standard color and the Customize color with the Tango FreeCAD guide.Cet exemple modifie la palette des couleurs standard et personnalisée en utilisant la palette Tango du FreeCAD guide.

Le code complet

Afficher une Image avec QLabel et afficher un Gif animé avec QMovie

 * Exemple QLabel avec image et texte




 * Exemple QLabel avec image Gif animé



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

UnicodeDecodeError: 'utf8' codec can't decode bytes in position 0-2: invalid data

plusieurs méthodes sont possibles.

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

Liens pertinents

 * Outils de création d'interfaces