Skip to content

Latest commit

 

History

History
298 lines (200 loc) · 10 KB

instructions.pt-BR.md

File metadata and controls

298 lines (200 loc) · 10 KB
Raw

Como usar o Tkinter Designer

Índice

  1. Comece por aqui

    1. Instalação do Python
    2. Instalação do Tkinter Designer
    3. Faça uma conta no Figma

  2. Formatando seu design Figma

    1. Referência
    2. Guia de elementos

  3. Usando o Tkinter Designer

    1. Token de acesso pessoal
    2. Obtendo o URL do seu arquivo
    3. Usando a CLI
    4. Usando a GUI

  4. Solução de problemas



Começando [Top]

1. Instalando Python

Antes de usar o Tkinter Designer, você precisará instalar o Python.

Mais adiante neste guia, você usará o Package Installer for Python (pip), que pode exigir que você adicione o Python ao PATH do seu sistema.


2. Instalando Tkinter Designer

Três opções:

  1. pip install tkdesigner

  2. Instale poetry

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

  3. Para executar o Tkinter Designer a partir do código-fonte, siga as instruções abaixo.

    1. Baixe os arquivos de origem do Tkinter Designer, você pode baixar manualmente ou usar o GIT.

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

    2. Altere seu diretório de trabalho para Tkinter Designer.

      cd tkinter-designer

    3. Instale as dependências necessárias executando

      • pip install -r requirements.txt
        • In the event that pip doesn't work, also try the following commands:
        • pip3 install -r requirements.txt
        • python -m pip install -r requirements.txt
        • python3 -m pip install -r requirements.txt
        • If this still doesn't work, ensure that Python is added to the PATH.

    Isso instalará todos os requisitos e o Tkinter Designer. Antes de usar o Tkinter Designer, você precisa criar um arquivo Figma com as instruções abaixo.

Se você já criou um arquivo, pule para Usando o Tkinter Designer.


3. Faça uma conta no Figma

  1. Em um navegador da Web, navegue até figma.com e clique em 'Sign up'
  2. Insira suas informações e, em seguida, verifique seu e-mail
  3. Crie um novo arquivo Figma Design
  4. Comece a fazer sua GUI



Formatando seu design Figma [Top]

1. Referência


Nomear é importante

Figma Element Name Tkinter Element
Button Button
Text Name it anything
Rectangle Rectangle
Line Line
TextArea Text Area
TextBox Entry
Image Canvas.Image()

O código gerado pelo Tkinter Designer é baseado nos nomes dos elementos do seu design Figma e, como tal, você precisa nomear seus elementos de acordo. No Figma, renomeie seus elementos clicando duas vezes neles no painel Camadas.


2. Guia de elementos


  1. Primeiro, crie um Frame que servirá como sua janela Tkinter.

  2. Adicionando imagens

    • As imagens podem ser criadas usando shapes and/or images
    • Se você usar vários shapes/images, você selecionar todos e pressionar CTRL/⌘ + G
    • Depois disso nomeie o elemento ou grupo como "Image".

  3. Texto (Texto normal)

    • Use o atalho T para ativar a ferramenta de texto e, em seguida, adicione o texto conforme desejado
    • O texto não precisa ser renomeado para uso no Tkinter Designer
    • Para pular linhas pressione Return ou Enter

  4. Entrada de texto (Uma linha para entrada do usuario)

    • Pressione R para habilitar a ferramenta Retângulo
    • Ajuste o retângulo ao seu gosto
    • Renomeio o retângulo para "TextBox"

  5. Entrada de texto (Entrada de usuário de várias linhas)

    • Pressione R para habilitar a ferramenta Retângulo
    • Ajuste o retângulo ao seu gosto
    • Renomeio o retângulo para "TextArea"

  6. Retângulo

    • Pressione R para habilitar a ferramenta Retângulo
    • Ajuste o retângulo ao seu gosto
    • Renomeio o retângulo para "Rectangle"

  7. Botão normal

    • Adicione um retângulo para servir como um botão em sua GUI
      • Opcional: adicione texto para o botão
    • Selecione o botão (Retângulo) e qualquer texto opcional e agrupe-os com CTRL/⌘ + G
    • Nomeie o grupo "Button"

