Merge pull request #49 from boardens/master

docs/instructions.fr-FR.md

@@ -0,0 +1,215 @@
+# Comment utiliser Tkinter Designer
+
+## Sommaire:
+1. [**Commencer**](#commencer-haut)
+   1. [Installer Python](#getting-started-1)
+   2. [Installer Tkinter Designer](#getting-started-2)
+   3. [Créer un compte Figma](#getting-started-3)
+
+2. [**Formater votre design Figma**](#formater-votre-design-figma-haut)
+   1. [Référence](#formatting-1)
+   2. [Guide des éléments](#formatting-2)
+
+3. [**Utiliser Tkinter Designer**](#utiliser-tkinter-designer-haut)
+   1. [Clé d'accès personnelle](#using-1)
+   2. [URL du fichier](#using-2)
+   3. [Tester votre code généré](#using-3)
+
+4. [**Diagnostic des anomalies**](#diagnostic-des-anomalies-haut)
+
+<br><br>
+
+# Commencer <small>[[Haut](#Sommaire)]</small>
+
+<a id="getting-started-1"></a>
+## 1. Installer Python
+Avant d'utiliser Tkinter Designer, vous devez installer Python.
+* [Voici un lien vers la page de téléchargement de Python.](https://www.python.org/downloads)  
+* [Voici un guide utile pour installer Python sur divers systèmes d'exploitation.](https://wiki.python.org/moin/BeginnersGuide/Download)
+
+*Plus loin dans ce guide, vous utiliserez le programme d'installation de packages pour Python (pip), ce qui peut vous obliger à ajouter Python à votre PATH système.*
+
+___
+<br>
+
+<a id="getting-started-2"></a>
+## 2. Installer Tkinter Designer
+Une fois Python installé, vous pouvez télécharger Tkinter Designer depuis le [dépôt officiel](https://github.com/ParthJadhav/Tkinter-Designer).
+
+Dans la barre latérale de droite, cliquez sur la dernière version et, sous **Assets**, choisissez `tkinter_designer.exe`. Une fois l'exécutable téléchargé, vous êtes prêt à exécuter le programme !
+
+*Pour exécuter Tkinter Designer à partir du code source, suivez les instructions ci-dessous.* 
+
+1. Téléchargez les fichiers sources de Tkinter Designer 
+
+2. Décompressez les fichiers source dans un répertoire de votre système
+
+3. Ouvrez un terminal/invite de commande dans ce répertoire
+   * Vous pouvez accéder à ce dossier à l'aide de la commande `cd`.
+   * Vous pouvez également utiliser un IDE avec un terminal intégré, tel que [Visual Studio Code](https://code.visualstudio.com/).
+
+4. Installez les dépendances nécessaires en exécutant `pip install -r requirements.txt`
+   * Si pip ne fonctionne pas, essayez également les commandes suivantes :
+     * `pip3 install -r requirements.txt`
+     * `python -m pip install -r requirements.txt`
+     * `python3 -m pip install -r requirements.txt`
+   * Si cela ne fonctionne toujours pas, assurez-vous que Python est ajouté au PATH.
+
+5. Vous pouvez lancer Tkinter Designer en exécutant `python tkinter_designer.py`
+
+___
+<br>
+
+<a id="getting-started-3"></a>
+## 3. Créer un compte Figma
+1. Dans un navigateur web, rendez-vous sur [figma.com](https://www.figma.com/) et cliquez sur 'Sign up'
+2. Entrez vos informations, puis vérifiez votre email
+3. Créez un nouveau fichier de design Figma
+4. Commencez à créer votre interface graphique
+   * La section suivante couvre le formatage requis pour l'entrée de Tkinter Designer.
+     * [Série officielle de tutoriels Figma pour les débutants](https://www.youtube.com/watch?v=Cx2dkpBxst8&list=PLXDU_eVOJTx7QHLShNqIXL1Cgbxj7HlN4)
+     * [Chaîne YouTube officielle Figma](https://www.youtube.com/c/Figmadesign/featured)
+     * [Centre d'aide Figma](https://help.figma.com/hc/en-us)
+
+<br><br>
+
+# Formater votre design Figma <small>[[Haut](#Sommaire)]</small>
+
+<a id="formatting-1"></a>
+## 1. Référence
+<br>
+
+### L'importance du nom
+
+| Nom de l'élément Figma | Élément Tkinter |
+| --- | --- |
+| Button | Button |
+| Rectangle | Rectangle |
+| TextArea | Text Area |
+| TextBox | Entry |
+| Background | Canvas.Image() |
+
+<br>
+
+Le code généré par Tkinter Designer est basé sur les noms des éléments de votre design Figma et, en tant que tel, vous devez nommer vos éléments en conséquence. Dans Figma, renommez vos éléments en double-cliquant dessus dans le panneau Calques.
+
+___
+<br>
+
+<a id="formatting-2"></a>
+## 2. Guide des éléments
+<br>
+
+1. **Tout d'abord, créez une Frame qui servira de fenêtre Tkinter.**
+<br><br>
+
+2. **Créer un arrière-plan**
+    * Les arrière-plans peuvent être créés à l'aide de formes et/ou d'images
+    * Si vous utilisez plusieurs formes/images, vous devez les regrouper en les sélectionnant toutes et en appuyant sur <kbd>CTRL/&#8984; + G</kbd>
+    * <br><br>
+
+3. **Texte (Texte normal)**
+   * Utilisez la touche <kbd>T</kbd> pour activer l'outil texte, puis ajoutez du texte comme vous le souhaitez
+   * Le texte n'a pas besoin d'être renommé pour être utilisé dans Tkinter Designer
+   * Appuyez explicitement sur la touche <kbd>Retour</kbd> ou <kbd>Entrée</kbd> pour passer à la ligne suivante.
+<br><br>
+
+4. **Entrée de texte (Entrée utilisateur sur une seule ligne)**
+   * Activez l'outil Rectangle avec <kbd>R</kbd>
+   * Ajustez le rectangle à votre convenance
+   * Assurez-vous que le rectangle est nommé "TextBox" 
+<br><br>
+
+5. **Zone de texte (Entrée utilisateur sur plusieurs lignes)**
+   * Activez l'outil Rectangle avec <kbd>R</kbd>
+   * Ajustez le rectangle à votre convenance
+   * Assurez-vous que le rectangle est nommé "TextArea"
+
+6. **Rectangle**
+   * Activez l'outil Rectangle avec <kbd>R</kbd>
+   * Ajustez le rectangle à votre convenance
+   * Assurez-vous que le rectangle est nommé "Rectangle"
+<br><br>
+
+7. **Bouton normal**
+   * Ajouter un rectangle pour servir de bouton dans votre interface graphique
+     * Facultatif : ajoutez du texte au bouton
+   * Sélectionnez le bouton (Rectangle) et tout texte facultatif, puis regroupez-les avec <kbd>CTRL/&#8984; + G</kbd>
+   * Nommez le groupe "Button"
+
+#### Référez vous à [cette vidéo](https://youtu.be/mFjE2-rbpm8?t=275) si vous rencontrez tout problème
+
+<br><br>
+
+8. **Bouton arrondi** 
+   * Ajouter un rectangle pour servir de bouton dans votre interface graphique
+     * Facultatif : ajoutez du texte au bouton
+   * Arrondissez-le en ajoutant un rayon d'angle en sélectionnant le rectangle et en ajoutant un rayon d'angle à partir du côté droit. [En savoir plus](https://help.figma.com/hc/en-us/articles/360050986854-Adjust-corner-radius-and-smoothing)
+   * Créez un rectangle avec la même taille de votre bouton. Ne l'arrondissez pas.
+   * Changez la couleur du rectangle pour qu'elle corresponde à l'arrière-plan
+   * Déplacez maintenant le rectangle nouvellement créé sous le bouton principal (Rectangle).
+   * Sélectionnez le bouton (Rectangle) et tout texte facultatif, puis regroupez-les avec <kbd>CTRL/&#8984; + G</kbd>
+   * Nommez le groupe "Button"
+
+#### Référez vous à [cette vidéo](https://youtu.be/mFjE2-rbpm8?t=275) si vous rencontrez tout problème
+
+<br><br>
+
+# Utiliser Tkinter Designer <small>[[Haut](#sommaire)]</small>
+
+### Ouvrez Tkinter Designer avant de suivre les étapes suivantes.
+<br>
+
+<a id="using-1"></a>
+## 1. Clé d'accès personnelle
+1. Connectez-vous à votre compte Figma
+2. Accédez à Paramètres
+3. Dans l'onglet **Compte**, faites défiler jusqu'à **Personnal access tokens**
+4. Saisissez le nom de votre clé d'accès dans le formulaire de saisie et appuyez sur <kbd>Entrée</kbd>
+5. Votre clé d'accès personnelle sera créé.
+    * Copiez cette clé et conservez-la dans un endroit sûr.
+    * **Vous n'aurez pas d'autre chance de copier cette clé.**
+6. Collez votre clé d'accès personnelle dans le formulaire **Token ID** dans Tkinter Designer
+___
+<br>
+
+<a id="using-2"></a>
+## 2. URL du fichier
+1. Dans votre fichier de conception Figma, cliquez sur le bouton **Partager** dans la barre supérieure, puis cliquez sur **&#x1f517; Copier le lien**
+2. Collez le lien dans la zone **File URL** au sein de Tkinter Designer
+___
+<br>
+
+<a id="using-3"></a>
+## 3. Tester votre code généré
+1. In Tkinter Designer, cliquez sur la zone **Output Path** pour ouvrir l'explorateur de fichier
+2. Choisissez le chemin de sortie et cliquez **Select Folder**
+3. Appuyez sur **Generate**
+
+Les fichiers de sortie de Tkinter Designer seront placés dans le répertoire de votre choix, dans un nouveau dossier appelé **generated_code**. Félicitations, vous avez maintenant créé votre interface graphique Tkinter à l'aide de Tkinter Designer !
+
+<br><br>
+
+# Diagnostic des anomalies <small>[[Haut](#sommaire)]</small>
+
+* Éléments non visibles ? Mal placés ?
+  * Veuillez vous assurer que votre Frame de niveau supérieur est positionné avec ses coordonnées X et Y à (0, 0) 
+    * Vérifiez la barre latérale droite, sous **Design**
+
+* Le bouton a un arrière-plan gris non désiré ?
+  * Assurez-vous que vous avez ajouté un rectangle derrière votre élément de bouton et que sa couleur de remplissage est la même que celle de l'arrière-plan
+
+* Éléments incorrects ?
+  * Assurez-vous d'avoir nommé correctement vos éléments dans Figma
+    * Se référer à [Formater votre design Figma, &sect;1](#formatting-1)
+
+* La fenêtre est plus grande que l'écran ?
+  * Réduisez la taille de vos éléments dans Figma
+
+* Les fichiers ne se génèrent pas ?
+  * Redémarrez Tkinter Designer
+  * Vérifiez la clé d'API et l'URL
+  * Assurez-vous que votre design a une Frame 
+
+* Autre chose ?
+  * [Signalez des problèmes non répertoriés ici sur GitHub](https://github.com/ParthJadhav/Tkinter-Designer/issues/new)

docs/readme.fr-FR.md

@@ -0,0 +1,118 @@
+<p align="center">
+  <img width="200" src="https://user-images.githubusercontent.com/42001064/120057695-b1f6c680-c062-11eb-96d5-2c43d05f9018.png" alt="logo">
+  <h1 align="center" style="margin: 0 auto 0 auto;">Tkinter Designer</h1>
+  <h5 align="center" style="margin: 0 auto 0 auto;">Automatisez la création d'interfaces Tkinter</h5>
+  </p>
+
+  <p align="center">
+    <img src="https://img.shields.io/github/last-commit/ParthJadhav/Tkinter-Designer">
+    <img src="https://img.shields.io/github/contributors/ParthJadhav/Tkinter-Designer">
+    <img src="https://img.shields.io/github/issues/ParthJadhav/Tkinter-Designer?label=issues">
+    <img src="https://img.shields.io/github/stars/ParthJadhav/Tkinter-Designer">
+  </p>
+
+  <br>
+
+## 💡 Introduction
+
+Tkinter Designer a été créé pour accélérer le processus de développement des interfaces en Python. Il utilise le logiciel de design bien connu [Figma](https://www.figma.com/) afin de rendre la création de magnifiques interfaces Tkinter en Python du gâteau 🍰.
+
+Tkinter Designer utilise l'API de Figma pour analyser les fichiers de design afin de créer le code et les fichiers respectifs nécessaires à l'interface. Même l'interface de Tkinter Designer à été créée avec Tkinter Designer.
+
+<img width="500" alt="Tkinter Designer GUI" src="https://user-images.githubusercontent.com/42001064/119863796-92af4a80-bf37-11eb-9f6c-61b1ab99b039.png">
+
+## ☄️ Avantages de Tkinter Designer
+1. Interfaces en drag and drop
+2. Significativement plus rapide que créer le code manuellement
+3. Capacité de créer des interface encore plus belles
+
+___
+
+## 🦋 Soutenir Tkinter Designer
+
+La vie sans café est quelque chose sans quelque chose… désolé, je n'ai pas encore eu mon café.
+
+<a href="https://www.buymeacoffee.com/Parthjadhav" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/arial-yellow.png" alt="Buy Me A Coffee" width="217px" ></a>
+
+## 🛠 Installer Tkinter Designer
+
+```
+git clone https://github.com/ParthJadhav/Tkinter-Designer
+
+cd Tkinter-Designer
+
+pip3 install -r requirements.txt
+
+python3 tkinter_designer.py
+```
+## ⚡️ Utiliser Tkinter Designer
+
+Les instructions contiennent toutes les informations à propos de l'installation et de l'utilisation de Tkinter Designer, ainsi que les informations pour diagnostiquer et signaler les problèmes. Il y a également une vidéo.
+
+### [Lire les instructions](instructions.fr-FR.md)
+### [Regarder la vidéo](https://youtu.be/mFjE2-rbpm8)  
+
+___
+<br>
+
+## ✅ L'importance de nommer (mentionnée dans la [vidéo](https://youtu.be/mFjE2-rbpm8) et les [instructions](instructions.fr-FR.md))
+
+Tkinter Designer dépend grandement du nom des élements pour le convertir en code. Référez-vous au guide de nommage [ici](instructions.fr-FR.md#2-guide-des-éléments).
+___
+<br>
+
+## 📐 Comment ça marche
+La seule chose que l'utilisateur a besoin de faire est de designer l'interface avec Figma, puis coller le lien du fichier Figma et de sa clé d'API dans  Tkinter Designer.
+
+Tkinter Designer génèrera automatiquement tout le code et les images requises à créer l'interface avec Tkinter.
+
+<img width="467" alt="How it Works" src="https://user-images.githubusercontent.com/42001064/119832620-fb88c980-bf1b-11eb-8e9b-4affe7b92ba2.jpg">
+
+___
+<br>
+
+## 🎯 Exemples
+Les possibilités sont infinies avec Tkinter Designer, mais voici quelques interfaces pouvant être parfaitement répliquées au sein de Tkinter.
+
+<sup>Les créations suivantes ne sont pas les miennes.</sup>
+
+### Page d'inscription
+<img width="467" alt="Example 1" src="https://user-images.githubusercontent.com/42001064/119250338-1f1adf80-bbbd-11eb-8ee1-72028a4e7a7f.png">
+
+### Page de marque
+<img width="467" alt="Example 2" src="https://user-images.githubusercontent.com/42001064/119250668-496d9c80-bbbf-11eb-886b-cb1e75da18df.png">
+
+### Enregistreur d'images [(More Info)](https://github.com/mehmet-mert/FrameRecorder)
+<img width="467" alt="Example 3" src="https://user-images.githubusercontent.com/42001064/119834287-71d9fb80-bf1d-11eb-9acf-e7bfc8cc4d9e.png">
+
+### WhatBulk  [(More Info)](https://www.instagram.com/p/CQUmKckFBbT/?utm_medium=copy_link)
+<img width="467" alt="Example 3" src="https://user-images.githubusercontent.com/42001064/122562284-87e06500-d060-11eb-8257-55f3b9dbecf0.PNG">
+
+
+## 🔥 Vitrine
+Si votre application a été créée avec Tkinter Designer, faites le moi savoir. Il sera utile pour d'autres de voir plus d'exemples !
+(Se référer à la rubrique [Me contacter](#-contact-me)) ou utilisez la section [Show and Tell](https://github.com/ParthJadhav/Tkinter-Designer/discussions/categories/show-and-tell) dans les Discussions.
+
+___
+<br>
+
+
+## 📝 Me contacter
+
+Si vous souhaitez me contacter, vous pouvez me joindre à Jadhavparth99@gmail.com
+
+___
+<br>
+
+## 📄 Licence
+<!--- If you're not sure which open license to use see https://choosealicense.com/--->
+
+Tkinter Designer est mis à disposition sous licence BSD 3-Clause "Nouvelle" ou "Révisée".
+[Trouvez-la ici.](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/LICENSE)
+
+| Permissions | Restrictions | Conditions
+| --- | --- | --- 
+&check; Utilisation commerciale | &times; Responsabilité | &#x1f6c8; License et Copyright
+&check; Modification   | &times; Garrantie
+&check; Distribution  
+&check; Utilisation privée

readme.md

@@ -15,7 +15,7 @@
 
 ## 💡 Introduction
 
-Read this in - [(简体中文)](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/readme.zh-CN.md)
+Read this in - [(简体中文)](/docs/readme.zh-CN.md) [(Français)](/docs/readme.fr-FR.md)
 
 Tkinter Designer was created to speed up the GUI development process in Python. It uses the well-known design software [Figma](https://www.figma.com/) to make creating beautiful Tkinter GUIs in Python a piece of cake 🍰.
 
@@ -51,15 +51,15 @@ python3 tkinter_designer.py
 
 The instructions contain all the information about installing and using Tkinter Designer, along with information for troubleshooting and reporting issues. There is also a video.
 
-### [Read the Instructions](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md)
+### [Read the Instructions](/docs/instructions.md)
 ### [Watch the Video](https://youtu.be/mFjE2-rbpm8)  
 
 ___
 <br>
 
-## ✅  Importance of Naming (mentioned in the [video](https://youtu.be/mFjE2-rbpm8) and [instructions](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md))
+## ✅  Importance of Naming (mentioned in the [video](https://youtu.be/mFjE2-rbpm8) and [instructions](/docs/instructions.md))
 
-Tkinter Designer heavily depends on names of the elements to convert it to code. See the naming guide [here](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md#2-element-guide).
+Tkinter Designer heavily depends on names of the elements to convert it to code. See the naming guide [here](/docs/instructions.md#2-element-guide).
 ___
 <br>