Перейти к содержимому
davidka.net > 💻 🧠 Код 1001 > 📚 Учебные Материалы > FreeCAD > Создание аддонов для FreeCAD > Урок 6. Иконки и визуальное оформление

Урок 6. Иконки и визуальное оформление

  • автор:

📘 Учебный курс: Создание аддонов для FreeCAD

Цель урока: добавить иконки к кнопкам и рабочей среде, чтобы аддон выглядел профессионально.

In Questo Articolo
  1. 🖼 Часть 1. Поддерживаемые форматы иконок
  2. 📁 Часть 2. Структура папки с иконками
  3. 🎨 Часть 3. Где взять иконки?
  4. 🛠 Часть 4. Подключение иконок в коде
  5. 🧪 Шаг 5. Проверка работы
  6. 💡 Советы по иконкам
  7. 🧪 Практическое задание
  8. 🌐 Где брать готовые иконки?
  9. ▶️ Что дальше?
  10. Урок 6. Иконки и визуальное оформление
  11. 🖼 Часть 1. Поддерживаемые форматы иконок
  12. 📁 Часть 2. Структура папки с иконками
  13. 🎨 Часть 3. Где взять иконки?
  14. 🛠 Часть 4. Подключение иконок в коде
  15. 🧪 Шаг 5. Проверка работы
  16. 💡 Советы по иконкам
  17. 🧪 Практическое задание
  18. 🌐 Где брать готовые иконки?
  19. ▶️ Что дальше?

🖼 Часть 1. Поддерживаемые форматы иконок

FreeCAD поддерживает:

  • SVG (рекомендуется) — масштабируется без потерь
  • PNG — растровый, но прост в использовании

💡 Иконки должны быть простыми, контрастными и узнаваемыми даже в маленьком размере (16×16 или 24×24 пикселей).

📁 Часть 2. Структура папки с иконками

Создайте внутри папки аддона подпапку:

BoxBuilderAddon/
├── Resources/
│   └── icons/
│       ├── box_builder.svg   ← иконка рабочей среды
│       └── create_box.svg    ← иконка команды
├── InitGui.py
└── box_builder_workbench.py

💡 Путь Resources/icons/ — стандартное соглашение в экосистеме FreeCAD.

🎨 Часть 3. Где взять иконки?

Вариант 1: Используйте встроенные иконки FreeCAD

FreeCAD поставляется с сотнями иконок. Например:

  • :/icons/Part_Box.svg
  • :/icons/Document-new.svg

Но лучше создать свои — чтобы не зависеть от внутренних путей.

Вариант 2: Создайте простую иконку вручную

Пример: create_box.svg

<!-- create_box.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  <rect x="10" y="10" width="44" height="44" fill="none" stroke="black" stroke-width="4"/>
  <line x1="10" y1="10" x2="20" y2="0" stroke="black" stroke-width="4"/>
  <line x1="54" y1="10" x2="64" y2="0" stroke="black" stroke-width="4"/>
  <line x1="54" y1="54" x2="64" y2="44" stroke="black" stroke-width="4"/>
  <line x1="20" y1="0" x2="64" y2="0" stroke="black" stroke-width="4"/>
  <line x1="64" y1="0" x2="64" y2="44" stroke="black" stroke-width="4"/>
</svg>

Сохраните этот код в файл create_box.svg внутри Resources/icons/.

💡 Вы можете открыть SVG в браузере, чтобы увидеть результат.

🛠 Часть 4. Подключение иконок в коде

Шаг 1. Обновите box_builder_workbench.py

Добавьте в начало файла (после импортов):

import os

Затем найдите класс BoxBuilderCommand и обновите метод GetResources:

class BoxBuilderCommand:
    def GetResources(self):
        # Путь к иконке
        icon_path = os.path.join(
            os.path.dirname(__file__),
            "Resources", "icons", "create_box.svg"
        )
        return {
            "MenuText": "Box Builder",
            "ToolTip": "Create a box with custom dimensions",
            "Pixmap": icon_path  # ← подключаем иконку
        }
    # ... остальное без изменений

Шаг 2. Добавьте иконку для рабочей среды

В классе BoxBuilderWorkbench добавьте свойство Icon:

class BoxBuilderWorkbench(FreeCADGui.Workbench):
    MenuText = "Box Builder"
    ToolTip = "Create custom boxes with GUI"

    # Путь к иконке рабочей среды
    def __init__(self):
        self.Icon = os.path.join(
            os.path.dirname(__file__),
            "Resources", "icons", "box_builder.svg"
        )

    def Initialize(self):
        self.list = ["BoxBuilderCommand"]
        self.appendToolbar("Box Tools", self.list)
        self.appendMenu("Box Builder", self.list)

    def GetClassName(self):
        return "Gui::PythonWorkbench"

⚠️ Если вы не создали box_builder.svg — просто скопируйте create_box.svg и переименуйте.

🧪 Шаг 5. Проверка работы

  1. Убедитесь, что структура папок правильная:
   BoxBuilderAddon/Resources/icons/create_box.svg
   BoxBuilderAddon/Resources/icons/box_builder.svg
  1. Перезапустите FreeCAD
  2. Выберите рабочую среду Box Builder

✅ Вы должны увидеть:

  • Иконку рядом с названием рабочей среды (в списке)
  • Иконку на кнопке панели инструментов

💡 Советы по иконкам

  • Используйте чёрный на прозрачном фоне — FreeCAD сам подстроит под тему (светлую/тёмную)
  • Размер SVG не важен — главное, чтобы он был векторным
  • Для PNG используйте прозрачный фон и размер 64×64 или 128×128
  • Не используйте цвета — иконки в FreeCAD обычно монохромные

