Skip to content

Latest commit

 

History

History
307 lines (209 loc) · 11 KB

instructions.it-IT.md

File metadata and controls

307 lines (209 loc) · 11 KB
Raw

Come usare Tkinter Designer

Traduzioni

Indice dei contenuti

  1. Introduzione

    1. Installa Python
    2. Installa Tkinter Designer
    3. Crea un account Figma

  2. Formattare il Design di Figma

    1. Riferimento
    2. Guida sugli elementi

  3. Utilizza Tkinter Designer

    1. Personal Access Token
    2. Ottieni l'URL del file
    3. Utilizzare la CLI
    4. Utilizzare la GUI

  4. Risoluzione dei problemi



Introduzione [Top]

1. Installa Python

Prima di utilizzare Tkinter Designer, devi installare Python.

In questa guida dovrai utilizzare il Package Installer for Python (pip), il quale potrebbe richiedere di essere aggiunto alla PATH di sistema.


2. Installa Tkinter Designer

Tre opzioni:

  1. Utilizza il comando pip install tkdesigner;

  2. Tramite poetry

    • poetry new <gui_project_name> && cd <gui_project_name>
    • poetry add tkdesigner
    • poetry install

    Per eseguire i comandi sopra riportati è necessario aver installato poetry.

  3. Per eseguire Tkinter Designer dal codice sorgente, segui le seguenti istruzioni.

    1. Scarica manualmente i file dal codice sorgente di Tkinter Designer by downloading o utilizza GIT.

      git clone https://github.com/ParthJadhav/Tkinter-Designer.git

    2. Spostati nella directory di Tkinter Designer.

      cd Tkinter-Designer

    3. Installa le dipendenze necessarie tramite i seguenti comandi:

      • pip install -r requirements.txt
        • Se pip non dovesse funzionare, puoi provare ad utilizzare i seguenti comandi:
        • pip3 install -r requirements.txt
        • python -m pip install -r requirements.txt
        • python3 -m pip install -r requirements.txt
        • Se non dovesse comunque funzionare, assicurati di aver aggiunto Python alla PATH di sistema.

    Questo installerà Tkinter Designer e le sue dipendenze. Per poter utilizzare Tkinter Designer devi creare un file di Figma seguendo le istruzioni.

    Qualora avessi già creato il file puoi recarti nella sezione Utilizza Tkinter Designer.


3. Crea un account Figma

  1. In un web brwoser, vai su figma.com e clicca su 'Sign up';
  2. Inserisci le tue informazioni, e verifica il tuo indirizzo mail;
  3. Crea un nuovo File di Design Figma;
  4. Inizia a disegnare la tua interfaccia.



Formatta il tuo Design Figma [Top]

1. Riferimento


La denominazione è importante

Nome elemento Figma Elemento Tkinter
Button Button
Line Line
Text Testo a scelta
Rectangle Rectangle
TextArea Text Area
TextBox Entry
Image Canvas.Image()

Il codice generato da Tkinter Designer è basato sui nomi degli elementi del Design Figma e, visto ciò, devi nominare gli elementi correttamente. In Figma, rinomina i elementi facendovi doppio click nel pannello Layers.


2. Guida sugli elementi


  1. Per prima cosa, crea un Frame che fungerà come finestra di Tkinter.

  2. Aggiungi immagini

    • Le immagini possono essere importate o create mediante forme
    • Se desideri utilizzare più forme/immagini, devi raggrupparle selezionandole e premendo i tasti CTRL/⌘ + G
    • Dopodiché nomina l'elemento o il gruppo "Image"

  3. Testo (Testo normale)

    • Usa il tasto T per attivare lo strumento testo, quindi aggiungi il testo desiderato
    • Il testo non deve essere rinominato per essere utilizzato in Tkinter Designer
    • Premi il tasto Return o Enter per muoverti alla riga successiva

  4. Input (Inserimento a linea singola)

    • Attiva lo strumento rettangolo utilizzando il tasto R
    • Ridimensiona l'elemento rettangolo a tuo piacimento
    • Assicurati di rinominare l'elemento rettangolo "TextBox"

  5. Area di testo (Inserimento a linea multipla)

    • Attiva lo strumento rettangolo utilizzando il tasto R
    • Ridimensiona l'elemento rettangolo a tuo piacimento
    • Assicurati di rinominare l'elemento rettangolo "TextArea"

  6. Rettangolo

    • Attiva lo strumento rettangolo utilizzando il tasto R
    • Ridimensiona l'elemento rettangolo a tuo piacimento
    • Assicurati di rinominare l'elemento rettangolo "Rectangle"

  7. Pulsante normale

    • Aggiungi un rettangolo per farlo funzionare come pulsante
      • Facoltativo: Aggiungi un testo al tuo pulsante
    • Seleziona il pulsante (Rettangolo), e l'eventuale testo, e raggruppali premendo i tasti CTRL/⌘ + G
    • Rinomina il gruppo "Button"