Consulte esté video se tiver algum problema



  1. Botão arredondado
    • Adicione um retângulo para servir como um botão em sua GUI
      • Opcional: adicione texto para o botão
    • Para fazer o arredondamento no botão modifique o raio (´Corner radius´) Leia mais sobre isso
    • Crie um retângulo com o mesmo tamanho do seu botão. Não o torne arredondado.
    • Altere a cor do retângulo para corresponder ao plano de fundo
    • Agora mova o retângulo recém-criado abaixo do botão principal (Retângulo).
    • Selecione o botão, Retângulo e qualquer texto opcional e, em seguida, agrupe-os com CTRL/⌘ + G
    • Nomeie o grupo "Button"

Consulte esté video se tiver algum problema



Usando o Tkinter Designer [Top]

Entradas Necessárias

Existem algumas entradas que você precisará coletar para poder usar o TKinter Designer.

1. Token de acesso pessoal

  1. Faça login na sua conta Figma
  2. Navegue até Configurações
  3. Na guia Account role para baixo até Personal access tokens
  4. Digite o nome do seu token de acesso no formulário de entrada e pressione Enter
  5. Seu token de acesso pessoal será criado.
    • Copie este token e mantenha-o em algum lugar seguro.
    • Você não terá outra chance de copiar este token.

2. Obtendo o URL do seu arquivo

  1. Em seu arquivo de design Figma, clique no Share botão na barra superior, em seguida, clique em 🔗 Copy link

Usando a CLI

Usar a CLI é tão simples quanto instalar o pacote e executar a ferramenta CLI.

De PyPi

Você pode usar o comando abaixo como teste substituindo $FILE_URL & $FIGMA_TOKEN Se você não tiver o token e o link, consulte a Seção de Entradas Requeridas.

pip install tkdesigner

tkdesigner $FILE_URL $FIGMA_TOKEN

Da fonte

Para usar a CLI a partir do código-fonte, você precisa clonar o repositório e seguir as instruções abaixo.

Você pode usar o comando abaixo como teste substituindo $FILE_URL & $FIGMA_TOKEN por seus dados. Se você não tiver o token e o link, consulte a Seção de Entradas Requeridas.

$ 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

Saída

Por padrão, o código GUI será escrito em build/gui.py. Você pode especificar o caminho de saída usando o sinalizador -o e fornecendo o caminho.

Para executar a GUI gerada, cd no diretório em que você a construiu (por exemplo, build/) e execute-a como faria com qualquer GUI do Tkinter.

cd build
python3 gui.py

Usando a GUI

Abra o Tkinter Designer antes de executar as etapas a seguir


  1. Abra a GUI do TKinter Designer por
cd Tkinter-Designer
cd gui
python3 gui.py
  1. Cole seu token de acesso pessoal no formulário Token ID no Tkinter Designer
  2. Cole o link no formulário URL do arquivo no Tkinter Designer
  3. Clique no formulário Output Path para abrir um navegador de arquivos
  4. Escolha um caminho de saída e clique em Select Folder
  5. Pressione Generate

Os arquivos de saída do Tkinter Designer serão colocados no diretório escolhido, dentro de uma nova pasta chamada build. Parabéns, você agora criou sua GUI do Tkinter usando o Tkinter Designer!



Solução de problemas [Top]

  • Elementos não visíveis? Extraviado?

  • O botão tem um fundo cinza não intencional?

    • Certifique-se de ter adicionado um retângulo atrás do elemento do botão e que sua cor de preenchimento seja a mesma do plano de fundo

  • Elementos incorretos?

  • A janela é maior que a tela?

    • Reduza o tamanho de seus elementos no Figma

  • Arquivos não estão gerando?

    • Reinicie o Tkinter Designer
    • Verifique novamente o token e o URL
    • Certifique-se de que seu design tenha um quadro

  • Algo mais?