parthjadhav/tkinter-designer

An easy and fast way to create a Python GUI 🐍

Hi there, I'm Parth Jadhav 👋

Passionate full-stack developer skilled in Rust, TypeScript, Node.js, React.js, and cloud integration, creating innovative solutions for real-world problems, collaborative and driven, always up for a challenge, and loves the outdoors and trying new coffee shops.

👉 Explore all my projects, including those that aren't open source, on my Bento profile.

tkinter-designer's Issues

Tkinter designer

Windows executable re-upload.

Re-uploading the executable for Windows. We'll have to add a disclaimer to the README that lets users know about the Windows Defender thing.

Further reading on StackOverflow

tkinter_designer-Windows.zip

File Not generated

I have cloned the repository and when trying to generate the files. In the build file there is only an asset folder with nothing in it.

Blank interface

I tested a simple project in figma,but I got a blank Tkinter interface using tkinter designer

Can matplotlib figure add with designer?

Can matplotlib figure add with designer?

when I follow the instructions, it raise exceptions as follows

Exception in Tkinter callback
Traceback (most recent call last):
File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/tkinter/init.py", line 1883, in call
return self.func(*args)
File "tkinter_designer.py", line 29, in btn_clicked
backend.generate_code(token,URL, output_path)
File "/Users/aaron/tmp/Tkinter-Designer/backend.py", line 142, in generate_code
window_elements = fig_window["children"]
KeyError: 'children'

Exception in Tkinter callback: KeyError: 'color'

Basically if I run the script I get this error:

Exception in Tkinter callback Traceback (most recent call last): File "C:\Users\Kyle\AppData\Local\Programs\Python\Python39\lib\tkinter\__init__.py", line 1892, in __call__ return self.func(*args) File "C:\Users\Kyle\Documents\Equinox\Tkinter-Designer-master\tkinter_designer.py", line 29, in btn_clicked backend.generate_code(token,URL, output_path) File "C:\Users\Kyle\Documents\Equinox\Tkinter-Designer-master\backend.py", line 152, in generate_code element_color = get_color(element) File "C:\Users\Kyle\Documents\Equinox\Tkinter-Designer-master\backend.py", line 9, in get_color el_r = element["fills"][0]["color"]['r'] * 255 KeyError: 'color'

It is however able to retrieve all TextBox and Button elements from the Figma page before prompting this error.

Images

mages

Error reporting, exception in Tkinter.

Discussed in #51

^{Originally posted by MarianoTupa June 21, 2021}
Hello, I am trying to run this app on my machine. This error is running me.

'color'
Exception in Tkinter callback
Traceback (most recent call last):
  File "/home/tupadev/miniconda3/envs/tkinter-figma/lib/python3.8/tkinter/__init__.py", line 1883, in __call__
    return self.func(*args)
  File "tkinter_designer.py", line 29, in btn_clicked
    backend.generate_code(token,URL, output_path)
  File "/mnt/c/Users/tupa/Workspace/Tkinter-Designer/backend.py", line 147, in generate_code
    window_elements = fig_window["children"]
KeyError: 'children'

Get Error X , Y

[{'id': '2:2', 'name': 'Hello World', 'type': 'TEXT', 'blendMode': 'PASS_THROUGH', 'absoluteBoundingBox': {'x': 493.0, 'y': -37.0, 'width': 200.0, 'height': 44.0}, 'preserveRatio': True, 'constraints': {'vertical': 'TOP', 'horizontal': 'LEFT'}, 'fills': [{'blendMode': 'NORMAL', 'type': 'SOLID', 'color': {'r': 0.8980392217636108, 'g': 0.8980392217636108, 'b': 0.8980392217636108, 'a': 1.0}}], 'strokes': [], 'strokeWeight': 1.0, 'strokeAlign': 'OUTSIDE', 'effects': [], 'characters': 'Hello World\n', 'style': {'fontFamily': 'Arial', 'fontPostScriptName': 'ArialMT', 'fontWeight': 400, 'fontSize': 30.0, 'textAlignHorizontal': 'CENTER', 'textAlignVertical': 'TOP', 'letterSpacing': 0.0, 'lineHeightPx': 35.15625, 'lineHeightPercent': 100.0, 'lineHeightUnit': 'INTRINSIC_%'}, 'characterStyleOverrides': [], 'styleOverrideTable': {}}]

