diff --git a/docs/assets/basics.jpg b/docs/assets/basics.jpg deleted file mode 100644 index 1dc2534..0000000 Binary files a/docs/assets/basics.jpg and /dev/null differ diff --git a/docs/assets/basics.png b/docs/assets/basics.png new file mode 100644 index 0000000..738b648 Binary files /dev/null and b/docs/assets/basics.png differ diff --git a/docs/assets/grids.png b/docs/assets/grids.png new file mode 100644 index 0000000..aee0c75 Binary files /dev/null and b/docs/assets/grids.png differ diff --git a/docs/assets/logout desktop.png b/docs/assets/logout desktop.png new file mode 100644 index 0000000..3bde60d Binary files /dev/null and b/docs/assets/logout desktop.png differ diff --git a/docs/intro.md b/docs/intro.md index c8f2554..b325f59 100644 --- a/docs/intro.md +++ b/docs/intro.md @@ -7,7 +7,11 @@ ## Resources -- [Youtube Tutorials](https://youtube.com/playlist?list=PL0VamwghCfX-KXtGKGLak-C_-Jcx_eOiK&si=1LagzyjBaifqDcND) +- [Getting started video](https://youtu.be/9dYv3VnchDA?si=kJoSXh0i-r1qm3AU) + +- [Creating Calculator apps short/reel](https://youtube.com/shorts/1K2cM1gt13o?si=oxwNcoIpRU-8IkzS) + +- [Youtube Tutorials Playlist](https://youtube.com/playlist?list=PL0VamwghCfX-KXtGKGLak-C_-Jcx_eOiK&si=1LagzyjBaifqDcND) - [Create a signup form](https://medium.com/python-in-plain-english/create-tkinter-guis-using-tkinter-gui-builder-pyuibuilder-a7422489c55e) @@ -15,14 +19,60 @@ - [basic pack Layout tutorial - Tkinter](https://www.youtube.com/watch?v=rbW1iJO1psk) + +## FAQs + +### Common faqs +**1. Why does the design I created in tkinter look a bit off from my actual output** + +Tkinter is OS dependent framework, and Pyuibuilder provides you with a common interface for you to develop. In the future we may consider rendering the design based on the OS you are using. + +For more accurate design to output ratio, you can try using customtk framework that's available in Pyuibuilder. + +**2. Why do I see a small padding in design, but not in output tkinter** + +The default padding in the design exists, so you can easily drag and drop your widgets. You can adjust the output padding from the toolbar. We may in the near future, make the outputs to have a default padding. + +### Login and License FAQ + +**I had purchased a paid plan, where's my license key?** + +If you had purchased a paid plan, your account has already been upgraded to pro/hobby plan depending on the plan you had selected. You don't require license key, The license key is only required if you want to purchase license in bulk. + +The oauth system is used instead of license key to make it convient to login to both the web version as well as desktop versions. + +**I am on paid plan but the desktop app splash screen is asking for license key** + +It's likely you had logged into a wrong account while logging into the desktop. + +Logout by clicking the logout button on the bottom left below the active key button and relogin + +![Logout desktop](./assets/logout%20desktop.png) + +### Deskop app FAQs + +**Should I have the Python pre-installed** + +If you are on desktop and if the app detects your system doesn't have a python installed already, it will prompt you to install python so you can run the exported code. + +The desktop apps comes pre-packaged with python in them, except for the Mac intel versions. The desktop app uses the python built-into the app, except for Mac intel versions. + +**Does workspace automatically store my design?** + +No, the workspace you create is used create a virtual environment for the app to run python. + +## Profile +To check which plan you are on or to logout hover over the profile icon on the top right corner with a profile icon. + ## UI Basics Let's start with the basics of UI -![Layout basics](./assets/basics.jpg) +![Layout basics](./assets/basics.png) 1. The sidebar on the left will have multiple tabs, each tabs will provide you with necessary tools. 2. The Place where you drag and drop widgets is the canvas 3. The toolbar will only appear if a widget is selected. +4. The code editor is to help you write event handler codes. @@ -33,7 +83,8 @@ Things you can do on canvas. 1. Add widgets from sidebar. 2. Zoom and pan using mouse. 3. zoom using `+`/`-` keys -4. Delete widgets using `del` key or right clicking on the widget +4. Delete widgets using `del` key or right clicking on the widget (on mac function + delete) +5. You can use ctrl/cmd + D to duplicate the selected widget. ## Project name By default all project's are named `"untitled project"`, you can change this from the header input next to export code. @@ -41,6 +92,17 @@ By default all project's are named `"untitled project"`, you can change this fro ## Selecting a UI library You can select the UI library from the header dropdown. Once selected changing the UI library in between your work, will erase the canvas. +## Enabling grids and snapping + +![Grids and snapping](./assets/grids.png) + +You can open the grid controls from the top left near the delete icons + +To enable grid snapping just click on the enable snap switch, you can adjust the grid size using the slider + +You can also enable grids for parent widgets by switching the widget grid on. + + ## Widgets Every widget has its own attributes, some of the attributes may be common. @@ -148,16 +210,6 @@ You can use position absolute for specific widget by checking the absolute posit ![Absolute positioning](./assets/absolute-position.png) -### Swapping widgets on flex layout {WIP} - -You can swap widget by bringing the widget near the edge of the other widget. - -
-
Warning ⚠️
- This feature is still work in progress and sometimes may not work as expected -
- -![Swappy](./assets/swappy.gif) ## Plugins @@ -172,6 +224,8 @@ Once you are happy with the UI, you can click on export code from the header and ## Requirements.txt The requirements.txt files are auto generated, before running the code ensure you have installed the dependencies by using `pip install -r requirements.txt` -## Saving the file +## Saving/load the file -Files are not saved or stored. However this is an upcoming feature for the [Premium users](https://github.com/PaulleDemon/PyUIBuilder?tab=readme-ov-file#license---fund-the-development) \ No newline at end of file +You can save the design file by clicking on the save button from the file dropdown + +Similiarly, you can load the design by clicking the load button in the file dropdown. \ No newline at end of file