Урок 6. Іконки та візуальний дизайн

Посібник: Створення доповнень для FreeCAD

Мета уроку: Додати іконки до кнопок та робочого середовища, щоб доповнення виглядало професійно.

У цьому розділі:

Частина 1. Підтримувані формати іконок
Частина 2. Структура папки іконок
Частина 3. Де взяти іконки?
- Варіант 1: Використовуйте вбудовані іконки FreeCAD
- Варіант 2: Створіть просту іконку вручну
  - Приклад: create_box.svg
Частина 4. Підключення іконок у коді
- Крок 1. Оновіть box_builder_workbench.py
- Крок 2. Додайте іконку для робочого середовища
Крок 5. Перевірка
Поради щодо іконок
Практичне завдання
Де взяти готові іконки?
Що далі?

In Questo Articolo

Частина 1. Підтримувані формати іконок

Частина 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. Перевірка

Переконайтеся, що структура папок правильна:
- BoxBuilderAddon/Resources/icons/create_box.svg
- BoxBuilderAddon/Resources/icons/box_builder.svg
Перезапустіть FreeCAD.
Виберіть робоче середовище Box Builder.

Ви повинні побачити:

Іконку поруч з назвою робочого середовища (у списку).
Іконку на кнопці панелі інструментів.

Поради щодо іконок

Використовуйте чорний колір на прозорому фоні — FreeCAD адаптує його до теми (світла/темна).
Розмір SVG не має значення — головне, щоб це був вектор.
Для PNG використовуйте прозорий фон та розмір 64×64 або 128×128.
Не використовуйте кольори — іконки у FreeCAD зазвичай монохромні.

Практичне завдання

Створіть іконку box_builder.svg (можна скопіювати create_box.svg).
Знайдіть безкоштовну іконку коробки SVG онлайн (наприклад, на Flaticon або Material Icons) та адаптуйте її.
Спробуйте використовувати PNG замість SVG — переконайтеся, що фон прозорий.

Де взяти готові іконки?

Material Design Icons → завантажуйте як SVG
Feather Icons → прості та чисті
Джерела FreeCAD → сотні іконок у форматі .svg

Що далі?

В Уроці 7 ми:

Дізнаємося, як опублікувати доповнення через офіційний менеджер доповнень.
Створимо файл package.xml.
Підготуємо репозиторій GitHub.
Зробимо так, щоб іншим користувачам було легко встановити ваше доповнення.

Залишити відповідь

Ви увійшли як hypo69. Редагувати профіль. Вийти? Обов’язкові поля позначені *

Коментар *

[Опублікувати коментар]

Neve | Працює на WordPress