note:
right:
x: 209
y: 138

Is it possible to create animation using the designer if yes how

Elements not visible.

Hey after giving token and url and generating file.The file generated is always 1kb and and just shows a blank window of the same size I want to import without any inner object and its code.

Using a Figma Design file without a Frame doesn't notify the user of failure.

If you enter a Figma Design URL for a file that doesn't have a Frame, the program will output the following to the terminal:

Exception in Tkinter callback
Traceback (most recent call last):
  File "C:\Program Files\Python39\lib\tkinter\__init__.py", line 1884, in __call__
    return self.func(*args)
  File "C:\LocalDev\Forks\Tkinter-Designer\tkinter_designer.py", line 21, in btnClicked
    backend.generate_code(token,URL, path_to_save)
  File "C:\LocalDev\Forks\Tkinter-Designer\backend.py", line 69, in generate_code
    fig_window = data["document"]["children"][0]['children'][0]
IndexError: list index out of range

There should be some kind of pop-up that alerts the user to the issue at hand (ex. "Your Figma Design file does not contain a Frame")

Problems with 'tkinter_designer.py'

I run 'tkinter_designer.py' and entered the following data:
Token ID: 111
File URL: https://github.com/ParthJadhav/Tkinter-Designer/
Output path: R:/w/x

Problem 1:
If I enter the above path manually, I get "Invalid Output path" error. However, if I use the File selector the path is accepted, although and it is exactly the same with the one I set manually!!

Problem 2:
When I click on "Generate", I receive the error "json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)"
Here's the full traceback:
File "G:\Python3\python-3.7.7\lib\tkinter_init_.py", line 1705, in call
return self.func(*args)
File "tkinter_designer.py", line 29, in btn_clicked
backend.generate_code(token,URL, output_path)
File "R:\W\x\backend.py", line 86, in generate_code
data = response.json()
File "G:\Python3\python-3.7.7\lib\site-packages\requests\models.py", line 898, in json
return complexjson.loads(self.text, **kwargs)
File "G:\Python3\python-3.7.7\lib\json_init_.py", line 348, in loads
return _default_decoder.decode(s)
File "G:\Python3\python-3.7.7\lib\json\decoder.py", line 337, in decode
obj, end = self.raw_decode(s, idx=_w(s, 0).end())
File "G:\Python3\python-3.7.7\lib\json\decoder.py", line 355, in raw_decode
raise JSONDecodeError("Expecting value", s, err.value) from None
json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

Is this PY file published without being tested?

[TRANSLATION] Added Translation for Gujarati Language

@ParthJadhav please review the gujarati translation and merge it. See pull request #56

CI - Testing and Packaging for Multiple Platforms

Okay, let's begin. For reference Parth asked me for assistance with CI on some other forum.

Testing

Looking at the code for the backend, the first task which comes to mind is to create a boilerplate design we can use in an automated test suite. We could use the design for the Tkinter-Designer UI itself, but something more comprehensive would be desirable long term. Something which uses as many if not all available elements as possible. Once a design is chosen, we'll know what we can assert and can start writing tests. Then we plug in the Action to run pytest. Once these tests are in place there should be no way to merge into master without them passing.

Packaging

In terms of packaging, automating a macos package is going to be a pain. Windows shouldn't be. I think we can use py2exe to handle that in an Action. And the tarball works well for linux... desktop linux users don't typically need their hand held. But honestly I am over here wondering: why bother with this phase? Automated testing should be enough to ensure cross platform functionality. But as python would be a prerequisite no matter what, why not let the user install and use in whatever method they preference. For example, on windows I'd just create a batch file like:

@echo off
"C:\Path\to\python.exe" "C:\Path\To\Script"
pause

Then maybe clutter my desktop with a shortcut to the batchfile and change the icon.

on Linux I'd just create an alias or symlink

on Mac I'd either alias if I used it daily, or just run the python command to start it up. Dragging something into the application menu just doesn't matter to me.

