Skip to content

Latest commit

 

History

History
298 lines (200 loc) · 15.8 KB

instructions.ru-RU.md

File metadata and controls

298 lines (200 loc) · 15.8 KB
Raw

Оглавление

  1. Начало работы

    1. Установить Python
    2. Установить Tkinter Designer
    3. Создать учетную запись Figma

  2. Форматирование дизайна Figma

    1. Референс
    2. Руководство по элементам

  3. Использование Tkinter Designer

    1. Токен личного доступа
    2. Получение URL-адреса вашего файла
    3. Использование CLI
    4. Использование графического интерфейса

  4. Устранение неполадок



Начало работы [Наверх]

1. Установите Python

Перед использованием Tkinter Designer вам необходимо установить Python.

Далее в этом руководстве вы будете использовать установщик пакетов для Python (pip), который может потребовать от вас добавить Python в PATH вашей системы.


2. Установите Tkinter Designer

Три варианта:

  1. pip install tkdesigner

  2. Установите poetry

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

  3. Чтобы запустить Tkinter Designer из исходного кода, следуйте инструкциям ниже.

    1. Загрузите исходные файлы для Tkinter Designer, загрузив их вручную или с помощью GIT.

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

    2. Измените рабочий каталог на Tkinter Designer.

      cd Tkinter-Designer

    3. Установите необходимые зависимости, запустив

      • pip install -r requirements.txt
        • В случае, если pip не работает, попробуйте также следующие команды:
        • pip3 install -r requirements.txt
        • python -m pip install -r requirements.txt
        • python3 -m pip install -r requirements.txt
        • Если это по-прежнему не работает, убедитесь, что Python добавлен в PATH.

    При этом будут установлены все зависимости и Tkinter Designer. Прежде чем использовать Tkinter Designer, вам необходимо создать файл Figma, следуя инструкциям ниже.

    Если вы уже создали файл, перейдите к разделу Использование Tkinter Designer.


3. Создайте учетную запись Figma

  1. В веб-браузере перейдите на figma.com и нажмите «Зарегистрироваться».
  2. Введите свою информацию, затем подтвердите свой адрес электронной почты.
  3. Создайте новый файл дизайна Figma.
  4. Начните создавать графический интерфейс:



Форматирование дизайна Figma [Наверх]

1. Референс


Имена важны!

Имя элемента Figma Tkinter элемент
Button Button
Line Line
Text Name it anything
Rectangle Rectangle
TextArea Text Area
TextBox Entry
Image Canvas.Image()

Код, сгенерированный Tkinter Designer, основан на именах элементов вашего дизайна Figma, и поэтому вам необходимо соответствующим образом называть свои элементы. В Figma переименуйте свои элементы, дважды щелкнув на них на панели «Layers».


2. Руководство по элементам


  1. Сначала создайте Frame, который будет служить вашим окном Tkinter.

  2. Добавление изображений

    • Изображения могут быть созданы с использованием фигур и/или изображений.
    • Если вы используете несколько фигур/изображений, вам необходимо сгруппировать их, выделив их все и нажав CTRL/⌘ + G
    • После этого назовите элемент или группу «Image».

  3. Text (обычный текст)

    • Используйте клавишу T, чтобы активировать текстовый инструмент, затем добавьте текст по желанию.
    • Текст не нужно переименовывать для использования в Tkinter Designer.
    • Нажмите клавишу Return или Enter, чтобы перейти к следующей строке.

  4. Entry (однострочный пользовательский ввод)

    • Активируйте инструмент «Прямоугольник» с помощью R.
    • Отрегулируйте прямоугольник по своему вкусу.
    • Убедитесь, что прямоугольник называется «TextBox».

  5. Text Area (многострочный пользовательский ввод)

    • Активируйте инструмент «Прямоугольник» с помощью R.
    • Отрегулируйте прямоугольник по своему вкусу.
    • Убедитесь, что прямоугольник назван «TextArea».

  6. Прямоугольник

    • Активируйте инструмент «Прямоугольник» с помощью R.
    • Отрегулируйте прямоугольник по своему вкусу.
    • Убедитесь, что прямоугольник назван «Rectangle».

  7. Обычная кнопка

    • Добавьте прямоугольник, который будет служить кнопкой в вашем графическом интерфейсе.
      • Необязательно: добавьте текст для кнопки.
    • Выберите кнопку (прямоугольник) и любой дополнительный текст, затем сгруппируйте их с помощью CTRL/⌘ + G
    • Назовите группу «Button».