Guarda questo video se dovessi riscontrare problemi.



  1. Pulsante rotondo
    • Aggiungi un rettangolo per farlo funzionare come pulsante
      • Facoltativo: Aggiungi un testo al tuo pulsante
    • Rendilo rotondo aggiungendo un raggio ai bordi. Scopri di più qui.
    • Crea un elemento Rettangolo dalle stesse dimensioni del tuo pulsante. Non seguire il punto precedente (dunque non renderlo rotondo)
    • Cambia il colore dell'elemento Rettangolo in modo da farlo combaciare con lo sfondo
    • Ora posizionati sull'ultimo elemento Rettangolo creato (quello sottostante)
    • Seleziona il pulsante (Rettangolo), e l'eventuale testo, e raggruppali premendo i tasti CTRL/⌘ + G
    • Rinomina il gruppo "Button"

Guarda questo video se dovessi riscontrare problemi.



Utilizza Tkinter Designer [Top]

Requisiti minimi

Ci sono alcuni requisiti minimi che devi soddisfare per poter utilizzare TKinter Designer.

1. Personal Access Token

  1. Accedi a Figma
  2. Vai nelle impostazioni
  3. Nella scheda Account, scrolla fino a Personal access tokens
  4. Inserisci il nome del tuo access token nel campo e premi Enter
  5. Ora il tuo Personal Access Token è stato creato.
    • Copia questo token e tienilo al sicuro.
    • Non esiste alcuna procedura per recuperare questo codice.

2. Ottieni l'URL del file

  1. Nel tuo file di Design Figma, clicca sul pulsante Share nella barra in alto, quindi clicca su 🔗 Copy link

Utilizzare la CLI

Per utilizzare la CLI è sufficiente installare il pacchetto ed avviarlo da riga di comando. Per installarlo segui una delle due prossime opzioni.

Tramite PyPi

Puoi usare il seguente comando sostituendo $FILE_URL & $FIGMA_TOKEN con i tuoi dati. Se non dovessi avere questi dati, segui la sezione Requisiti Minimi.

pip install tkdesigner
tkdesigner $FILE_URL $FIGMA_TOKEN

Tramite sorgente

Per usare CLI puoi decidere di clonare il codice sorgente dalla repository e seguire le istruzioni di seguito.

Puoi usare il seguente comando sostituendo $FILE_URL & $FIGMA_TOKEN by your data. e non dovessi avere questi dati, segui la sezione Requisiti Minimi.

$ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN
# To learn more about how to use the cli, pass the --help flag
$ python -m tkdesigner --help

Output

Di base, il codice dell'interfaccia grafica wiene scritto nella directory build/gui.py. Puoi specificare un'altra directory utilizzando il flag -o seguito dalla path.

Per eseguire la GUI generata, spostarsi nella directory di output ed eseguire allo stesso modo in cui si esegue una GUI in Tkinter.

cd build
python3 gui.py

Utilizzare la GUI

Apri Tkinter Designer prima di eseguire i seguenti passaggi


  1. Apri TKinter Designer GUI eseguendo i seguenti comandi:
cd Tkinter-Designer
cd gui
python3 gui.py
  1. Incolla il tuo personal access token nel form Token ID di Tkinter Designer
  2. Incolla il tuo File URL nel form di Tkinter Designer
  3. Clicca su Output Path per aprire il file browser
  4. Scegli la cartella di destinazione e clicca su Select Folder
  5. Clicca infine su Generate

I file di output di Tkinter Designer verranno salvati nella directory da te inserita, dentro una nuova cartella chiamata build. Congratulazioni, hai creato la tua GUI Tkinter grazie a Tkinter Designer!



Risoluzione dei problemi [Top]

  • Elementi non visibili? Fuori posto?

  • Il pulsante ha un indisiderato sfondo grigio?

    • Assicurati di aver aggiunto un Rettangolo dietro al tuo elemento pulsante, e che il suo colore sia identico a quello di sfondo.

  • Elementi errati?

  • La finestra è più grande dello schermo?

    • Riduci la dimensione degli elementi Figma.

  • Non si generano i file?

    • Riavvia Tkinter Designer
    • Controlla il tuo personal access token e l'URL del file
    • Assicurati di aver predisposto un frame al tuo file di Figma

  • Qualcos'altro?