I am not saying there is no use for packaging these the hard way. But I am saying that I am just one user who happens to work on all three platforms, and those are my personal preferences for each. I'm sure others opinions differ.

@ParthJadhav thoughts?

[Improvement] Keeping the main window open when choosing an output directory.

When the user goes to choose an output directory, the main window closes while the askdirectory() window is open. When I first used the program, I thought it had crashed.

If possible, it would be a good change if the main window remained visible when choosing an output for the generated code.

OS: Windows 10

Generates some images but no code

Hi there! Thanks for this very cool software. I'm having an issue where when I go to generate, it will get a few elements and turn them into images but does not generate any code. It doesn't grab every element either, just a handful. I tried running the exe and running from source.

It is throwing the JSON decode error that I saw mentioned in another issue (sorry just noticed this.) Is this a Figma API issue?

Not Opening through Terminal

@ParthJadhav

Improvement for Release notes

Disclaimer for Windows Users:

Windows Defender might prevent you from running Tkinter Designer when you first open the executable.

You can disregard this message. See this thread on StackOverflow for more details. To run the program, click on More info > Run anyway.
If you have any concerns, you can always run the program directly from the source code.

KeyError: 'children'

Hi! I have a problem when i click generate. The error is: KeyError: 'children'
I attached a photo with the error on imgur: https://i.imgur.com/2Ni8JrM_d.webp?maxwidth=760
My figma: https://www.figma.com/file/1HMX8V1VpfbCH2rava1wPs/Untitled?node-id=0%3A1

Help

Exception in Tkinter callback
Traceback (most recent call last):
File "C:\Users\aga53\AppData\Local\Programs\Python\Python39\lib\tkinter_init_.py", line 1885, in call
return self.func(*args)
File "C:\Users\aga53\Desktop\Tkinter-Designer-master\tkinter_designer.py", line 29, in btn_clicked
backend.generate_code(token,URL, output_path)
File "C:\Users\aga53\Desktop\Tkinter-Designer-master\backend.py", line 147, in generate_code
window_elements = fig_window["children"]
KeyError: 'children'

https://www.figma.com/file/oAIOBRAAl45enA7k1CWy4k/Untitled?node-id=1%3A18

Cannot have buttons open other windows

Hello,

I've been having an issue with creating GUI's which navigate to other frames. I've tried centering both frames on X=0, Y=0, but only the primary frame is created.

Is this currently supported?

Thank you!
Brian

get_color "list index out of range"

(py38env) ➜ Tkinter-Designer git:(master) git pull
Already up to date.
(py38env) ➜ Tkinter-Designer git:(master) python tkinter_designer.py
2021-06-16 18:31:55.124 Python[80078:7127628] Warning: Expected min height of view: (<NSButton: 0x7fe6fdf1ecd0>) to be less than or equal to 30 but got a height of 32.000000. This error will be logged once per view in violation.
2021-06-16 18:31:56.399 Python[80078:7127628] Warning: Expected min height of view: (<NSButton: 0x7fe6fdf4a3e0>) to be less than or equal to 30 but got a height of 32.000000. This error will be logged once per view in violation.
Exception in Tkinter callback
Traceback (most recent call last):
File "/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/tkinter/init.py", line 1883, in call
return self.func(*args)
File "tkinter_designer.py", line 29, in btn_clicked
backend.generate_code(token,URL, output_path)
File "/Users/aaron/tmp/Tkinter-Designer/backend.py", line 214, in generate_code
bg = get_color(element)
File "/Users/aaron/tmp/Tkinter-Designer/backend.py", line 9, in get_color
el_r = element["fills"][0]["color"]['r'] * 255
IndexError: list index out of range

file: https://www.figma.com/file/mekIkg9OrUISB7tbvtzbR0/v1?node-id=1%3A416

Support for toggle button

Toggle buttons are pretty handy and crucial elements of modern UIs, but this is unfortunately overlooked by tkinter.
The proposed feature adds toggle button support for Tkinter-Designer.

Possible template for ToggleButton:

from tkinter import *


