0

I'm trying to redesign my application. In previous version ('old') I was using pure tkinter with python. In the new version I decided to create modern GUI. For this purpose I'm using Figma to design my UI, than I use tkinter design to convert it to python code and then I'm running it as normal app.

enter image description here

The main problem for now with the new GUI designed in Figma is that I don't know how to create different subpages and how to jump between them. I would like to click, for example. "DODAJ" and then I should jump into another subpage. How can I add this paging to my app generated by Figma? Maybe I should design the new UI in other language? If yes what langugage should it be?

# This file was generated by the Tkinter Designer by Parth Jadhav
# https://github.com/ParthJadhav/Tkinter-Designer


from pathlib import Path

# from tkinter import *
# Explicit imports to satisfy Flake8
from tkinter import Tk, Canvas, Entry, Text, Button, PhotoImage


OUTPUT_PATH = Path(__file__).parent
ASSETS_PATH = OUTPUT_PATH / Path("./assets")


def relative_to_assets(path: str) -> Path:
    return ASSETS_PATH / Path(path)


window = Tk()

window.geometry("1440x1024")
window.configure(bg = "#FFFFFF")


canvas = Canvas(
    window,
    bg = "#FFFFFF",
    height = 1024,
    width = 1440,
    bd = 0,
    highlightthickness = 0,
    relief = "ridge"
)

canvas.place(x = 0, y = 0)
canvas.create_rectangle(
    0.0,
    0.0,
    1440.0,
    1011.0,
    fill="#1D1D30",
    outline="")

canvas.create_text(
    856.0,
    402.0,
    anchor="nw",
    text="Nowe gui",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    896.0,
    364.0,
    anchor="nw",
    text="1.0.0",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    725.0,
    256.0,
    anchor="nw",
    text="OSTATNIE ZMIANY",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 48 * -1)
)

canvas.create_text(
    630.0,
    79.0,
    anchor="nw",
    text="XXX Application",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 64 * -1)
)

canvas.create_rectangle(
    0.0,
    0.0,
    391.0,
    1011.0,
    fill="#282646",
    outline="")

canvas.create_text(
    94.0,
    921.0,
    anchor="nw",
    text="USTAWIENIA",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    88.0,
    822.0,
    anchor="nw",
    text="AUTO MODE",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    16.0,
    723.0,
    anchor="nw",
    text="SPRAWD� WA�NO��",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    61.0,
    624.0,
    anchor="nw",
    text="EDYTUJ / USU�",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    98.0,
    525.0,
    anchor="nw",
    text="WYSZUKAJ ",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    132.0,
    426.0,
    anchor="nw",
    text="DODAJ ",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_text(
    31.0,
    327.0,
    anchor="nw",
    text="WSZYSTKIE POLISY",
    fill="#FFFFFF",
    font=("RedHatDisplay Regular", 36 * -1)
)

canvas.create_rectangle(
    12.0,
    206.0,
    391.0,
    295.0,
    fill="#282746",
    outline="")

button_image_1 = PhotoImage(
    file=relative_to_assets("button_1.png"))
button_1 = Button(
    image=button_image_1,
    borderwidth=0,
    highlightthickness=0,
    command=lambda: print("button_1 clicked"),
    relief="flat"
)
button_1.place(
    x=18.0,
    y=212.0,
    width=373.0,
    height=76.0
)

image_image_1 = PhotoImage(
    file=relative_to_assets("image_1.png"))
image_1 = canvas.create_image(
    195.0,
    121.0,
    image=image_image_1
)
window.resizable(False, False)
window.mainloop()

And thats how the new input screen should look after clicking for example DODAJ. I have connected it with overlaying in Figma but it doesnt work with tkinter designer I think. Only the first screen is beeing created. enter image description here

martineau
  • 119,623
  • 25
  • 170
  • 301
GoldenRC
  • 91
  • 2
  • 8
  • You can do is place all the widgets in a frame then pack and unpack according to your need – adityanithariya Sep 27 '21 at 13:59
  • I think this answer to [Switch between two frames in tkinter](https://stackoverflow.com/questions/7546050/switch-between-two-frames-in-tkinter/7557028#7557028) would be helpful — it is an example of grouping widgets into frames and switching between them. – martineau Sep 27 '21 at 14:29

1 Answers1

0

create a new file for the new window or the page, n import that file using import keyword in the current file. for example: mainscreen.py has the main screen in this code you need to import the dodaj.py file using import function

def dodaj():
    import dodaj

put this command for the dodaj button in mainscreen.py and it will work!

Flair
  • 2,609
  • 1
  • 29
  • 41
okayvignesh
  • 1