Если у вас возникнут какие-либо проблемы, обратитесь к этому видео.



  1. Скругленная кнопка
    • Добавьте прямоугольник, который будет служить кнопкой в вашем графическом интерфейсе.
      • Необязательно: добавьте текст для кнопки.
    • Сделайте его закругленным, добавив угловой радиус, выделив прямоугольник и добавив угловой радиус с правой стороны. Подробнее об этом
    • Создайте прямоугольник того же размера, что и ваша кнопка. Не делайте его закругленным.
    • Измените цвет прямоугольника, чтобы он соответствовал фону.
    • Теперь переместите вновь созданный прямоугольник под главную кнопку (Прямоугольник).
    • Выберите кнопку, прямоугольник и любой дополнительный текст, затем сгруппируйте их с помощью CTRL/⌘ + G
    • Назовите группу «Button».

Если у вас возникнут какие-либо проблемы, обратитесь к этому видео.



Использование Tkinter Designer [Наверх]

Необходимые входные данные

Чтобы использовать TKinter Designer, вам необходимо собрать некоторые данные.

1. Токен личного доступа

  1. Войдите в свою учетную запись Figma.
  2. Перейдите в «Settings» \ «Настройки».
  3. На вкладке Account прокрутите вниз до пункта Personal access tokens.
  4. Введите имя вашего токена доступа в форму ввода и нажмите Enter.
  5. Будет создан ваш личный токен доступа.
    • Скопируйте этот токен и сохраните его в безопасном месте.
    • У вас больше не будет возможности скопировать этот токен.

2. Получение URL-адреса файла

  1. В файле дизайна Figma нажмите кнопку Share на верхней панели, затем нажмите 🔗 Copy link

Использование интерфейса командной строки

Использовать CLI так же просто, как установить пакет и запустить инструмент CLI.

Из PyPi

Вы можете использовать приведенную ниже команду в качестве проверки, заменив $FILE_URL и $FIGMA_TOKEN своими данными. Если у вас нет токена и ссылки, обратитесь к Разделу «Необходимые входные данные».

pip установить tkdesigner

tkdesigner $FILE_URL $FIGMA_TOKEN

Из исходников

Чтобы использовать CLI из исходного кода, вам необходимо клонировать репозиторий, а затем следовать инструкциям ниже.

Вы можете использовать приведенную ниже команду в качестве проверки, заменив $FILE_URL и $FIGMA_TOKEN своими данными. Если у вас нет токена и ссылки, обратитесь к Разделу «Необходимые входные данные».

$ python -m tkdesigner.cli $FILE_URL $FIGMA_TOKEN

# Чтобы узнать больше о том, как использовать cli, передайте флаг --help
$ python -m tkdesigner --help

Выходные данные

По умолчанию код графического интерфейса будет записан в build/gui.py. Вы можете указать выходной путь, используя флаг «-o» и указав путь.

Чтобы запустить сгенерированный графический интерфейс, перейдите в каталог, в котором вы его создали (например, build/), и запустите его так же, как и любой графический интерфейс Tkinter.

cd build
python3 gui.py

Использование графического интерфейса

Откройте Tkinter Designer, прежде чем выполнять следующие шаги.


  1. Откройте графический интерфейс TKinter Designer с помощью
cd Tkinter-Designer
cd gui
python3 gui.py
  1. Вставьте свой персональный токен доступа в форму Token ID в Tkinter Designer.
  2. Вставьте ссылку в форму File URL в Tkinter Designer.
  3. Нажмите форму Output Path, чтобы открыть браузер файлов.
  4. Выберите путь вывода и нажмите Select Folder.
  5. Нажмите Generate.

Выходные файлы Tkinter Designer будут помещены в выбранный вами каталог внутри новой папки с именем build. Поздравляем, вы создали графический интерфейс Tkinter с помощью Tkinter Designer!



Устранение неполадок [Наверх]

  • Элементы не видны? Находятся не на своём месте?

  • Кнопка имеет незапланированный серый фон?

    • Убедитесь, что вы добавили прямоугольник позади элемента кнопки и что его цвет заливки такой же, как у фона.

  • Неправильные элементы?

  • Окно больше экрана?

    • Уменьшите размер ваших элементов в Figma.

  • Файлы не генерируются?

    • Перезапустите Tkinter Designer.
    • Дважды проверьте токен и URL-адрес.
    • Убедитесь, что в вашем дизайне есть Frame.

  • Что-то другое?