class ToggleButton(Canvas):
    def __init__(self, root, command=None, fg='white', bg_off='#d9dadc', bg_on='#4ED164', state='on'):
        super().__init__()
        self.height = 50
        self.width = 100
        self.bg_on = bg_on
        self.bg_off = bg_off
        self.configure(width=self.width, height=self.height,borderwidth=0, highlightthickness=0)
        self.root = root
        self.state = state
        bg = self.bg_on if self.state == 'on' else self.bg_off

        self.left_side = self.create_arc(
            (0, 0, 0, 0), start=90, extent=180, fill=bg, outline=bg)
        self.right_side = self.create_arc(
            (0, 0, 0, 0), start=-90, extent=180, fill=bg, outline=bg)
        self.rect = self.create_rectangle(0, 0, 0, 0, fill=bg, outline=bg)
        self.btn = self.create_oval(0,0,0,0, fill=fg, outline=bg)

        self.bind('<Configure>', self._resize)
        self.bind('<Button>', self._animate, add='+')
        self.bind('<Button>', command, add='+')

    def _animate(self, event):
        x, y, w, h = self.coords(self.btn)
        x = int(x-1)
        y = int(y-1)
        offset = 4
        if x == self.coords(self.right_side)[0]+offset:
          self.moveto(self.btn, offset, offset)
          self.state = 'off'
          self._update_bg(self.bg_off)
        else:
          self.moveto(self.btn, self.coords(self.right_side)[0]+offset, offset)
          self.state = 'on'
          self._update_bg(self.bg_on)

    def _update_bg(self, color):
        for bg_item in [self.left_side, self.right_side, self.rect]:
          self.itemconfig(bg_item,fill=color, outline=color)
        self.itemconfig(self.btn, outline=color)

    def _resize(self, event):
        # scale controls, in part, the y-axis placement of the button on the toggle
        scale = 5
        self.coords(self.left_side, scale, scale, event.height-scale, event.height-scale)
        self.coords(self.right_side, scale, scale, event.height, event.height-scale)
        self.coords(self.btn, scale, scale, event.height -scale, event.height-scale)
        factor = event.width- (2*scale) - \
            (self.coords(self.right_side)[2]-self.coords(self.right_side)[0])
        self.move(self.right_side, factor, 0)
        self.coords(self.rect,
                    self.bbox(self.left_side)[2]-2,
                    scale,
                    self.bbox(self.right_side)[0]+2,
                    event.height-scale)

        self.moveto(self.btn, self.coords(self.right_side)[0]+4, 4)

    @property
    def state(self):
      return self._state

    @state.setter
    def state(self, value):
      self._state = value

potential implementation in dummy app:

def hello(event='') -> None:
    if btn.state == 'on':
      btn.state = 'off'
    else:
      btn.state = 'on'
    print(f'State is {btn.state}')

root = Tk()
btn = ToggleButton(root, lambda _: hello('Hello'), 'red', 'green')
btn.pack()

btn2 = ToggleButton(root, command=hello)
btn2.pack(expand=True, fill='both')

Button(root, text='Text').pack(expand=True, fill='both')

root.mainloop()

_tkinter.TclError: bitmap "images/iconbitmap.ico" not defined _____ Import "backend" could not be resolvedPylancereportMissingImports)

like the title says i have the following problems with tkinter_designer.py

1. import backend isnt working properlly (atleast vscode is having trouble)

2. if i try to run the script i get to following error message:

-->>>python3 tkinter_designer.py
Traceback (most recent call last):
  File "/home/shaco/Tkinter-Designer/tkinter_designer.py", line 55, in <module>
    window.iconbitmap("images/iconbitmap.ico")
  File "/usr/lib/python3.9/tkinter/__init__.py", line 2080, in wm_iconbitmap
    return self.tk.call('wm', 'iconbitmap', self._w, bitmap)
_tkinter.TclError: bitmap "images/iconbitmap.ico" not defined

Inconvenient instructions

Those interested in using Tkinter-Designer are currently required to download a pdf file from google drive, rather than simply reading from github. The instructions for installing are near the bottom of the pdf, which makes it even more inconvenient. I suggest converting each slide to an image, and creating at markdown file that is included within this repository.

No button in Figma Design