🧪 Практическое задание

  1. Создайте иконку box_builder.svg (можно скопировать create_box.svg)
  2. Найдите в интернете бесплатную SVG-иконку коробки (например, на Flaticon или Material Icons) и адаптируйте её
  3. Попробуйте использовать PNG вместо SVG — убедитесь, что фон прозрачный

🌐 Где брать готовые иконки?

▶️ Что дальше?

В Уроке 7 мы:

  • Научимся публиковать аддон через официальный Addon Manager
  • Создадим файл package.xml
  • Подготовим репозиторий на GitHub
  • Сделаем так, чтобы другие пользователи могли легко установить ваш аддон

📘 Учебный курс: Создание аддонов для FreeCAD

Урок 6. Иконки и визуальное оформление

Цель урока: добавить иконки к кнопкам и рабочей среде, чтобы аддон выглядел профессионально.

🖼 Часть 1. Поддерживаемые форматы иконок

FreeCAD поддерживает:

  • SVG (рекомендуется) — масштабируется без потерь
  • PNG — растровый, но прост в использовании

💡 Иконки должны быть простыми, контрастными и узнаваемыми даже в маленьком размере (16×16 или 24×24 пикселей).

📁 Часть 2. Структура папки с иконками

Создайте внутри папки аддона подпапку:

BoxBuilderAddon/
├── Resources/
│   └── icons/
│       ├── box_builder.svg   ← иконка рабочей среды
│       └── create_box.svg    ← иконка команды
├── InitGui.py
└── box_builder_workbench.py

💡 Путь Resources/icons/ — стандартное соглашение в экосистеме FreeCAD.

🎨 Часть 3. Где взять иконки?

Вариант 1: Используйте встроенные иконки FreeCAD

FreeCAD поставляется с сотнями иконок. Например:

  • :/icons/Part_Box.svg
  • :/icons/Document-new.svg

Но лучше создать свои — чтобы не зависеть от внутренних путей.

Вариант 2: Создайте простую иконку вручную

Пример: create_box.svg

<!-- create_box.svg -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64">
  <rect x="10" y="10" width="44" height="44" fill="none" stroke="black" stroke-width="4"/>
  <line x1="10" y1="10" x2="20" y2="0" stroke="black" stroke-width="4"/>
  <line x1="54" y1="10" x2="64" y2="0" stroke="black" stroke-width="4"/>
  <line x1="54" y1="54" x2="64" y2="44" stroke="black" stroke-width="4"/>
  <line x1="20" y1="0" x2="64" y2="0" stroke="black" stroke-width="4"/>
  <line x1="64" y1="0" x2="64" y2="44" stroke="black" stroke-width="4"/>
</svg>

Сохраните этот код в файл create_box.svg внутри Resources/icons/.

💡 Вы можете открыть SVG в браузере, чтобы увидеть результат.

🛠 Часть 4. Подключение иконок в коде

Шаг 1. Обновите box_builder_workbench.py

Добавьте в начало файла (после импортов):

import os

Затем найдите класс BoxBuilderCommand и обновите метод GetResources:

class BoxBuilderCommand:
    def GetResources(self):
        # Путь к иконке
        icon_path = os.path.join(
            os.path.dirname(__file__),
            "Resources", "icons", "create_box.svg"
        )
        return {
            "MenuText": "Box Builder",
            "ToolTip": "Create a box with custom dimensions",
            "Pixmap": icon_path  # ← подключаем иконку
        }
    # ... остальное без изменений

Шаг 2. Добавьте иконку для рабочей среды

В классе BoxBuilderWorkbench добавьте свойство Icon:

class BoxBuilderWorkbench(FreeCADGui.Workbench):
    MenuText = "Box Builder"
    ToolTip = "Create custom boxes with GUI"

    # Путь к иконке рабочей среды
    def __init__(self):
        self.Icon = os.path.join(
            os.path.dirname(__file__),
            "Resources", "icons", "box_builder.svg"
        )

    def Initialize(self):
        self.list = ["BoxBuilderCommand"]
        self.appendToolbar("Box Tools", self.list)
        self.appendMenu("Box Builder", self.list)

    def GetClassName(self):
        return "Gui::PythonWorkbench"

⚠️ Если вы не создали box_builder.svg — просто скопируйте create_box.svg и переименуйте.

🧪 Шаг 5. Проверка работы

  1. Убедитесь, что структура папок правильная:
   BoxBuilderAddon/Resources/icons/create_box.svg
   BoxBuilderAddon/Resources/icons/box_builder.svg
  1. Перезапустите FreeCAD
  2. Выберите рабочую среду Box Builder

✅ Вы должны увидеть:

  • Иконку рядом с названием рабочей среды (в списке)
  • Иконку на кнопке панели инструментов

💡 Советы по иконкам

  • Используйте чёрный на прозрачном фоне — FreeCAD сам подстроит под тему (светлую/тёмную)
  • Размер SVG не важен — главное, чтобы он был векторным
  • Для PNG используйте прозрачный фон и размер 64×64 или 128×128
  • Не используйте цвета — иконки в FreeCAD обычно монохромные

🧪 Практическое задание

  1. Создайте иконку box_builder.svg (можно скопировать create_box.svg)
  2. Найдите в интернете бесплатную SVG-иконку коробки (например, на Flaticon или Material Icons) и адаптируйте её
  3. Попробуйте использовать PNG вместо SVG — убедитесь, что фон прозрачный

🌐 Где брать готовые иконки?

▶️ Что дальше?

В Уроке 7 мы:

  • Научимся публиковать аддон через официальный Addon Manager
  • Создадим файл package.xml
  • Подготовим репозиторий на GitHub
  • Сделаем так, чтобы другие пользователи могли легко установить ваш аддон
Метки:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *