parthjadhav / tkinter-designer Goto Github PK

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!

Love it

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.

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.

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")

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.

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()

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

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 ...

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

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.

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.

Discussed in #51

'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'

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

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

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

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

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?

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!

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

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

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

@ParthJadhav

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

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

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.

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

[{'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

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

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

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

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?

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.

let me make it shorter, check the picture below

this is my naming for all elements:

what's wrong?

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?

(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

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

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'

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

Can matplotlib figure add with designer?

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

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

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?

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.

mages

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

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

Uploaded here for easy access.