In "How to use Tkinter Designer" in https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md, "Formatting Your Figma Design" -> 2. Element Guide -> 7. Button: It talks about the creation of a button but not how. In fact, and ironically enough, this is the only thing that I needed an explanation for! :) I can't find anything about buttons ...

Fonts not working properly

When I try to create a text with a font on Figma it changes it when it gets exported.
this is the Figma project:

And this is the result:

Note that this happens with every font, not only this one

Tkinter-Designer Support for Border Radius

Border Radius (corner radius) is an important feature for modern UI buttons. It is possible to implement pill buttons natively, using a modification of code like this: https://stackoverflow.com/questions/42579927/rounded-button-tkinter-python

Text Element: positional errors dependent on font size and dimensions of Figma text bounding box

Platform: Mac OSX 10.15.7, Python 3.9.5

I see from the code that Figma must use the center of a text element as it's origin because you're doing this calculation in 'backend.py' to modify the X:Y cordinate when setting the position on the Tkinter Canvas:

        x, y = x + (width / 2), y + (height / 2)

But depending on the font size and depending on the dimensions of the Figma bounding box, this results in an X:Y error in the generated code. I guess this is probably unique to Text elements as in Figma you can set the bounding box to greater than the space taken up by the actual text.

Example where Figma Text bounding boxes are as small as possible without pusing the text onto new lines.

Screenshot from Figma:

Screenshot from generated window.py

Rectangles missings in code

i make a design but when i convert it into code some elements specially rectangle will disappear...
i tried multiple times but failed to generate. please help
regards.

https://www.figma.com/file/2QRx53BUWoXXrzW1CtUjlD/Untitled?node-id=1%3A4

Tkinter-Designer Logo

Hey @piccoloser,
Here's the logo for the executable :-

Uploaded here for easy access.

I love it

Love it

Text isnt scaling properly?

https://imgur.com/hsLfcXp
This shows the figma work
https://imgur.com/SmbJDxG
This shows what happens when I run window.py

And when I lower the text size, this happens:
https://imgur.com/5HkynwT

Help appreciated! Love the work though, this is making GUI's 10x nicer and easier.

Help

How to Fix ?
A key error occurs when the elements are named or grouped incorrectly. Before creating an issue, make sure that you have followed the instructions guide correctly.

If the issue still persists, create an issue with the following details included.

1. Error Message
2. Link to the Figma File

Just keeps buffering

Window goes into "not responding" right after running and never finnishes

Tkinter-Designer doesn't export my design exacly!

let me make it shorter, check the picture below

this is my naming for all elements:

what's wrong?

It will not Generate

I'm facing an issue where it will only generate background.png, but the actual code is nowhere to be found

Nothing happens after 2 windows

Im using it as usual but i get 2 windows:
1:
Existing files will be overwritten.
2:
Files created succesfully!
Then nothing happens...

List index out of range

When I generate the file , I get this error:
Exception in Tkinter callback Traceback (most recent call last): File "C:\Users\----------\anaconda3\envs\NewsAndWiki\lib\tkinter\__init__.py", line 1892, in __call__ return self.func(*args) File "C:\----Path------\Tkinter-Designer\tkinter_designer.py", line 29, in btn_clicked backend.generate_code(token,URL, output_path) File "C:\----Path------\Tkinter-Designer\backend.py", line 220, in generate_code bg = get_color(element) File "C:\----Path------\Tkinter-Designer\backend.py", line 9, in get_color el_r = element["fills"][0]["color"]['r'] * 255 IndexError: list index out of range

Add Listbox Support

Basic support of Listbox elements would be fantastic, even if it just translates a Figma Rectangle into a default Listbox with basic geometry it would be handy for laying out.

I LOVE IT!

Man, i love it, congratulations, you are doing a lot, the difference :))

whatever I can do to help and contribute with tips and knowledge, I'll be here. Finishing my project in PySimpleGUI I will explore and use it in your lib for sure!

No code generated, only folder.

I have followed all instructions perfectly, and yet when I enter the correct information and click generate, all that happens is a folder is generated, nothing inside of it.

IndexError related to the used colours?

Hey,
i'm currently facing some problems with the tkinter-designer backend file.
I used it once and it worked. But then i gave it another try and i always get the following error:

Exception in Tkinter callback Traceback (most recent call last): File "/usr/lib/python3.8/tkinter/__init__.py", line 1892, in __call__ return self.func(*args) File "tkinter_designer.py", line 29, in btn_clicked backend.generate_code(token,URL, output_path) File "/home/mattesbuerk/Repos/Tkinter-Designer/backend.py", line 158, in generate_code element_color = get_color(element) File "/home/mattesbuerk/Repos/Tkinter-Designer/backend.py", line 9, in get_color el_r = element["fills"][0]["color"]['r'] * 255 IndexError: list index out of range
The script always creates the folder generated_files but without any files in there.
I tried commenting out everything which is related to el_r (red colour?) in backend.py. But then the same error appears with el_g.
Do i need to change my colours or is that a bug in the script?

Thank you very much in advance!

Blank Screen without any elements

How to Fix ?

This issue happens due to Incorrect Naming

Try to fix it by reading the instruction carefully.

If the issue still persists, create an issue with the following details included.

1. Error Message
2. Link to the Figma File

The code created by Tkinter-Designer does not show the Design file I created in Figma

I have created a Design file in Figma, following the steps of the Element Guide as described in https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md
The created page (File URL) is https://www.figma.com/file/UEuqWZxlkkHvXGP5VC19Rl/File_01?node-id=0%3A1
I give this and my Token ID in 'tkinter_designer.py' and a 'window.py' file is created, as expected. When I run it, I see just an empty Tkinter window. I checked the file and it doesn't even contain the name "Alkis Piskas" which is stored as text in the Design file and which can be seen in the above mentioned File URL. Shouldn't the code be able to reproduce the content of the Design File?

Request for Chinese Translation

Help

After installing and going through the video and written instructions and running the application it gave this error. The items on figma are carefully labeled. What could be the problem?

Installation

py -m venv env
.\env\Scripts\activate
where python
git clone https://github.com/ParthJadhav/Tkinter-Designer
cd Tkinter-Designer
pip3 install -r requirements.txt
py tkinter_designer.py

Error Message

window_elements = fig_window["children"]
KeyError: 'children'

Link: Figma link

json Decode Error

The Error is:
Exception in Tkinter callback
Traceback (most recent call last):
File "C:\Users\AppData\Local\Programs\Python\Python39\lib\tkinter_init_.py", line 1892, in call
return self.func(*args)
File "C:\Users\Desktop\coding!Coding\Tkinter-Designer-master\tkinter_designer.py", line 29, in btn_clicked
backend.generate_code(token,URL, output_path)
File "C:\Users\Desktop\coding!Coding\Tkinter-Designer-master\backend.py", line 91, in generate_code
data = response.json()
File "C:\Users\AppData\Local\Programs\Python\Python39\lib\site-packages\requests\models.py", line 900, in json
return complexjson.loads(self.text, **kwargs)
File "C:\Users\AppData\Local\Programs\Python\Python39\lib\json_init_.py", line 346, in loads
return _default_decoder.decode(s)
File "C:\Users\AppData\Local\Programs\Python\Python39\lib\json\decoder.py", line 337, in decode
obj, end = self.raw_decode(s, idx=_w(s, 0).end())
File "C:\Users\AppData\Local\Programs\Python\Python39\lib\json\decoder.py", line 355, in raw_decode
raise JSONDecodeError("Expecting value", s, err.value) from None
json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0)

Link to Figma FIle:
https://www.figma.com/file/SmMH601IW47DIQ8RsyiMZQ/Untitled?node-id=0%3A1

Btw before this i got this error:

Exception in Tkinter callback
Traceback (most recent call last):
File "C:\Users\AppData\Local\Programs\Python\Python39\lib\tkinter_init_.py", line 1892, in call
return self.func(*args)
File "C:\Users\Desktop\coding!Coding\Tkinter-Designer-master\tkinter_designer.py", line 29, in btn_clicked
backend.generate_code(token,URL, output_path)
File "C:\Users\Desktop\coding!Coding\Tkinter-Designer-master\backend.py", line 147, in generate_code
window_elements = fig_window["children"]
KeyError: 'children